道招

《浏览器工作原理与实践》笔记之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解析。

更新时间:
上一篇:《浏览器工作原理与实践》笔记之渲染流程下一篇:《浏览器工作原理与实践》笔记之JavaScript是如何支持块级作用域的

相关文章

searchpath让你的网站在当前直接显示搜索结果

每一个网站都应该有搜索功能吧,是不是厌烦了在输入搜索词回车后跳转到另一个页面了啊,呵呵,如果你喜欢很酷的显示方式,并且数据量也不是特别大,那么现在就有一个很简单的解决方案哦。 还支持“显示 阅读更多…

分享个儿时的90坦克javascript版

效果图如下 首先是主页面tanke.php [code lang="php"] &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 阅读更多…

js网页特效:星星闪动的标题栏特效

js网页特效:星星闪动的标题栏特效实现此功能其实很简单的。 要完成此效果加入如下代码 title_tmp1 = document.title if (title_tmp1.indexOf("&g 阅读更多…

完美取消simlple-m主题的首页伸缩效果

你可能不喜欢 取消simlple-m主题的首页伸缩效果 里面的方法,毕竟那个方法有弊端,但是很方便。 我们知道,在simple-m主题的header.php文件里面加载了jquery.min.1 阅读更多…

css的margin省略规则

使用margin属性是用来设置对象四边的外边距,如果提供全部四个参数,将按上-右-下-左的顺序作用于四边,即: margin-top margin-right margin-bottom ma 阅读更多…

让你的favicon以饼状图显示加载进度

Piecon 是一个用来实现在你的网站的 favicon 上显示进度消息的一个小型 js 库。 基本用法: [code] Piecon.setProgress(12); 阅读更多…

关注道招网公众帐号
道招开发者二群