• 浏览器——浏览器的解析过程以及CSS、JS、DOM之间的加载关系

    一、浏览器的渲染过程

    1. 解析HTML构成DOM树
    2. 解析CSS构成CSSOM树
    3. 合并DOM树和CSSOM树为render树
    4. 进行回流，确定各DOM的尺寸、位置
    5. 进行重绘，绘制页面的像素信息
    6. 将信息发送给GPU，GPU将页面绘制到屏幕上

     如上图，我们可以得到两个信息：

    1. CSS和HTML的加载是异步的，二者互不干扰
    2. CSS的加载会阻塞DOM的渲染，因为必须等DOM树和CSSOM树合并为渲染树之后，才能进行DOM的渲染

    二、JS阻塞DOM解析

    如果script标签内不带defer/async，那么浏览器在解析到script标签时会停止DOM的解析，一直等到script标签的加载与执行完成后，再进行之后的DOM解析。

    如果添加defer标签，则script标签的加载不阻塞DOM加载，并在DOM加载完成后按照引入的顺序执行。

    如果添加async标签，则script标签的加载也不阻塞DOM加载，但是在加载完之后立马执行，不能保证执行的顺序。

    三、CSS阻塞JS执行

    CSS的加载会阻塞JS的执行，进而阻塞DOM的解析。

    1. <head>
    2.   <link rel="stylesheet" href="./style.css?sleep=3000"> // 假设css的加载会花3s
    3.   <script src="./index.js"></script>
    4. </head>
    5. <body>
    6.   <p>hello world</p>
    7. </body>

    css和js同时加载，但是由于css未加载完毕，js代码不执行  -> 由于js代码还未执行，DOM元素不加载 -> 3秒后css加载完毕，js代码开始执行 -> js代码执行完毕，开始解析DOM

    四、JS会触发页面的渲染

    因为JS代码需要操作DOM，遇到script标签后，会先渲染一次标签之前的所有DOM，然后再加载和执行JS 。

    1. <body>
    2.     <p id="box1">world</p>
    3.     <script>
    4.         console.log(document.getElementById('box1'));
    5.         console.log(document.getElementById('box2'));
    6.     </script>
    7.     <p id="box2">hello</p>
    8. </body>

    上述代码能获取到box1，但是无法获取到box2，因为js执行时box1已经解析和渲染，而box2还未解析和渲染。

  • 相关阅读:
    STM32独立看门狗（IWDG）溢出时间计算
    字符函数和字符串函数（C语言进阶）
    2023年危险化学品经营单位主要负责人证考试题库及危险化学品经营单位主要负责人试题解析
    【微软技术栈】C#.NET 正则表达式源生成器
    Java — 字符串
    电力电子转战数字IC20220718-19day51-52——TLM通信
    提升采购订单管理效率的五个最佳实践
    达梦数据库最大连接数处理
    C#跨线程刷新前台UI
    日志异常分析记录
  • 原文地址：https://blog.csdn.net/ZKH129/article/details/125498367