首先明确 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>
预加载有哪些好处:
- 让浏览器提前加载指定资源,在需要执行的时候再执行,加载与执行分开,不阻塞渲染和window.onload事件
- 提前加载指定资源,比如字体文件,避免出现页面已经渲染完成才加载完成,页面字体闪一下才变成预期字体
- 可以自定义资源加载完成后的回调函数
其他有关用法有兴趣可以自行百度
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>