Web质量优化体系 – 通过提前获得DNS来提高网页加载速度

2015/04/23 · HTML5 ·
DNS,
特性优化

本文由 伯乐在线 –
刘健超-J.c
翻译,sunbiaobiao提升网页加载速度,Web性能优化系列。
校稿。未经许可,禁止转发!
英文出处: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地图