web前端异步加载CSS的一些方法

【摘要】web前端教程分享异步加载CSS的一些办法,在我们写页面的时分,我们做最主要的任务就是进步页面的性能和弹性加载速度,以不会延迟页面的呈现的方式来加载CSS。这是由于在默许状况下;阅读器会同步加载外部的CSS在下载和解析CSS时会影响一切页面呈现这两种状况都会招致潜在的延迟。当然,这也是在...

web前端教程分享异步加载CSS的一些办法,在我们写页面的时分,我们做最主要的任务就是进步页面的性能和弹性加载速度,以不会延迟页面的呈现的方式来加载CSS。这是由于在默许状况下;

十三技术网

阅读器会同步加载外部的CSS

在下载和解析CSS时会影响一切页面呈现

这两种状况都会招致潜在的延迟。

当然,这也是在开端渲染页面之前,应该至少加载网站的CSS的一局部,并且为了立刻将该初始CSS添加到阅读器,我们倡议内联css。关于整体数量较少的网站,仅此一项就足够了,但假如CSS很大(例如,大于15到20kb),它能够协助性能按优先级将其拆分。拆分后,应该在后台-aka中加载不太关键的CSS异步。在这篇文章中,我的目的是描绘我在这些日子的首选方式,这实践上已存在很长的时间段了。

有几种办法能够异步加载CSS,但没有一种办法能够像您希冀的那样直观。与script元素不同,没有async或defer属性能够简单地应用于link元素,因而多年来我们维护了loadCSS项目,使得加载异步CSS的过程愈加容易。最近,阅读器曾经规范化了它们的CSS加载行为,因而可能不再需求像loadCSS这样的专用脚原本处置它们的微小差别。

今天,我们控制了阅读器如何处置各种link元素属性的一些学问,我们能够经过一小段HTML来完成异步加载CSS的效果。在这里,它是异步加载款式表的最简双方法:

这行HTML简约,但它不是很直观,所以让我们合成这里发作的事情。

首先,将link’s media属性设置为print。“打印”是一种媒体type,它说“应用此款式表的基于打印的媒体的规则”,换句话说,当用户尝试打印页面时应用它们。不可承认,我们希望我们的款式表适用于一切媒体(特别是屏幕)而不只仅是打印,但经过声明与当前环境不匹配的媒体类型,我们能够完成一个有趣且有用的效果:阅读器将加载款式表没有延迟页面渲染,异步!这很有协助,但并不是我们想要的全部。我们还希望CSS在加载后实践应用于屏幕环境。为此,我们能够运用该onload属性将link媒体设置为all完成加载。

引见完了老方子,我们再来看看新药方,是的,同样的!在过去一两年中,我们不断在运用link[rel=preload](而不是rel=stylesheet)来完成与上面相似的形式(分别rel在加载后切换属性而不是media属性)。运用这种办法依然能够正常工作,但是,运用时需求思索几个缺陷preload。首先,阅读器关于加载的支持照旧不是特别的好因而假如你想依赖它来跨阅读器获取和应用款式表,那么填充(例如一个loadCSS)是必要的。更主要的是,preload尽可能早地获取文件,优先级最高,可能会优先思索其他重要下载,并且可能比非关键CSS实践需求的优先级更高。

侥幸的是,假如你碰巧想要提供的高优先级提取rel=preload(在支持它的阅读器中),你能够将它与上面的形式分离起来。

这和之前的办法没什么区别啊!是确实实如此,但是呢,语法上愈加好一些。另外就是你认真点就会发现 as=”style”这个属性,所以 preload 不只仅能够用在 CSS 文件上,而是能够用在绝大多数的资源文件上。

我们能够新建一个script标签来指向它:

var script = document.createElement("script");script.src = "scriptfile.js";document.body.appendChild(script);

在这个时分阅读器就直接从缓存中拿这个文件了,不会再发恳求了,由于此前曾经加载好了。

那么 preload 中的 as 属性支持哪些资源文件呢?下面这些都能够

· font

· image

· object

· script

· style

不要想太多,只要谷歌太对它做出圆满的支持。

也能够用JavaScript来完成:

$(window).load(function () {//异步延迟加载款式var link = $('');link.attr('href', '/styles/index.css');link.attr('rel', 'stylesheet');link.appendTo($('head'));link.load(function () {console.info('加载成功...');});

文章来自好程序员it

 十三
 简介:这个家伙很懒什么也没说...

发表评论

游客
送你一朵小花花~

帅人已评(1)

学习了
LV 1 vultr vps 2周前 (2019-08-08) 回复