Web性能优化系列,如何优化网页加载速度

Web质量优化连串 – 通过提前收获DNS来升高网页加载速度

2015/04/23 · Web性能优化系列,如何优化网页加载速度。HTML5 ·
DNS,
质量优化

本文由 伯乐在线 –
刘健超-J.c
翻译,sunbiaobiao
校稿。未经许可,禁止转发!
英文出处:www.deanhume.com。欢迎参与翻译组。

本人不时寻找办法改革网站品质,为的就是能提供更佳的用户体验。可能你时常会意识你的网站运行高效且质量出色。你也恐怕曾让您的应用程序在Google
PageSpeed或Yahoo!
YSlow开展测试,并拿走高分。不过,有同样东西平昔影响页面加载时间。它在一个页面上,开支很多时刻去摸索差异组件的DNS。例如,上边那幅图片突显了自身的博客首页所需资源的加载瀑布图。

图片 1

请留心条形图的灰深绿部分,它现身在瀑布图中的大多数零部件前。这灰浅莲灰代表下载资源前查找DNS所需时日。那竟是占了组件下载时间的很大多数!尽管组件进行了优化,并已经最小化/合并/压缩处理,你如故必要拭目以待查找DNS时间。我利用webpagetest.org做了一个有关该网站DNS查找时间的报表。

图片 2

从上图可看到,DNS查找时间都很高,
假若能收缩该时间并提速,便会让资源加载变得愈加赶快。幸运的是,有个很棒的技术能让网站的加载时间变得更快。它被称之为DNS预取,并且很不难完成。你所需做的是,在网页顶部添加以下属性作为链接(link)。

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

DNS预取是在用户尝试点击链接前试图解析域名。一旦域名被解析,且用户导航到该域名,则不会因DNS查找而致使加载时间变长。在那几个博客主页里,有不可胜举跳转到不相同帖子的链接。如若能在用户导航到下一个页面前,预取一些外表链接的DNS,这将会大大收缩下一个页面的DNS查找时间。根据Chromium
documentation所说,借使用户能将域名解析成IP地址并且缓存之,则DNS查找时间能低至0-1阿秒(千分之一秒)。那是一定令人影象深远的!

我在网站添加DNS预取职能后,确实能明了改革页面加载时间。近来,那项技能被多数主流浏览器所支撑(除了IE),所以,当前尚未任何理由不在你的web应用上行使那项技能!DNS预取是一个康宁的HTML5特征,它会被那一个不协助该技术的老旧浏览器不难忽略掉。即便您的网页内容是出自多个域名,那么这相对是一个聪明伶俐的,能加快页面加载速度的章程。

打赏帮忙本人翻译更加多好小说,多谢!

打赏译者

连接从ID选取器初始一而再
在class前使用tag
将jquery对象缓存起来
控制强大的链式操作
使用子查询
对直接的DOM操作进行界定
冒泡
化解无效查询
推迟到 $(window).load
压缩js
宏观控制jquery库

屡次三番从ID接纳器初阶两次三番
在class前使用tag
将jquery对象缓存起来
支配强大的链式操作
使用子查询
对一贯的DOM操作举办限定
冒泡
废除无效查询
推迟到 $(window).load
压缩js
周到领会jquery库

1.滑坡css,js文件数量及大小(缩短重复性代码,代码重复利用),压缩css和js代码。

打赏帮衬我翻译更多好作品,多谢!

任选一种支付办法

图片 3
图片 4

赞 1 收藏
评论

1. 连连从ID选用器先河继续

1. 总是从ID接纳器开头持续

2.图形的尺寸

有关小编:刘健超-J.c

图片 5

前端,在路上…
个人主页 ·
我的篇章 ·
19 ·
    

图片 6

在jquery中最快的接纳器是ID选取器.
因为它直接来源于Javascript的getElementById()方法.

在jquery中最快的选取器是ID采纳器.
因为它一向源于于Javascript的getElementById()方法.

3.把css样式表放置顶部,把js放置页面底部

复制代码 代码如下:

复制代码 代码如下:

4.减少http请求

<div id=”content”>
<form method=”post” action=”/”>
<h2>Traffic Light</h2>
<ul id=”traffic_light”>
<li><input type=”radio” class=”on” name=”light” value=”red”
/> Red</li>
<li><input type=”radio” class=”off” name=”light” value=”yellow”
/> Yellow</li>
<li><input type=”radio” class=”off” name=”light” value=”green”
/> Green</li>
</ul>
<input class=”button” id=”traffic_button” type=”submit” value=”Go”
/>
</form>
</div>

<div id=”content”>
<form method=”post” action=”/”>
<h2>Traffic Light</h2>
<ul id=”traffic_light”>
<li><input type=”radio” class=”on” name=”light” value=”red”
/> Red</li>
<li><input type=”radio” class=”off” name=”light” value=”yellow”
/> Yellow</li>
<li><input type=”radio” class=”off” name=”light” value=”green”
/> Green</li>
</ul>
<input class=”button” id=”traffic_button” type=”submit” value=”Go”
/>
</form>
</div>

5.使用外部js和css

像这么选拔按钮是行不通的:

像这么选择按钮是无用的:

var traffic_button = $(‘#content .button’);
用ID直接选拔按钮功用更高:

var traffic_button = $(‘#content .button’);
用ID间接选拔按钮功效更高:

var traffic_button = $(‘#traffic_button’);

var traffic_button = $(‘#traffic_button’);

选拔五个成分

慎选多个要素

波及多成分采取实在是在说DOM遍历和循环,
那一个都是相比较慢的东西.为了增强质量, 最好从左右的ID初始继承.

关联多成分接纳实在是在说DOM遍历和循环,
这么些都以比较慢的东西.为了增加质量, 最好从附近的ID发轫继承.

var traffic_lights = $(‘#traffic_light input’);

var traffic_lights = $(‘#traffic_light input’);

2. 在class前使用tag

2. 在class前使用tag

其次快的接纳器是tag接纳器($(‘head’)).
同理,因为它出自原生的getElementsByTagName() 方法.

其次快的采纳器是tag选用器($(‘head’)).
同理,因为它出自原生的getElementsByTagName() 方法.

复制代码 代码如下:

复制代码 代码如下:

<div id=”content”>
<form method=”post” action=”/”>
<h2>Traffic Light</h2>
<ul id=”traffic_light”>
<li><input type=”radio” class=”on” name=”light” value=”red”
/> Red</li>
<li><input type=”radio” class=”off” name=”light” value=”yellow”
/> Yellow</li>
<li><input type=”radio” class=”off” name=”light” value=”green”
/> Green</li>
</ul>
<input class=”button” id=”traffic_button” type=”submit” value=”Go”
/>
</form>
</div>

<div id=”content”>
<form method=”post” action=”/”>
<h2>Traffic Light</h2>
<ul id=”traffic_light”>
<li><input type=”radio” class=”on” name=”light” value=”red”
/> Red</li>
<li><input type=”radio” class=”off” name=”light” value=”yellow”
/> Yellow</li>
<li><input type=”radio” class=”off” name=”light” value=”green”
/> Green</li>
</ul>
<input class=”button” id=”traffic_button” type=”submit” value=”Go”
/>
</form>
</div>

连日用一个tag name来界定(修饰)class (并且不要忘记就近的ID):

老是用一个tag name来界定(修饰)class (并且毫不忘记就近的ID):

var active_light = $(‘#traffic_light input.on’);

var active_light = $(‘#traffic_light input.on’);

小心: 在jquery中Class是最慢的抉择器.
IE浏览器下它会遍历所有DOM节点不管它用在那里.

只顾: 在jquery中Class是最慢的选料器.
IE浏览器下它会遍历所有DOM节点不管它用在那里.

并非用用tag name来修饰ID.
上边的事例将会遍历所有的div成分来查找id为’content’的哪一个节点:

永不用用tag name来修饰ID.
上边的例证将会遍历所有的div成分来搜寻id为’content’的哪一个节点:

var content = $(‘div#content’); 用ID修饰ID也是不尽如人意:

var content = $(‘div#content’); 用ID修饰ID也是饮鸩止渴:

var traffic_light = $(‘#content #traffic_light’);

var traffic_light = $(‘#content #traffic_light’);

3.将jquery对象缓存起来

3.将jquery对象缓存起来

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图