【前端工程师手册】css会阻塞页面dom解析吗？javascript呢？

malakashi 发布于2019-08-23 11:28 / 2915人阅读

摘要：设置了的外链文件，在下载文件期间不会阻塞的解析，但是下载完毕之后就会立即执行，无论现在是否正在解析。怎么优化因为的解析会阻塞页面的渲染，为了让页面尽早的呈现处理，那么就要避免一些无用的文件。

总结一下这几个经典问题。

JavaScript为什么要放在HTML文档的底部？

首先说结论：

不论是内联还是外链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是否正在解析。

从图可以更直观的看出区别（图片来自https://harttle.land/2016/05/...）：

Css为什么要放在HTML文档的标签内 Css阻塞渲染

首先说结论：

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

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

怎么优化

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

云服务器混合云前端工程师需要会什么 web前端工程师需要会什么前端页面工程师页面前端工程师

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

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

【前端工程师手册】css会阻塞页面dom解析吗？javascript呢？

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

XUI 2019-08-29 16:30 评论0 收藏0
DOM操作成本到底高在哪儿？

摘要：刨根问底，这里说的成本，到底高在哪儿呢什么是文档对象模型什么是可能很多人第一反应就是等标签至少我是，但要知道，是，是，对象模型，是为提供的。操作具体的成本，说到底是造成浏览器回流和重绘，从而消耗资源。从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是React、vue等MV*框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便...

yuxue 2019-08-22 15:51 评论0 收藏0
DOM操作成本到底高在哪儿？

摘要：刨根问底，这里说的成本，到底高在哪儿呢什么是文档对象模型什么是可能很多人第一反应就是等标签至少我是，但要知道，是，是，对象模型，是为提供的。操作具体的成本，说到底是造成浏览器回流和重绘，从而消耗资源。从我接触前端到现在，一直听到的一句话：操作DOM的成本很高，不要轻易去操作DOM。尤其是React、vue等MV*框架的出现，数据驱动视图的模式越发深入人心，jQuery时代提供的强大便...

MASAILA 2019-08-02 10:04 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

church 2019-08-02 16:18 评论0 收藏0
前端开发者手册2019

摘要：年，和前端开发者与应用程序前端开发者之间产生了巨大的分歧。开发最常见的解决方案有手机和平板的原生应用程序桌面应用程序桌面应用程序原生技术最后，前端开发者可以从浏览器开发中学习到，编写代码不需要考虑浏览器引擎的限制。前端开发者手册2019 Cody Lindley 编著原文地址本手册由Frontend Masters赞助，通过深入现代化的前端工程课程来提高你的技能。下载：PDF ...

xiao7cn 2019-08-26 13:47 评论0 收藏0