前端性能优化之浏览器

1、把CSS放在HEAD中加载

        能让页面更早的开始渲染，避免闪屏

        最好能包含关键渲染路径的样式：首屏

2、把JS放在BODY末尾加载

        因为JS阻塞HTML解析和CSS渲染  

3、不使用CSS表达式

       看似强大，实际性能开销很大，可能导致页面卡顿

4、用外链的方式引用CSS和JS

       有效减少HTML的体积

       可合理利用浏览器缓存

5、压缩JS和CSS

        生产环境删除不必要的注释、空白

        JS中变量名压缩、混淆压缩

6、不重复加载JS

        在IE中还是会多个请求，不能发挥缓存优势

        意味着更长的JS执行时间

7、让AJAX请求可缓存（服务器端）

       GZIP、内容压缩都可适用

8、用GET方式发起AJAX请求

       GET方式可缓存

       如果是获取信息，GET更语义化

9、组件延迟加载

       保障关键页面资源优先加载：因为并发数限制

       延迟加载的典型手段：Lazyload

10、减少DOM节点数

        天猫：更多节点数使浏览器布局、渲染时计算量更大

11、避免使用iframe

        会阻塞父文档的onload

        即使是空白也比较耗时

12、减少COOKIE体积

        因为COOKIE每次请求都会全部带上

13、减少JS中的DOM访问

        对于查找到的元素，缓存在变量中

        节点增加是合理利用DocumentFragment

        不要用JS频繁的修改样式

14、使用常见的图片优化手段

        相比代码，图片体积更大

        PNGCrush、JPEGTRAN、PNGQUANT

        渐进式编码：JPG

15、不要再HTML中缩放图片

        徒增渲染开销，提供适合大小即可

16、不要把图片SRC置空

         IE、Chrome、FireFox会发起额外的主文档请求

17、任何资源尽量在25k以内

         iPhone无法缓存25k以上的资源