zoukankan      html  css  js  c++  java
  • DOM渲染及过程

    1.什么是DOM渲染?

    DOM渲染指的是对于浏览器中展现给用户的DOM文档的生成的过程。

    2.DOM渲染的演化过程,大致可以分为可以分为三个阶段:
    1.解析HTML文件,创建DOM树

    自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。

    2.解析CSS

    优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;
    特定级:id数100+类或伪类数10+tag名称*1

    3.将CSS与DOM合并,构建渲染树(renderingtree)

    DOM树与HTML一一对应,渲染树会忽略诸如head、display:none的元素

    4.布局和绘制,重绘(repaint)和重排(reflow)

    reflow(重排):根据 Reader Tree 进行节点信息计算(layout),若渲染树的一部分更新,且尺寸变化,就会发生重排;
    repaint(重绘):根据计算好的信息绘制整个页面(Painting),部分节点需要更新,但不改变其他集合形状。如改变某个元素的颜色,就会发生重绘。
    5.理论上,每一次的dom更改或者css几何属性更改,都会引起一次浏览器的重绘/重排过程,而如果是css非几何属性更改,则只会引起重绘过程,所以重排一定引起重绘,重绘不一定引起重排
    6.因为有时JS也参与DOM Tree 的构建,因而我们会先执行js再开始构建渲染树,js脚本会阻塞Reader Tree的构建,即阻塞了页面的渲染

  • 相关阅读:
    查找整数
    Ling To Xml 学习之 对xml增、删、改、查
    JS获得鼠标
    xml之数据岛绑定到表格
    C# 三种序列化[转]
    编程字体
    Oracle 、C#
    提示信息Javascript
    几个好用的日历控件
    收藏网站
  • 原文地址:https://www.cnblogs.com/TGNB/p/11400562.html
Copyright © 2011-2022 走看看