zoukankan      html  css  js  c++  java
  • 浏览器工作原理(二):浏览器渲染过程概述

    参考:https://segmentfault.com/a/1190000012925872#articleHeader4

    浏览器器内核拿到内容后,渲染大概可以划分成以下几个步骤

    1. 解析html建立dom树
    2. 解析css构建render树(将CSS代码解析成树形的数据结构,然后结合DOM合并成render树)
    3. 布局render树(Layout/reflow),负责各元素尺寸、位置的计算
    4. 绘制render树(paint),绘制页面像素信息
    5. 浏览器会将各层的信息发送给GPU,GPU会将各层合成(composite),显示在屏幕上。

    所有详细步骤都已经略去,渲染完毕后就是load事件,对应JS逻辑处理

    load事件与DOMContentLoaded事件的先后

    • DOMContentLoaded 事件:仅当DOM加载完成,不包括样式表,图片。如果有async加载的脚本就不一定完成
    • onload 事件:页面上所有的DOM,样式表,脚本,图片都已经加载完成,渲染完毕

    所以,顺序是:DOMContentLoaded -> load

    头部引入css加载是否会阻塞dom树渲染?

    首先,css是由单独的下载线程异步下载的。

    然后再说下几个现象:

    • css加载不会阻塞DOM树解析(异步加载时DOM照常构建)
    • 但会阻塞render树渲染(渲染时需等css加载完毕,因为render树需要css信息)

    这可能也是浏览器的一种优化机制。

    因为加载css的时候,可能会修改DOM节点的样式,如果css加载不阻塞render树渲染的话,那么当css加载完之后,可能引起重绘或者回流,造成没有必要的损耗。

    所以,先把DOM树的结构先解析完,然后等css加载完之后,再根据最终的样式来渲染render树,以此优化性能。

  • 相关阅读:
    HDU1164_Eddy's research I_素数筛选法
    HDU1213_How Many Tables
    HDU1049_数学水题
    HDU1286_找新朋友_筛选法
    HDU1128_Self Numbers_筛选法
    HDU3199_Hamming Problem_类似丑数
    HDU1297_Children’s Queue_递推题
    HDU1856_More is better
    HDU1397_Goldbach's Conjecture_素数筛选法
    HDU1272_并查集
  • 原文地址:https://www.cnblogs.com/zs-note/p/9042366.html
Copyright © 2011-2022 走看看