一行代码实现网站移动化的原理与实现
阅读时间 10 分钟
前言
在 2013 年,智能手机才刚刚开始进入千元机时代,手机硬件和手机 App 开发成本远远高于 2020 年现在的市场平均价,并且企业网站移动化还是一个新概念。
企业和政府开始重视门户网站在移动端浏览器的体验,例如中国政府网,联想,微软,w3c,csdn, 探路者等等,他们在寻找企业网站移动化解决方案的过程中,在经过预算,技术,产品体验以及服务质量的综合对比,最后选择云适配 (Allmobilize )方案,而这个方案的特点是在原有的 pc 前端工程中引入"一行代码实现网站移动化",这行代码实际上是在网页 head 标签之后立刻引入一个 js 的外部脚本,而这个 js 脚本有哪些值得学习的研发知识呢?
一些案例
Allmobilize 方案特点
一行代码,快速部署
只需在网页嵌入一行 JavaScript 代码,便实现网站移动化,客户学习接受成本低
自动化更新,内容实时同步
适配后的移动网站内容自动与 PC 端实时同步更新,完全无需人力同步维护,同步率 99.9%,同步响应时间平均 0.01 秒以内。
网址不变,统一 URL
移动网址和 PC 网址始终一致,无需进行二次推广,有助提升网站在移动搜索引擎上的排名;统一 URL,也利于彰显企业形象,提高客户信任度。
原理解析与实现
总结为三个核心步骤:
1. 阻止浏览器渲染原始 PC 网页渲染。
2. 创建网页移动端新的阅读视图模板。
3. 移动端视图模板与 PC 视图数据融合,渲染。
一、阻止浏览器渲染原始 PC 网页渲染
假如访问 https://www.kuaishou.com/,浏览器如果正常进行渲染,看到的将是这个电脑版网页,如果引入一行脚本,最终的预期结果是阻止浏览器渲染电脑版网页,显示一个移动端的视图,那脚本内怎么实现呢?
1. 1 阻止资源加载,样式和脚本执行
已知 DOM 文档的加载步骤:
(1)解析 htm l 结构
(2)加载外部脚本和样式表文件
(3)解析并执行脚本代码
(4)构造 HTML DOM 模型,DOMContentLoaded 执行点 // 【此时加工 img,ifram,script, link 等标签】
(5)加载图片等外部文件
(6)页面加载完毕
如果要达到阻止资源加载,样式和脚本执行的目的,那么就需要将网页 dom 不能被浏览器正常识别:
href 修改后 x-href
原始
调整后
src 修改为 x-src
原始
调整后
script 增加 type="text/x-script"
原始
调整后
style 增加 media="x-media"
原始
调整后
2.1 阻止图片、新窗口、和一些会延迟加载的对象的加载
Web Api 中的 window.stop() 恰好能实现目的,IE 也通过 document.execCommand('stop') 支持
二、创建移动端渲染内容
第一步中,我们已经成功阻止浏览器渲染原始 PC 网页渲染,那么第二步我们需要创建移动端体验视图。
那用户应该看到什么样的新网页内容呢?不同的网页地址又是怎么进行区分的呢?
2.1 通过正则映射新的网页配置
在 allmobilize.js 首先设计多组以正则表达式为键,移动端网页内容配置为值的字典,以下为例:
代码中会对符合 "^\/docs\/(News|news)\.asp" 或 "\/detail\/(.+)$" 正则规则的网页进行适配。其中的 template 和 crawlData 分别对应一个前端模板(已构建在 allmobilize 脚本中,这些模板实际就是一个全新的 html,有自己的 css, js 和 html )和抓取数据的函数,例如新页面模板或数据配置等等, 其中 $ 的操作的 dom 模型上下文实际为原有的 pc 的 dom 模型,这样就做到了与 pc dom 的文字,数据同步
2.2 打开一个新文档
三、移动端数据内容实时同步
在第二步涉及的 crawlData 函数当中的 $ 操作,所涉及的 dom 模型上下文实际为原有的 pc 的 dom 模型, 在完成阻止原有网页渲染之后,allmobilize 脚本不仅会创建新视图,同时会提前缓存原有网页的整个 dom 节点,这样就可以通过抓取原有 dom 节点上的数据,完成新网页内数据内容的实时同步更新,最终做到例如电脑版的导航一定是和移动端新网页内容的导航一一对应的。
最后,我们可通过以下的时序图来了解 allmobilize 脚本的整个工作流程,如下图:
总结
这个方案在 2013 年的时候在市场内算一个非常不错的创新,对于一些历史悠久编码不规范包含 大量 table 布局 的 html 网页虽然还是有大量的人工编码,但是最终企业完成网站移动化的实施成本远远降低了,当时联想中国的移动端商城在一周内就完成开发上线。
关于规模化
这项 allmobilize 技术在 2013 年最后是如何达到规模化的,有以下措施:
通过抓取和机器学习积累了不少网站适配的公共脚本和原则,自动生成网站的适配脚本
通过 Web IDE 和积木托拽式的工具快速完成模板文件的创建编码,以及数据提取脚本编码,降低编程门槛
与 CMS 厂商对接合作模板
开源了 HTML5 跨屏前端框架 AmazeUI
大范围进行人力外包, 进一步降低成本
最后感兴趣的同学可以在移动端调试模式下访问http://www.gov.cn/ 这样的案例网站进行“一行代码适配网站的技术”探秘,希望这项技术对你有所启发。
版权声明: 本文为 InfoQ 作者【张驰Terry】的原创文章。
原文链接:【http://xie.infoq.cn/article/6a9d509cd617dc077af23edcc】。文章转载请联系作者。
评论