Web 性能优化

是什么

web 性能优化的目的是为了给用户提供更好的访问服务，让用户访问我们的网站时更快更流畅。

前端开发性能优化

这一部分的性能优化主要是根据浏览器的渲染原理和前端开发时的性能考虑进行优化。主要是从浏览器资源下载要快，页面渲染要快，页面操作要流程不卡顿三个方面考虑进行优化。文件体积越小越好，请求次数越少越好，距离越近越好。

资源压缩（下载快）

在资源打包的时候进行压缩，使用 webpack 或相应插件，压缩文件的体积，比如将代码压缩成一行，去掉注释部分等等方式。使得资源体积越小越好，这样可以优化资源的下载速度。
压缩 html ，压缩 js ，压缩 css，压缩图片，svg / icon 压缩等等。

资源合并（下载快）

可以在资源打包的时候进行资源合并，将多个资源合并成一个资源。由原先请求多个资源转变成请求一个资源，减少请求次数来优化性能。

静态资源放到 CDN 上（下载快）

静态资源放到 cdn 上其实有两个好处，一个是放在 cdn 上，下载距离会近。另外一个是浏览器对同一个域名同时发送的请求数量有限，同一个域名一次只能发送5个或10个请求，将资源放在 cdn 上，可以扩展同时请求的数量。常规情况下会分类放置 cdn，会将 js 资源放在一个 cdn 上，将 css 资源放在另外一个 cdn 上等。
此外，静态资源放到 cdn 上可以实现 cookie-free，即请求这些静态资源可以不携带 cookie。

先 CSS 后 JS（渲染快）

将 css 放在 head 里，将 js 放在 body 的后面。这是从代码编写层面进行性能优化。因为 js 会阻塞页面的渲染，所以先 css 后 js。可以用户用户的页面体验，让用户先看到内容。

使用 async 或者 defer 异步加载（渲染快）

js 资源会阻塞页面的渲染，无逻辑相关的资源可以设置 async 或者 defer 属性进行异步加载。

懒加载（渲染快）

用户看不到的部分先不加载，等用户看到那一部分再进行请求和加载。可以减少页面的请求数量。从而优化用户体验。

预加载（体验好）

对用户大概率会访问的内容进行预加载，这样在用户点进去看的时候，页面可以很快地呈现出来。

动画流畅（体验好）

根据代码层面的渲染原理，可以对动画进行代码层面的优化。尽量利用 GPU ，而不是 CPU 功能。

尽量用 css3 animation

尽量使用 transform / translate ，少用绝对定位

JS 动画使用 requestAnimationFrame，少用 setIntervel

减少 DOM 操作（体验好）

高频操作使用防抖和节流（体验好）

使用 WebWork（体验好）

可以使用 webwork 功能进行辅助计算来进行性能优化。

网络性能优化

这一部分的性能优化主要是根据整个 http 网络请求的过程进行针对性地优化，需要对 http 的整个处理过程有很清晰的认知。

加速 DNS 服务

网站访问的第一步是会先去域名解析服务器进行域名解析，这一步也可以进行优化，比如多买几个域名服务器。

持久化连接

域名解析后，网站会向域名解析服务器返回的 ip 地址发起请求，这一步是 http 请求，实质是客户端和服务端建立起 tcp 连接请求，一般每次的文件请求都需要重新建立连接和断开。这一步可以进行优化，即使用持久化连接。使用同一个TCP连接来发送和接收多个HTTP请求/应答，而不是为每一个新的请求/应答打开新的连接。
配置keep-alive

提高服务器带宽

服务器处理完请求后会将文件发送给客户端，此时可以从服务器下载的带宽上进行优化，可以提高服务器的带宽，来优化网络下载速度。

开启 HTTP 缓存

开启 http 缓存，cache-control 没有改变的资源会被缓存到浏览器，这样用户再次访问网站的时候会很快，不需要重新下载全部的资源。

升级到 HTTP 2.0

http 2.0 相比与 http 1.x ，有很多的性能优化。因此可以通过升级 http 协议，来进行网站的性能优化。

后端开发性能优化

SQL 优化

客户端在发起请求后，服务端要处理请求，大部分的情况是服务端要和数据库进行连接，从数据库查询数据并处理。这里也可以进行优化，对 SQL 查询的优化。

后端压缩后发送

后端开启 gzip （例如 nginx gzip），将文件压缩后发送再发送给前端，通过这种方式可以减少文件的体积，使得客户端资源下载更快速。

题外话

web 性能优化主要是为了用户服务，是生产环境层面的性能优化。但其实，在我们工程开发工程中，也可以进行性能优化的。也就是开发环境下开发人员的性能优化。比如在代码开发时，每次修改代码重新打包运行时需要很久，开发体验极其差。就可以通过提升开发时的性能，来改善这种情况。还有打包工具的 TreeShaking 功能也很重要。
比如使用更快的打包工具，webpack -> vite 等。
也可以自行开发打包工具，运用多进程打包，文件缓存，缩少文件搜索范围减少不必要的编译等。