文档章节

浏览器预加载器如何使页面加载更快

蓝色犀牛
 蓝色犀牛
发布于 2017/04/23 18:56
字数 2012
阅读 5
收藏 0
点赞 0
评论 0

浏览器预加载器如何使页面加载更快

2013年10月22 日

预加载器(也称为推测式或预先预分析器)可能是浏览器性能的最大改进。

在实施过程中,Mozilla报告说,加载时间有19%的改善,而对Alexa来说,前两千个站点的测试发现,Google发现约有20%的改进

这不是一个新的浏览器功能,但有些似乎认为它只是Chrome,而其他人则认为这是“最具破坏性”的性能提升“曾经有过”!

那么预装载机是什么,它如何提高性能?

浏览器如何加载网页

网页充满依赖关系 - 页面无法在相关CSS下载之前开始呈现,然后遇到脚本时,HTML解析器将暂停,直到脚本执行(当然如果脚本是外部的,那么它也需要被下载) )。

让我们考虑浏览器如何加载页面:

  • 首先,HTML被下载,浏览器开始解析它。它找到一个外部CSS资源的引用,并触发下载它的请求。

  • 浏览器可以在CSS正在下载时进行解析HTML,但是它会发现具有外部URL的脚本标记,现在(除非脚本有asyncdefer属性),它必须等到脚本下载并执行。

  • 一旦脚本下载并执行,浏览器可以继续解析HTML,当它发现非阻塞资源,如图像,它会请求它们并进行解析,但是当它找到一个脚本时,它必须停止并等待该脚本被检索并执行。

虽然浏览器能够并行地进行多个请求,但是通常这样的行为往往不会与脚本并行地下载任何资源。

这是浏览器用来表现和使用史蒂夫· 波斯的Curzillion的方式,我们可以创建一个在IE7中演示的测试页面。

测试页有两种样式,然后在头两个脚本,然后在体内,它有两个图片,脚本,最后另一幅图像。

瀑布使得在下载脚本时可以轻松看到并行下载停止。


Cuzillion瀑布在IE7中生成测试页面

如果浏览器仍然这样工作,那么每次遇到脚本时,页面的加载速度会更慢,浏览器需要等待脚本下载和执行才能发现更多的资源。

预加载器如何提高网络利用率

Internet Explorer,WebKit和Mozilla在2008年都实现了预加载器,作为在等待脚本下载和执行时克服低网络利用率的一种方式。

当浏览器在脚本上被阻止时,第二个轻量级解析器扫描其余的标记,寻找其他资源,例如还需要检索的样式表,脚本,图像等。

然后,预加载器在后台开始检索这些资源,目的是在主HTML解析器到达它们之前,它们可能已经被下载,因此在页面后面减少了阻塞。

(当然如果资源已经在缓存中,那么浏览器就不需要下载了)

使用IE8重复以前的测试显示其他资源现在与脚本并行下载,为此测试案例提供了巨大的性能提升:7s vs 14s。


Cuzillion瀑布在IE8中生成测试页

预装载程序行为因浏览器而异,仍然是实验领域,有些浏览器似乎具有天真的实现,它们按照发现的顺序下载资源,但其他浏览器会优先下载,例如Safari给出不适用于当前的视口是一个低优先级,Chrome调度脚本(甚至是页面底部的脚本),其优先级高于页面上的大多数图像。

优先级机制没有很好的记录(您可以阅读某些浏览器的来源!),但如果您想更好地了解自己可以做什么,詹姆斯·西蒙森写了一些关于他们在Chrome中尝试的方法的优秀笔记

预装载机

预加载器从标记中提取URL,并且不会/不能执行javascript,因此使用javascript插入的任何URL都不可见,并且这些资源的下载将被延迟,直到HTML解析器发现并执行加载它们的JavaScript。

有些情况下,使用javascript插入资源也可以跳过一些预装载。

我在Stack Overflow中遇到了一个答案,建议使用JavaScript来根据浏览器宽度将链接插入移动或桌面样式表:

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16
<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被延迟,直到其中一个图像完成并且连接变为可用。


测试页面加载在IE9中

一些响应式图像方法使用后备图像,并且预加载器通常会在JavaScript之前启动后退图像下载,以选择适当的图像,从而导致额外的下载。

影响预装载机

目前我们有限的方式可以影响预装载程序的优先级(使用javascript隐藏资源是一个),但W3C资源优先级规范提出了两个属性来帮助表明我们的意图。

lazyload :除非没有标记为lazyload的其他资源已经开始下载,否则不应下载资源

postpone :资源不能下载,直到用户可见,即在视口内,显示不是没有。

虽然我不确定polyfill是多么容易,也许延期可能会实现一个简单的实现响应图像的方法?

预加载与预取

预取是一种向浏览器提示将来肯定会或可能使用的资源的一种方式,一些提示适用于当前页面,其他提示适用于将来的页面。

在最简单的级别,我们可以告诉浏览器解决另一个主机名的DNS,我们稍后将在页面上访问:

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

Chrome还允许我们暗示我们将在当前页面中稍后使用另一种资源,因此应将其下载为高优先级:

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

(Chromium的源代码表明,它实际上被下载到比样式表/脚本和字体更低的优先级,但是等同于或高于图像的优先级)

还有两种链接类型,允许我们推测提示下一步的内容,并将以比当前页面上的资源更低的优先级进行下载。

预取可能在下一页的单个资源:

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

在后台选项卡中预取并呈现整个页面:

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

Ilya Grigorik的Preconnect,preetch,prerender ...从WebPerfDays 谈话纽约是一个很好的开始,如果你想了解更多关于预取。

概要

预加载器不是新的,它提供了显着的性能提升,作为作者,我们不需要做任何特别的事情来利用它。

它被广泛实现 - 我测试了以下浏览器以确认他们有一个预加载器:

  • IE8 / 9/10
  • Firefox
  • Chrome(包括Android)
  • Safari(inc iOS)
  • Android 2.2.2 / 2.3(2.2.2测试2014年5月18日)

Bruce Lawson也证实了Opera Mini使用了Presto引擎,它具有一个预装载器。

资源优先事项(也许<link rel=subresource...)将给我们一些方法来表明我们的优先事项。

如果你发现任何打字错误,或有问题,并添加他们在评论中,我会尽力解决和回答。

本文转载自:https://andydavies.me/blog/2013/10/22/how-the-browser-pre-loader-makes-pages-load-faster/

共有 人打赏支持
蓝色犀牛
粉丝 0
博文 21
码字总数 5800
作品 0
沙坪坝
其他
前端性能优化:客户端从输入到展示讲解

性能优化的根本目的:   要思考的是用户使用网站的体验如何,而不是我们可以节省多少字节,只有准确感知用户的感受,我们才有必要谈毫秒、字节和请求数量等问题。 针对优化注意事项: 防止...

仲强
2017/10/11
0
0
标签实现预加载功能详解

前言 最近在研究 vue-cli 3.0生成的工程,在构建后生成的 index.html里面发现了下面这种用法: 这就触到了本人的知识盲区了,本着扫盲的目的,研究了下 link 标签,发现这个小东西功能还是挺...

06/15
0
0
标签实现预加载功能

前言 最近在研究 vue-cli 3.0生成的工程,在构建后生成的 index.html里面发现了下面这种用法: 前言 最近在研究 vue-cli 3.0生成的工程,在构建后生成的 index.html里面发现了下面这种用法:...

a独家记忆
06/18
0
0
史上最快的 Opera 43 发布,页面加载时间缩至极限

Opera 43 桌面浏览器发布了,开发团队称这是有史以来最快的版本,页面加载时间已缩短到极限。 由于网络内容越来越重,因此浏览器需要更快地加载网页,以满足用户的使用需求。速度快主要体现在...

王练
2017/02/08
4.6K
28
网页加速特技之 AMP

据统计,40%的人会放弃使用加载时间超过3秒的网站。对于加载慢的页面我也是没耐心等待的,同类型网站那么多,为什么不选择加载速度更快体验更好的呢。为了解决网页加载慢的问题,Google联合数...

腾讯云社区
2017/11/15
0
0
异步加载js详解

优化脚本文件的加载提高页面的加载速度,一直是前端工程师提高页面加载速度很重要的一条。因为涉 及到各个浏览器对解析脚本文件的不同机制,以及加载脚本会阻塞其他资源和文件的加载。当浏览...

飛飛飛jjs
2017/06/21
0
0
移动Web加速技术月报第2期

作者 | Brilliant Open Web 团队breezet、shdong 编辑 | 尾尾 为推进Web技术的发展,Brilliant Open Web 团队特推出每月一期的《移动Web加速技术月报》,该月报将整理较流行的移动Web加速技术...

BrilliantOpenWeb
2017/11/09
0
0
利用CSS、JavaScript及Ajax实现图片预加载的三大方法

摘要:图片的加载速度往往影响着网站整体的用户体验,尤其对于包含大量图片的网站。对图片进行预加载,不失为一个高效的解决方案。如何实现预加载?本文将例举利用CSS、JavaScript及Ajax实现...

spademan
2013/10/22
0
0
Best Practices for Speeding Up Your Web Site(4)

十四、 Make Ajax Cacheable tag: content 使Ajax可缓存 标签:内容 Ajax的显著好处之一是对于用户来说它提供了瞬间的反馈,因为它通过异步方式从后端服务器请求信息。然而,使用Ajax也不能保...

big军
2011/07/07
0
0
标签动态图片的进化:不是GIF,胜过 GIF

摘要:长期存在并广泛应用的 GIF 格式存在图像质量损失严重和体积庞大等不足。在最新的 Safari 浏览器预览版中,可以在 标签播放视频,满足了和动态图一样的需求。经过对比测试, 标签下视频...

前端之巅
2017/12/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

微服务架构下的安全认证与鉴权

微服务下常见认证解决方案; OAuth认证与授权; JWT认证介绍; Spring Cloud的OAuth2实现; 单体应用转变为分布式应用 单体应用转变为分布式应用在架构方式上存在较大区别,单体应用下的简单...

Java大蜗牛
30分钟前
0
0
前端面试题汇总

最近在复习,准备找工作了,特此总结一下前端的相关知识。 1.获取浏览器URL中查询字符的参数: function getQuery(name){    var reg = new RegExp("(^|&)"+name+"=([^&]*)"(&|$));...

凛冬来袭
31分钟前
0
0
可持续发展的学习道路

与其要求别人,不如提升自己 内心渴望进步 经常做出改变现有模式,不断学习 寻找资源,整合资源,不断熟练这种模式 渠道很重要 先打开新世界的航路

狮子狗
35分钟前
0
0
apollox-lua开源项目 示例codepen2

今天在示例上增加了几个功能, 首先添加js array的标准库。 所有js array的方法目前都支持了。 添加查看code模式。 点击查看code可以看到生成的lua代码。默认web模式需要把标准库连接进来, ...

钟元OSS
51分钟前
0
0
javascript性能优化之避免重复工作

javascript最重要也最根本的性能优化标准之一是避免工作,避免工作又包括两点,第一,不做不必要的工作,第二,不做重复的已经完成的工作。第一部分可以通过代码重构完成,第二部分不做重复的...

老韭菜
今天
0
0
缓存穿透、并发和雪崩那些事

0 题记 缓存穿透、缓存并发和缓存雪崩是常见的由于并发量大而导致的缓存问题,本文讲解其产生原因和解决方案。 缓存穿透通常是由恶意攻击或者无意造成的;缓存并发是由设计不足造成的;缓存雪...

Java填坑之路
今天
1
0
项目jar包管理构建工具---Maven

一、what is Maven? 我们来寻找一下官网,里面介绍了maven到底是什么?下面一句话就有讲解到:Apache Maven is a software project management and comprehension tool. Based on the conc...

一看就喷亏的小猿
今天
0
0
JVM学习手册(一):查看堆内存使用情况以及排错

平时出现内存溢出以及死锁,一般处理方式都是查看日志,找到抛出异常的代码行,然后本地分析代码,但是这样对于线上排查十分糟糕,这段时间在研究JVM发现了几个比较好的工具和指令. 1.针对频繁GC和...

勤奋的蚂蚁
今天
1
0
17.TCP:传输控制协议

介绍 TCP和UDP使用同一网络层(IP),但TCP提供了面向连接、可靠的传输层服务 TCP传输给IP层的信息单位称为报文段或段 TCP通过如下方式保证可靠性: 应用数据被分割成TCP认为最合适发送的数据...

loda0128
今天
0
0
重装Oracle时出现environment variable "PATH"错误的解决办法

在win7 64位下重新安装oracle 11g,一直报environment variable "PATH"的错误,按说明将path里多余的路径删除,但没办法解决。选择忽略错误继续安装,装一半会报CRC错误,还是安装失败。最好...

良言
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部