专栏名称: InfoQ
有内容的技术社区媒体。
目录
相关文章推荐
新浪科技  ·  【#苹果10大高光时刻# ... ·  2 天前  
51好读  ›  专栏  ›  InfoQ

新技能Get:如何提升移动网页的加载速度

InfoQ  · 公众号  · 科技媒体  · 2017-06-05 08:00

正文

在过去,Web 开发者都是基于改善硬件或者提高带宽速度来优化用户体验。但是在近几年,爆炸式的移动 Web 浏览器的使用打破了这个途径。低带宽,高延迟,小内存,低处理器性能的移动设备环境,迫使开发者不得不想办法通过优化前端页面的性能来满足用户的性能预期。

上一篇我们讲解了,移动网络加速可以借鉴 PC 端的经验和使用更新的 HTTP2 协议来进行优化,这篇文章,主要介绍如何通过优化蜂窝网络以及更智能的加载方案,实现移动网页响应速度的蜕变!

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

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

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

  4. 此外,还可以研究算法改善 NAT 嵌套导致的网络延时,也可以直接通过 IPV6 的连接协议规避 NAT 的延迟问题。

设计更加智能的加载方案
采用分段加载和隐藏加载

  1. 分段加载又称懒加载,它能够在用户滚动页面的时候自动获取更多的数据,从而可以很大程度上减少服务器端的资源耗用。诸如 Lazyload.js 或 Belazy.js 都是非常成熟易用的开发包。

  2. 隐藏加载是在页面显示后再加载用户暂时看不到的信息,诸如图片展示窗里除了第一张图片,其他图片都可以采用隐藏加载的技术。

采用预加载技术

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

2、预加载技术不仅支持 PC,也已经支持 Android 系统,可惜的是目前尚不支持 iOS Safari。

3、事实上,Prefetch 是网页优化里 Prebrowing 的一部分,开发者还可以通过 DNS-Prefetch , Subresource,Preconnect,Prerender 等技术来实现预先解析 DNS 与提前渲染等优化。

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

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

智能调整图片分辨率

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

我们可以通过图像质量处理以及终端适配智能化的方法,实时动态的根据移动终端的屏幕裁剪调整图片,保证用户在加载页面时就获得所需的图片渲染,避免向网页发送大于可视区域的图片时导致的资源浪费。

福利放送

以上所讲的这些页面快速加载的技术手段,希望帮助读者了解更有效的实现途径,当然,如果你认为这些文字内容还不够的话,可以参加下面提到的深度技术在线课堂培训。

阿卡迈推出的 HTTP 在线课堂第二期,以图像质量处理与终端适配的智能化为主线,为读者免费放送海量图片的创建、存储与管理技术。课堂主讲内容:

  • 感知质量算法;

  • 如何基于设备屏幕自动调整图片大小;

  • 根据不同浏览器选择最合适的图片。

通过课堂培训,你将了解如何在不影响移动网页速度的前提下,采用智能化的方式避免大量手动操作,以更优质图像和网页响应速度吸引用户。感兴趣的读者可点击“阅读原文”或者长按下图二维码免费报名学习,方法给你了,剩下的就靠自己了~