浏览器渲染流程总结

214 阅读1分钟

关键渲染路径

developers.google.com/web/fundame…

css加载会造成阻塞吗?

zhuanlan.zhihu.com/p/43282197

解读关键渲染路径

calendar.perfplanet.com/2012/deciph…

上面三篇文章说明了以下内容:

1. domContentLoaded事件会等待cssom和dom都构建完成,处于马上构建渲染树的状态

2. ·cssom和dom的构建是并行的,但如果css文件后面跟着一个js文件,由于JS线程和UI线程是互斥的关系,cssom的构建会阻止js的执行,同时js会阻止dom树的构建,所以在这种情况下,dom的构建会被阻止

3. defer会延迟js的执行,但被defer的文件终将在cssom和dom构建完成后,domContentLoaded之前按照顺序执行

4. async会延迟js的执行,他什么时候下载完什么时候执行,无顺序的,他会在load之前执行完


浏览器预加载器如何使页面加载更快

andydavies.me/blog/2013/1…

使用defer和async有效地加载JavaScript

flaviocopes.com/javascript-…

聊聊 JavaScript 与浏览器的那些事 - 引擎与线程

hijiangtao.github.io/2018/01/08/…

JS 一定要放在 Body 的最底部么?聊聊浏览器的渲染机制

segmentfault.com/a/119000000…

从输入URL到页面加载的过程?

mp.weixin.qq.com/s/PhVJ5aDfT…

css属性是否会触发重排和painting

csstriggers.com/

狙杀页面卡顿 —— Performance 指北

juejin.cn/post/684490…