项目优化

普通项目优化

• 页面加载阶段
• 页面渲染阶段

一、 页面加载

1. dns预解析
2. 使用cdn
3. 静态资源的压缩与合并
4. 减少https请求
5. 异步加载defer，async
6. 服务端渲染ssr
7. 多使用内存和缓存

二、 页面渲染

1. css放前面，js放后面
2. 减少dom查询，多次使用的保存为变量
3. 减少dom操作，统一通过dom片段操作
4. 事件函数的节流和防抖
5. 图片懒加载
6. 尽早进行操作， domcontentload 与 load

vue项目优化

• 代码层面优化
• webpack层面优化
• web层面优化

一、代码层面优化

1. Object.freeze(data);对于一些查询类的页面，调取接口回来后的数据可 不进行数据劫持
2. v-if和v-for不要在一起使用。v-if的条件通过函数来处理
3. v-for中加上key，对于虚拟dom树查找提高性能
4. computed和watch注意区分使用场景。前者是有缓存的。后者是监听到数据变化后的回调无缓存
5. created中发起请求，mounted钩子中代表页面dom加载完成可以进行dom操作。
6. 长列表性能优化，只渲染可视区域的列表
7. 长表格性能优化，通过canvers来绘制表格
8. 合理使用$nextTick去操作dom，适用于更新了数据马上就要操作dom的场景
9. 操作dom不要使用js原生的方式来操作。用vue提供的三种方式来操作 比如，ref、自定义指令el、事件中的话用e.target获取dom
10. 尽量不要在前端进行大量的数据处理
11. 合理使用keep-alive来缓存页面数据，跳过created,mounted钩子，他有自己特定的钩子activted等
12. 路由懒加载通过import配合箭头函数，还有其他的方式require
13. 组件懒加载，异步加载
14. 尽量少用float，可以用flex布局
15. 频繁切换的使用v-show，不频繁的使用v-if
16. 不要在模板中写过多的样式
17. 服务端渲染ssr，优化seo，与首屏白屏问题。
18. 通过addEventListenr添加的事件，需要自行销毁
19. 把组件中的css提取成单独的文件
20. 少使用闭包与递归，递归可做尾递归的优化
21. 使用字体图标或者svg来代替传统的Png等格式的图片
22. 在Js中避免“嵌套循环”和“死循环”
23. 尽可能的使用事件委托来处理事件的绑定，针对老项目jq
24. 使用day.js替代moment.js：day.js属于轻量的处理时间和日期的JavaScript库

二、webpack层面优化

1. 去除无用代码treeShaking.
2. babel编译es6到es5的时候，会有多余代码产生
3. 减小app.js的体积，提取公共代码
4. 减少vendor.js的体积，通过按需引入第三方库，或者有些资源可以通过script标签引入
5. 代码切割，有一些组件没必要都打包到一起。
6. 使用chunck
7. 使用SouceMap，来还原线上代码，更方便的去定位线上问题
8. 构建结果，通过可视化插件，进行分析
9. webpack对图片进行压缩等处理，
10. 图片可以使用webp，优雅降级处理
11. 编译优化
12. 模板预编译，使用vue-template-loader，把模板编译成渲染函数。

三、web层面优化

1. 浏览器缓存的使用
2. 开启gzip压缩
3. CDN的使用，减少路由转发的次数，就近访问资源
4. 使用chrome的性能分析工具，查找性能瓶颈
5. dns预解析
6. 静态资源的压缩与合并
7. 减少https请求
8. 异步加载defer，async
9. 静态资源和服务不要放在同一台机器上。多个域名去并行加载解析