zoukankan      html  css  js  c++  java
  • 浏览器渲染页面的流程(参考网上有关资料整理)

    浏览器渲染页面也就表示我们网上的资源已经请求成功

    首先我们要明确浏览器渲染页面大致分为这几个步骤

    1.浏览器解析html文档从而使构建成dom文档树=>2.构建render树=>3.布局render树=>4.绘制render树

    1.浏览器会将html文档解析成一个dom文档树,dom树构建的过程是一个深度遍历的过程,只有当当前节点的所有子节点都构建好了以后,才会去构建当前节点的下一个兄弟节点。Dom树的构建过程为:将字节转换成字符,确定tokens,将tokens转换成节点,然后构建dom树

    2.接下来再解析css样式,得到css规则树(cssom)

    3.根据得到的dom树和css来构建render树,渲染树不等于dom树,像header和display:none;这种没有具体内容的东西就不会出现再渲染树中

    4.根据render树,浏览器可以计算出网页中有哪些节点,以及各个节点的css从属关系,然后计算出每个节点再屏幕中国的位置

    5.遍历render树进行绘制页面中的各个元素

    (页面重拍(回流)的话,会重新加载dom树,影响页面加载速度)

    导致页面重拍的原因如下

    (1).页面初始化

    (2).操作dom时

    (3).某些元素发生改变时

    (4).css的属性发生改变时

    浏览器在解析html的过程中:它采用的是自上而下的解析方式,

    在页面中重绘和重排一般会在(1)增加或删除dom节点(2)display:none(重排并重绘)visibility:hidden(重排)(3)移动页面中的元素的时候(4)增加或者修改样式的时候(4)用户改变窗口大小,滚动页面的时候触发

    减少重绘和重排提高页面性能的方法

    就是将它所要替换的属性提前先写好,当触发某个事件的时候,只要改变他的classname即可

  • 相关阅读:
    BEC listen and translation exercise 44
    中译英12
    BEC listen and translation exercise 43
    中译英11
    BEC listen and translation exercise 42
    中译英10
    BEC listen and translation exercise 41
    中译英9
    BEC listen and translation exercise 40
    中译英8
  • 原文地址:https://www.cnblogs.com/violinh/p/11728857.html
Copyright © 2011-2022 走看看