惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

阮一峰的网络日志
阮一峰的网络日志
Apple Machine Learning Research
Apple Machine Learning Research
量子位
D
DataBreaches.Net
云风的 BLOG
云风的 BLOG
博客园 - 聂微东
博客园_首页
D
Docker
博客园 - 叶小钗
S
SegmentFault 最新的问题
大猫的无限游戏
大猫的无限游戏
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
J
Java Code Geeks
H
Hackread – Cybersecurity News, Data Breaches, AI and More
A
About on SuperTechFans
博客园 - 三生石上(FineUI控件)
F
Fortinet All Blogs
小众软件
小众软件
aimingoo的专栏
aimingoo的专栏
爱范儿
爱范儿
腾讯CDC
罗磊的独立博客
雷峰网
雷峰网
博客园 - Franky

博客园 - follaw

知识点记录 websocket 入门 30分钟学会JS AST,打造自己的编译器 js 浅拷贝有大用 这么多小程序,会微信小程序就够了 2019年-感谢一路相随 2019年学习以及输出计划 不要让自己的技能沦为大众化 新年福利-领取2019前端学习资料和电子书 事件循环进阶:macrotask与microtask 放弃setInterval-说说定时器 从Event Loop谈JS的运行机制 简单理解下浏览器渲染页面流程 浏览器内核中各个线程之间的关系 Browser进程和浏览器内核(Renderer进程)的通信过程 babel 的一些记录 mac nvm install 小程序云开发补充 浏览器内核-渲染进程
css加载是否会阻塞dom树渲染
follaw · 2018-11-15 · via 博客园 - follaw

这里说的是头部引入css的情况

首先,我们都知道:css是由单独的下载线程异步下载的。

咱们先分析下css加载会影响什么,刚才的问题太笼统了,咱们需要细化一下。

会影响什么呢? 一个就是DOM树解析,一个就是构建渲染树【render树】。

假设都不影响。

这个时候你加载css的时候,很可能会修改下面DOM节点的样式,
如果css加载不阻塞render树渲染的话,那么当css加载完之后,
render树可能又得重新重绘或者回流了,这就造成了一些没有必要的损耗。所以这个假设是不成立得。

另外不影响dom树的解析和构建,本来dom树的解析和构建这一步和css还没有关系,所以根本谈不上影响吧。而且是两个不同的线程,各忙各的呗。

所以干脆就先把DOM树的结构先解析完,把可以做的工作做完,然后等你css加载完之后,
在根据最终的样式来渲染render树,这种做法性能方面确实会比较好一点。

所以我们得出结论

  • css加载不会阻塞DOM树解析(异步加载时DOM照常构建)

  • 但会阻塞render树渲染(渲染时需等css加载完毕,因为render树需要css信息)

这可能也就是浏览器的一种优化机制。

还有一种情况是 css资源一直没响应,那页面会事怎样呢?这个留个作业,可以自己试试,有结果了给我留言吧。