性能优化思路之网络层优化

在数字时代，速度已成为互联网体验的关键。用户对网页加载时间的容忍度越来越低，每一毫秒的延迟都可能导致用户的流失。根据谷歌的研究，页面加载时间超过3秒的网站，其跳出率会增加120%。在这个以用户为中心的网络世界里，性能优化不再是一个选项，而是必须。

相信大家都至少听过一道面试题从用户输入网址到界面完成展示中间发生了什么。不知道大伙有没有思考过面试官为何要问这个问题，想要考察的内容是什么，单纯是考考你的记忆力吗？我个人认为这道题是面试中的神题，不但能考察基础的技术能力，还能从这道题中继续延伸无数个方向，例如网络安全、浏览器工作原理，也例如本文的主角：性能优化。

DNS相关优化

用户输入网址后，第一步是解析网址，浏览器需要将这个域名转换为机器可读的IP地址，这是通过DNS（domain name system）查询来完成。

1. DNS缓存

通常我们的操作系统和浏览器已经自动做了相关缓存

• 浏览器缓存：现代浏览器会缓存DNS查询结果，减少同一域名的重复查询。

• 操作系统缓存：操作系统也会缓存DNS查询结果，通常可以通过命令查看和管理，如ipconfig /displaydns（Windows）或sudo dscacheutil -cachedump -entries host（macOS）。

• DNS解析器缓存：本地网络的DNS解析器通常也会缓存查询结果，提高局域网内的查询速度。

2. 减少外部资源引用和开启DNS域名预解析

1.2 http2的优化

• 条件允许的情况下，合并CSS和JS，减少外部文件请求次数

• 尽可能使用同一个域名下的资源，避免跨域请求

• 对于跨域资源，可以通过dns-prefetch来开启DNS预解析。

  <link rel="dns-prefetch" href="/https://fonts.googleapis.com/" />

  3. 启用CDN加速

  CDN通过在全球分布的服务器缓存内容，提供更快速的访问。CDN服务提供商通常也提供优化的DNS服务，将用户的DNS查询定向到离用户最近的服务器节点，进一步减少延迟。

  HTTP相关优化

  解析完域名之后，自然就是开始HTTP连接。在这个阶段，我们能做的事情变得更多了。

  1. 关于http协议

  http协议总是在不断的升级优化中，更高版本的http协议总能带来更好的性能，根据你项目与用户的实际情况，尽可能的升级到合理的版本。这里不赘述http1/2/3之间的区别，想要了解的出门左转问问GPT。

  1.1 http1.1的优化

  如果你评估了你的项目确实无法升级到http2或更高，那么可以考虑以下优化

• 减少请求次数：举个例子，webpack中有个SplitChunksPlugin的插件, 用于分割代码生成产物的，我们可以利用这个插件控制我们的生成物，例如像Vue、Vue-router、Vuex、以及我们用到的一些基础依赖都打包成一个js，对于仅在某些页面引用的依赖进行单独拆分便于按需加载。其他的还有使用雪碧图、将小图片转为base64内嵌到js或html里等手段。

• 持久连接（Keep-Alive）：确保服务器和客户端都支持持久连接，允许在同一个TCP连接上进行多次请求和响应。

• 在HTTP/2中，通过二进制分帧和多路复用技术，可以在同一个TCP连接上并行传输多个请求和响应。所以与http1.1不太一样的，我们应该对js、css进行更加细致的切割，方便我们更加精细的控制按需加载，减少需要加载的文件大小，提高首屏速度。

  </