zoukankan      html  css  js  c++  java
  • 浏览器渲染页面的流程

    浏览器渲染页面的流程

    1、根据html文件构建DOM树和CSSOM树。构建DOM树期间,如果遇到JS,阻塞DOM树及CSSOM树的构建,优先加载JS文件,加载完毕,再继续构建DOM树及CSSOM树。
    2、构建渲染树(Render Tree)。
    3、页面的重绘(repaint)与重排(reflow,也有称回流)。页面渲染完成后,若JS操作了DOM节点,根据JS对DOM操作动作的大小,浏览器对页面进行重绘或是重排。

       引起重排的场景:(当页面布局和几何属性改变时就需要重排)

     (1)、添加或者删除可见的DOM元素;

        (2)、元素位置改变——display、float、position、overflow等等;

        (3)、元素尺寸改变——边距、填充、边框、宽度和高度

        (4)、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变;

        (5)、页面渲染初始化;

        (6)、浏览器窗口尺寸改变——resize事件发生时

    注意:重排必将引起重绘,而重绘不一定会引起重排。

        

  • 相关阅读:
    nginx反向代理编译异常
    TCP/ip协议栈之内核调优
    Tcp之异常
    Codeforces Round #584
    Codeforces Round #588 (Div. 2)
    Codeforces Round #587 (Div. 3) F
    P4587 [FJOI2016]神秘数 主席树
    P4559 [JSOI2018]列队 主席树
    P4098 [HEOI2013]ALO 可持久化01trie
    4771: 七彩树 主席树
  • 原文地址:https://www.cnblogs.com/angel-cloud/p/11380320.html
Copyright © 2011-2022 走看看