性能优化——雅虎军规/减少DOM操作

雅虎14军规：

1) 减少HTTP请求
 图片地图 Image Map——组合多个图片到一个图片当中
 CSS Sprites——组合页面中的图片到单个文件中，使用background-image和background-position定位
 内联图片和脚本——使用data: URL scheme在页面中内嵌图片
 样式表合并
2) 使用CDN 内容分发网络
常用的CDN（百度云）
3) 添加Expires头
使用 Expires header，可以在客户端缓存图片、样式表、脚本、flash等。这在后续访问中避免了不必要的 HTTP 请求。
4) 压缩组件
Accept-Encoding: gzip, deflate.
5) 样式表放顶部
避免页面白屏—IE或者FOUC（无样式内容闪烁问题）—FF
将样式表包含在文档中有两种方式：使用link和@import规则。但是@import规则有可能导致白屏现象，即使把@import规则放在文档的head标签中也是如此。
6) 脚本放在底部
脚本后面内容的顺序显示将被阻塞，因此把脚本尽量放在底部意味着更多内容能被快速显示。
当脚本阻塞时仍然会阻止其他图片资源和页面的加载，如果站点是一个有很多图片的网站那么这种情况将严重影响用户体验；而脚本后置的话，图片和脚本是并行下载，然后先加载图片和页面然后才执行耗时的脚本，这样就不会阻塞图片和页面的加载。
如果脚本需要执行一个耗时的操作，就算后置了它还是会阻塞后续脚本加载和执行并且阻塞整个页面。下面介绍非阻塞加载脚本技术也就是异步加载。
使用延迟脚本（deferred script）。DEFER 属性表明脚本未包含 document.write，指示浏览器刻继续显示。不幸的是，Firefox 不支持 DEFER属性。在 IE 中，脚本可能被延迟执行，但不一定得到需要的长时间延迟。不过从另外角度来说，如果脚本能被延迟执行，那它就可以被放在底部了。
7) 避免CSS表达式又称Dynamic properties(动态属性)
8) 使用外部JS和CSS
使用外部文件会加快页面显示速度，因为外部文件会被浏览器缓存。如果内置 JavaScript 和 CSS 在页面中虽然会减少 HTTP 请求次数，但增大了页面的大小。
9) 减少DNS查找
10) 精简JS——YUI Compressor
11) 避免重定向：301 302
12) 移除重复脚本
13) 配置ETag
14) 使ajax可以缓存
用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数

DOM操作优化

1) 把读取量大的存入变量一次性读取
2) innerHTML与DOM对比：
FF下innerHTML好；Chrome下DOM快；
用innerHTML代替DOM操作，减少DOM操作次数
3) 减少DOM操作次数
 使用节点克隆：cloneNode(true)，而不是每次都创建新节点；
 访问元素集合时，使用局部变量：for(var i=0,len=arr.length;i<len;i++)   、 var doc = document;
 尽量用只获取元素的节点方法：
childNodes：包括元素节点、文本节点；children：只代表获取元素节点
firstChild VS firstElementChild
 使用选择器API
var aLi = document.querySelectorAll(‘ #ul1 li’) 
（CSS选择器的使用，而不是var oUl = document.getElementById(‘ul1’);var aLi= oUl.getElementsByTagName(‘li’);）
4) DOM与浏览器之间的优化
 重排：改变页面内容
 重绘：浏览器显示内容
 添加顺序：尽量在appendChild前添加操作——影响重排重绘
 合并DOM操作：利用style.cssText=’…’
 缓存布局信息\缓存DOM节点查找的结果 如：var L = oDiv.offsetLeft;
 文档碎片：var oFrag = createDocumentFragment(); oFrag.appentChild(oLi); oUl.appendChild(oFrag);
5) DOM与事件——事件委托（关键就是给父元素添加事件监听机制，然后利用e.target属性找到事件的事件源，对事件源进行判断和操作，这样就大大提高了效率）
6) DOM与前端模板
通过前端模板能更好的对逻辑和视图分离，MVC架构的基础。
前端模板 JS+数据，减少由于HTML标签导致的带宽浪费。
有二种方法可以将DOM元素从文档流中移除：
 隐藏元素，进行修改，然后再显示
 新创建或克隆节点，进行修改，然后覆盖原始的DOM元素
其他性能优化
语法优化
AJAX缓存和备忘录模式
作用域链和原型链上的优化
当需要设置的样式很多时设置className而不是直接操作style。
避免在页面的主体布局中使用table，table要等其中的内容完全下载之后才会显示出来，显示比div+css布局慢。
验证优化工具 YSlow