HTML5前端性能优化——浏览器兼容与前端性能优化
1、浏览器兼容
1.一、概要
世界上没有任何一个浏览器是同样的，一样的代码在不同的浏览器上运行就存在兼容性问题。不一样浏览器其内核亦不尽相同，相同内核的版本不一样，相同版本的内核浏览器品牌不同，各类运行平台还存在差别、屏幕分辨率不同，大小不同，比例不同。兼容性主要能够分类为：javascript
1)、CSS兼容
2)、JavaScript兼容
3)、HTML兼容css
这三类也是前端的主要组成部分，都存在必定的兼容性问题，知己知彼，百战百胜，咱们先了解浏览器的发动机—内核。html
多年前咱们一直为IE6兼容烦恼，为它没少加班；盼走了IE6如今又出现了IE8，看来兼容没有尽头...前端
1.二、浏览器内核
Trident
Microsoft公司浏览器内核，IE六、IE七、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）及许多品牌浏览器的内核。其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，而后再增长一个其余内核。java
Gecko
Firefox内核，Netscape6开始采用的内核，后来的Mozilla FireFox(火狐浏览器) ，Mozilla Firefox、Mozilla SeaMonkey、waterfox（Firefox的64位开源版）、Iceweasel、Epiphany（早期版本）、Flock（早期版本）、K-Meleon使用的内核。git
Presto
Opera前内核，已废弃，Opera现已改用Google Chrome的Blink内核。github
Webkitweb
Safari内核,Chrome内核原型,开源，它是苹果公司本身的内核，也是苹果的Safari浏览器使用的内核。 傲游浏览器三、Apple Safari、(Win/Mac/iPhone/iPad)、Symbian手机浏览器、Android 默认浏览器chrome
Blinkwindows
Blink是一个由Google和Opera Software开发的浏览器排版引擎，Google计划将这个渲染引擎做为Chromium计划的一部分，这一渲染引擎是开源引擎WebKit中WebCore组件的一个分支，而且在Chrome（28及日后版本）、Opera（15及日后版本）。
edge
微软专门为新IE打造的引擎，速度快，目前已经基于此引擎开发了浏览器，目前IE11使用该内核，估计之后微软的新浏览器会继续采用该内核。
1.三、浏览器市场份额（Browser Market Share）
能过浏览器的市份额咱们能够在处理浏览器兼容性时会更加关注市场份额高的浏览器，适当的时候能够放弃市场份额占有量小的浏览器。
国际：
查询地址：https://www.netmarketshare.com
1.四、兼容的通常标准
1)、在不一样的主流的浏览器上表现效果一致
2)、能适应不一样的屏幕大小
3)、能适应不一样的分辨率与色彩深度
浏览器兼容在线测试：
1.五、CSS Reset
每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可让咱们的排版更美观整齐。不一样浏览器甚至同一浏览器不一样版本的默认样式是不一样的。但这样会有不少兼容问题，CSSReset能够将全部浏览器默认样式设置成同样。
如全局重置*{ padding: 0; margin: 0; border:}虽然能所有重置，但因为性能较低，不推荐使用。由于*须要遍历整个DOM树，当页面节点较多时，会影响页面的渲染性能。
这个网站http://cssreset.com/有最新的CSSReset提供给你们参考。
Normalize (号称是CSS reset的替代方案，保留了一些内置的样式，并非清除全部)
http://nicolasgallagher.com/about-normalize-css/
https://github.com/necolas/normalize.css
1.六、CSS Hack
CSS Hack就是针对不一样的浏览器或不一样版本浏览器写特定的CSS样式达到让浏览器兼容的过程。
1.6.一、条件注释法
IE条件注释（Conditional comments）是IE浏览器私有的代码，在其它浏览器中被视为注释。
<!--[if IE]>用于 IE <![endif]-->
<!--[if IE 6]>用于 IE6 <![endif]-->
<!--[if IE 7]>用于 IE7 <![endif]-->
<!--[if IE 8]>用于 IE8 <![endif]-->
<!--[if IE 9]>用于 IE9 <![endif]-->
<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->
<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->
<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->
<!--[if lt IE 9]>用于 IE9 如下版本<![endif]-->
<!--[if !IE 8]> -->用于非 IE <!-- <![endif]-->
gt : greater than，选择条件版本以上版本，不包含条件版本 >
lt : less than，选择条件版本如下版本，不包含条件版本 <
gte : greater than or equal，选择条件版本以上版本，包含条件版本>=
lte : less than or equal，选择条件版本如下版本，包含条件版本 <=
! : 选择条件版本之外全部版本，不管高低
*只有IE浏览器认识条件注释、其它浏览器会跳过
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--[if gt IE 6]> <style> body{ background:lightblue; } </style> <![endif]--> <!--[if lt IE 8]> <script type="text/javascript"> alert("您的浏览器Out了，请下载更新。"); </script> <![endif]--> </head> <body> <!--[if gt IE 6]> <h2>大于IE6版本的浏览器</h2> <![endif]--> </body> </html>
效果：
IE8
chrome
ie6
1.6.一、样式内属性标记法
在CSS样式的属性名前或值后面添加特殊的字符让不一样的浏览器解析。
http://browserhacks.com/在线查询， 这一个功能强大的提供各类针对性兼容办法的网站，很是实用。
“-″下划线是IE6专有的hack
“\9″ IE6/IE7/IE8/IE9/IE10都生效
“\0″ IE8/IE9/IE10都生效，是IE8/9/10的hack
“\9\0″ 只对IE9/IE10生效，是IE9/10的hack
1.6.二、选择器前缀法
*html *前缀只对IE6生效
*+html *+前缀只对IE7生效
@media screen\9{...}只对IE6/7生效
@media \0screen {body { background: red; }}只对IE8有效
@media \0screen\,screen\9{body { background: blue; }}只对IE6/7/8有效
@media screen\0 {body { background: green; }} 只对IE8/9/10有效
@media screen and (min-width:0\0) {body { background: gray; }} 只对IE9/10有效
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {body { background: orange; }} 只对IE10有效
《hack速查表》：
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>hack速查表</title> <style type="text/css"> /*reset*/ * { margin: 0; padding: 0; } body { font: normal 12px/2 Tahoma, Arial, "\5b8b\4f53", Helvetica, sans-serif; height: 100%; text-align: center; background: #fff; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; } /* Tables still need 'cellspacing="0"' in the markup. */ table { border-collapse: collapse; border-spacing: 0; } ul, ol { list-style: none; } em { font-style: normal; color: #f00; } h1 { font-size: 2em; font-weight: 700; } .hack { width: 1000px; margin: 0 auto; text-align: left; } .hack table { width: 100%; margin: 10px 0; } .hack td, .hack th { height: 30px; padding: 0 5px; border: 1px solid #ccc; } .hack th { color: #cc0bf6; } .hack th.eq, .hack td.eq { width: 350px; color: #333; } .hack th.identifier, .hack td.hack-data { width: 350px; color: #61602f; } .hack td.no { color: #fff; text-align: center; background-color: red; } .hack td.yes { color: #fff; text-align: center; background-color: green; } .hack p b { color: green; } .hack p b.red { color: red; } .hack h2 { margin: 10px 0 0 0; font-size: 1.5em; font-weight: 700; } .hack-list { margin: 10px 0; } .hack-list li { margin-bottom: 5px; zoom: 1; } .hack-list span { float: left; width: 15px; font-family: "\5b8b\4f53"; } .hack-list-inf { padding: 0 0 0 15px; } .hack-list em { display: inline-block; margin: 0 5px; } </style> </head> <body> <h1>hack速查表</h1> <div class="hack"> <p>建议：以标准浏览器为准书写代码，如遇到兼容问题，尝试其余方法解决问题，在万不得已怕状况下，采用HACK解决。</p> <p>如下是我总结的HACK书写方法:</p> <p>浏览器：仅限IE6+，FF，safari,chrome,opera;(截止到2011.10.12非IE均为最新版本)。</p> <p>测试环境：windows系统;</p> <p>DOCTYPE: <!doctype html>.</p> <table cellpadding="0"> <thead> <tr> <th class="identifier">标志符</th> <th class="eq">示例</th> <th>IE6</th> <th>IE7</th> <th>IE8</th> <th>IE9</th> <th>FF</th> <th>OP</th> <th>SA</th> <th>CH</th> </tr> </thead> <tbody> <tr> <td class="hack-data">*</td> <td>.eq {*color:#000;}</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">_</td> <td>.eq {_color:#000;}</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">+</td> <td>.eq {+color:#000;}</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">-</td> <td>.eq {-color:#000;}</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">></td> <td>.eq {>color:#000;}</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">\0</td> <td>.eq {color:#000\0;}</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">\9</td> <td>.eq {color:#000\9;}</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">\9\0</td> <td>.eq {color:#000\0;}</td> <td class="no">N</td> <td class="no">N</td> <td>N\Y</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">:root .xx{xxx:xxx\9;}</td> <td>:root .eq {color:#a00\9;}</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">*+</td> <td>.eq {*+color:#000;}</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">*-</td> <td>.eq {*-color:#000;}</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">*html</td> <td><span class="hack-data">*html</span> .eq {color:#000;}</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">*+html</td> <td><span class="hack-data">*+html</span> .eq {color:#000;}</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">html*</td> <td>html* .eq {color:#000;}</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">[;</td> <td>.eq {color:red;[;color:blue;}</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <td class="hack-data">html>body</td> <td>html>body .eq {color:blue;}</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <td class="hack-data">html>/**/body</td> <td>html>/**/body .eq {color:blue;}</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <td class="hack-data">html/**/>body</td> <td>html/**/>body .eq {color:blue;}</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <td class="hack-data">@media all and (min-width:0px){}</td> <td><span class="hack-data">@media all and (min-width:0px){.eq {color:#000;}}</span></td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <td class="hack-data">*:first-child+html</td> <td>*:first-child+html .eq {color:blue;}</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">*:first-child+html{} *html</td> <td>*:first-child+html{} *html .eq {color:blue;}</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">@-moz-document url-prefix(){}</td> <td>@-moz-document url-prefix(){ .eq {color:blue;}}</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">@media screen and (-webkit-min-device-pixel-ratio:0){}</td> <td>@media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> <tr> <td class="hack-data">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){}</td> <td><span class="hack-data">@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:blue;}}</span></td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="no">N</td> <td class="no">N</td> </tr> <tr> <td class="hack-data">body:nth-of-type(1)</td> <td>body:nth-of-type(1) .eq {color:blue;}</td> <td class="no">N</td> <td class="no">N</td> <td class="no">N</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> <td class="yes">Y</td> </tr> </tbody> <tfoot> <tr> <th class="identifier">标志符</th> <th class="eq">示例</th> <th>IE6</th> <th>IE7</th> <th>IE8</th> <th>IE9</th> <th>FF</th> <th>OP</th> <th>SA</th> <th>CH</th> </tr> </tfoot> </table> <p>FF:firefox; OP:opera; SA:safari; CH:chrome; <b>Y</b>表明支持，<b class="red">N</b>表明不支持。</p> <h2>注意事项：</h2> <ul class="hack-list"> <li><span>·</span> <div class="hack-list-inf">因为各浏览器更新神速，因此有些HACK可能会有变化，因此请你们注意。</div> </li> <li><span>·</span> <div class="hack-list-inf"><em>[;</em>此种方式会影响后续样式，不可取。</div> </li> <li><span>·</span> <div class="hack-list-inf"><em>\9\0</em>并不是对全部属性都能区分IE8和IE9.好比：background-color能够，但background不能够，还有border也不能够。因此在实际用时要测试下。</div> </li> <li><span>·</span> <div class="hack-list-inf">当同时出现<em>\0</em>;<em>*</em>;<em>_</em>;时，推荐将\0写在*和_前面。例如:color:red\0;*color:blue;_color:green;可行，不然IE7和IE6里的效果会失效。但border例外，放在先后均可以。保险起见，仍是放在前面。 </div> </li> </ul> <h2>推荐写法：</h2> <h3>demo:</h3> <pre> .eq { color:#f00;/*标准浏览器*/ color:#f30\0;/*IE8,IE9,opera*/ *color:#c00;/*IE7及IE6*/ _color:#600;/*IE6专属*/ } :root .eq {color:#a00\9;}/*IE9专属*/ @media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0){.eq {color:#450;}}/*opera专属*/ @media screen and (-webkit-min-device-pixel-ratio:0){.eq {color:#879;}}/*webkit专属*/ @-moz-document url-prefix(){ .eq {color:#4dd;}}/*firefox专属*/ </pre> </div> </body>
1.七、文档模式 （X-UA-Compatible）
文档模式是IE8浏览器之后的一种独有技术，他能够经过meta指定当前文档的渲染模式，如能够把IE8降级成IE六、IE7使用。文档模式的主要做用是影响浏览器显示网页HTML的方式，用于指定IE的页面排版引擎（Trident）以哪一个版本的方式来解析并渲染网页代码。
<meta http-equiv="X-UA-Compatible" content="IE=6" >
<meta http-equiv="X-UA-Compatible" content="IE=7" >
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge" >最新IE
“X-UA-Compatible”的值有两种方式：Emulate+IE版本号，单纯版本号
EmulateIE8：若是声明了文档类型，则以IE8标准模式渲染页面，不然将文档模式设置为IE5
9：强制以IE9标准模式渲染页面，忽略文档类型声明
x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其余 meta 以前使用。
<meta http-equiv="x-ua-compatible" content="IE=7,9,10" >
<meta http-equiv ="X-UA-Compatible" content = "IE=edge,chrome=1" />
Google Chrome Frame(谷歌内嵌浏览器框架GCF)
插件可让用户的IE浏览器外不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核
未指定文档模式时使用默认的文档模式
多数状况下咱们不会这样降级使用，通常会将IE选择为最新版本的文档模式（注意不是文档类型），若是IE浏览器使用了GCF技术咱们应该强制使用最新版内核，写入以下：
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1" />
1.八、javascript兼容
这里有两层意思，第一可使用javascript操做样式与标签，强制浏览器兼容，好比先使用javascript判断浏览器类型，再操做样式与标签。
第二指javascript存在兼容问题，如一个对象在某些浏览器下没有办法使用，要让javascript更加兼容，能够采起以下办法：
一、使用第三方提代的javascript库，如jQuery，Zepto， Prototype，dojo、YUI、ExtJS
像jQuery这种成熟的javascript库通过屡次的版本迭代，已经变得很是成熟，世界上的网站到如今近60%都使用到了jQuery，他的兼容性不错。
二、浏览器检测、从新封装
使用javascript判断浏览器类型，对一些特色的方法或对象从新封装后使用屏蔽浏览的不兼容性。可使用User-Agent、或特定对象。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h2 id="msg"></h2> <script type="text/javascript"> //用于检测浏览器是否为IE var isIE=function(){ return !!window.ActiveXObject; } function show(info){ document.getElementById("msg").innerHTML+=info+"<br/>" } //得到用户代理对象，浏览器与操做系统信息 show(navigator.userAgent); show(isIE()?"是IE浏览器":"不是IE浏览器"); </script> </body> </html>
运行效果：
2、前端性能优化
2.一、概要
在保证功能的前提下，性能也很是关键。从上图能够看出若是性能太差，响应速度慢将带很是差的用户体验，会失去大量用户。好的性能要依托以下几个方面：
1)、服务器端
2)、网络速度，客户端与服务器之间的每一个网络环节
3)、客户端软件与硬件配置
4)、前端的性能，资源的数量，大小，javascript的时间与空间复杂度等
要提升前端的性能能够从以下几个方面入手：
1)、尽可能减小HTTP请求数量
2)、压缩
3)、缓存
4)、使用内容发布网络（CDN的使用）
5)、DNS Prefetch
6)、将CSS样式表放在顶部
7)、将javascript脚本放在底部
8)、使用外部javascript和CSS
9)、避免重定向
2.二、减小HTTP请求数量
前端优化的黄金准则指导着前端页面的优化策略：只有10%-20%的最终用户响应时间花在接受请求的HTML文档上，剩下的80%-90%时间花在为HTML文档所引用的全部组件（图片、脚本、样式表等）进行的HTTP请求上。
一、图片地图
二、CSS Sprite
三、Data URI Scheme（内联资源）
四、样式表的合并
五、使用Web Font字体图标
2.2.一、图片地图
图片地图与称热点图片，不算新技术，早在HTML4.0中就存在了，就是在图片的指定区域指定超连接。这样作的目的是将本来须要物理拆分的图片合并在一块儿，经过热点单独指定连接，间接的减小了客户端请求服务器图片的数量。
2.三、缓存
2.4.一、http头部缓存
<meta http-equiv="Expires" content="Tue, 01 Dec 2015 13:30:26 GMT" />
Expires是Web服务器响应消息头字段，在响应http请求时告诉浏览器在过时时间前浏览器能够直接从浏览器缓存取数据，而无需再次请求新内容，可使用客户端缓存的内容，可是请求仍是会发生，状态为304。浏览器会默认开启缓存功能。
2.四、内容分发网络 （CDN）
CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽量避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定，它是一个经策略性部署的总体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。
好比咱们在项目中使用jQuery ,加载本地服务器的jQuery可能不如资源公共库中作过CDN优化的资源快。
http://cdn.code.baidu.com/ 百度静态资源公共库
1)、经过 link 标签
< link rel="dns-prefetch" href="http://api.twitter.com" />
2)、经过 meta 标签
< meta http-equiv="x-dns-prefetch-control" content="on" />
3)、设置 Http header 的 x-dns-prefetch-control 属性为 on 进行控制。
Firefox: 3.5+ Chrome: Supported
Safari 5+ IE: 9
2.五、小节
优化是没有止境的，只有更快没有最快，下面两篇文章只介绍了更多关于前端优化的方法。
英文原文：https://developer.yahoo.com/performance/rules.html
中文翻译：http://www.cnblogs.com/developersupport/p/webpage-performance-best-practices.html
《高性能网站建设指南》这本书中提出了一些规则：
规则1——减小HTTP请求规则2——使用内容发布网络规则3——添加Expires头规则4——压缩组件规则5——将样式表放在顶部规则6——将脚本放在底部规则7——避免CSS表达式规则8——使用外部JavaScript和CSS规则9——减小DNS查找规则10——精简JavaScript规则11——避免重定向规则12——移除重复脚本规则13——配置ETag规则14——使AjaX可缓存