天天站长

 找回密码
 用户注册
查看: 117|回复: 0

如何通过预加载器提升网页加载速度

[复制链接]

35

主题

0

听众

231

积分

中级会员

Rank: 2

UID
60083
积分
231
威望
0
金币
142
贡献
0
活跃
36
魅力
1
注册时间
2013-12-25
发表于 2014-1-24 10:46:24 |显示全部楼层
预加载器(Pre-loader)可以说是提高浏览器性能最重要的举措。Mozilla 官方发

布数据,通过预加载器技术网页的加载性能提升了19%,Chrome测试了 Alexa 排名前2000名网站,性能有20%的

提升。
它并不是一门新技术,有人认为只有 Chrome 才具备这个功能。也有人认为它是有史以来提升浏览器性能最有效的

方法。如果你第一次接触预加载器,也许心中已经有了无数个问号。什么是预加载器?它是如何提升浏览器性能的


首先需要了解浏览器是如何加载网页的
一个网页的加载依赖于脚本文件、CSS样式文件。让我们看看浏览器加载网页的过程。
首先,浏览器下载 HTML 并开始解析。如果浏览器发现外部CSS资源链接则发送下载请求。 浏览器可以在下载CSS

资源的同时,并行解析HTML文件,但是,一旦发现有脚本文件的引用,则必须等待脚本文件完成下载并且执行后才

能继续解析。 脚本文件完成下载并且执行后,浏览器可以继续解析HTML工作,如果遇到非阻塞资源 i.e. 图片浏览器

会发送下载请求并且继续解析。
即使浏览器可以并行执行多个请求,但是无法与针对脚本文件的操作并行执行。
可以通过IE7打开链接中的网页进行测试。我们可以看到,网页head标签内包含2个样式文件和2个脚本文件。在

body 中,包含3个图片、1个脚本文件。
通过瀑布流我们可以查看资源加载的过程:

脚本文件的下载和执行,会阻断其他资源文件的下载,无疑将大大降低浏览器性能。
预加载器如何提高网络利用率
2008 年,IE、WebKit和Mozilla都实现了预加载器功能,来提升网络的利用率,改善脚本文件对其他资源文件的阻塞

现状。
当浏览器被脚本文件阻塞时,另一个轻量级的解析器会继续浏览剩余的标记,寻找需要下载的资源i.e. 样式文件,

脚本文件,图片 等。
一旦发现,预加载器既可以在后台开始接收这些资源,等待主解析器完成当前的脚本操作,其他资源已经完成下载

,这样就减轻了脚本阻塞带来的性能损耗。
下面这个瀑布流是使用IE8打开链接中网页的结果,性能有显著的提升:IE8=7S  IE7=14S。

预加载功能仍然是各大浏览器厂商乐此不疲的实验领域。很多浏览器尝试设置资源下载的优先级。例如,Safari降低

了不作用于当前视图区域样式文件的优先级。Chrome 则设置脚本文件的优先级高于图片,即使脚本文件位于HTML

底部。
预加载器的陷阱
预加载器只能检索HTML标签中的URL,无法检测到使用脚本代码添加的URL,直至脚本代码执行时才可以获取这类

资源。
我曾经遇到过一个通过javascript判断当前Window宽度,进而决策加载CSS样式文件的例子。预加载器无法识别此

类资源。

<html
<head
<script
var file = window.innerWidth < 1000 ? "mobile.css" : "desktop.css";
document.write('<link rel="stylesheet" type="text/css"
href="css/' + file + '"/'); </script
</head
<body
<img src="img/gallery-img1.jpg" /
<img src="img/gallery-img2.jpg" /
<img src="img/gallery-img3.jpg" /
<img src="img/gallery-img4.jpg" /
<img src="img/gallery-img5.jpg" /
<img src="img/gallery-img6.jpg" /
</body
</html

上面这段代码可以轻松的骗过IE9的预加载机制,在下面的瀑布流中我们可以看到,加载图片占用了所有的连接,直

至第一个图片加载完成后,CSS文件才开始下载。

影响预加载器的加载顺序的因素
当前,有几种方式来控制预加载器的加载顺序(使用javacript隐藏资源文件既是其中一种),同时,W3C Resource

Priorities 中也提供两个特性来影响预加载器。
lazyload : 直至没有被标记为lazyload 资源下载完毕后才下载被标记资源。
postpone: 资源在对最终用户可见之后才开始下载。i.e. 标签的display属性被设置为 none。
预加载VS预读取
预读取(Pre-fetching)可以通知浏览器哪些资源可能会在未来的某一时机,在当前页面或者其他页面中使用。
sanyihuagong.com
liuxingtuangou.com         
worldlifetraining.com
yiyuanwater.com                                                                                          
jeremyparty.com
jinanlaodongmen.com                                 
http://www.0796news.com/Classified_1.html
http://www.fjqgedu.gov.cn/kindeditor/bct/
您需要登录后才可以回帖 登录 | 用户注册


|申请友情链接|关于我们|商家合作|广告报价|联系我们|法律声明|隐私条款|无图浏览|手机浏览|  


敬请您尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其它各项有关法律法规。

本网所有帖子均来源网友上传,本站未进行任何修改和未获取任何利益,且仅代表作者本人意见,不代表本网站立场。

天天站长 技术支持:杭州桐庐家园网络技术有限公司 广告合作:13968063988 在线QQ:18118865

Copyright ©2003-2012 Powered by 安网数据 All Rights Reserved. 备案信息:浙B2-20060153号