移动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技术的发展!
移动Web加速技术月报第1期相关推荐
- 移动Web加速技术月报第2期
作者 | Brilliant Open Web 团队breezet.shdong 编辑 | 尾尾 为推进Web技术的发展,Brilliant Open Web团队特推出每月一期的<移动Web加速 ...
- MIP 技术月报(4月):支持熊掌号登录;优化页面悬浮元素
之前由MIP团队维护的<移动 Web 加速技术月报>从本期开始,正式升级为<MIP 技术月报>,与以往不同的是,<MIP 技术月报>将会与大家分享包含移动加速技术以 ...
- MIP技术进展月报第2期: 数据绑定,异步脚本加速
一. 功能更新 1. mip-bind 上线,实现复杂交互 MIP bind 双向绑定机制和组件上线,提供双向绑定的特性:能够允许页面实现数据驱动功能,开发者可以在任意场景修改数据,并驱动页面元素变动 ...
- 极客技术专题【009期】:web技术开发小技巧
为什么80%的码农都做不了架构师?>>> 日期:2013-8-26 来源:GBin1.com 技术专题:Seajs介绍 (分享人:choaklin) 专题演讲稿:SeaJS的 ...
- cocos creator 安卓原生平台环境_竞技对抗小游戏单挑篮球开发历程 | Cocos技术派第12期...
本文来自于"Cocos 荣耀讲师"征稿活动第1期,最先发表于 Cocos 中文社区,作者 ID:蟹老板,2017年加入社区,文章作品包括<猎头专家的开发历程>等. Co ...
- JVM技术周报第2期
JVM技术周报第2期 JVM技术周报分享JVM技术交流群的讨论内容,由群内成员整理归纳而成.如果你有兴趣入群讨论,请关注「Java技术精选」公众号,通过右下角菜单「入群交流」加我好友,获取入群详情. ...
- 千亿级流量来袭,如何用硬件加速技术为CPU减负?
阿里妹导读:通用处理器(CPU)的摩尔定律已入暮年,而机器学习和Web服务的规模却在指数级增长.如何用硬件加速来提升性能.降低成本?下面我们一起来看看. 一.背景介绍 通用处理器(CPU)的摩尔定律已 ...
- 广州技术沙龙第 4 期报名开始!
赖勇浩(http://laiyonghao.com) 特别告示 广州技术沙龙第 4 期,走出广州,走向深圳,将于 12 月 19 日在深圳深南东路的深圳发展银行大厦举行,并第一次组织了多达 4 个高质 ...
- 音视频技术开发周刊 94期
『音视频技术开发周刊』由LiveVideoStack团队出品,专注在音视频技术领域,纵览相关技术领域的干货和新闻投稿,每周一期.点击『阅读原文』,浏览第94期内容,祝您阅读愉快. 架构 衡量视频质量有 ...
最新文章
- 流水账之都市:我是一个客居者
- 量子位「MEET 2021智能未来大会」来啦!邀智能科技企业共探明日行业新格局
- 计算智能-群智能算法-蚁群算法matlab实现
- Android Glide数据更新及内存缓存、硬盘缓存清理
- Preferences偏好设置
- usb管控软件_外发SMT贴片加工质量管控要求
- Linux 基本命令(三)--histroy 常用命令详解
- android多版本打包,Android的持续化集成及多版本打包
- SecureCRT学习之道:SecureCRT常用快捷键设置与字体设置方法
- 內嵌html字符串顯示
- 电视机魔百盒显示连接服务器失败,【当贝市场】魔百盒EPG主页加载不出来办法详解...
- 360浏览器Linux版内核,360安全浏览器国产操作系统版下载,附特色功能介绍
- 几分钟了解Dreamweaver代码的自动排版以及dw代码的格式化
- mysql存储过程(通俗易懂)
- 探究腾讯云TCA和阿里acp的区别
- NEMU PA1实验思路
- 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转。 输入一个非减排序的数组的一个旋转,输出旋转数组的最小元素。 例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转,该数组
- Python科学计算:读取txt,csv,mat文件
- OpenCV for Python之图像RIO与泛洪填充
- DevOps系列之 —— 持续开发与集成(六)静态代码检查
热门文章
- android padding作用,android:padding和android:layout_margin的区别
- BugkuCTF-MISC题三色绘恋
- 判断单链表是否带环?若带环,求环的长度?求环的入口点?(C语言)
- mysql 函数返回查询结果_MySQL数据库中常用查询函数简介
- 部门名称部门结构叠用_金属结构分公司三部门联合开展工会小组活动
- java设计模式之道文字版,Java Web设计模式之道 PDF
- linux默认的https端口,如何在Ubuntu 18.04 Bionic Beaver Linux上拒绝除HTTP端口80和HTTPS端口443之外的所有传入端口...
- python tkinter text改变文本字体颜色_如何更改Tkinter中文本的颜色?
- linux下使用odbc连接mysql_Linux环境下通过ODBC访问MSSql Server
- debian 删除mysql数据库_Debian中完全卸载MySQL的方法