CSS阻塞渲染、怎么防止css阻塞
浏览器渲染流程:
1、浏览器开始解析目标HTML文件,执行流的顺序为自上而下。
2、HTML解析器将HTML结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomContendLoaded事件。
3、CSS解析器将CSS解析为CSSOM(层叠样式表对象模型),一棵仅含有样式信息的树。
4、CSSOM和DOM开始合并构成渲染树,每个节点开始包含具体的样式信息。
5、计算渲染树中个各个节点的位置信息,即布局阶段。
6、将布局后的渲染树显示到界面上。
根据以上的流程,可以知道,当cssdom还没构建完成时,页面是不会渲染到浏览器界面的,这也是为什么当css下载过慢时,会出现白屏的现象。
我们可以模拟白屏的例子,可以看到html文档和img已经下载完成,但是页面并没有渲染,而是等到css加载完成后再渲染出来,这也证实了css加载过程中会阻塞页面的渲染。所以在我们的前端日常开发中,应尽量减少css的响应时间
默认情况下,CSS 被视为阻塞渲染的资源,这意味着浏览器将不会渲染任何已处理的内容,直至 CSSOM 构建完毕。请务必精简您的 CSS,尽快提供它,并利用媒体类型和查询来解除对渲染的阻塞。
在渲染树构建中,我们看到关键渲染路径要求我们同时具有 DOM 和 CSSOM 才能构建渲染树。这会给性能造成严重影响:HTML 和 CSS 都是阻塞渲染的资源。
HTML 显然是必需的,因为如果没有 DOM,我们就没有可渲染的内容,但 CSS 的必要性可能就不太明显。
不过,如果我们有一些 CSS 样式只在特定条件下(例如显示网页或将网页投影到大型显示器上时)使用,又该如何?如果这些资源不阻塞渲染,该有多好。
我们可以通过 CSS“媒体类型”和“媒体查询”来解决这类用例:
<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
媒体查询由媒体类型以及零个或多个检查特定媒体特征状况的表达式组成。
例如,上面的第一个样式表声明未提供任何媒体类型或查询,因此它适用于所有情况,也就是说,它始终会阻塞渲染。第二个样式表则不然,它只在打印内容时适用---或许您想重新安排布局、更改字体等等,因此在网页首次加载时,该样式表不需要阻塞渲染。最后,最后一个样式表声明提供由浏览器执行的“媒体查询”:符合条件时,浏览器将阻塞渲染,直至样式表下载并处理完毕。
通过使用媒体查询,我们可以根据特定用例(比如显示或打印),也可以根据动态情况(比如屏幕方向变化、尺寸调整事件等)定制外观。声明您的样式表资产时,请密切注意媒体类型和查询,因为它们将严重影响关键渲染路径的性能。
让我们考虑下面这些实例:
<link href="style.css" rel="stylesheet">
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">
第一个声明阻塞渲染,适用于所有情况。
第二个声明同样阻塞渲染:“all”是默认类型,如果您不指定任何类型,则隐式设置为“all”。因此,第一个声明和第二个声明实际上是等效的。
第三个声明具有动态媒体查询,将在网页加载时计算。根据网页加载时设备的方向,portrait.css 可能阻塞渲染,也可能不阻塞渲染。
最后一个声明只在打印网页时应用,因此网页首次在浏览器中加载时,它不会阻塞渲染。
最后,请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染,直至该资源准备就绪。无论哪一种情况,浏览器仍会下载 CSS 资产,只不过不阻塞渲染的资源优先级较低罢了。
相关文章
- [转] 使用babel-plugin-react-css-modules简化CSS Modules的使用
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
- 纯 CSS 实现波浪效果!
- 【Css/Html】网页Css默认设计样式载入模板代码body.css
- 前端开发面试题—CSS清除浮动的方法
- 82Vue - CSS动画
- 怎么移除css的hover事件
- 3天学会css视频_PHP初级 CSS教程_CSS入门教程
- CSS(字体相关知识以及css三种样式表使用方法)
- CSS_复习
- 《21天学通HTML+CSS+JavaScript Web开发(第7版)》——2.3 使用Google Chrome 开发者工具
- 《Web前端开发精品课 HTML与CSS进阶教程》——2.5 表单语义化
- 《HTML与CSS入门经典(第8版)》——第2章 发布Web内容2.1 创建用于本章的示例文件
- css选择器里的不同的符号(+,>,~,*)
- [js高手之路]深入浅出webpack教程系列7-( babel-loader,css-loader,style-loader)的用法
- CSS_css sprite原理优缺点及使用
- css Table布局:基于display:table的CSS布局
- CSS 雪碧图
- CSS学习知识整理(六)Css position(定位)、margin 简写
- CSS学习知识整理(五)Css display(显示)
- CSS学习知识整理(一)Css 简介、语法与创建
- CSS学习知识整理(一)Css 布局
- 如何快速掌握CSS(各种CSS工具)
- div+css与table布局
- 在head里的CSS link 竟然粗如今body里了?
- PostCSS received undefined instead of CSS string
- css有趣实用的技巧和一些冷门知识点