《浏览器工作原理与实践》笔记之CSS、JS阻塞DOM合成场景分析
《浏览器工作原理与实践》笔记之CSS、JS阻塞DOM合成场景分析
当从服务器接收HTML页面的第一批数据时，DOM解析器就开始工作了。
-
我们先看第一种情况在解析过程中，如果遇到了JS脚本，如下所示：
<html> <body> 极客时间 <script> document.write("--foo") </script> </body> </html>那么DOM解析器会先执行JavaScript脚本，执行完成之后，再继续往下解析。
-
第二种情况复杂点了，上述解析过程中内联的JS脚本替换成JS外部文件，如下所示：
<html> <body> 极客时间 <script type="text/javascript" src="foo.js"></script> </body> </html>这种情况下，当解析到JavaScript的时候，会先暂停DOM解析，并下载foo.js文件，下载完成之后执行该段JS文件，然后再继续往下解析DOM。这就是JavaScript文件为什么会阻塞DOM渲染。
-
再看第三种情况，还是看下面代码：
<html> <head> <style type="text/css" src = "theme.css" /> </head> <body> <p>极客时间</p> <script> let e = document.getElementsByTagName('p')[0] e.style.color = 'blue' </script> </body> </html>当我在JavaScript中访问了某个元素的样式，那么这时候就需要等待这个样式被下载完成才能继续往下执行，所以在这种情况下，CSS也会阻塞DOM的解析。
所以JS和CSS都有可能会阻塞DOM解析。
- 分类：
- Web前端
相关文章
完美取消simlple-m主题的首页伸缩效果
你可能不喜欢 取消simlple-m主题的首页伸缩效果 里面的方法，毕竟那个方法有弊端，但是很方便。 我们知道，在simple-m主题的header.php文件里面加载了jquery.min.1 阅读更多…
分享个儿时的90坦克javascript版
效果图如下 首先是主页面tanke.php [code lang="php"] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 阅读更多…
用div+css模拟类excel表格对角线（斜线）
我们先看html代码吧 <table> <caption>用div+css模拟类excel表格对角线（斜线）</caption> <t 阅读更多…
searchpath让你的网站在当前直接显示搜索结果
每一个网站都应该有搜索功能吧，是不是厌烦了在输入搜索词回车后跳转到另一个页面了啊，呵呵，如果你喜欢很酷的显示方式，并且数据量也不是特别大，那么现在就有一个很简单的解决方案哦。 还支持“显示 阅读更多…
前端如何用一行代码将网站置灰
在悲伤的日子里，很多大型网站会把网站整体置灰，或者把首页置灰，怎么做到的呢，肯定不是一个一个来设置，只用在外层容器上加个css即可。 html { filter: grayscale( 阅读更多…
让你的favicon以饼状图显示加载进度
Piecon 是一个用来实现在你的网站的 favicon 上显示进度消息的一个小型 js 库。 基本用法： [code] Piecon.setProgress(12); 阅读更多…
