资讯专栏INFORMATION COLUMN

JavaScript是否阻塞解析

brianway / 3146人阅读

摘要:设置了的外链文件,在下载文件期间不会阻塞的解析,但是下载完毕之后就会立即执行,无论现在是否正在解析。使用媒体查询可以让文件只在必要的时候解析,进而避免不必需的渲染阻塞,加快页面呈现时间

不论是内联还是外链js都会阻塞后续dom的解析和渲染

如果把JavaScript放在页面顶部,下载和解析JavaScript的时间里面,dom迟迟得不到解析和渲染,浏览器一直处于白屏,所以把JavaScript文件放在页面底部更有利于页面快速呈现。

defer和async
首先,async和defer对于内联JavaScript都是无效的

defer

设置了defer的script外链文件,在下载js文件期间不会阻塞HTML的解析,而且等js下载完毕时若HTML还没解析完毕,js会等到HTML文档解析完毕后再执行。如果有多个js下载文件,那么执行时也是按照顺序执行。

async

设置了async的script外链文件,在下载js文件期间不会阻塞HTML的解析,但是js下载完毕之后就会立即执行,无论现在HTML是否正在解析。defer和async
首先,async和defer对于内联JavaScript都是无效的
https://segmentfault.com/img/...

Css为什么要放在HTML文档的标签内
Css阻塞渲染
首先说结论:

对于一个HTML文档来说,不管是内联还是外链的css,都会阻碍后续的dom渲染,但是不会阻碍后续dom的解析。

如果把css文件引用放在HTML文档的底部,浏览器为了防止无样式内容闪烁,会在css文件下载并解析完毕之前什么都不显示,这也就会造成白屏现象。(但是在firefox浏览器中测试,会出现样式闪烁,这也算是不同浏览器的权衡吧,要么等css全解析完一起显示,要么先显示然后css解析完再重新画上新样式)
当css文件放在中时,虽然css解析也会阻塞后续dom的渲染,但是在解析css的同时也在解析dom,所以等到css解析完毕就会逐步的渲染页面了。

怎么优化
因为Css的解析会阻塞页面的渲染,为了让页面尽早的呈现处理,那么就要避免一些无用的css文件。
使用媒体查询可以让css文件只在必要的时候解析,进而避免不必需的渲染阻塞,加快页面呈现时间

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114966.html

相关文章

  • JavaScript是否阻塞解析

    摘要:设置了的外链文件,在下载文件期间不会阻塞的解析,但是下载完毕之后就会立即执行,无论现在是否正在解析。使用媒体查询可以让文件只在必要的时候解析,进而避免不必需的渲染阻塞,加快页面呈现时间 不论是内联还是外链js都会阻塞后续dom的解析和渲染 如果把JavaScript放在页面顶部,下载和解析JavaScript的时间里面,dom迟迟得不到解析和渲染,浏览器一直处于白屏,所以把JavaSc...

    jindong 评论0 收藏0
  • 【前端工程师手册】css会阻塞页面dom解析吗?javascript呢?

    摘要:设置了的外链文件,在下载文件期间不会阻塞的解析,但是下载完毕之后就会立即执行,无论现在是否正在解析。怎么优化因为的解析会阻塞页面的渲染,为了让页面尽早的呈现处理,那么就要避免一些无用的文件。 总结一下这几个经典问题。 JavaScript为什么要放在HTML文档的底部? 首先说结论:不论是内联还是外链js都会阻塞后续dom的解析和渲染如果把JavaScript放在页面顶部,下载和解析J...

    XUI 评论0 收藏0
  • 【前端工程师手册】css会阻塞页面dom解析吗?javascript呢?

    摘要:设置了的外链文件,在下载文件期间不会阻塞的解析,但是下载完毕之后就会立即执行,无论现在是否正在解析。怎么优化因为的解析会阻塞页面的渲染,为了让页面尽早的呈现处理,那么就要避免一些无用的文件。 总结一下这几个经典问题。 JavaScript为什么要放在HTML文档的底部? 首先说结论:不论是内联还是外链js都会阻塞后续dom的解析和渲染如果把JavaScript放在页面顶部,下载和解析J...

    malakashi 评论0 收藏0
  • 浏览器渲染机制

    摘要:修改浏览器渲染因为的阻塞使得解析停止,下载完成之前,页面无法显示任何东西。浏览器渲染解析到文件时出现阻塞。我们把调整到尾部浏览器渲染这是页面可以渲染了,但是没有样式。 本文示例源代码请戳github博客,建议大家动手敲敲代码。 前言 浏览器渲染页面的过程 从耗时的角度,浏览器请求、加载、渲染一个页面,时间花在下面五件事情上: DNS 查询 TCP 连接 HTTP 请求即响应 服务器响...

    FullStackDeveloper 评论0 收藏0
  • 浏览器渲染机制

    摘要:修改浏览器渲染因为的阻塞使得解析停止,下载完成之前,页面无法显示任何东西。浏览器渲染解析到文件时出现阻塞。我们把调整到尾部浏览器渲染这是页面可以渲染了,但是没有样式。 本文示例源代码请戳github博客,建议大家动手敲敲代码。 前言 浏览器渲染页面的过程 从耗时的角度,浏览器请求、加载、渲染一个页面,时间花在下面五件事情上: DNS 查询 TCP 连接 HTTP 请求即响应 服务器响...

    gougoujiang 评论0 收藏0

发表评论

0条评论

brianway

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<