分类
CSS

css加载优化

不参与首屏渲染的css异步加载

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

media=“print”是打印时的css,因此它不会立刻加载,但是我们又希望加载后的css应用于所有屏幕,所以会有onload=”this.media=’all'”

将某一段css提升至很高的优先级

<link rel="preload" href="/path/to/my.css" as="style">

使用的是预加载技术

qi ye wei xin jie tu 16005895378073 1024x591 - css加载优化

根据不同的屏幕分辨率加载不同的css

<link rel="stylesheet" href="index.css" media="all" />
<link rel="stylesheet" href="mobile.css" media="(max-width:44.9375rem)" />
<link rel="stylesheet" href="table.css" media="(min-width: 45rem)" />

不同的页面加载不同的css

这方面vue做的很好,进入一个vue的路由,它将加载该路由下所有组件的style处的css,因此我们可以尝试减少公有的css,将特定使用的css放入组件内。

由zhuishao

github:https://github.com/zhuishao/

发表评论

电子邮件地址不会被公开。 必填项已用*标注