性能优化------浏览器端

浏览器性能优化更重要
	Time Retrieving HTML 10%-20%----花在下载主文档的时间
	Time Elsewhere 80%左右---花在引用资源的时间
	19条优化规则：
	规则1：把CSS放在HEAD中加载
	能让页面更早的开始渲染，避免闪屏
	最好能包含关键渲染路径的样式：首屏（第一屏的样式一定放在head里面）
	规则2：把js放在body末尾加载
	因为js阻塞HTML解析和css渲染
	规则3：不使用CSS表达式
	看似强大，实际性能开销很大，可能导致页面卡顿
	规则4：用外链方式引用Css和js
	有效减少HTML的体积 （这样CSS和js作为静态资源可以在浏览器设置缓存响应头）
	可合理利用浏览器缓存（css js作为静态资源缓存在浏览器端，这样不用再次请求服务器）
	规则5压缩JS和CSS
	生产环境删除不必要的注释、空白
	JS中变量名压缩，混淆压缩（对css进行属性合并如background：，选择符的合并）
	规则6：不重复加载Js
	在IE中还是会多个请求，不能发挥缓存优势
	意味着更长的JS执行时间
	规则7：让Ajax请求可缓存（属于服务端优化）
	Gzip、内容压缩都可适用
	规则8：用GET 方式发起Ajax请求
	get方式可以缓存
	如果是获取信息，get更语义化
	规则9：组件延迟加载
	保障关键页面资源优先加载：因为并发数限制
	延迟加载的典型手段：lazyload（懒加载或按需加载），首屏之后的DOM上使用
	规则10：减少DOM节点数
	天猫：更多节点数意味浏览器布局、 渲染时计算量更大
	规则11：避免使用iframe
	会阻塞父文档的onload
	即时是空白也比较耗时
	规则12：减少COOKIE体积
	因为COOKIE每次请求都会全部带上（主文档 jss css 图片等异步请求等同域资源）
	规则13：使用无COOKIE域名加载静态资源（服务器端）
	减少静态资源加载时的网络传输量
	静态资源加载通常是不需要COOKIE的
	阿里：精简COOKIE后，每年节省的流量TB记
	规则14：减少js中DOM访问
	对于查找到的元素，缓存在变量中
	节点增加是合理利用DomentFragment
	不要用js去频繁修改样式
	规则15：使用更智能的事件监听机制
	基于事件冒泡的委托机制，有效减少绑定的数量
	规则16：使用常见的图片优化手段
	相比代码，图片体积很大
	常用的图片压缩工具： PNGCrush、 JPEGTRAN、PNGQUANT
	渐进式编码：JPG
	规则17：不要在HTML中缩放图片
	徒增渲染开销，提供适当尺寸即可（放10*10图片就避免50*50的避免开销）
	规则18：不要把图片SRC置空
	IE、Chrome、FireFox会发起额外的主文档请求
	规则19：任何资源尽量在25k以内
	ipone无法缓存25k以上的资源