一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第 9 天，点击查看活动详情。
进行项目优化之前，请牢记合理使用规则，避免过度优化！！！
性能优化一般分为：加载优化、运行优化
比较笼统，这里以实际使用来分别梳理我眼中的一些优化方式 ~~~
编码优化
Vue 相关
- 不要将所有的数据都放在
data中，data中的数据都会增加getter和setter，会收集对应的watcher vue在v-for时给每项元素绑定事件需要用事件代理SPA页面采用keep-alive缓存组件- 拆分组件( 提高复用性、增加代码的可维护性,减少不必要的渲染 )
v-if当值为false时内部指令不会执行,具有阻断功能，很多情况下使用v-if替代v-showkey保证唯一性 ( 默认vue会采用就地复用策略 )
一般编码优化
- 将
CSS放在文件头部，JavaScript文件放在底部：CSS执行会阻塞渲染与JS 的执行，JS加载执行会阻塞HTML解析=》避免用户看到无样式的HTML - 用
JS控制样式变化时，通过替换class来改变样式 - 尽量使用
flex布局 - 降低
CSS选择器的复杂度（这里其实性能差异可忽略不计） - 减少回流重绘
- 使用事件委托：利用事件冒泡，多使用于按钮事件，还能节省内存
Object.freeze冻结数据- 合理使用路由懒加载、异步组件
- 尽量采用
runtime运行时版本 - 数据持久化的问题 （防抖、节流）
- 局部性编程：重复引用相同变量的程序具有良好的时间局部性；程序循环执行步长越小，空间局部性越好。
- 判断条件较多时，更倾向于使用
switch而不是if-else - 判断条件特别多时，使用查找表（数组表）。条件是字符串时，可以使用对象建立查找表。
- 尽可能使用原生
JS方法（如数学运算和DOM操作），因为它们才是性能最好的代码。
请求优化
- 尽量减少
HTTP请求（如多个小文件合并为一个大文件） - 使用
HTTP2：解析速度更快、多路复用技术、首部可压缩、请求优先级化、流量控制、服务端推送 - 减少
cookie传输
加载优化
- 第三方模块按需导入(
webpack、vite中进行配置) - 资源预加载
- 图片懒加载
- 滚动到可视区域动态加载
图片优化
- 使用
iconfont和svg代替图片图标 - 必要时可使用
Sprite - 使用响应式图片
- 图片压缩
- 能用
CSS就不用图片
用户体验
loading白屏app-skeleton骨架屏：CSS提前占位，等待资源加载完成再填充。app-shell app壳pwa serviceworker
SEO 优化
- 预渲染插件
prerender-spa-plugin - 服务端渲染
ssr
打包优化
- 使用
cdn的方式加载第三方模块（如静态资源） - 多线程打包
happypack splitChunks抽离公共文件(拆包)sourceMap生成DllPlugin提升构建速度
服务端与缓存
- 服务端渲染（更快的内容到达时间，首屏渲染快，
SEO好） - 进行分客户端缓存和服务端缓存：浏览器缓存原理(添加
Expires或Cache-Control响应头，配置Etag) - 服务端
gzip压缩
