关于浏览器渲染机制

来源：互联网发布：程序员30岁后的出路编辑：程序博客网时间：2024/05/17 06:23

浏览器渲染
这张图其实向表达的是以下几点
1. CSS不会阻塞DOM的解析, 但会阻塞DOM的渲染
2. JS会阻塞DOM的解析和渲染
3. JS会等待CSSOM

第一点

关于第一点, CSS会阻塞DOM的渲染, 确实如此,看下面这个例子(link故意没放head里, 这个例子里link就算放head结果也一样, 因为CSS不阻塞DOM解析), bootstrap.css阻塞了DOM的渲染, 所以在bootstrap.css加载解析完成前, 我们看不到h1标签内的内容, 因为CSS阻塞了DOM的渲染.

 <head>    <!-- style.css  h1 {color: red;} -->    <link rel="stylesheet" href="style.css"> </head> <body>    <h1>我是红色的</h1>    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">    <!-- test.js console.log('hi')} -->    <script src="test.js"></script>    <!-- style2.css  h1 {color: blue;} -->    <link href="style2.css" rel="stylesheet">  </body>

但是并不是说只要bootstrap.css没加载好, DOM就不能渲染, 浏览器有自己的优化机制,如下例子

 <head>    <!-- style.css  h1 {color: red;} -->    <link rel="stylesheet" href="style.css"> </head> <body>    <h1>我是红色的</h1>    <!-- test.js console.log('hi')} -->    <script src="test.js"></script>    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.css" rel="stylesheet">    <!-- style2.css  h1 {color: blue;} -->    <link href="style2.css" rel="stylesheet">  </body>

代码2结果1
图1
代码2结果2
图2
代码2结果3
图3 完全加载好, bootstrap.css 去掉了h1的margin 等

结果如上图, 虽然bootstrap.css 没有加载好,但是浏览器已经渲染出了页面, style2.css加载完成后,它的画面也渲染出来了(个人感觉这是浏览器自己的优化机制), CSS会阻塞DOM的渲染这个观点感觉怪怪的, 的确CSSOM没有构建好, 页面不会渲染, 但是并不是要页面所有的css全部加载好, 才会去渲染页面,这还得看css link 的位置(可能和浏览器优化有关).

第二点

JS会阻塞DOM的解析和渲染, 指JS阻塞script标签后面内容的解析和渲染

第三点

JS会等待CSSOM, 应该是指JS会等待script之前的CSSOM,即需要loading parse CSS(异步加载可以不必等待CSSOM, 如async标签 )

总结

其实写一点小测试, 来揣摩浏览器的渲染机制就像是盲人摸象, 上面这3点, 暂时觉得没问题, 除了第一点中CSS会阻塞DOM的渲染感觉怪怪的,

参考文献

http://www.fangbinwei.cn/articleDetail?id=5a3a1cfc0e43264834ec5897
https://segmentfault.com/a/1190000004292479
https://segmentfault.com/a/1190000007766425
https://zhuanlan.zhihu.com/p/29418126
https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_order_of_processing_scripts_and_style_sheets
https://juejin.im/post/59c60691518825396f4f71a1
https://yq.aliyun.com/articles/4049
https://www.zhihu.com/question/61309490
https://www.cnblogs.com/chenjg/p/7126822.html

阅读全文

0 0