HTTP网络优化思路

237 阅读4分钟

本文已参与掘金创作者训练营第三期「话题写作」赛道,详情查看:掘力计划|创作者训练营第三期正在进行,「写」出个人影响力

一、优化网络、使用cdn等技术

  • 具有实力的内容服务商可以把资源配置在离用户地理位置更近的地方,缩短最后一公里
  • 与移动网络服务商合作共同开发算法,实现实时自动调整互联网路由,避免网络拥堵、丢包与离线问题
  • 还可以采用优化TCP协议的方法,通过借助主流的Cubic、Bic以及Westwood算法,可以有效的避免网络拥堵
  • 此外,还可以研究算法改善NAT嵌套导致的网络延时,也可以直接通过IPV6的连接协议规避NAT的延迟问题

二、减少每个页面的 HTTP 请求数

  • 将共用的 JavaScript 和 CSS 代码放在公共的文件夹中与多个页面共享。
  • 确保在一个页面中相同的脚本不会被加载多次。同时,将脚本中的 Click 事件改为 On Touch 事件来减少固有的300ms延迟。
  • 使用 CSS Sprites 来整合图像,将多张图片整合到一个线性的网状的大图片中。
  • 使用 Cache-Control 或者 Expires 标记来实现浏览器缓存,从而减少不必要的服务器请求,尽可能地从本地缓存中获取资源。

2.2 减少每个请求加载的大小

  • 使用 gzip 这样的压缩技术来压缩图像和文本,依靠增加服务端压缩和浏览器解压的步骤,来减少资源的负载。
  • 整合并压缩 静态资源css、js、图片、视频等,删除不必要的字符与变量
  • 动态地调整图片大小或者将图片替换为移动设备专用的更小的版本
  • 懒加载,可以将不可见区域的内容延迟加载或暂时不需要的脚本进行延时读取

三、采用更优的 HTTP/2 协议

3.1 多路复用技术带来的请求-响应加速

I. HTTP/2 采用多路复用的技术,允许同时通过单一的 HTTP/2 连接发起多重的请求响应消息,从而大大的加快了网页加载时间。

3.2 更节省空间的二进制头部数据嵌套

I. HTTP/2 采用二进制格式传输数据,并把他们分割为更小的帧,相比于 HTTP/1.x 的文本格式传输更为方便。

II. HTTP1.x 的 header 由于 cookie 和 user agent 很容易膨胀,而且每次都要重复发送。HTTP/2 对消息头采用 HPACK 进行压缩传输,能够节省消息头占用的网络流量。

四、设计更加智能的加载方案

4.1采用分段加载和隐藏加载

I.分段加载又称懒加载,它能够在用户滚动页面的时候自动获取更多的数据,从而可以很大程度上减少服务器端的资源耗用。诸如Lazyload.js或Belazy.js都是非常成熟易用的开发包。 II. 隐藏加载是在页面显示后再加载用户暂时看不到的信息,诸如图片展示窗里除了第一张图片,其他图片都可以采用隐藏加载的技术。

4.2采用预加载技术

I.资源预加载目的是让浏览器在空闲时间下载或预读取一些文档资源,用户在将来将会访问这些资源时浏览器能快速的从缓存里提取给用户。

II. 预加载技术不仅支持PC,也已经支持Android系统,可惜的是目前尚不支持iOS Safari。 III. 事实上,Prefetch是网页优化里Prebrowsing的一部分,开发者还可以通过DNS-Prefetch , Subresource,Preconnect,Prerender等技术来实现预先解析DNS与提前渲染等优化。

4.3通过机器学习的手段智能加载

I.通过机器学习的方法,网站可以自动收集并分析用户的浏览习惯与访问信息,然后通过预加载的手段将最有可能访问的信息提前加载完成。

4.4智能调整图片分辨率

I.图片通常占用了Web页面加载的大部分网络资源,也占据了页面缓存的主要空间。 根据统计,一个站点平均62%的内容都是由图片组成。管理这些图片除了需要考虑到图片的大小、格式、旋转、艺术处理、增加水印、存储空间等,还要顾及海量的设备的屏幕尺寸,以及适应终端上运行的浏览器。