Web前端学习:移动Web加速技术

简介: 移动设备已经成为当下使用频率最高的电子设备,而移动Web依然是移动设备中使用频率最高的应用场景。站点页面性能提升可以使得用户浏览站点时的体验得到良好改善,作为其中一条技术分支,移动Web加速技术的方法和技术方案在近几年得到了不断发展。

移动设备已经成为当下使用频率最高的电子设备,而移动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前端学习资料。

相关文章
|
4月前
|
安全 关系型数据库 测试技术
学习Python Web开发的安全测试需要具备哪些知识?
学习Python Web开发的安全测试需要具备哪些知识?
124 61
|
21天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
37 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
安全 Java 数据安全/隐私保护
springSecurity学习之springSecurity过滤web请求
通过配置 Spring Security 的过滤器链,开发者可以灵活地管理 Web 请求的安全性。理解核心过滤器的作用以及如何配置和组合这些过滤器,可以帮助开发者实现复杂的安全需求。通过具体的示例代码,可以清晰地了解 Spring Security 的配置方法和实践。
77 23
|
2月前
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
171 26
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
71 6
|
4月前
|
前端开发 JavaScript 搜索推荐
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
|
4月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
95 5
|
4月前
|
XML 前端开发 JavaScript
PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑
本文深入探讨了PHP与Ajax在Web开发中的交互技术。PHP作为服务器端脚本语言,处理数据和业务逻辑;Ajax则通过异步请求实现页面无刷新更新。文中详细介绍了两者的工作原理、数据传输格式选择、具体实现方法及实际应用案例,如实时数据更新、表单验证与提交、动态加载内容等。同时,针对跨域问题、数据安全与性能优化提出了建议。总结指出,PHP与Ajax的结合能显著提升Web应用的效率和用户体验。
95 3
|
4月前
|
SQL 安全 前端开发
Web学习_SQL注入_联合查询注入
联合查询注入是一种强大的SQL注入攻击方式,攻击者可以通过 `UNION`语句合并多个查询的结果,从而获取敏感信息。防御SQL注入需要多层次的措施,包括使用预处理语句和参数化查询、输入验证和过滤、最小权限原则、隐藏错误信息以及使用Web应用防火墙。通过这些措施,可以有效地提高Web应用程序的安全性,防止SQL注入攻击。
109 2
|
4月前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。

热门文章

最新文章