本文已参与『新人创作礼』活动，一起开启掘金创作之路
持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第22天，点击查看活动详情
简介
- Css加载不会阻塞
DOM树的解析 - Css加载会阻塞
DOM树的渲染 - Css加载会阻塞后面
javascript语句的执行
渲染过程
- DOM树的解析和CSSOM树的解析过程是并发进行的，所以这就是为什么CSS的加载不会阻塞DOM树的解析
- 然而
Render树是依赖于DOM树和CSSOM树结合生成的，所以他必须等待CSSOM树构建完成才可以，才会开始渲染，所以CSS加载会阻塞DOM渲染 - 由于javascript可能会操作
DOM样式和Css样式，因此浏览器会维持HTML中Css和javaScript顺序；因此，样式表会在后面的javaScript执行前先加载执行完毕，所以css会阻塞后面js的执行
DOMContentLoaded事件
IE6、IE7不支持DOMContentLoaded，但它支持onreadystatechange事件，该事件的目的是提供与文档或元素的加载状态有关的信息。
- 页面加载主要有两个事件 DOMContentLoaded 和onLoad
- onLoad: 等待页面全部资源 加载完成 后才会触发
- DOMContLoaded: 页面内容 解析完成 后触发
DOMContentLoaded结论
-
如果页面同时存在
Css和javaScript，并且存在javaScript在Css后面，则DOMContentLoaded事件会在Css加载完后才执行。 -
其他情况DOMContentLoaded都不会等待
Css加载，并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。
优化
- 使用CDN(因为CDN会根据你的网络状况，替你挑选最近的一个具有缓存内容的节点为你提供资源，因此可以减少加载时间)
- 对CSS进行压缩(webpack,gulp等等)
- 使用缓存
- 减少
HTTP请求，多个Css文件合并 javaScript引入放在页面底部，保证了兼容性的同时没有让脚本的加载阻塞到HTML的解析，减少了白屏时间。
文章有错误或者遗漏地方的小伙伴可以在评论区评论哦~
