专栏首页前端逗逗飞CSS到底会不会阻塞页面渲染

CSS到底会不会阻塞页面渲染

可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我们就一起来分析一下。

原理解析

那么为什么会出现上面的现象呢?我们从浏览器的渲染过程来解析下。 不同的浏览器使用的内核不同,所以他们的渲染过程也是不一样的。目前主要有两个

  • webkit渲染过程
  • Gecko渲染过程

从上面两个流程图我们可以看出来,浏览器渲染的流程如下:

  • HTML解析文件,生成DOM Tree,解析CSS文件生成CSSOM Tree
  • 将Dom Tree和CSSOM Tree结合,生成Render Tree(渲染树)
  • 根据Render Tree渲染绘制,将像素渲染到屏幕上。

从流程我们可以看出来

  • DOM解析和CSS解析是两个并行的进程,所以这也解释了为什么CSS加载不会阻塞DOM的解析。
  • 然而,由于Render Tree是依赖于DOM Tree和CSSOM Tree的,所以他必须等待到CSSOM Tree构建完成,也就是CSS资源加载完成(或者CSS资源加载失败)后,才能开始渲染。因此,CSS加载是会阻塞Dom的渲染的。
  • 由于js可能会操作之前的Dom节点和css样式,因此浏览器会维持html中css和js的顺序。因此,样式表会在后面的js执行前先加载执行完毕。所以css会阻塞后面js的执行。

DOMContentLoaded

对于浏览器来说,页面加载主要有两个事件,一个是DOMContentLoaded,另一个是onLoad。而onLoad没什么好说的,就是等待页面的所有资源都加载完成才会触发,这些资源包括css、js、图片视频等。

而DOMContentLoaded,顾名思义,就是当页面的内容解析完成后,则触发该事件。那么,正如我们上面讨论过的,css会阻塞Dom渲染和js执行,而js会阻塞Dom解析。那么我们可以做出这样的假设

  • 当页面只存在css,或者js都在css前面,那么DomContentLoaded不需要等到css加载完毕。
  • 当页面里同时存在css和js,并且js在css后面的时候,DomContentLoaded必须等到css和js都加载完毕才触发。

我们先对第一种情况做测试:


 
 css阻塞
 
 
 
 document.addEventListener('DOMContentLoaded', function() {
 console.log('DOMContentLoaded');
 })![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d30219afd9e84bc99875991b7d284435~tplv-k3u1fbpfcp-zoom-1.image)

![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87519598e6484ec38db8daed23f586c9~tplv-k3u1fbpfcp-zoom-1.image)
 
 
 
 
 

实验结果如下图: 从动图我们可以看出来,css还未加载完,就已经触发了DOMContentLoaded事件了。因为css后面没有任何js代码。

接下来我们对第二种情况做测试,很简单,就在css后面加一行代码就行了


 
 css阻塞
 
 
 
 document.addEventListener('DOMContentLoaded', function() {
 console.log('DOMContentLoaded');
 })
 
 
 
 console.log('到我了没');
 
 
 
 

我们可以看到,只有在css加载完成后,才会触发DOMContentLoaded事件。因此,我们可以得出结论:

  • 如果页面中同时存在css和js,并且存在js在css后面,则DOMContentLoaded事件会在css加载完后才执行。
  • 其他情况下,DOMContentLoaded都不会等待css加载,并且DOMContentLoaded事件也不会等待图片、视频等其他资源加载。

总结

由上所述,我们可以得出以下结论:

  • css加载不会阻塞DOM树的解析
  • css加载会阻塞DOM树的渲染
  • css加载会阻塞后面js语句的执行

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

  • 使用CDN(因为CDN会根据你的网络状况,替你挑选最近的一个具有缓存内容的节点为你提供资源,因此可以减少加载时间)
  • 对css进行压缩(可以用很多打包工具,比如webpack,gulp等,也可以通过开启gzip压缩)
  • 合理的使用缓存(设置cache-control,expires,以及E-tag都是不错的,不过要注意一个问题,就是文件更新后,你要避免缓存而带来的影响。其中一个解决防范是在文件名字后面加一个版本号)
  • 减少http请求数,将多个css文件合并,或者是干脆直接写成内联样式(内联样式的一个缺点就是不能缓存)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 浏览器的渲染阻塞

    浏览器渲染的步骤 (1)浏览器解析HTML标记去构造DOM树(DOM = Document Object Model 文档对象模型) (2)解析CSS去构造...

    dys
  • 浏览器加载解析渲染机制的全面解析

    (注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

    love丁酥酥
  • 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。

    周陆军
  • 再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

    浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。

    周陆军
  • 桌面端前端性能优化策略

    例如同一个域名 CDN 服务器上的 a.js,b.js,c.js 就可以按如下方式在一个请求中下载:

    laixiangran
  • 前端优化--阻塞渲染的CSS

    默认情况下,CSS 被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕。请务必精简您的 CSS,尽快提供它,并利用媒体类...

    奋飛
  • 前端性能优化——桌面浏览器前端优化策略

    作者:ouven https://my.oschina.net/zhangstephen/blog/1601382 摘要: 前端性能优化是一个很宽泛的概念,本书...

    企鹅号小编
  • css加载会造成阻塞吗

    可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试...

    嘿嘿嘿
  • css加载会造成阻塞吗

    可能大家都知道,js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?接下来,我就来对css加载对DOM树的解析和渲染的影响做一个测试...

    Nealyang
  • 【总结】关于 JS 与 CSS 是否阻塞 DOM 的渲染和解析

    最近系统梳理HTML5所有涉及到的标签时,梳理至<link>和<script>标签时,碰巧想到一个困扰很久的问题,即一般把<script>放在<body>尾部,...

    pingan8787
  • JS 与 CSS 阻塞 DOM 渲染解析的情况详解

    最近系统梳理HTML5所有涉及到的标签时,梳理至<link>和<script>标签时,碰巧想到一个困扰很久的问题,即一般把<script>放在<body>尾部,...

    winty
  • 【云+社区年度征文】面试官问我Chrome浏览器的渲染原理(6000字长文)

    对于HTML,css和JavaScript是如何变成页面的,这个问题你了解过吗?浏览器究竟在背后都做了些什么事情呢?让我们去了解浏览器的渲染原理,是通往更深层次...

    达达前端
  • 前端不止:Web性能优化 - 关键渲染路径以及优化策略

    我问你:“当你从搜索引擎的结果页面选择打开一条搜索结果时,你觉得多长时间之后,如果页面还处于白屏或者没有加载到关键信息,你会选择关掉这个窗口?”

    ThoughtWorks
  • 浏览器渲染原理及流程

    大多数设备的刷新频率是60Hz,也就说是浏览器对每一帧画面的渲染工作要在16ms内完成,超出这个时间,页面的渲染就会出现卡顿现象,影响用户体验。前端的用户体验给...

    前端迷
  • 浏览器原理学习笔记05—浏览器中的页面渲染

    DOM 是表述 HTML 的内部数据结构,它会将 Web 页面和 JavaScript 脚本连接起来,并过滤一些不安全的内容。HTML 解析器 (HTMLPar...

    CS逍遥剑仙
  • js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗

    为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度(会用的可直接跳过) 1.打开chrome控制台(按下F12),可以看到下图,重点在我画红圈的...

    yuezhongbao
  • 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

    原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者:...

    iKcamp
  • 探究网页资源究竟是如何阻塞浏览器加载的

    一个页面允许加载的外部资源有很多,常见的有脚本、样式、字体、图片和视频等,对于这些外部资源究竟是如何影响整个页面的加载和渲染的呢?今天我们来一探究竟。

    用户4456933
  • Script标签的async和defer

    之前有写过HTML页面渲染过程,知道了JavaScript是会阻塞DOM解析的,所以我们会把script标签放到底部防止阻塞HTML解析。其实script还有两...

    wade

扫码关注云+社区

领取腾讯云代金券