前端项目性能优化

• 普通项目

  • 页面加载

    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项目

  • 代码层面优化

    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. 静态资源和服务不要放在同一台机器上。多个域名去并行加载解析