css不为人知的性能问题

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

1.rel="preload"

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

<link as=style href=/css/app.f60416c7.css rel=preload>
<link as=script href=/js/app.69189fdd.js rel=preload>

预加载有哪些好处：

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 :class="$style.button" />

</template>

<style module>

  .button { color: red}

</style>

编译之后：

<style>

  .ComponentName__button__2Kxy {color: red;}

</style>

<button class=”ComponentName__button__2Kxy”></button>

相比于scoped优点

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

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

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

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

<template>
  <div>{{ $style.primaryColor }}</div> <!-- #B4DC47 -->
</template>

<style module lang="scss">
  $primary-color: #B4DC47;
  
  :export {
    primaryColor: $primary-color
  }
</style>