本页目录

HTML渲染那些事-结论

JavaScript 到底会不会阻塞你的页面渲染？

当JS为内联的情况下，是会阻塞页面渲染的。
当JS为外链的情况（不考虑async和defer的情况），分为两种情况，第一种放在head中，会阻塞页面渲染，第二种放在body底部，不会阻塞页面渲染（也就是FP）。

自己实验的情况下，只要JS标签前面有div等一些可视内容，FP就会在JS执行前，否则就在JS执行后。

CSS 到底会不会阻塞你的页面渲染？

CSS不会阻塞DOM解析，但是会阻塞页面渲染，因为render tree需要DOM树和CSSOM树。
一种特殊情况，当CSS后面有JS标签（不考虑async, defer），会阻塞DOM解析，因为CSS会阻塞JS执行，JS会阻塞DOM，所以看上去就是CSS阻塞DOM解析。

CSS会阻塞JS执行是因为JS代码里面可能会操作CSS，导致不一致的问题，和JS阻塞DOM解析类似。