移动Web加速技术月报第1期

作者 | Brilliant Open Web团队breezet、JennyL

编辑 | 尾尾

为推进Web技术的发展,Brilliant Open Web 团队特推出每月一期的《移动Web加速技术月报》,该月报将整理较流行的移动Web加速技术,并跟进各项技术的进展和发展方向,以期帮助开发者了解或选用相关的技术,把握技术发展趋势。欢迎关注【OpenWeb开发者】公众号并回复“加群”,一起探讨相关技术。

一、前言

移动设备已经成为当下使用频率最高的电子设备,而移动Web依然是移动设备中使用频率最高的应用场景。

站点页面性能提升可以使得用户浏览站点时的体验得到良好改善,作为其中一条技术分支,移动Web加速技术的方法和技术方案在近几年得到了不断发展。无论是内容分发平台、浏览器提供商、网络提供商还是Web站点,都在通过各种各样的移动Web加速技术为用户提供更良好的页面浏览体验。

二、移动Web加速技术有哪些方向?

开始的前言内容中我们已经提到,参与移动Web生态的几个重要角色分别是内容分发平台、浏览器提供商和网络提供商以及Web站点。每个角色都在自己所擅长的领域通过技术创新来给用户提供更快速的移动Web体验。因此,移动Web加速的几个技术方向也和几个重要参与者的角色职能密不可分。

比较重要的技术方向分别是:

1. 页面加载与缓存

移动Web加速的其中一个重要技术方向是针对页面加载和缓存相关的加速技术。

在此方向中,页面分发端、浏览器和移动网络是主要的影响因素,页面加载相关的技术解决方案,也是从这三个影响因素为出发点,来进行技术设计和实现的。

页面加载加速主要聚焦在页面云加速(CDN Cache)以及移动端加速、页面预取/预渲染等相关技术点。

2. 页面构建

移动Web加速的另一个核心技术方向是通过明确页面的正确构建方法,来提升页面在渲染和浏览时的用户体验。

移动页面的渲染对用户体验的影响是非常巨大的,直接关系到用户在打开页面时能否很快的看到首先想要浏览的内容(首屏渲染)。

影响首屏渲染的因素非常多,通过正确的页面构建方法,可以进一步提升站点页面的首屏渲染性能并且不伤害用户的浏览体验。

三、相关技术介绍

在每期的网页加速技术月报中,我们都会为大家介绍相关的加速技术知识点。本期先为大家介绍页面云加速相关的技术知识。

页面云加速的主要核心其实就是使用云端缓存或代理的方案,让用户能通过更快的网络获取加载页面。主要的核心技术点有两部分:基于CDN的页面Cache或代理、基于端(Web容器或移动浏览器)与云端交互的协议机制。

1.基于CDN的页面Cache或代理

此技术其实在近几年已经非常成熟,无论是各种云服务解决方案还是CDN服务提供商都已经有非常成熟的技术能力。此项技术的思路是从Web服务提供者角度来提供更好的网络环境来进行移动Web加速。在此就不做更多的介绍。

2.基于端与云端交互的协议机制

最近两年开始兴起的新的云端加速技术方案,该技术在云端的Cache机制(主要是CDN)的基础上,使用端来代理用户页面加载行为,调用云端的Cache页面返回给端使用。此项技术的思路与前者不同的是它想解决用户在该端上(Web容器或移动浏览器)的所有移动Web站点的访问加速,而不是某一个站点或已经提供了CDN访问的站点。主要作用是可以提升用户在该端上的Web浏览体验,让用户体验优于其他竞品。

主要技术 有:Google AMP Cache、Baidu MIP Cache、UC浏览器云加速、QQ浏览器云加速等。

四、主要技术进展

1.AMP本月进展

AMP(Accelerated Mobile Pages)是谷歌提供的网页加速技术,其官方网站是:https://developers.google.com/amp/。AMP在本月不仅进行了技术方面的优化,还计划在全球范围内进行推广,具体如下。

(1) AdWords 支持AMP化广告落地页:AdWords是广告提供商,使用AMP落地页能够快速加载,提高广告转化率。AMP的表单,内容实时更新和统计支持,使AMP适用于广告落地页。

(2)CONDÉ NAST是如何使用AMP的:
CONDÉ NAST拥有多个新闻业务,选择AMP不是因为原来页面慢,而是相信Google的服务和CDN; NAST公司将AMP和CMS结合使用,自动将新闻生成为AMP页面。

(3) AMP技术团队将要进行全球巡回推广:包括新加坡、悉尼、伦敦、北京、上海等地,感兴趣的读者可以关注。

2.MIP本月进展

MIP的官方网站是:https://www.mipengine.org/,GitHub地址是:https://github.com/mipengine/。MIP在本月也更新了诸多新功能,进行了一系列升级,具体如下。

MIP新增功能

(1)增加储存功能,使用localStorage和fetch实现。储存功能可用于代替cookie保存用户设置,登录状态,携带信息,与服务器进行数据通信。

(2)MIP-Cache链接全量上线二级域名,详细说明及影响见《MIP-Cache域名升级》。

MIP升级功能

(1) mip-video 视频组件升级。支持source多视频源播放。

(2)mip-showmore 折叠组件交互升级。支持展开后不再显示收起按钮(https://www.mipengine.org/examples/mip-extensions/mip-showmore.html)。

(3)mip.js 升级。修复a链接在mip-iframe中不能跳出的问题。

校验规则更新

在9月初,MIP更新了少量校验规则,对90%以上的MIP页无影响,保证MIP校验的严谨性。更新后的规则为:

(1) 对 head 中 base 标签增加了限制,避免cache改写后链接指向有问题。

(2)强制要求页面引用https 的 mip.js,避免脚本被不法劫持。

(3)认定src=” “(引号之间只有空格)情况等同于src=”“,视内容为空。

(4)升级template src校验,支持文档中src={{url}}的写法。

进行中

mip-bind 组件支持数据双向绑定。页面异步更新,可用于电商等复交互页面。

MIP-Cache 支持返回webp图片。使用压缩率更高的图片,减少图片大小。

四、总结

移动Web加速的下一个方向应该是探索页面加速上的标准策略分级,并影响内容分发平台、搜索引擎等流量入口使用标准的页面性能分级来进行更广泛层面的引导,提升真实用户接触到的互联网站点的页面体验。

最后,欢迎各位读者补充各项移动Web加速技术及其最新进展,可以发送邮件到 openweb@baidu.com,也可以关注【OpenWeb开发者】公众号并回复“加群”,一起来探讨相关技术,与我们携手推进Web技术的发展!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/535895.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis(四):String字符串数据类型详解

Redis 字符串数据类型的相关命令用于管理 redis 字符串值,基本语法如下: redis 127.0.0.1:6379> COMMAND KEY_NAME1、String类型的常用命令 1.1、set、get SET key v//设置key值为v get key //获取key值1.2、Append APPEND key "hi" //…

五个案例简述Web设计原则:通用一致

作者 | 百度搜索用户体验中心 《Web设计指南》分为设计原则、基础规范两方面主要内容,同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者,订阅《Web设计指南》。 前言 《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南&a…

Redis(五):List集合数据类型详解

Redis列表是简单的字符串列表,按照插入顺序排序。你可以添加一个元素到列表的头部(左边)或者尾部(右边) 一个列表最多可以包含 232 - 1 个元素 (4294967295, 每个列表超过40亿个元素)。 实例: redis 127…

WebP 在减少图片体积和流量上的效果如何?WebP 技术实践分享

作者 | Jackson 编辑 | 尾尾 不论是 PC 还是移动端,图片一直占据着页面流量的大头,在图片的大小和质量之间如何权衡,成为了长期困扰开发者们的问题。而 WebP技术的出现,为解决该问题提供了好的方案。本文将为大家详细介绍 WebP 技…

Redis(六):Set集合数据类型详解

Redis 的 Set 是 String 类型的无序集合。集合成员是唯一的,这就意味着集合中不能出现重复的数据。 Redis 中集合是通过哈希表实现的,所以添加,删除,查找的复杂度都是 O(1)。 集合中最大的成员数为 232 - 1 (4294967295, 每个集…

百度主任架构师谭待:如何让不带团队的程序员负责重大项目?

演讲 | 谭待 整理 | 赵新龙、尾尾 谭待,百度主任架构师、百度搜索公司技术委员会联席主席。主要研究领域在分布式系统和搜索引擎,是百度BVC代理计算和Matrix私有云的主要设计者,两获百度最高奖。主持设计了百度新一代搜索架构,在…

Redis(七):Hash哈希数据类型详解

Redis hash 是一个 string 类型的 field 和 value 的映射表,hash 特别适合用于存储对象。 Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿)。 实例: 127.0.0.1:6379> HMSET runoobkey name "redis tutorial"…

Chrome Dev Summit 2017参会笔记

作者 | 高磊 编辑 | 尾尾 为期两天的 Chrome Dev Summit 2017 于 10月23日~24日在美国旧金山举办。由于我们近期和Google的合作较多,对Google的动作也比较关注,所以受邀参加了这次的Chrome Dev Summit (CDS)。本文是我在现场做的…

Redis(八):Zset有序集合数据类型详解

Redis 有序集合和集合一样也是string类型元素的集合,且不允许重复的成员。 不同的是每个元素都会关联一个double类型的分数。redis正是通过分数来为集合中的成员进行从小到大的排序。 有序集合的成员是唯一的,但分数(score)却可以重复。 集合是通过哈希表实现的,…

Redis(九):Redis特殊类型之geospatial

朋友的定位,附近的人,位置共享,打车距离 redis在3.2就已经推出了geospatial!两地之间的距离,方圆几里的人!都可以用它实现 这个需要把你所在地的经纬度输进去,我们可以在http://www.jsons.cn/ln…

九个案例简述Web设计原则:简洁清晰

作者 | 百度搜索用户体验中心 《Web设计指南》分为设计原则、基础规范两方面主要内容,同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者,订阅《Web设计指南》。 前言 《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南&a…

Redis(十):Redis特殊类型之Hyperloglog基数统计

redis 2.8.9版本就更新了Hyperloglog数据结构! Hyperloglog:基数统计算法!0.81%的错误率,不过统计大量数据可以忽略! 在 Redis 里面,每个 HyperLogLog 键只需要花费 12 KB 内存,就可以计算接近 …

W3C近期要闻:与Mozilla MDN合作联合开发Web平台文档

作者 | W3C中国 「OpenWeb开发者」依托于BOW(Brillant Open Web)团队,是一个专门的 Web 技术建设小组,致力于推动 Open Web 技术的发展,将不定期为读者同步W3C要闻。 注:由于微信不支持外链,了解…

Redis(十一):Redis特殊类型之Bitmap位图

1、位存储 只有0和1两种状态! Bitmap 位图:数据结构,都是操作二进制位来进行记录 登录/未登录 活跃/不活跃 打卡 两个状态的都可以使用Bitmap! 2、常用命令 2.1、用Bitmap来记录 周一到周日的登陆情况 127.0.0.1:6379> …

移动Web加速技术月报第2期

作者 | Brilliant Open Web 团队breezet、shdong 编辑 | 尾尾 为推进Web技术的发展,Brilliant Open Web团队特推出每月一期的《移动Web加速技术月报》,该月报将整理较流行的移动Web加速技术,并跟进各项技术的进展和发展方向,以期…

Redis(十二):Redis事务的基本操作

1、Redis事务概念 Redis 事务的本质是一组命令的集合。事务支持一次执行多个命令,一个事务中所有命令都会被序列化。在事务执行过程,会按照顺序串行化执行队列中的命令,其他客户端提交的命令请求不会插入到事务执行命令序列中。 总结说&…

大型网站HTTPS 实践(一)| HTTPS 协议和原理

作者 | 百度HTTPS技术支持团队 百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。本文就着重介绍了 HTTPS 协议涉及到的重要知识点和平时不太容易理解的盲区,希望能对大家理解 HTTPS 协议有帮助。百度 HTTPS 性能优化涉及到大量内容…

MongoDB(一):简介

1、MongoDB概述 MongoDB 是由C语言编写的,是一个基于分布式文件存储的开源数据库系统。在高负载的情况下,添加更多的节点,可以保证服务器性能。MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB 是一款流行的开源文档型…

大型网站HTTPS实践:HTTPS对性能的影响

作者 | 百度HTTPS技术支持团队 百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。百度 HTTPS性能优化涉及到大量内容,从前端页面、后端架构、协议特性、加密算法、流量调度、架构和运维、安全等方面都做了大量工作。本系列的文章将…

Redis(十三):Redis实现乐观锁

1、悲观锁与乐观锁 乐观锁和悲观锁是一种程序设计思想,而不是具体的代码。乐观锁和悲观锁应用的场景有很多,在数据库和多线程等等都会用到。 悲观锁:总是假设最坏的情况,每次去拿数据的时候都认为别人会修改,所以每次…