前端渲染优化-css资源加载

2019-08-01

在日常网站开发中,我们会使用link来加载外部的css样式文件,然而css的加载会阻塞页面的渲染,直到资源加载完成并等待CSSOM构建完成,所以在使用外部的css文件的时候,尽量移除不需要使用的css代码,如果网站需要自适应,可以通过媒体查询来加载对应的文件内容。

浏览器会下载所有 CSS 资源,无论阻塞还是不阻塞。

一个简单的例子

上例展示了纽约时报网站使用和不使用 CSS 的显示效果,它证明了为何要在 CSS 准备就绪之前阻塞渲染,没有 CSS 的网页实际上无法使用。右侧的情况通常称为“内容样式短暂失效”(FOUC)。浏览器将阻塞渲染,直至 DOM 和 CSSOM 全都准备就绪。

CSS 是阻塞渲染的资源。需要将它尽早、尽快地下载到客户端,以便缩短首次渲染的时间。

开发注意

用户移动端浏览网页的时候,可能不需要pc端的样式,可以通过媒体查询来告诉浏览器只处理 mobile.css 的样式资源

<!-- 不使用媒体查询,所有页面都能加载 -->
<link href="style.css" rel="stylesheet">
<!-- 只在打印内容的时候加载 -->
<link href="print.css" rel="stylesheet" media="print">
<!-- 只在屏幕小于750px的时候加载 -->
<link href="mobile.css" rel="stylesheet" media="(max-width: 750px)">

请注意“阻塞渲染”仅是指浏览器是否需要暂停网页的首次渲染,直至该资源准备就绪。无论哪一种情况,浏览器仍会下载 CSS 资源,只不过不阻塞渲染的资源优先级较低罢了。

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: css3

评论

Loading...

最新评论

相关推荐

css sticky失效原因
css sticky定义 position:sticky 定义元素为粘性定位元素,根据正常文档流进行定位,然后相对它的...
真机h5页面调试工具weinre
weinre是什么 weinre是网页远程审查工具,可以在pc端调试真机的浏览器页面,但是不能用来调试js wein...
css高性能动画
浏览器渲染流程 要优化动画性能,首先要了解浏览器是如何进行元素渲染的,浏览器的渲染流程有以下三步 计算元素的样式...
scroll-top-icon