前端优化之 Http 相关优化总结

1. 使用HTTP/2

• 优势：HTTP/2引入了头部压缩、服务器推送、请求/响应多路复用等特性，减少延迟，提高了数据传输的效率。

• 实施：确保服务器支持HTTP/2，大多数现代浏览器已经支持HTTP/2。

2. 压缩资源

• 优势：通过压缩资源（如HTML、CSS、JavaScript、图片等），可以减少传输数据的大小，加快加载速度。

• 实施：

  • 使用Gzip或Brotli等压缩算法压缩文本文件，使用WebP、JPEG 2000等格式压缩图片
  • 代码分割
  • Http 启用压缩传输方式，Content-Encoding: gzip

3. 利用缓存

• 优势：合理设置HTTP缓存策略可以减少重复资源的下载，减少服务器负载，加快页面加载速度。
• 实施：通过设置Cache-Control、ETag等HTTP头部，控制资源的缓存策略。

4. 减少HTTP请求

• 优势：每个HTTP请求都会产生一定的延迟，减少请求的数量可以显著提高页面加载速度。

• 实施：合并CSS和JavaScript文件，使用CSS精灵图，利用内联CSS和JavaScript减少外部请求。

5. 延迟加载非关键资源

• 优势：延迟加载页面上非关键的资源（如图片、视频等），可以让关键内容更快地呈现给用户。

• 实施：使用Lazy Loading技术，只有当资源进入视口时才加载

6. 预加载关键资源

• 优势：预加载可以让浏览器提前下载页面上将要用到的关键资源。

• 实施：使用标签预加载字体、CSS、JavaScript等关键资源。

7. 使用CDN

• 优势：CDN（内容分发网络）可以让资源从用户地理位置最近的服务器加载，减少延迟。

• 实施：选择一个提供全球服务的CDN供应商，将静态资源部署到CDN上。

8. 优化图片资源

• 优势：图片通常是网页资源中体积最大的部分，优化图片可以显著减少页面大小。

• 实施：根据需要选择合适的图片格式，调整图片大小，使用图片压缩工具