web页面性能优化方法总结

最近老大给我布置了一道作业，让我去想想有哪些办法可以优化web页面的性能，回头一看，做了这么多年的前端开发，多少还是知道一些常规的性能优化策略，以下是我对性能优化的一个总结，共13点，如果描述错误，欢迎指正：

1. 使用cdn

对于需要展示大量图片等静态资源的页面，可以将图片等静态资源放在cdn上，这样可以加速对资源的获取。

2. 合并http请求

比如对于较小的图片，可以将其转换成base64的文本放在CSS文件中;对应多个后台数据请求，可以要求后台合并;使用打包工具，将页面的CSS和js文件合并;使用雪碧图合并小图标。这样可以减少http请求数量。

注意:合并后的文件过大也是会影响性能的，因为多个请求同时发起至少可以保持请求是并发，节省总体时间消耗，如果合并后的文件太大，反而会让一个请求时间过长，导致浏览器总体等待时间过长。

3. 开启http的keep alive

让HTTP请求可以复用TCP连接，因为TCP连接建立很耗时。

4. 首屏使用ssr

我理解主要有以下两个优点：

第一：节约首屏请求时间。在服务器发起第一次首屏需要数据的请求，由于内网服务器之间距离短，切服务器带宽大，传输数据快，因此从首屏数据传输来说，服务端占优势;

第二：加少首屏页面回流。服务端利用其缓存能力和机器性能优势，装配好首屏的HTML，返回给浏览器，浏览器可以直接解析渲染，不需要额外对页面进行回流，首屏体验更佳。

5. 使用预加载资源

对于需要滚动加载图片或者dom资源的页面，可以在首屏后预加载几页资源，在用户滚动到一定距离的时候，再次请求并加载部分资源。

6. 节流和防抖

对于页面上可能频繁触发的事件，使用节流或者防抖方案(具体使用那种视情况而定)。频繁触发的事件不仅会消耗计算资源，由于js是单线程执行，还可能会影响阻塞用户的操作。

7. 使用缓存

对于静态资源请求可以和服务器约定使用304缓存资源。当文件不变的情况下，不至于每次都让服务器返回数据，而是直接读取本地缓存。

8. 使用http2.0

主要有以下几个优点。

第一：头部压缩，2.0会对http请求的头部进行压缩(使用的是约定简化字典技术）；

第二：数据并发传输，2.0使用的二进制分帧传输技术，相对于http1.1的文本传输技术，可以针对单个http请求进行并发传送（我理解应该是二进制码更容易拆分成相同大小的块，并发传输后，在接收端更容易拼装在一起，然后还原）。

第三：多路复用（1.1其实也有类似效果，比如keep alive，但是由于2.0使用分帧技术，多个http请求之间可以更好的支持复用连接）。

此外http2.0还支持服务端推送

9. 异步请求

当后边的程序不需要等待前边数据请求的时候，可以将请求设置成异步。如果有多个请求，可以使用Promise.all()同时进行多个异步请求，又可以等待到每个异步请求结束和才去处理需要等待的任务。

10. DNS预解析

如果某个资源在将来可以反复用到，或者页面返回被跳转到，可以开启dns预解析（让浏览器缓存dns解析结果）。对于https的页面，加上

<meta http-equiv="x-dns-prefetch-control" content="on">

或者直接在请求资源标签中加入：

<link rel="dns-prefetch" href="//example.com">

页面会自动对标签里的链接进行dns预解析

11. http请求正文压缩

常见的gzip、deflate 和 deflate-raw压缩方法。压缩后可以减少数据传输量，节约服务器带宽资源和用户网络资源。

12. 使用web worker开启子js线程

用来计算可能占用时间较大的操作，比如说md5、sha转换，加密操作等。这样不至于在计算时候阻塞主js线程执行。

13. 使用server worker技术

这是一种新的技术，其实我也不太了解，只是觉得可以用它来做web页面的类似离线的缓存（类似强缓存，单肯定还是有差异的）。