• 浏览器——浏览器的解析过程以及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还未解析和渲染。

  • 相关阅读:
    记一次 .NET某施工建模软件 卡死分析
    【游戏建模全流程】使用Maya制作赛车模型
    从零开始学安卓笔记：Android基础知识点
    ts使用记录
    nodejs基于微信小程序的图书销售商城系统 uniapp 小程序
    车载通信与DDS标准解读系列（1）：DDS-RPC
    攻防世界WEB（二）baby_web、Training-WWW-Robots、PHP2、unserialize3
    企业如何提供安全方面的投资回报率？
    原来你是这样的Java[01]--基础一瞥
    旅游资讯查询易语言代码
  • 原文地址：https://blog.csdn.net/ZKH129/article/details/125498367