css性能优化
优化css以减少阻塞渲染并最小化所需的回流次数。
浏览器固定的渲染流程，只有在布局完成后才能进行绘制页面。而布局的前提是生成渲染树，而渲染树的生成则需要DOM和CSSOM树的配合。
如果让用户看到一个没有样式的页面，等css样式解析完成后再重绘，会给用户造成比较差的体验。所以浏览器会等到确定需要CSS再开始渲染，只有在css下载完成并生成css对象模型后，浏览器才开始绘制页面。
为优化cssom构建并提高页面性能，可以根据当前css状态使用以下一项或多项操作进行优化：
1. 删除不必要的css样式：很多时候忘记清楚未被用到的样式，无论是否会被用到，它都会被解析，所以删除不必要样式可以提高性能
2. 将css拆分为独立模块：css模块化可以延迟加载在页面加载阶段非必要的css，缩短初始css的阻塞和加载时间，最简单的方法是将css拆分为独立模块，并仅加载所需内容。
浏览器默认每个制定的样式表都会阻塞渲染，比如我们通过media属性告诉浏览器何时加载对应的样式表，当浏览器看到只有在指定情境下加载的样式表时，它依然会下载样式表，但不会阻塞渲染。通过css拆分为多个文件，使得主要的渲染阻塞样式表小很多，进而缩短阻塞渲染时间
3. 最小化和压缩css：最小化包括在进入生产环境后，在文件中删除仅为人类增加可读性的所有空格，通过对css最小化可以大大减少加载时间。通常，最小化是作为构建过程的一部分进行的，除最小化外，保证服务器在提供文件之前对文件进行了gzip压缩。
4. 简化选择器：经常编写比应用所需更复杂的选择器，不仅会增加文件大小还会增加增加解析这些选择器的时间
5. 使用精灵图减少图片相关的http请求
6. 预加载重要资源：通过rel="preload"将link标签转换为预加载器
js优化
- 减少dom操作
- 批量处理dom操作
整体优化
- 减少页面的重绘和回流
- 图片压缩、精灵图
- 延迟加载、预加载资源
- resolve alias 创建别名减少查询时间
- resolve extensions 表示要尝试的文件拓展名列表，它会影响构建性能。尽可能简洁，省略不太可能情况，将常用的文件拓展放在前面以加快搜索过程
- 限定loader加载范围，通过include和exclude，进而优化性能
- 拆分代码
- tree shaking 摇树优化删除未使用的代码
- ssr：在服务端完成渲染过程，最终渲染的html页面通过http发送到客户端，在seo和首次加载方面有很大的提升，vue通过nuxt.js
- 开启GZIP压缩
- 缓存
- 按需导入第三方组件
- 动态导入第三方库和组件
- 组件异步加载
- 路由懒加载
- cdn：发往全球通过附近cdn服务器获取，减少延迟提高加载速度
