新闻资讯

新闻资讯 产品更新

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

编辑:admin     时间:2017-06-12

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

我们可以通过图像质量处理以及终端适配智能化的方法,实时动态的根据移动终端的屏幕裁剪调整图片,保证用户在加载页面时就获得所需的图片渲染,避免向网页发送大于可视区域的图片时导致的资源浪费.
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

回复列表

相关推荐