首页 > 优化 > 关键词 > 网页加载速度最新资讯 > 正文

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

2013-10-30 14:19 · 稿源:葡萄城控件技术团队博客

预加载器(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)可以通知浏览器哪些资源可能会在未来的某一时机,在当前页面或者其他页面中使用。

下面是预读取的一个简单的应用,通知浏览器为将要访问的其他站点加载资源:

<link rel="dns-prefetch" href="other.hostname.com">

Chrome允许我们预先通知浏览器加载未来会用到的资源,被声明的资源将以较高的优先级被下载

<link rel="subresource" href="/some_other_resource.js">

(Chromium 源码中提到,被标记为subresource的资源下载的优先级低于样式文件和脚本文件,但不低于图片加载优先级)

还有标记可以通知浏览器哪些文件是较低级别的预读取文件。

预读取未来将被使用的独立资源文件。 

<link rel="prefetch" href="/some_other_resource.jpeg">

通过预读取方式,在后台渲染整个页面。 

<link rel="prerender" href="//domain.com/next_page.html">

总结

预加载不是一门新技术,它对提高浏览器性能具有纪念意义,我们不需要做任何操作既可以使用预加载。

它广泛应用,我测试了以下浏览器,都具有预加载功能:

  • IE8 / 9 / 10
  • Firefox
  • Chrome (inc Android)
  • Safari (inc iOS)
  • Android 2.3

Bruce Lawson (Opera公司总裁)也宣布Opera Mini 同样支持预加载。

  • 相关推荐
  • 大家在看
  • Chrome现已支持延迟加载网页中的iframe元素

    一年前,谷歌为 Chrome 76 引入了延迟加载图片的功能。昨日,Chrome 工程主管 Addy Osmani 又宣布,他们将在新版浏览器中启用延迟加载 iframe 元素的标准功能。在启用 <iframe loading = lazy> 属性之后,Chrome 将推迟相关元素的加载,直到用户将网页滚动到附近为止。

  • 微信安卓7.0.17正式版发布:视频弹幕、长按消息菜单新样式

    微信刚刚官方发布了安卓端7.0.17正式版本,新增视频弹幕,并升级了长按消息菜单的样式。新版微信中,视频号新增了“浮评”功能,可以在观看视频的同时看评论,也就是大家非常熟悉的

  • 上万台MSSQL服务器沦为门罗币矿机,腾讯安全专家提醒要这样做!

    新型挖矿木马来了!近日,腾讯安全威胁情报中心检测到针对MSSQL服务器攻击的挖矿木马,该挖矿木马主要针对MSSQL服务进行爆破弱口令攻击,爆破成功后会植入门罗币挖矿木马进行挖矿。据腾讯安全评估,截止目前已有上万台服务器沦为门罗币矿机。对此,腾讯安全专家提醒企业应避免使用弱口令。同时,腾讯安全终端安全管理系统已可拦截查杀该挖矿木马。据腾讯安全专家介绍,该黑产团伙对MSSQL服务器进行爆破成功后,会下载执行HFS服务器

  • 黑鲨参展ChinaJoy “超速度”引领手游体验新时代

    7 月 31 日,ChinaJoy将在上海新国际博览中心正式开幕,作为一年一度的全球性文娱盛典,数码娱乐产业链的各大厂商都将在博览会上展示最新的硬件设备、娱乐应用等产品。作为游戏手机行业的引领者——黑鲨科技,其品牌调性完美契合了ChinaJoy游戏动漫和数码文化的双重基因,而在此次ChinaJoy2020 上,黑鲨科技准备了非常丰富的内容等着广大玩家来体验,同时还将在展台上展示其最新款的腾讯黑鲨游戏手机3S。

  • 前“中供铁军”程学良13个月的悦刻速度

    13个月可以做很多事,作为十年阿里巴巴“中供铁军”的程学良,在这段时间里,挖掘市场,以不可思议的速度,开出100家悦刻专卖店,令人叹为观止。从0起步,开出近100家悦刻专卖店。从2015年离开阿里巴巴,进入电子雾化行业独自创业以来,程学良再次感受到了创业初期的激情,事业也再上一个台阶。不过,程学良说,这并不是他最看重的。经销悦刻后,自己的社交圈越变越大,生活更有意思了.而更大的改变在于,除了自己公司团队成员扩充

  • 纸人2全部boss打法攻略 杨依兰夫人等boss打法教程

    纸人2中的boss不是特别多,但是有的boss还是需要一定的技巧才能过关的,今天就来为大家带来殷凌、殷洪​、杨依兰等boss战的打法攻略,希望对大家有所帮助。

  • 净水器哪个牌子好 有针对性的选择净水器

    水污染严重的今天,净水器已经成为居家必备了。但是净水器市场那么多的净水器品牌,很容易导致净水器行业混乱,一般山寨小品牌几乎混不了几年就会倒闭,而我们买净水器回去是为了能长久使用的,所以为了之后售后服务方面的问题,也为了产品质量本身。我们应该选择大品牌来购买。不过现在因为全国各地水质污染程度都不一样,有些地方水质环境相对没那么差,但是有些地方水质可以说真的是很差了,这样针对不同地区,在净水器的选择上

  • 数字科技加持信用飞,引领产业未来迈出“加速度”

    全球正在加速进入以“万物互联、泛在智能”为特点的数字化新时代! 目前,数字科技变革重构了全球产业,数字经济成为决胜未来全球竞争的重要战略,人类正在向一个以数字化生产力为主要特征的全新历史阶段迈进。产业数字化成为全球各国逐鹿新经济格局的客观选择、不同行业领域企业抢抓新机遇的必然趋势。在此背景下,信用飞也是身体力行,用实力与成绩交出了满意的答卷。基于数字与科技的结合,信用飞在不断的升级与实践中,通过新

  • 净水器哪个牌子好?家庭水质保障的净水器

    冰尊净水器再夺世界十大净水器品牌冠军!随着我们生活质量的一直提高,人们对于饮用水的要求也是越来越高,但是现在人们会觉得水中含有泥沙,自来水管道中更是有大量的细菌和沉淀物,虽然这些自来水已经在自来水厂消过毒了但是一直流动在自来水管道中依然会有二次污染,所以净水器就诞生了,但是很多人都不清楚,那么净水器哪个牌子好呢?下面是世界净化协会评选的十大品牌:净水器十大品牌:冰尊净水器 2020年将是国内净水器快速?

  • 净水器哪个牌子好?净化水质达到直饮的净水器

    冰尊净水器器是净水器十大品牌排名第一!现在的人们对环保意识强,对饮水健康非常重视,据世界净水器观察网调查,88%的新房装修都会把净水器列入家电采购清单,是新房装修必不可少的一项支出。但是,市面上的净水器品牌众多,很多消费者不知如何选购净水器,于是世界净水器观察网根据国内水质条件,净水器销售情况,消费者使用净水器的反馈效果进行分析统计,评选出世界净水器十大品牌排名,具体如下:净水器什么牌子好:冰尊净水?

  • 苹果发布iOS 14第四个测试版:推进速度加快!

    今天苹果发布iOS 14和iPad OS 14第四个测试版,相比之前的推进速度,明显快了不少。tvOS 14、watchOS 7和macOS Big Sur的第四轮beta预计也将在近期发布。iOS 14和iPadOS 14的主屏幕和应用界面

  • 超速度! 腾讯黑鲨游戏手机3S正式发布

    【TechWeb】7月31日下午,备受玩家期待的腾讯黑鲨游戏手机3S正式发布。在硬件方面,新机配备了一块刷新率高达120Hz、触控采样率高达270Hz的三星AMOLED屏幕,同时采用了高通骁龙865+LPDDR5+UFS 3.1的旗舰级性能铁三角组合以及支持65W极速闪充的串充并放充电系统。在软件方面,全新的JOYUI 12操作系统带来了极富创新的体感操控功能,与屏幕压感、语音操控组成了全新的多维操控2.0体系。在游戏辅助功能上,黑鲨科技一直坚持创新,为广

  • 马斯克:特斯拉柏林超级工厂将以看似不可能的速度建设

    7月28日消息,据国外媒体报道,电动汽车厂商特斯拉去年宣布欧洲的超级工厂将建在德国柏林,并在今年年初动工,很快就完成了进厂道路的建设和工厂所在地森林的清理,在完成土地平整之后就已开始了基础施工,厂房在本月初也已开始建设。特斯拉柏林超级工厂效果图对于柏林超级工厂的建设,特斯拉CEO马斯克当地时间周一在社交媒体上表示,这一工厂将以看似不可能的速度建设。马斯克是在他活跃的社交媒体上,评论一篇“特斯

  • 光遇遥鲲速度刷新攻略 被黑暗藤蔓困住的遥鲲刷新技巧

    ​光遇中有每日任务被黑暗藤蔓困住的遥鲲,这个任务很多玩家还不清楚怎么等刷新,那么下面就来为大家分享一下遥鲲快速刷新的方法攻略。

  • 苹果向开发者推送Safari 14测试版 速度更快更省电

    本周,苹果向开发者和部分AppleSeed测试人员提供了Safari14 测试版,该版本与公测版分开,只有受邀者才能使用。据悉,Safari14 是macOS Big Sur所包含的新版Safari,引入了定制选项,让人们选择壁纸和开始页选项,而且页面加载速度更快,更省电。

  • 轻松筹公益白皮书:领跑抗疫救灾 展现中国公益速度

    7月6月,全民健康保障平台轻松筹旗下轻松公益发布了《公益白皮书》,对2020年上半年的公益历程进行了盘点回顾,内容丰富详实,引发了行业关注与好评。其中,尤为引人瞩目的是轻松筹?轻松公益在抗击新冠肺炎疫情和救助四川大火、南方洪灾地区等项目中,反应迅速,成绩卓著,屡次刷新中国公益速度。吹响民间抗疫第一声号角大疫来袭,争取时间就是拯救生命。春节前夕,国内出现新冠肺炎疫情,轻松公益平台最快响应,携手壹基金于 1 月

  • 售价1.2万元 三星停售49寸准5K 240Hz带鱼屏显示器Odyssey G9

    要说豪华程度,三星的Odyssey G9显示器现在应该是游戏玩家梦幻级配置了,49寸5120x1440分辨率、240Hz高刷新率、1ms响应时间、1000R曲率,国内售价1.19万元。这个显示器刚开卖1个月就因为质量问题

  • 净水器哪个牌子好 挑选家用净水器要用心

    净水器之所能净化自来水,关键是内在的滤芯,可以帮忙拦截水中的各种重金属、泥沙、细菌、胶体和铁锈等!据调查,自来水厂虽然能帮忙消毒杀菌,自来水处理之后,达到最低标准,但原水中的机污染物和重金属还存在,要健康饮食,就必须依靠净水器来帮助。尽管现在净水机已经广泛运用于各个家庭,但由于它的种类繁多,结构形式各不相同,实现的效果也是参差不齐,这就导致许多朋友在挑选的时候无从下手,稍不留神还容易上当受骗。其实

  • 合作共赢 文思海辉为日企AUTOBACS重构网上商城

    8 月 1 日,由Pactera Technology日本株式会社(文思海辉,以下简称"Pactera")、JSOL株式会社(以下简称"JSOL")、SAP日本株式会社(以下简称"SAP")、AB System Solution株式会社(以下简称"ABSS")为AUTOBACS7 株式会社(以下简称"AUTOBACS")共建的新的汽车用品网上商城成功上线。新的AUTOBACS网上商城可在所有接触点提供个性化购物,显著改善客户购买体验,助力AUTOBACS公司深化线上布局,构建竞争壁垒。Pactera基于丰富的实

  • 腾讯云服务器怎么安装卓模拟器 可以安装安卓模拟器吗

    腾讯云服务器有一些朋友想知道是否可以在里面安装安卓模拟器这类的软件,但是操作无法运行,碰到这样的情况怎么办呢?下面就来为大家分享一下具体的情况。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签