浏览器页面渲染过程

约定不等于承诺〃 2022-12-01 14:11 237阅读 0赞

### 1、浏览器页面渲染过程图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left]

### 2、浏览器渲染过程分析 ###

#### 2.1 CSS加载阻塞DOM渲染，但不阻塞DOM解析 ####

有文件test.html，其部分代码如下截图所示：  
![在这里插入图片描述][20200827150804846.png_pic_left]  
**CSS加载阻塞DOM渲染**  
访问test.html页面，通过控制台可查看第一个CSS文件的加载阻塞了其后面DOM的渲染，因此起初只看到了页面内容：“Hi,”，其它内容并未渲染出来。  
![在这里插入图片描述][20200827150227150.png_pic_left]  
**CSS加载不阻塞DOM的解析**  
通过控制台可查看，DOM渲染被第一个CSS文件阻塞了，但是该文件后面的其它文件还能正常加载，说明CSS不阻塞DOM解析  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left]: /images/20221123/607bf3fc70e14cd7bc126b0077077264.png
[20200827150804846.png_pic_left]: /images/20221123/6fafc07d4cf64362b90617fbab68a30f.png
[20200827150227150.png_pic_left]: /images/20221123/752d9b56a6ac48858b26f1b4e98f5e60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lpaGFuemhp_size_16_color_FFFFFF_t_70_pic_left 1]: /images/20221123/a0f5f55892de43c195d8d18a047a64b7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器渲染页面的过程

文章目录理论知识参考链接理论知识浏览器的渲染过程由一个线程单独负责，我们暂且称其为UI线程。当浏览器从远程服务器获取到一个HTML文档后，首先会先生成相应的DOM树，然后...

ゝ一纸荒年。/ 2024年05月08日 06:29/ 0 赞/ 72 阅读

相关浏览器渲染页面的过程

上网浏览网页对普通人来讲是非常简单的操作，而对于程序员来说，这件事的背后发生了什么事情呢？输入的网址在通过DNS解析后得到服务器地址， ![watermark_typ

╰+攻爆jí腚メ/ 2023年01月01日 10:58/ 0 赞/ 211 阅读

相关浏览器页面渲染过程

1、浏览器页面渲染过程图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

约定不等于承诺〃/ 2022年12月01日 14:11/ 0 赞/ 238 阅读

相关浏览器渲染过程

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

古城微笑少年丶/ 2022年11月21日 01:16/ 0 赞/ 200 阅读

相关浏览器渲染HTML页面的过程

友情链接：[http://www.tuicool.com/articles/vmu2Uvn][http_www.tuicool.com_articles_vmu2Uvn]

素颜马尾好姑娘i/ 2022年09月30日 06:55/ 0 赞/ 219 阅读

相关浏览器渲染过程

为什么要了解浏览器加载、解析、渲染这个过程？了解浏览器如何进行加载，我们可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。

桃扇骨/ 2022年07月16日 05:49/ 0 赞/ 263 阅读

相关浅析浏览器渲染页面过程

1.解析HTML文件，创建DOM树自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。 2.解析CSS 优

╰+哭是因爲堅強的太久メ/ 2022年07月14日 13:56/ 0 赞/ 216 阅读

相关浏览器渲染页面过程

当了解web访问原理后，与前端工程师或页面重构师工作更为关系密切的应该是浏览器，WEB 页面运行在各种各样的浏览器当中，浏览器载入、渲染页面的速度直接影响着用户体验，特别是浏

逃离我推掉我的手/ 2022年06月10日 13:40/ 0 赞/ 250 阅读

相关浏览器渲染过程

先放一张图方便理解： ![浏览器渲染过程图][70] 渲染引擎先通过请求拿到文档内容，浏览器解析HTML构建DOM树： ![在这里插入图片描述][70 1] 然

朴灿烈づ我的快乐病毒、/ 2022年05月08日 16:00/ 0 赞/ 289 阅读

相关浏览器渲染页面的过程

一、首先了解一下浏览器的主要功能　浏览器的主要功能是将用户选择的web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括P

亦凉/ 2022年02月13日 04:47/ 0 赞/ 299 阅读