0

    如何利用HTTP技术提升网页的加载速度

    2023.07.21 | admin | 157次围观

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

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

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

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

    2.3 Server Push 带来的更快的资源推送

    I. 通过 Server Push 功能,服务端可以主动把 JS 和 CSS 等文件发送给终端,而省去了解析HTML 请求的过程。简单的说,当你需要访问某个文件的时候,它已经在乖乖的在后台躺好了。

    三、优化蜂窝网络

    I.具有实力的内容服务商可以把资源配置在离用户地理位置更近的地方,缩短最后一公里。

    II. 与移动网络服务商合作共同开发算法,实现实时自动调整互联网路由,避免网络拥堵、丢包与离线问题。

    III. 还可以采用优化TCP协议的方法,通过借助主流的Cubic、Bic以及Westwood算法,可以有效的避免网络拥堵。

    IV. 此外,还可以研究算法改善NAT嵌套导致的网络延时提高网站图片加载速度,也可以直接通过IPV6的连接协议规避NAT的延迟问题。

    如何利用HTTP技术提升网页的加载速度

    四、设计更加智能的加载方案 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%的内容都是由图片组成。管理这些图片除了需要考虑到图片的大小、格式、旋转、艺术处理、增加水印、存储空间等,还要顾及海量的设备的屏幕尺寸,以及适应终端上运行的浏览器。

    以上是我们给开发者总结的一些经验分享,希望能够对读者有所帮助,大家也可以注册下载阿卡迈的技术PPT详细了解如何通过CDN 的方式为(移动)网页提速。我们需要明确的是,专注移动网页的性能优化无疑是开发者需要努力的方向,然而用户并不等于机器。用户不关心你的网站发出了多少请求,也不在乎你的屏幕渲染得有多快,他们只关心网站带给他们体验上的感觉。因此,开发者在进行技术优化时,不仅仅是在某一技术点上的优化,更需要从网站的整体性能规划把控,让整个网站给客户呈现出更快的加载体验!

    版权声明

    本文仅代表作者观点。
    本文系作者授权发表,未经许可,不得转载。

    发表评论