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

推荐订阅源

博客园 - 叶小钗
D
Darknet – Hacking Tools, Hacker News & Cyber Security
S
SegmentFault 最新的问题
博客园 - 三生石上(FineUI控件)
雷峰网
雷峰网
WordPress大学
WordPress大学
有赞技术团队
有赞技术团队
博客园 - 【当耐特】
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
V
V2EX
V
Visual Studio Blog
酷 壳 – CoolShell
酷 壳 – CoolShell
博客园 - 聂微东
P
Proofpoint News Feed
Last Week in AI
Last Week in AI
U
Unit 42
W
WeLiveSecurity
博客园 - Franky
Recent Announcements
Recent Announcements
Hacker News - Newest:
Hacker News - Newest: "LLM"
Attack and Defense Labs
Attack and Defense Labs
月光博客
月光博客
The Cloudflare Blog
Spread Privacy
Spread Privacy
腾讯CDC
P
Privacy International News Feed
N
News and Events Feed by Topic
AWS News Blog
AWS News Blog
NISL@THU
NISL@THU
T
Troy Hunt's Blog
小众软件
小众软件
K
KPMG report finds enterprise disconnect between AI and its ROI | CIO
Microsoft Security Blog
Microsoft Security Blog
L
Lohrmann on Cybersecurity
Webroot Blog
Webroot Blog
Y
Y Combinator Blog
量子位
P
Palo Alto Networks Blog
N
News and Events Feed by Topic
V
Vulnerabilities – Threatpost
K
Kaspersky official blog
IT之家
IT之家
T
Threat Research - Cisco Blogs
Cloudbric
Cloudbric
云风的 BLOG
云风的 BLOG
C
Check Point Blog
Blog — PlanetScale
Blog — PlanetScale
爱范儿
爱范儿
G
Google Developers Blog
S
Secure Thoughts

博客园 - 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资源一直没响应,那页面会事怎样呢?这个留个作业,可以自己试试,有结果了给我留言吧。