谈一谈你知道的前端性能优化方案有哪些？

目录

一、HTML/CSS/JS

1.  结构层指的是DOM结构

2.  表现层指的是CSS样式表

3.  行为层主要指的是JS

二、图片

三、服务端优化

四、总结

1.  向前端优化

2.  减少数据库操作

3.  减少磁盘IO

---

参考：

完整的优化清单：GitHub - JohnsenZhou/Front-End-Performance-Checklist: 🎮 前端性能清单，让你的网站跑的更快

页面性能优化参考：automate-everything/chapter4.md at master · azl397985856/automate-everything · GitHub

自己的总结：

知识总结：WEB前端的优化方案_1.通过总结前端优化的优化方案和优化方法;_小草莓蹦蹦跳的博客-CSDN博客

一、HTML/CSS/JS

前端将应用分为三层，分别是结构层，表现层和行为层。我们就从三层角度讲一下性能优化的方向。

1.  结构层指的是DOM结构

DOM结构的性能优化重点关注的是如何减少DOM数量和如何减少DOM操作。【AMP HTML】

① 尽量使用轻元素；② 减少冗余标签；

③ 减少没有必要的嵌套；

④ 缓存DOM节点查找的结果，避免多次访问同一个DOM；

2.  表现层指的是CSS样式表

CSS 的性能优化通常集中在两方面： 减少加载CSS所消耗的时间和提高CSS代码性能。

具体针对CSS提高性能的方法，整理如下：如果要做优化，CSS提高性能的方法有哪些？_小草莓蹦蹦跳的博客-CSDN博客

① 简单来说就是减小CSS文件的大小，尽可能的利用http缓存等；

② 在代码层面我们要避免引入不必要的样式，合理运用继承减少代码；

③ 复杂的多层嵌套样式会降低css解析效率，所以尽量减少样式的嵌套；

④ 尽量减少重排；

⑤ 减少通过 JS 代码修改元素样式，尽量使用修改 class 方式操作样式或动画；

⑥ 将样式表置顶；

⑦ 首屏样式可以直接内嵌到html中；

3.  行为层主要指的是JS

JS的性能优化主要在：

① 将复杂的计算结果进行缓存，以供下次使用；

② 减少IO读取操作，考虑使用网络IO缓存。将网络请求结果存放到本地，在下次请求的时候直接读取，不需要重复发送请求；

③ 数据结构优化和算法优化，也尽量不要写一些复杂度很高的代码；

④ JS 脚本尽量后放；

⑤ 采用更优的API替代消费高的api，转换优化消费高的集合；

• 用querySelectorAll()替代getElementByXX()；

• 开启动画的GPU加速（如通过3D加速），把渲染计算交给GPU；

• 少用HTML集合（类数组）来遍历，因为集合遍历比真数组遍历耗费更高；

• 用事件委托来减少事件处理器的数量；

⑥ promise('').then() 异步加载资源；

⑦ webpack 开启 tree-shaking 减少代码体积；

二、图片

图片在目前的网站中占据了网站中大部分的流量。

虽然图片不会阻止用户的交互，不影响关键路径，但是图片加载的速度对于用户体验来说非常重要。

因此图片优化主要有：

① 在必要的时候使用图片，不必要的时候换用其他方式；

② 压缩图片的体积、采用合适的图片合适；

图片小于30k的图片直接做成base64；

③ 图片太多时，使用懒加载或者预加载的方式加载图片；

三、服务端优化

① 使用CDN：CDN是内容分发网络，通过部署在不同地区的服务器来提高用户的下载速度，可以减少网页内容的下载时间

② 做服务器缓存

③ 尽量减少响应的体积，比如用 gzip 压缩，优化图片字节数，压缩 css 和 js；或加快文件读取速度，优化服务端的缓存策略。

④ 客户端优化 dom、css 和 js 的代码和加载顺序；或进行服务器端渲染，减轻客户端渲染的压力。

⑤ 优化网络路由，比如增加 CDN 缓存；或增加并发处理能力，比如服务端设置多个域名，客户端使用多个域名同时请求资源，增加并发量。

四、总结

总结：对普通的网站有一个统一的思路，就是尽量向前端优化、减少数据库操作、减少磁盘IO。

1.  向前端优化

指的是，在不影响功能和体验的情况下，能在浏览器执行的不要在服务端执行，能在缓存服务器上直接返回的不要到应用服务器，程序能直接取得的结果不要到外部取得，本机内能取得的数据不要到远程取，内存能取到的不要到磁盘取，缓存中有的不要去数据库查询。

2.  减少数据库操作

指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的程序完成（例如join查询）

3.  减少磁盘IO

指尽量不使用文件系统作为缓存、减少读写文件次数等。程序优化永远要优化慢的部分，换语言是无法“优化”的。

在前端性能优化方面，一般可以遵循雅虎的黄金35定律对Web前端进行优化。

不过随着浏览器和协议等的发展，有一些已经逐渐被淘汰了。例如，“尽量减少HTTP请求数"这一条，在HTTP2协议下就不管用了，因为HTTP2实现了HTTP复用，HTTP请求变少反而降低了性能。因此要结合历史环境看待具体的优化原则和手段。

性能优化一个最重要的原则是：永远呈现必要的内容，我们可以通过懒加载非首屏资源，或者采用分页的方式将数据”按需加载“。