网创优客建站品牌官网
为成都网站建设公司企业提供高品质网站建设
热线:028-86922220
成都专业网站建设公司

定制建站费用3500元

符合中小企业对网站设计、功能常规化式的企业展示型网站建设

成都品牌网站建设

品牌网站建设费用6000元

本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...

成都商城网站建设

商城网站建设费用8000元

商城网站建设因基本功能的需求不同费用上面也有很大的差别...

成都微信网站建设

手机微信网站建站3000元

手机微信网站开发、微信官网、微信商城网站...

建站知识

当前位置:首页 > 建站知识

CSS加载会阻塞DOM吗

这篇文章主要为大家展示了“CSS加载会阻塞DOM吗”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“CSS加载会阻塞DOM吗”这篇文章吧。

公司主营业务:网站设计、网站建设、移动网站开发等业务。帮助企业客户真正实现互联网宣传,提高企业的竞争能力。成都创新互联公司是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化,感谢他们对我们的高要求,感谢他们从不同领域给我们带来的挑战,让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。成都创新互联公司推出汉阴免费做网站回馈大家。

CSS加载会阻塞DOM吗?

先上结论

  • CSS不会阻塞DOM的解析,但会阻塞DOM的渲染

  • CSS会阻塞JS执行,但不会阻塞JS文件的下载

CSSOM的作用

  • 第一个是提供给JavaScript操作样式表的能力

  • 第二个是为布局树的合成提供基础的样式信息

  • 这个CSSOM体现在DOM中就是document.styleSheets

由之前讲到的浏览器渲染流程我们可以看出:

  • DOM和CSSOM通常是并行构建的,所以CSS加载不会阻塞DOM的解析

  • render树是依赖DOM树和CSSOM树的,所以它必须等到两者都加载完毕才能开始构建渲染,所以CSS加载会阻塞DOM的渲染

  • 由于JavaScript是可以操作DOM与CSS的,如果在修改这些元素属性同时渲染界面(即JavaScript线程与UI线程同时进行),那么渲染线程前后获得的元素可能就不一致了。所以为了防止渲染出现不可预期的结果,浏览器设置GUI渲染线程与JavaScript线程为互斥的关系

JS需要等待CSS的下载,这是为什么呢?(CSS阻塞DOM执行)

如果JS脚本的内容是获取元素的样式,那它就必然依赖CSS。因为浏览器无法感知JS内部到底想干什么,为避免样式获取,就只好等前面所有的样式下载完毕再执行JS。但JS文件与CSS文件下载是并行的,CSS文件会在后面的JS文件执行前先加载执行完毕,所以CSS会阻塞后面JS的执行

避免白屏,提高CSS的加载速度

  • 使用cdn(CDN会根据你的网络状况,挑选最近的一个具有缓存内容的节点为你提供资源,因此可以减少加载时间)

  • 对CSS进行压缩

  • 合理使用缓存

  • 减少http请求数,合并CSS文件

以上是“CSS加载会阻塞DOM吗”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


名称栏目:CSS加载会阻塞DOM吗
文章路径:http://bjjierui.cn/article/pshppg.html

其他资讯