css加载会造成阻塞吗?

js履行会堵塞DOM树的解析和烘托,那么css加载会堵塞DOM树的解析和烘托吗?所以,接下来我就来对css加载对DOM树的解析和烘托做一个测验。

为了完结本次测验,先来科普一下,怎么运用chrome来设置下载速度

翻开chrome控制台(按下F12),能够看到下图,重点在我画红圈的当地

2. 点击我画红圈的当地(No throttling),会看到下图,咱们选择GPRS这个选项

3. 这样,咱们对资源的下载速度上限就会被限制成20kb/s,好,那接下来就进入咱们的正题

css加载会堵塞DOM树的解析烘托吗?

用代码说话:

css堵塞

这是赤色的

假定: css加载会堵塞DOM树解析和烘托

假定下的成果: 在bootstrap.css还没加载完之前,下面的内容不会被解析烘托。那么咱们一开始看到的应该是白屏,h1不会显现出来。而且此刻console.log的成果应该是一个空数组。

实践成果:如下图

css会堵塞DOM树解析?

由上图咱们能够看到,当bootstrap.css还没加载完结的时分,h1并没有显现,可是此刻控制台输出如下

能够得知,此刻DOM树至少现已解析完结到了h1那里,而此刻css还没加载完结,也就阐明,css并不会堵塞DOM树的解析。

css加载会堵塞DOM树烘托?

由上图,咱们也能够看到,当css还没加载出来的时分,页面显现白屏,直到css加载完结之后,赤色字体才显现出来,也就是说,下面的内容尽管解析了,可是并没有被烘托出来。所以,css加载会堵塞DOM树烘托。

个人对这种机制的点评

其实我觉得,这可能也是浏览器的一种优化机制。由于你加载css的时分,可能会修正下面DOM节点的款式,假如css加载不堵塞DOM树烘托的话,那么当css加载完之后,DOM树可能又得从头重绘或许回流了,这就造成了一些没有必要的损耗。所以爽性就先把DOM树的结构先解析完,把能够做的作业做完,然后等你css加载完之后,在依据终究的款式来烘托DOM树,这种做法功能方面的确会比较好一点。

css加载会堵塞js运转吗?

由上面的推论,咱们能够得出,css加载不会堵塞DOM树解析,可是会堵塞DOM树烘托。那么,css加载会不会堵塞js履行呢?

相同,经过代码来验证.

css堵塞

这是赤色的

假定: css加载会堵塞后边的js运转

预期成果: 在link后边的js代码,应该要在css加载完结后才会运转

实践成果:

由上图咱们能够看出,坐落css加载句子前的那个js代码先履行了,可是坐落css加载句子后边的代码迟迟没有履行,直到css加载完结后,它才履行。这也就阐明晰,css加载会堵塞后边的js句子的履行。具体成果看下图(css加载用了5600+ms):

定论

由上所述,咱们能够得出以下定论:

css加载不会堵塞DOM树的解析css加载会堵塞DOM树的烘托css加载会堵塞后边js句子的履行

因而,为了防止让用户看到长期的白屏时刻,咱们应该尽可能的进步css加载速度,比方能够运用以下几种办法:

运用CDN(由于CDN会依据你的网络情况,替你选择最近的一个具有缓存内容的节点为你供给资源,因而能够削减加载时刻)对css进行紧缩(能够用许多打包东西,比方webpack,gulp等,也能够经过敞开gzip紧缩)合理的运用缓存(设置cache-control,expires,以及E-tag都是不错的,不过要注意一个问题,就是文件更新后,你要防止缓存而带来的影响。其间一个处理防备是在文件姓名后边加一个版本号)削减http请求数,将多个css文件兼并,或许是爽性直接写成内联款式(内联款式的一个缺陷就是不能缓存)

以上,就是一切内容。觉得还不错的点个重视哦。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180902A0OTBR00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券