web前端性能优化总结

为什么要进行前端性能优化

    影响用户访问体验的绝大部分来自前端页面，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体验。不仅仅如此，如果前端优化得好，不仅可以为企业节约成本，还能带来更多的用户，因为增强的用户体验。

前端性能优化有哪些好处

1. 能够让页面加载得更快、对用户的操作响应得更及时， 给用户提供更为友好的体验
2. 能够减少页面请求数、或者减小请求所占带宽，节省可观的资源

HTML优化方案

1. 使用良好的页面布局、减少DOM节点
2. 避免操作频繁DOM、减少重绘和回流
3. 用innerHTML代替DOM操作
4. 避免通过JavaScript修复layout
5. 使用ClassName代替大量的内联样式修改
6. 避免使用 CSS 表达式
7. 减少事件绑定、尽量使用事件代理
8. 尽量使用CSS动画
9. 适当使用Canvas
10. 减少iframe数量（iframe内容为空也消耗加载时间，会阻止页面加载）

CSS优化

1. CSS的文件放在头部
2. 合并压缩CSS文件
3. 使用雪碧图(css sprite)、Svg、iconFont字体图标
4. 使用base64表示简单的图片
5. 保持图片不失真的情况下进行压缩
6. 对于复杂的UI元素，设置position为absolute或fixed
7. 在css属性为0时，去掉单位
8. 可继承的css属性减少使用
9. 缩短css选择器，多使用伪元素等帮助定位
10. 使用GPU加速

Javascript优化

1. js文件放在尾部或者异步加载
2. 合并压缩JS文件
3. 优化高频事件（使用函数防抖、函数节流），比如搜索、表单提交
4. 缓存数据localStorage、sessionStorage
5. 避免使用 eval和 Function
6. 减少作用域链查找和闭包的使用

Vue优化

1. 路由懒加载
2. 图片预加载、懒加载
3. 第三方组件按需加载
4. 使用keep-alive缓存不活动的组件
5. v-if和v-for避免同时使用，v-for列表项添加唯一key
6. 合理使用v-if和v-show
7. 使用Object.freeze()冻结静态数据对象，不做响应化处理、可以提升页面渲染速度

webpack优化

1. 优化Babel-loader缓存。通过设置cacheDirectory开启Babel缓存，避免重复编译相同的代码
2. 合理配置resolve.alias路径别名，可以缩小Webpack搜索文件的范围，提高构建速度
3. 优化resolve.modules和resolve.mainFields配置。通过指定模块的查找路径和入口文件，可以减少Webpack在构建过程中搜索和处理文件的时间
4. 使用exclude和cache-loader优化打包速度。在开发或构建时，可以使用exclude排除不需要处理的文件，或者使用cache-loader提高加载速度
5. 使用Entry Dependencies和SplitChunksPlugin进行代码分离。这些工具可以帮助将代码分离到不同的bundle中，按需加载或并行加载
6. 使用CommonsChunksPlugin提取公共模块，提取多个chunk之间的通用模块，减少代码体积
7. 使用compression-webpack-plugin插件开启gzip压缩，减小文件体积提高加载速度

小程序优化

1. 开发工具中开启脚本文件、wxml文件、样式文件压缩
2. 使用数据缓存，避免重复请求服务器
3. 合理使用setData、减少页面重排和重绘
4. 使用分包加载