JavaScript -- 提示页面性能

我就是我 2022-04-22 23:40 229阅读 0赞

前端面试经常碰到提示页面性能的问题，换句话说也就是如何让页面打开的更快，更流畅，不卡顿。

大致可以总结为几点。

**1：资源压缩合并，减少HTTP请求**

HTTP请求基于TCP/IP协议，三次握手四次分手想必大家都知道吧。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70][]

频繁的HTTP请求势必将造成性能消耗，合理的资源压缩合并，有效的减少HTTP请求次数可以优化性能。

**2：非核心代码异步加载 (defer  async)**

JS是单线程语言，这一点必须明确。为了避免非核心的代码加载延迟网页打开时间，异步加载是一个不错的选择。

这里需要注意defer和async的区别。

defer:在HTML解析完以后在执行，如果有多个，那么按加载顺序依次执行。

async:加载完后立即执行，如果多个，执行顺序与加载顺序无关。

**3：利用浏览器缓存**

给大家推荐一篇博文，讲的非常好。

缓存分为俩类：强制缓存，协商缓存。

[彻底理解浏览器的缓存机制][Link 1]  
  
**4：利用CDN**

利用浏览器缓存始终只是为了提升二次访问的速度，对于首次访问的加速，我们需要从网络层面进行优化，最常见的手段就是CDN。通过将静态资源缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载。不同地区的用户会访问到离自己最近的相同网络线路上的CDN节点，当请求达到CDN节点后，节点会判断自己的内容缓存是否有效，如果有效，则立即响应缓存内容给用户，从而加快响应速度。如果CDN节点的缓存失效，它会根据服务配置去我们的内容源服务器获取最新的资源响应给用户，并将内容缓存下来以便响应给后续访问的用户。因此，一个地区内只要有一个用户先加载资源，在CDN中建立了缓存，该地区的其他后续用户都能因此而受益。（其他细节可以 自行google)

**5：预解析DNS**

![20190121215654264.png][]

来自百度页面。这些都是预解析DNS.

有一点网络基础都知道，域名必须先通过DNS(域名解析系统）解析成IP地址。

回想一下当在地址栏输入www.baidu.com点击回车的时候，是不是有一步骤就是将域名解析成IP地址，提高解析速度当然就可以页面打开速度。

额外补充一下，下面meta标签的作用

传统HTTP协议中，a标签是默认打开预解析DNS，但是在HTTPS协议中，很多浏览器是默认关闭的，所以这个标签就是打开预解析DNS的。

五个的方向，如果想了解更多细节，可以自行查阅资料。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d1c3RfY3ls_size_16_color_FFFFFF_t_70]: /images/20220325/f49dafa67932436dbd7af5757079cbf4.png
[Link 1]: https://juejin.im/entry/5ad86c16f265da505a77dca4
[20190121215654264.png]: /images/20220325/6a733c4499934c82a1cec79935b5b555.png