浏览器的渲染过程

浏览器的渲染过程:

  1. 浏览器将HTML解析成一个DOM Tree;
  2. 将CSS解析成一个CSSOM(CSS Object Model)树;
  3. 合成渲染树:将DOM 树和CSSOM 树合成成一个Rendering Tree渲染树;
  4. 有了渲染树,浏览器已经知道了文档HTML中有哪些节点和各个节点的CSS样式及他们之间的从属关系,接下来就是Layout计算出各个节点在屏幕中的位置。
  5. 最后就是绘制了。

重排Reflow:

    Dom结构中各个元素都有自己的盒子(模型),这些都需要浏览器根据css样式来进行计算并根据计算的结果将元素放置到它该放的位置上,这个位置称为Reflow。

    哪些操作会触发Reflow:

        1.增加、删除、修改DOM节点都会触发重排和重绘;

        2.移动DOM的位置;

        3.修改元素的样式;

        4.修改网页的默认字体。

重绘Repaint:

    当盒子的位置、大小、颜色及其他属性确定下来后,浏览器会按照这些特性将这些元素绘制出来,这个过程称为Repaint。

什么操作会触发重绘:

    无论是Dom改动还是CSS改动,只要改变了当前的显示就会触发重绘。

    如何尽量少的重绘:尽量将多次Dom操作改为一次操作

        

    

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页