前端学堂
学有所用

页面加载阻塞分析

文章目录[隐藏]

加载阻塞是最常见的问题,了解了HTML解析过程之后,我们也能很好理解有哪些环节会导致页面加载慢。

JS阻塞DOM解析

前面介绍了,JS执行引擎是在渲染进程中的内核线程,和dom解析在同一个线程,执行JS或者同步加载JS都会阻塞DOM解析,当然也阻塞后面没解析到的DOM引用资源的加载。不过现在的浏览器做的都比较智能化,像Chrome会有预解析的过程,会优先分析DOM的外链资源,在浏览器解析DOM时候并行加载。

精心打造全新课程,欢迎吐槽!反馈宝贵意见!

在线视频课程:网易云课堂课程      思否课堂

CSSOM阻塞JS

前面介绍了,JS执行引擎是在渲染进程中的内核线程,和dom解析、CSS解析都在同一个线程,所以当然是互斥的。况且JS也可以随时修改DOM和CSS,所以JS和CSS是交替互斥执行的。重绘、回流的时候会重新构建CSSOM,会导致页面阻塞,影响后续js执行。

参考:

https://developers.google.com/web/fundamentals/performance/critical-rendering-path/adding-interactivity-with-javascript

赞(1) 打赏
一分也是爱,觉得好请我喝杯咖啡吧!前端学堂 » 页面加载阻塞分析

一分也是爱,觉得好请我喝杯咖啡吧!

支付宝扫一扫打赏

微信扫一扫打赏