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

    尽量不要使用表格布局
    服务器君一共花费 23.238 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. [移动开发] Android View注入框架Butter Knife 3 个条目
  2. [数据库技术] SQL基础语法 1 个条目
  3. [移动开发] Android Studio里的Gradle 3 个条目
  4. [PHP程序设计] PHP里的引用 5 个条目
  5. [Python程序设计] Tornado源码解析 23 个条目
  6. [PHP程序设计] PHP数组探索 4 个条目
  7. [智力开发与知识管理] 超越整体性学习 5 个条目
  8. [移动开发] 从代码角度去认识HttpClient 2 个条目
  9. [Python程序设计] 从PHP到Python 3 个条目
  10. [软件工程与项目管理] 呈现器的布局与绘制 11 个条目
  11. [Linux操作系统] CentOS上使用EPEL Repository 2 个条目
  12. [Python程序设计] Python HTTP服务器 7 个条目
窗口 -- [资讯]