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的构建,即阻塞了页面的渲染

  • 相关阅读:
    leetcode-38.报数
    leetcode-35.搜索插入位置
    leetcode-27.移除元素
    leetcode-26.删除重复数组中的重复项
    leetcode-20.有效的括号
    leetcode-973最接近原点的K个点
    leetcode-14最长公共前缀
    leetcode-13罗马字符转整数
    MFC俄罗斯方块
    leetcode-9.回文数(水仙花数)
  • 原文地址:https://www.cnblogs.com/TGNB/p/11400562.html
Copyright © 2011-2022 走看看