重绘专题

重绘专题

• 减少页面的重绘。

  • 减少页面重绘虽然本质不是JAVASCRIPT优化，但重绘往往是由JAVASCRIPT引起的，而重绘的情况直接影响页面性能。

    var str = "
    这是一个测试字符串
    ";
    /**效率低**/
    var obj = document.getElementsByTagName("body");
    for(var i = 0; i < 100; i++){
        obj.innerHTML += str + i;
    }
    /**效率高**/
    var obj = document.getElementsByTagName("body");
    var arr = [];
    for(var i = 0; i < 100; i++){
        arr[i] = str + i;
    }
    obj.innerHTML = arr.join("");

  一般影响页面重绘的不仅仅是innerHTML，如果改变元素的样式，位置等情况都会触发页面重绘，所以在平时一定要注意这点。

• 使用HTML5和CSS3的一些新特性。
• 避免在HTML里面缩放图片。
• 避免使用插件。
• 确保使用正确的字体大小。
• 决定当前页面是不是能被访问。