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

时间 2019-11-06

标签前端工程师手册 css 阻塞页面 dom 解析 javascript 栏目 CSS 繁體版

原文原文链接

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

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

首先说结论：

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

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

defer和async

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

defer

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

async

设置了async的script外链文件，在下载js文件期间不会阻塞HTML的解析，可是js下载完毕以后就会当即执行，不管如今HTML是否正在解析。浏览器

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

Css为何要放在HTML文档的<head>标签内

Css阻塞渲染

首先说结论：

对于一个HTML文档来讲，无论是内联仍是外链的css，都会阻碍后续的dom渲染，可是不会阻碍后续dom的解析。

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

怎么优化

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