css不为人知的性能问题

布满荆棘的人生 2022-04-08 10:49 262阅读 0赞

首先明确 css是页面渲染的的关键因素之一，浏览器会等到外链css全部下载以及解析完成以后才会渲染页面，也就是同步加载。所以加载**最慢的样式表的时间决定页面渲染的时间**

**1.rel="preload"**

如果你已经使用过vue-cli3来生成项目，就会发现在打包以后index.html里面的有这种用法

预加载有哪些好处：

1.  让浏览器提前加载指定资源，在需要执行的时候再执行，加载与执行分开，不阻塞渲染和window.onload事件
2.  提前加载指定资源，比如字体文件，避免出现页面已经渲染完成才加载完成，页面字体闪一下才变成预期字体
3.  可以自定义资源加载完成后的回调函数

其他有关用法有兴趣可以自行百度

**2.尽量避免使用@import**

在html文件尤其css文件避免使用@import

@import是在网页完全载入后才加载，在关键路径上创造了更多的网络请求，阻塞渲染时间，影响浏览器的并行下载，多个@import导致下载顺序紊乱。不过如果是scss或者less并且使用webpack打包的话并不影响，因为最终都会编译到一个css文件中

**3.关于css和JavaScript的加载顺序**

一般来说可能更多人习惯把link放在body之前 script放在之后

如果js文件不依赖css的话 完全可以将其放在css文件之前，然后异步加载，至于使用sync还是defer，具体看脚本之间的依赖关系

1.脚本之间没有依赖关系的，使用sync

2.脚本之间有依赖关系的，使用defer

3.若同时使用sync和defer，defer不起作用，sync生效

但是两个属性都无法保证脚本的执行顺序，哪个脚本先下载完毕，就先执行哪个，并且添加属性的script标签脚本文件里不能使用document.write方法。脚本文件里的script标签，以及动态生成的script标签，defer属性将不会生效

4. **css样式复杂度**

前面几点主要是通过文件加载顺序来达到性能优化，本身css代码的复杂度也是会影响加载速度，这里具体分析一下scoped css 和css modules(模块式 CSS)

scoped在之前的文章中已经说到过，总得来说，通过增加css样式的复杂度来实现组件化样式

模块化css：

</template>

.button \{ color: red\}

</style>

编译之后：

<style>

.ComponentName\_\_button\_\_2Kxy \{color: red;\}

</style>

**相比于scoped优点**

1当我们在 HMTL 中查看这个元素时我们可以立刻知道它所属的是哪个组件；

2.一切都变成显式的了，我们拥有了彻底的控制权——不会再有什么奇怪的现象了。和 scoped 样式那种把普通的标签也加上那些 data 属性的做法不一样，这些普通标签在转换后还是最初的样子。

3.所有的 CSS 类可以通过 `$style` 对象获取到，所以我们可以通过 props 将这些类传递到任何我们希望的深度中，这样，在子组件中的任意位置使用这些类就会变得极其容易

4.可以用 JS 获取到我们定义的一些变量

<template>  
  <div>\{ \{ $style.primaryColor \}\}</div>   
</template>

还没有评论，来说两句吧...