• 减少reflow与repaint的一些优秀实践

    尽量不要使用表格布局
    服务器君一共花费 14.903 ms 进行了 3 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    下面是一些比较好的实践:

    1. 不要一条一条地修改DOM的样式。

    与其这样,还不如预先定义好css的class,然后修改DOM的className。

    // bad
    var left = 10,
    top = 10;
    el.style.left = left + "px";
    el.style.top  = top  + "px";
    
    // Good
    el.className += " theclassname";
    
    // Good
    el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
    

    2. 把DOM离线后修改。

    • 使用 documentFragment 对象在内存里操作DOM。
    • 先把DOM给display:none(有一次reflow),然后你想怎么改就怎么改。比如修改100次,然后再把他显示出来。
    • clone一个DOM结点到内存里,然后想怎么改就怎么改,改完后,和在线的那个的交换一下。

    3. 不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

    4. 尽可能的修改层级比较低的DOM。当然,改变层级比较底的DOM有可能会造成大面积的 reflow,但是也可能影响范围很小。

    5. 为动画的HTML元件使用fixed或absoult的position,那么修改他们的CSS是不会reflow的。

    6. 最好不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局

    In this manner, the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. Any cell that has content that overflows uses the ‘overflow’ property to determine whether to clip the overflow content.

    用这种方式,当第一行收到的时候客户端就可以马上开始布局表格。之后的行不会影响列的宽度。任何有内容溢出的单元格使用 overflow 属性去判断时候要剪裁掉那些溢出的内容。(自翻,渣翻译……)

    FIXED LAYOUT, CSS 2.1 SPECIFICATION

    This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

    这个算法可能会比较低效,因为他需要客户端必须收到所有表格中的内容才能够布局,并且可以要求多次传递数据。

    AUTOMATIC LAYOUT, CSS 2.1 SPECIFICATION

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [PHP程序设计] 命令式编程范式 6 个条目
  2. [计算机算法] 从双端队列引出的卡特兰数 3 个条目
  3. [移动开发] 使用support-v7 ActionBar前的那些坑 3 个条目
  4. [移动开发] Android SQLite增删查改实例(数据:魔弹之王) 2 个条目
  5. [Python程序设计] 写几个简单的Tornado程序吧 5 个条目
  6. [智力开发与知识管理] 整体性学习步骤 9 个条目
  7. [移动开发] 从代码角度去认识 Activity 4 个条目
  8. [Python程序设计] Django后台管理系统 2 个条目
  9. [软件工程与项目管理] 浏览器与CSS渲染技巧 2 个条目
  10. [JavaScript程序设计] 关于HTTP Keep-Alive 6 个条目
  11. [C语言程序设计] C语言里的全局变量 2 个条目
  12. [移动开发] Activity 初步知识 2 个条目
窗口 -- [资讯]