网页页面性能优化总结

冷不防 2022-10-01 08:52 135阅读 0赞

*  js性能优化是前端面试一个常问知识点。所以我结合我个人一些经验，加上看了其他一些文章点分析。作了一些总结。

### 一，主要从用户输入网址到页面渲染完成。及与用户交互到方面来分析。 ###

过程：

*  用户输入网址请求资源 => 将请求到的资源渲染成页面 => 渲染完成的页面交互 => 其他方面的优化

##### 一，用户输入网址请求资源 #####

1.  当用户输入一个域名网址时，浏览器会将这个域名发送到DNS服务器  
    （这一过程中，我们可以通过改变我们host的配置，将域名配置为我们开发环境的服务器ip。实现远程开发）；
2.  通过DNS服务器进行域名解析，拿到对应的服务器ip地址；
3.  浏览器拿到服务器的ip后，找到对应的服务器；

*  =>这个过程可以做个http缓存优化（见下文——http缓存）

1.  获取服务器js，html等资源；

##### 二，将请求到的资源渲染成页面 #####

*  =>http页面加载及渲染过程的优化（见下文——页面加载及渲染过程）

##### 三，渲染完成的页面交互 #####

*  =>页面交互过程的优化（见下文——页面交互过程的优化）

##### 四，其他方面的优化 #####

*  =>其他方面的优化的优化（见下文——其他方面的优化）

### 二，http缓存及优化 ###

*  [参考文章1][1]
 *  [参考文章2][2]
 *  http缓存：强制缓存和协商缓存

1.  强制缓存

不会向服务器发送请求，直接从缓存中读取资源，
    在chrome控制台的network选项中可以看到该请求返回200的状态码，
    并且size显示from disk cache或from memory cache；
    复制代码

设置强制缓存的方式：
    在响应头设置：
    Catch-Control优先级 > Expires优先级
    
    Catch-Control：
    比如Cache-Control:max-age=300(秒)
    代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存
    
    Expires：
    比如Expires:Thu,21 Jan 2020 23:39:02 GMT
    response header里的过期时间，浏览器再次加载资源时，如果在这个过期时间内，则命中强缓存。
    它的值为一个绝对时间的GMT格式的时间字符串；
    存在一个缺点：但由于服务端时间和客户端时间可能有误差，这也将导致缓存命中的误差，因此现在常用这个；
    复制代码

1.  协商缓存

协商缓存：向服务器发送请求，服务器会根据这个请求的request
    header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response
    header通知浏览器从缓存中读取资源；另外协商缓存需要与cache-control共同使用。；
    复制代码

设置协商缓存的方式：
    在响应头设置：
    Etag优先级 > Last-Modified优先级
    
    Etag：
    服务器响应请求时，通过此字段告诉浏览器当前资源在服务器生成的唯一标识（生成规则由服务器决定）；
    If-None-Match： 再次请求服务器时，浏览器的请求报文头部会包含此字段，后面的值为在缓存中获取的标识。
    服务器接收到次报文后发现If-None-Match则与被请求资源的唯一标识进行对比：
    a. 不同，说明资源被改动过，则响应整个资源内容，返回状态码200。
    b. 相同，说明资源无心修改，则响应header，浏览器直接从缓存中获取数据信息。返回状态码304.
    c. 但是实际应用中由于Etag的计算是使用算法来得出的，而算法会占用服务端计算的资源，
    所有服务端的资源都是宝贵的，所以就很少使用Etag了。
    
    Last-Modified: Fri, 22 Jul 2020 01:47:00 GMT
    服务器在响应请求时，会告诉浏览器资源的最后修改时间；
    if-Modified-Since:
    浏览器再次请求服务器的时候，请求头会包含此字段，后面跟着在缓存中获得的最后修改时间。
    服务端收到此请求头发现有if-Modified-Since，则与被请求资源的最后修改时间进行对比，
    如果一致则返回304和响应报文头，浏览器只需要从缓存中获取信息即可。
    从字面上看，就是说：从某个时间节点算起，是否文件被修改了:
    a. 如果真的被修改：那么开始传输响应一个整体，服务器返回：200 OK
    b. 如果没有被修改：那么只需传输响应header，服务器返回：304 Not Modified
    
    if-Unmodified-Since:
    从字面上看, 就是说: 从某个时间点算起, 是否文件没有被修改
    如果没有被修改:则开始继续传送文件: 服务器返回: 200 OK
    如果文件被修改:则不传输,服务器返回: 412 Precondition failed (预处理错误);
    
    这两个的区别是一个是修改了才下载一个是没修改才下载。
    Last-Modified 说好却也不是特别好，因为如果在服务器上，一个资源被修改了，但其实际内容根本没发生改变，
    会因为Last-Modified时间匹配不上而返回了整个实体给客户端（即使客户端缓存里有个一模一样的资源）。
    为了解决这个问题，HTTP1.1推出了Etag。
    
    复制代码

1.  强制缓存优先级 > 协商缓存优先级;
2.  刷新

用户行为对浏览器缓存的影响
    1.地址栏访问，链接跳转是正常用户行为，将会触发浏览器缓存机制；
    2.F5刷新，浏览器会设置max-age=0，跳过强缓存判断，会进行协商缓存判断；
    3.ctrl+F5刷新，跳过强缓存和协商缓存，直接从服务器拉取资源。
    复制代码

1.  缓存的优点

a. 减少了冗余的数据传递，节省宽带流量
    b. 减少了服务器的负担，大大提高了网站性能
    c. 加快了客户端加载网页的速度 这也正是HTTP缓存属于客户端缓存的原因。
    复制代码

### 三，页面加载及渲染过程（HTML，Js，css等资源的加载与执行） ###

1.  当浏览器在解析dom树的时候，如果遇到script标签。会阻塞其他任务的执行。直到script标签加载，解析完成；
2.  这个时候页面会一片空白。用户体验很不好，可以使用以下做法；

*  => A, 将script标签放在body的最底部，保证js文件最后加载并执行；同时不影响页面加载；
 *  => B, 或者使用defer,如下写法。这种方式可以使浏览器解析到script标签时，也会加载js。但他会等到dom树解析完成后再去执行js（DomContentLoader之前执行），因此不会阻塞浏览器执行；

*  => C, 动态的插入script标签来加载脚本,比如通过以下代码（[参考][Link 1]）；

1.  解析css时。不会操作html元素。因此不会阻塞dom树的渲染；同时dom树和css都解析完成后，合并生成渲染树；
2.  浏览器按照从上到下，从左到右的顺序。绘制生成渲染树。展示页面给用户；

### 四，渲染完成的页面交互 ###

1.  滚动条调用接口时，可以用节流throttle等优化方式，减少http请求；
2.  输入搜索时，可以用防抖debounce等优化方式，减少http请求；
3.  减少dom元素对操作次数（[参考][Link 1]）；

// 优化前
      const el = document.getElementById('test');
      el.style.borderLeft = '1px';
      el.style.borderRight = '2px';
      el.style.padding = '5px';
     // 优化后,一次性修改样式，这样可以将三次重排减少到一次重排
      const el = document.getElementById('test');
      el.style.cssText += '; border-left: 1px ;border-right: 2px; padding: 5px;'
    复制代码

1.  使用事件委托；
2.  应该尽可能的减少对象成员的查找次数和嵌套深度；
3.  降低循环遍历次数（特别对于多维数组的匹配时）；

### 五，其他方面的优化 ###

1.  对js,css等资源进行源码压缩，减小文件大小；
2.  合理控制图片大小，对长期固定图片使用base64编码，使用雪碧图等；
3.  设置样式时，尽量使用className，少用style；
4.  少用全局变量，避免全局搜索；
5.  方便时多使用原生方法；
6.  使用第三方资源时。尽量做到按需加载；

转载于:https://juejin.im/post/5ccf028d6fb9a0323120a1d2

[1]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Fb54502d5ed0b
[2]: https://juejin.im/post/5a1d4e546fb9a0450f21af23
[Link 1]: https://juejin.im/post/5b89274de51d4538c17e0f7d