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

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

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

    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程序设计] CodeIgniter与PHP框架设计 5 个条目
  2. [软件工程与项目管理] 了解一点WebKit 9 个条目
  3. [移动开发] Android根基概念Context 8 个条目
  4. [Python程序设计] Django Web环境配置 2 个条目
  5. [PHP程序设计] 命令式编程范式 6 个条目
  6. [Linux操作系统] CentOS上使用EPEL Repository 2 个条目
  7. [移动开发] Android Studio里的Gradle 3 个条目
  8. [PHP程序设计] 对输入文件类型的检测 1 个条目
  9. [Python程序设计] Django模板系统 11 个条目
  10. [Python程序设计] Django 入门知识浅介 10 个条目
  11. [搜索引擎优化] 与百度权重有关的信息 2 个条目
  12. [移动开发] Android抽屉导航NavigationDrawer 5 个条目
窗口 -- [博客]