改善HTML5性能

改善HTML5性能

如果想当一个性能高手，那么必须理解浏览器的工作原理，哪怕只是个大概。用户在浏览器上看到页面的过程：

ps:html和css的解析是同时进行的。

从以下两方面改进性能

• 减少HTML中元素的数量
  HTML元素是首先被解析进DON树和渲染树的，通过减少HTML元素的数量，可以让浏览器更快地显示完节点.

• 减少重绘
  在元素完成绘制之后动态更改DOM结构或CSS样式都会引起浏览器重绘。
  性能的损耗取决于动态改动的范围。如果只是改动一个元素的背景颜色，
  那就只会引发这一个元素的重绘，如果改动一个元素的位置或者增加一个元素，
  那就会引起大量的重绘，因为它影响了所有的兄弟元素。

    <!--javascript 产生多次重绘-->
        <script>
            var example=document.getElementById('example');
            example.ondbclick=function(){
                example.style.backgroundColor='red';
                example.style.width='200px';
                example.style.color='white';
            }
        </script>
    <!--javascript产生一次重绘-->
        <style>
            .dbclick{
                withd:200px;
                background-color:red;
                color:white;
            }
        </style>
        <script>
            var example=document.getElementById('example');
            example.ondbclick=function(){
                example.className='dbclick';
            }
        </script>

• 还有，要把CSS（包括外链CSS）放到head标签内，把script放到body标签的尾部。因为，浏览器并不会等全部HTML解析完成之后才渲染元素，而是同时进行，把CSS放到前面就会保证先渲染的那一部分元素的显示样式是正确的。
  这么写在性能方面也有更重要的意义，你绝对不希望引起大量的浏览器重绘的原因仅仅是因为你把CSS写到了后面。因为浏览器要预处理JavaScript文件，所以把JavaScript文件放到头部会延迟页面元素的渲染，用户会觉得页面变慢了。

---

用css来布局，处理边界

盒子套盒子，把一个或一大组元素都放在一个盒子里。如下面一个例子：
eg：一个盒子里放一个头像图片和一个标题.
好的css布局：

    .box{
            position:relative;
            width:200px;
            padding-left:48px;
        }
    .head{
            width:36px;
            height:38px;
            position:absolute;
            left:0;
            top:3px;
            z-index:1;
        }

差的css布局：

        .box{
            position:relative;
            width:200px;
            margin-left:48px;//修改的地方
        }
        .head{
            width:36px;
            height:38px;
            position:absolute;
            left:-48px;//修改的地方
            top:3px;
            z-index:1;
        }

使用特征检测来完成浏览器兼容.可以使用Modernizr的开放源码库。其工作原理是用js检测某一个功能是否可用，然后添加一个class到body标签，指出它是可用不可用。
能用css完成的效果尽量不用JavaScript完成。

性能准则：

1. 减少HTTP请求
   
   • 理解并行连接
     
     • 浏览器能开多个并行连接，但要限制在一定的范围内，否则虽然提高了加载效率，仍有可能因耗时大，让性能有降下来。
   • 合并资源文件
     
     • 并行连接的讨论可以得到一个结论，大一些的文件比小文件好。把内容合并成尽可能少的文件。可能的话，把所有的css文件合并成一个单独的文件，把所有的JavaScript文件合并成一个单独的文件。但是需要注意的是，如果有多个页面的相互引用，这样合并可能会有问题。
     • 另一个办法是，抽出所有页面共同的CSS文件，然后在每一个页面上引用它，之后再为每一页提供只针对该页面的CSS文件。这种策略往往代表良好的可维护性和性能之间的折中。
   • 使用图片精灵
     
     • （将多个图标合并成一个图片）
2. 使用CDN加速
3. 避免空的src或者href属性
   
   • (使用js阻止事件的默认行为)
4. 增加过期头
5. 启用GZIP压缩
   
   • （HTTP 1.1协议引入了Accept-Encoding这个功能，可以表明HTTP请求的内容是被压缩过的。Accept-Encoding:gzip,deflate）
6. 把css放到头部
7. 把JavaScript放到尾部
8. 避免使用css表达式
   
   • 普天之下只有IE5、IE6、IE7支持CSS表达式，其他浏览器从未支持过。
9. 删除不使用的css语句
10. 对js、css代码压缩
11. 减少重绘
    
    • 规定图片的宽和高
    • 不要用表格布局
    • 定义字符集
    • 不要重组DOM