资讯专栏INFORMATION COLUMN

css加载会不会造成文档解析阻塞

warkiz / 1730人阅读

摘要:其中一个解决防范是在文件名字后面加一个版本号减少请求数,将多个文件合并,或者是干脆直接写成内联样式内联样式的一个缺点就是不能缓存

ss加载不会阻塞DOM树的解析

css加载会阻塞DOM树的渲染

css加载会阻塞后面js语句的执行、

因此,为了避免让用户看到长时间的白屏时间,我们应该尽可能的提高css加载速度,比如可以使用以下几种方法:

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

对css进行压缩(可以用很多打包工具,比如webpack,gulp等,也可以通过开启gzip压缩)

合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的,不过要注意一个问题,就是文件更新后,你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)

减少http请求数,将多个css文件合并,或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/114967.html

相关文章

  • 根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘(repaints)与回流(reflows)

    摘要:渲染阻塞在浏览器进行加载时,其实是并行加载所有资源。则就叫称为重绘。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 前面有讲到当用户在浏览器输入url之后,经过一系列的过程,会最终向服务器请求到文档数据,文档数据请求到之后,浏览器会将这些数据传给浏览器渲染引擎,渲染引擎开始正式工作了。 构建...

    phodal 评论0 收藏0
  • 根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘(repaints)与回流(reflows)

    摘要:渲染阻塞在浏览器进行加载时,其实是并行加载所有资源。则就叫称为重绘。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 前面有讲到当用户在浏览器输入url之后,经过一系列的过程,会最终向服务器请求到文档数据,文档数据请求到之后,浏览器会将这些数据传给浏览器渲染引擎,渲染引擎开始正式工作了。 构建...

    daryl 评论0 收藏0
  • 根据浏览器渲染界面原理理解渲染阻塞、浏览器的重绘(repaints)与回流(reflows)

    摘要:渲染阻塞在浏览器进行加载时,其实是并行加载所有资源。则就叫称为重绘。在回流的时候,浏览器会使渲染树中受到影响的部分失效,并重新构造这部分渲染树,完成回流后,浏览器会重新绘制受影响的部分到屏幕中,该过程成为重绘。 前面有讲到当用户在浏览器输入url之后,经过一系列的过程,会最终向服务器请求到文档数据,文档数据请求到之后,浏览器会将这些数据传给浏览器渲染引擎,渲染引擎开始正式工作了。 构建...

    ranwu 评论0 收藏0
  • css加载造成阻塞吗?

    摘要:加载会阻塞运行吗由上面的推论,我们可以得出,加载不会阻塞树解析,但是会阻塞树渲染。这也就说明了,加载会阻塞后面的语句的执行。因此,加载是会阻塞的渲染的。 之前面试今日头条的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。 为了完成本次测试,先来科普一下,如何利用ch...

    URLOS 评论0 收藏0
  • css加载造成阻塞吗?

    摘要:加载会阻塞运行吗由上面的推论,我们可以得出,加载不会阻塞树解析,但是会阻塞树渲染。这也就说明了,加载会阻塞后面的语句的执行。因此,加载是会阻塞的渲染的。 之前面试今日头条的时候,今日头条面试官问我,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。 为了完成本次测试,先来科普一下,如何利用ch...

    quietin 评论0 收藏0

发表评论

0条评论

warkiz

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<