Brian F爱
从专注于角图,Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
广告 ·ultimatecourses.com.
用终极课程学习角度正确的方式“></a>
          </div>
          <article class=

用关键路径CSS预加载

链接rel =“preload”资源提示与定义关键路径CSS组合可以提供更好的解决方案来推迟加载CSS文件。<!!--more-->此功能仍然非常新,目前仅限由最新版本的Chrome和Opera提供支持

预装是什么?

W3C有各种新的资源提示,包括预取预装。虽然这些是相似的,但我们会看到有很大的不同。

那么,预加载是什么?

来自W3C摘要:

本规范定义了预装可以与之使用的关键字链接元素。此关键字提供了一个声明性的获取原语,它发起早期提取并分隔从资源执行中获取。

换句话说,它告诉浏览器资源必须尽快获取,并在获取其他资源的背景下获取。优化CSS交付的当前解决方案是:

  1. 内联或使用HTML响应定义关键路径CSS。这使浏览器能够几乎立即呈现上述内容。
  2. 减少阻止脚本和样式表。常见解决方案是在页面呈现后通过XHR加载CSS样式表。

虽然您仍然想要执行步骤1,但是链接rel =“preload”解决步骤2。

在行动中预加载

这很简单 - 只需使用rel =“preload”为您的样式表<链接>标记而不是rel =“stylesheet”。这将指示浏览器获取资源。但是,未处理所获取的CSS。为此,只需添加onload事件处理程序。在获取资源时,此事件将被触发。在事件处理程序代码中设置rel.本物业<链接>元素返回“样式表”。我们还会添加一个

<链接rel.=预装HREF.=CSS / App.CSS.=风格负载=这个。rel ='stylesheet'/><题词><链接rel.=样式表HREF.=CSS / App.CSS./>题词>

支持支持

您可以为浏览器滚动您自己的代码,这些代码不支持预加载,或者您可以使用流行的浏览器LoadCSS库。该库将检测您的浏览器是否支持预加载资源提示,如果没有,则将返回注入链接[rel = stylesheet]在最后一个链接或脚本标记之后的元素到DOM。实现这一点,我们需要:

  1. 在线或头部元素定义我们的关键路径CSS
  2. 包括链接[rel = preload]元素以及
  3. 内部内容loadcss.js文件
  4. 然后,内嵌内容cssrelpreload.js文件

以下是使用LoadCSS方法的快速概述:

<HTML.><><风格>/ *关键路径CSS * /风格><链接rel.=预装HREF.=CSS / App.CSS.=风格负载=这个。rel ='stylesheet'/><题词><链接rel.=样式表HREF.=CSS / App.CSS./>题词><脚本>/ * loadcss * /!!功能W.{'使用strict';var.loadcs.=功能HREF.之前媒体{功能准备CB.{返回博文身体CB.空虚索取功能{准备CB.;};}功能loadcb.{SS.addeventlistener.&&SS.RemoveeventListener.'加载'loadcb.SS.媒体=媒体||'所有';}var.裁判博文=W.文件SS.=博文牧马赛'链接';如果之前裁判=之前;其他{var.截图=博文身体||博文getElementsByTagname.'头'[0.]儿童节;裁判=截图[截图长度-1];}var.床单=博文样式表;SS.rel.='stylesheet'SS.HREF.=HREF.SS.媒体='只有x'准备功能{裁判parentnode.internbefore.SS.之前裁判裁判下面的;};var.onloadcssdefined.=功能CB.{对于var.解决了=SS.HREF.一世=床单长度;一世-;如果床单[一世]HREF.===.解决了返回CB.;索取功能{onloadcssdefined.CB.;};};返回SS.addeventlistener.&&SS.addeventlistener.'加载'loadcb.SS.onloadcssdefined.=onloadcssdefined.onloadcssdefined.loadcb.SS.;};'undefined'!=类型出口出口loadcs.=loadcs.W.loadcs.=loadcs.;}'undefined'!=类型全球全球这个;/ *链接[rel = preload] polyfill * /!!功能W.{如果W.loadcs.{var.rp.=loadcs.relpre加载.={};如果rp.支持=功能{尝试{返回W.文件牧马赛'链接'莱尔特支持'预加载';}抓住E.{返回!!1;}}rp.poly=功能{对于var.链接=W.文件getElementsByTagname.'链接'一世=0.;一世<链接长度;一世++{var.链接=链接[一世];'预加载'===.链接rel.&&'风格'===.链接getAttribute.'如'&&W.loadcs.链接HREF.链接链接rel.=空值;}}!!rp.支持{rp.poly;var.=W.setInterval.rp.poly300;W.addeventlistener.&&W.addeventlistener.'加载'功能{W.ClearInterval.;}W.附件&&W.附件'负载'功能{W.ClearInterval.;};}}}这个;脚本>><身体>身体>HTML.>

要注意:我通过Uglify-js运行loadcss.js和cssrelpreload.js文件来压缩内容。我建议您从GitHub中获取最新版本的代码,并将其自动压缩而不是从上面复制和粘贴。

预加载VS预取

最后,还有一个资源提示属性预取。这是更广泛的现代浏览器支持,但它与之多于预装。首先,仅在浏览器空闲时获取资源。因此,这不是我们应用程序样式表的好解决方案,除非您正在获取样式表可能稍后需要在您的申请中。

Brian F爱

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。