金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > 资源预加载金沙棋牌官方平台:,详解HTML5中re

资源预加载金沙棋牌官方平台:,详解HTML5中re

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-08 19:24

前端性能优化 – 资源预加载

2015/11/19 · JavaScript · 预加载

原文出处: ROBIN RENDLE   译文出处:bubkoo的博客(@问崖的崖)   

当提到前端性能优化时,我们首先会联想到文件的合并、压缩,文件缓存和开启服务器端的 gzip 压缩等,这使得页面加载更快,用户可以尽快使用我们的 Web 应用来达到他们的目标。 

资源预加载是另一个性能优化技术,我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。

引用 Patrick Hamann 的解释:

预加载是浏览器对将来可能被使用资源的一种暗示,一些资源可以在当前页面使用到,一些可能在将来的某些页面中被使用。作为开发人员,我们比浏览器更加了解我们的应用,所以我们可以对我们的核心资源使用该技术。

这种做法曾经被称为 prebrowsing,但这并不是一项单一的技术,可以细分为几个不同的技术:DNS-prefetchsubresource 和标准的 prefetchpreconnectprerender

 

详解HTML5中rel属性的prefetch预加载功能使用,html5rel

在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是:
利用浏览器的空闲时间去先下载用户指定需要的内容,然后缓存起来,这样用户下次加载时,就直接从缓存中取出来,效率就快了.

举个例子说明:比如要预先加载某个页面,可以这样:

XML/HTML Code复制内容到剪贴板

  1. <link rel="prefetch" href="; <!-- Firefox -->    

但如果是google的话,要用另外的一个名称,即:

XML/HTML Code复制内容到剪贴板

  1. <link rel="prerender" href="; <!-- Chrome -->   

即使在不支持的浏览器,用了这个特性其实是不会出错的,只不过浏览器解析不到而已,
所以,如果你感觉能有办法预先预测到用户期望点的页面(比如用户看最新的受欢迎的热图,他 可能看了第一页后,会继续看下一页,这个时候就可以用预先加载这个特性了).比如

XML/HTML Code复制内容到剪贴板

  1. <link rel="prefetch" href="<?php echo get_next_posts_page_link(); ?>">   

而单独取一张图片也是可以的,比如:

XML/HTML Code复制内容到剪贴板

  1. <link rel="prefetch" href="/images/test.jpg"/>   

有了浏览器缓存,为何还需要预加载? 1.用户可能是第一次访问网站,此时还无缓存
2.用户可能清空了缓存
3.缓存可能已经过期,资源将重新加载
4.用户访问的缓存文件可能不是最新的,需要重新加载
金沙棋牌官方平台,5.Chrome 的预加载技术
现在的 chrome 聪明到根据你的浏览记录,预测到你可能访问或搜索哪些网站,在你打开网站之前就加载好了一些资源了。
举个栗子,当你在搜索框输入 "amaz" 时,它猜测到你可能要访问 amazon.com,可能就帮你加载了这个网站的一些资源。
如果这个预测算法精准的话,就能大大地提高用户的浏览体验了。

DNS prefetch 我们知道,当我们访问一个网站如 www.amazon.com 时,需要将这个域名先转化为对应的 IP 地址,这是一个非常耗时的过程。
DNS prefetch 分析这个页面需要的资源所在的域名,浏览器空闲时提前将这些域名转化为 IP 地址,真正请求资源时就避免了上述这个过程的时间。

XML/HTML Code复制内容到剪贴板

  1. <meta http-equiv='x-dns-prefetch-control' content='on'>  
  2. <link rel='dns-prefetch' href=';  
  3. <link rel='dns-prefetch' href=';  
  4. <link rel='dns-prefetch' href=';  
  5. <link rel='dns-prefetch' href=';  
  6. <link rel='dns-prefetch' href=';  

应用场景1:我们的资源存在在不同的 CDN 中,那提前声明好这些资源的域名,就可以节省请求发生时产生的域名解析的时间。
应用场景2:如果我们知道用户接下来的操作一定会发起一起资源的请求,那就可以将这个资源进行 DNS-Prefetch,加强用户体验。

Resource prefetch 在 Chrome 下,我们可以用 link标签声明特定文件的预加载:

XML/HTML Code复制内容到剪贴板

  1. <link rel='subresource' href='critical.js'>  
  2. <link rel='subresource' href='main.css'>  
  3. <link rel='prefetch' href='secondary.js'>  

在 Firefox 中或用 meta 标签声明:

XML/HTML Code复制内容到剪贴板

  1. <meta http-equiv="Link" content="<critical.js>; rel=prefetch">  

rel='subresource' 表示当前页面必须加载的资源,应该放到页面最顶端先加载,有最高的优先级。
rel='prefetch' 表示当 subresource 所有资源都加载完后,开始预加载这里指定的资源,有最低的优先级。
注意:只有可缓存的资源才进行预加载,否则浪费资源!

Pre render 前面说到的预解析DNS、预加载资源已经够强悍了有木有,可还有更厉害的预渲染(Pre-rendering)!
预渲染意味着我们提前加载好用户即将访问的下一个页面,否则进行预渲染这个页面将浪费资源,慎用!

XML/HTML Code复制内容到剪贴板

  1. <link rel='prerender' href=';  

rel='prerender' 表示浏览器会帮我们渲染但隐藏指定的页面,一旦我们访问这个页面,则秒开了!
在 Firefox 中或用 rel='next' 来声明

XML/HTML Code复制内容到剪贴板

  1. <link rel="next" href=";  

不是所有的资源都可以预加载 当资源为以下列表中的资源时,将阻止预渲染操作:
1.URL 中包含下载资源
2.页面中包含音频、视频
3.POST、PUT 和 DELETE 操作的 ajax 请求
4.HTTP 认证(Authentication)
5.HTTPS 页面
6.含恶意软件的页面
7.弹窗页面
8.占用资源很多的页面
9.打开了 chrome developer tools 开发工具

手动触发预渲染操作 在 head 中强势插入 link[rel='prerender'] 即可:

JavaScript Code复制内容到剪贴板

  1. var hint =document.createElement("link")   
  2. hint.setAttribute(“rel”,”prerender”)   
  3. hint.setAttribute(“href”,”next-page.html”)   
  4. document.getElementsByTagName(“head”)[0].appendChild(hint)  

在HTML5中,有个很有用但常被忽略的特性,就是预先加载(prefetch),它的原理是: 利用浏览器的...

DNS 预解析 DNS-Prefetch

通过 DNS 预解析来告诉浏览器未来我们可能从某个特定的 URL 获取资源,当浏览器真正使用到该域中的某个资源时就可以尽快地完成 DNS 解析。例如,我们将来可能从 example.com 获取图片或音频资源,那么可以在文档顶部的 `` 标签中加入以下内容:

<link rel="dns-prefetch" href="//example.com">

1
<link rel="dns-prefetch" href="//example.com">

当我们从该 URL 请求一个资源时,就不再需要等待 DNS 的解析过程。该技术对使用第三方资源特别有用。

在 Harry Roberts 的文章中提到:

通过简单的一行代码就可以告知那些兼容的浏览器进行 DNS 预解析,这意味着当浏览器真正请求该域中的某个资源时,DNS 的解析就已经完成了。

这似乎是一个非常微小的性能优化,显得也并非那么重要,但事实并非如此 – Chrome 一直都做了类似的优化。当在浏览器的地址栏中输入 URL 的一小段时,Chrome 就自动完成了 DNS 预解析(甚至页面预渲染),从而为每个请求节省了至关重要的时间。

预连接 Preconnect

与 DNS 预解析类似,preconnect 不仅完成 DNS 预解析,同时还将进行 TCP 握手和建立传输层协议。可以这样使用:

<link rel="preconnect" href=";

1
<link rel="preconnect" href="http://example.com">

在 Ilya Grigorik 的文章中有更详细的介绍:

现代浏览器都试着预测网站将来需要哪些连接,然后预先建立 socket 连接,从而消除昂贵的 DNS 查找、TCP 握手和 TLS 往返开销。然而,浏览器还不够聪明,并不能准确预测每个网站的所有预链接目标。好在,在 Firefox 39 和 Chrome 46 中我们可以使用 preconnect 告诉浏览器我们需要进行哪些预连接。

预获取 Prefetching

如果我们确定某个资源将来一定会被使用到,我们可以让浏览器预先请求该资源并放入浏览器缓存中。例如,一个图片和脚本或任何可以被浏览器缓存的资源:

<link rel="prefetch" href="image.png">

1
<link rel="prefetch" href="image.png">

与 DNS 预解析不同,预获取真正请求并下载了资源,并储存在缓存中。但预获取还依赖于一些条件,某些预获取可能会被浏览器忽略,例如从一个非常缓慢的网络中获取一个庞大的字体文件。并且,Firefox 只会在浏览器闲置时进行资源预获取。

在 Bram Stein 的帖子中说到,这对 webfonts 性能提升非常明显。目前,字体文件必须等到 DOM 和 CSS 构建完成之后才开始下载,使用预获取就可以轻松绕过该瓶颈。

注意:要测试资源的预获取有点困难,但在 Chrome 和 Firefox 的网络面板中都有资源预获取的记录。还需要记住,预获取的资源没有同源策略的限制。

Subresources

这是另一个预获取方式,这种方式指定的预获取资源具有最高的优先级,在所有 prefetch 项之前进行:

<link rel="subresource" href="styles.css">

1
<link rel="subresource" href="styles.css">

根据 Chrome 文档:

rel=prefetch 为将来的页面提供了一种低优先级的资源预加载方式,而 rel=subresource 为当前页面提供了一种高优先级的资源预加载。

所以,如果资源是当前页面必须的,或者资源需要尽快可用,那么最好使用 subresource 而不是 prefetch

预渲染 Prerender

这是一个核武器,因为 prerender 可以预先加载文档的所有资源:

<link rel="prerender" href=";

1
<link rel="prerender" href="http://example.com">

Steve Souders 在他的一篇文章中写到:

这类似于在一个隐藏的 tab 页中打开了某个链接 – 将下载所有资源、创建 DOM 结构、完成页面布局、应用 CSS 样式和执行 JavaScript 脚本等。当用户真正访问该链接时,隐藏的页面就切换为可见,使页面看起来就是瞬间加载完成一样。Google 搜索在其即时搜索页面中已经应用该技术多年了,微软也宣称将在 IE11 中支持该特性。

需要注意的是不要滥用该特性,当你知道用户一定会点击某个链接时才可以进行预渲染,否则浏览器将无条件地下载所有预渲染需要的资源。

更多相关讨论:

所有预加载技术都存在一个潜在的风险:对资源预测错误,而预加载的开销(抢占 CPU 资源,消耗电池,浪费带宽等)是高昂的,所以必须谨慎行事。虽然很难确定用户下一步将访问哪些资源,但高可信的场景确实存在:

  • 如果用户完成一个带有明显结果的搜索,那么结果页面很可能会被加载
  • 如果用户进入到登陆页面,那么登陆成功的页面很可能会被加载
  • 如果用户阅读一个多页的文章或访问一个分页的结果集,那么下一页很可能会被加载

最后,使用 Page Visibility API 可以防止页面真正可见前被执行。

Preload

preload 是一个新规范,与 prefetch 不同(可能被忽略)的是,浏览器一定会预加载该资源:

<link rel="preload" href="image.png">

1
<link rel="preload" href="image.png">

虽然该规范还没有被所有浏览器兼容,但其背后的思想还是非常有意思的。

总结

预测用户下一步将访问哪些资源是困难的,需要进行大量的测试,但是这带来的性能提升是明显的。如果我们愿意尝试这些预获取技术,一定会显著提升用户的体验。

深入阅读

  • Slides from a talk by Ilya Grigorik called Preconnect, prerender, prefetch
  • MDN link prefetching FAQ
  • W3C preload spec
  • Harry Roberts on DNS prefetching
  • HTML5 prefetch
  • Preload hints for webfonts

原文:Prefetching, preloading, prebrowsing

1 赞 5 收藏 评论

金沙棋牌官方平台 1

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:资源预加载金沙棋牌官方平台:,详解HTML5中re

关键词: