一个工作三年的前端是如何做性能优化的

你是怎么做性能优化的？关于这一个问题，也是我们前端开发程序员经常会讨论到的问题，接下来这篇文章将总结一下前端方面的性能优化及方式。

在这里插入图片描述

为什么要做性能优化

性能优化是为了提高网页的加载速度和相应速度，给用户带来更好的体验和用户满意度，同时还能减少服务器的负载压力，以此来提升程序的稳定性，具体有以下几个因素：

• 提高用户体验
• 增加页面访问量
• 提高搜索引擎排名
• 减少服务器压力
• 节约成本
• 提高用户留存率

性能优化方式有那些

HTML&CSS

• 减少DOM数量，减轻浏览器渲染计算负担。
• 使用异步和延迟加载js文件，避免js文件阻塞页面渲染c
• 压缩HTML、CSS代码体积，删除不要的代码，合并CSS文件，减少HTTP请求次数和请求大小。
• 减少CSS选择器的复杂程度，复杂度与阿高浏览器解析时间越长。
• 避免使用CSS表达式在javascript代码中
• 使用css渲染合成层如transform、opacity、will-change等，提高页面相应速度减少卡顿现象。
• 动画使用CSS3过渡，减少动画复杂度，还可以使用硬件加速。

JS

• 减少DOM操作数量
• 避免使用with语句、eval函数，避免引擎难以优化。
• 尽量使用原生方法，执行效率高。
• 将js文件放到文件页面底部，避免阻塞页面渲染
• 使用事件委托，减少事件绑定次数。
• 合理使用缓存，避免重复请求数据。

Vue

• 合理使用watch和computed，数据变化就会执行，避免使用太多，减少不必要的开销
• 合理使用组件，提高代码可维护性的同时也会降低代码组件的耦合性
• 使用路由懒加载，在需要的时候才会进行加载，避免一次性加载太多路由，导致页面阻塞
• 使用Vuex缓存数据
• 合理使用mixins，抽离公共代码封装成模块，避免重复代码。
• 合理使用v-if 、v-show
• v-for 不要和v-if一起使用，v-for的优先级会比v-if高
• v-for中不要用index做key，要保证key的唯一性
• 使用异步组件，避免一次性加载太多组件
• 避免使用v-html，存在安全访问风险和性能问题，可以使用v-text
• 使用keep-alive缓存组件，避免组件重复加载

Webpack优化

• 代码切割，使用code splitting将代码进行分割，避免将所有代码打包到一个文件，减少响应体积。
• 按需加载代码，在使用使用的时候加载代码。
• 压缩代码体积，可以减小代码体积
• 优化静态资源，使用字体图标、雪碧图、webp格式的图片、svg图标等
• 使用Tree Shaking 删除未被引用的代码
• 开启gzip压缩
• 静态资源使用CDN加载，减少服务器压力

网络优化

• 使用HTTP/2
• 减少、合并HTTP请求，通过合并CSS、JS文件、精灵图等方式减少请求数量。
• 压缩文件， 开启nginx，Gzip对静态资源压缩
• 使用HTTP缓存，如强缓存、协商缓存
• 使用CDN，将网站资源分布到各地服务器上，减少访问延迟
• 域名分片，多域名（地理位置的请求距离）
• 通过设置http头中的cache-control和expires的属性，可设定浏览器缓存，缓存时间可以是数天，甚至是几个月。

常见性能优化有哪些关键指标？

• 首屏加载时间First Contentful Paint（FCP）：首次内容绘制时间，指浏览器首次绘制页面中至少一个文本、图像、非白色背景色的canvas/svg元素等的时间，代表页面首屏加载的时间点。
• 首次绘制时间First Paint（FP）：首次绘制时间，指浏览器首次在屏幕上渲染像素的时间，代表页面开始渲染的时间点。
• 最大内容绘制时间Largest Contentful Paint（LCP）：最大内容绘制时间，指页面上最大的可见元素（文本、图像、视频等）绘制完成的时间，代表用户视觉上感知到页面加载完成的时间点。
• 用户可交互时间Time to Interactive（TTI）：可交互时间，指页面加载完成并且用户能够与页面进行交互的时间，代表用户可以开始操作页面的时间点。
• 页面总阻塞时间Total Blocking Time (TBT)：页面上出现阻塞的时间，指在页面变得完全交互之前，用户与页面上的元素交互时出现阻塞的时间。TBT应该尽可能小，通常应该在300毫秒以内。
• 搜索引擎优化Search Engine Optimization (SEO)：网站在搜索引擎中的排名和可见性。评分范围从0到100，100分表示网站符合所有SEO最佳实践。