网站内容更新方案(前端页面热更新了解过前端性能优化的同学应该清楚)

　　网站内容更新方案(前端页面热更新了解过前端性能优化的同学应该清楚)

　　原文链接：前端页面热更新的实现

　　前端页面热更新

　　了解前端性能优化的同学应该都知道，加速页面加载的终极方案是CDN。这是由BS架构本身的特性决定的。无论前端加速方式是什么，最终都会回到客户端文件传输；相比之下，CS架构没有加载压力，但是CS架构的问题是更新不灵活。有没有办法结合这两种架构的优点，在加载速度和更新灵活性之间找到平衡点？这是本文要讨论的一个解决方案：前端热更新。

　　计划概述

　　“前端”和“热更新”这两个词通常很少一起出现。提到的热更新一般是指APP的一种静默更新方式，在用户使用时会悄悄检测并下载增量更新包。，当用户下次打开APP时，自动应用更新，从而隐藏了APP“更新”的无形动作。前端页面的加载，每次都相当于“全面更新”。能够使用“本地模板”将大大缩短前端加载时间，在此前提下，我们还可以实现前端模板热更新机制，以免影响页面更新的实时性。

　　应用场景

　　场景一：APP内嵌页面。

　　例如，电子商务应用的首页经常需要修改或制作活跃的皮肤。如何降低更新成本成为一个大问题。使用热更新方案，我们可以用HTML来实现APP的首页。页面内容作为模板存储在localStorage中，模板在后台静默更新，下次自动生效。对于具有一定时效性的活动皮肤，我们会以补丁的形式发布。, 补丁文件叠加在模板上，产生最终的活动模板效果。对于补丁包，我们可以提前加载并预存到本地。补丁包应该收录自己的有效期信息。当时间在活动周期内时，前端将应用补丁。最后，热更新页面，

　　场景二：一个追求加载速度的网页。

　　对于网页来说，更新不是问题，加载才是最大的问题。如果单个页面想要最大化页面显示的速度，那么这个方案也可以作为一种加速的方法，但是因为页面的所有代码都会存储在localStorage中，所以不适合广泛使用.

　　需求细化

　　基于以上场景和需求，我们最后要做的是一个“shell”页面。页面没有具体的业务内容，只实现了热更新功能。每次加载时，首先检查localStorage中是否有模板，如果有则立即应用。,此时显示页面，如果没有，则进入下一步；下一页会请求模板管理界面获取最新的模板信息。获取到模板信息后，如果本地有模板，则将版本信息与本地模板进行比较。如果版本一致，则表示缓存命中，流程结束；如果本地版本不是最新的，则会获取最新的模板并存储在本地，下次加载页面时会应用最新的模板，流程结束；另一种情况，如果第一次没有加载本地模板，则会获取最新的模板，保存到本地，然后再应用模板，流程结束。

　　前面说的是stable模板的更新过程。稳定模板过程结束后，将进入补丁模板更新过程。首先检查本地是否存在补丁模板。如果已经存在，请检查当前时间是否与补丁的有效期匹配。如果匹配，请应用补丁。如果不匹配，则进入下一步；下一步会获取最新的补丁模板并保存到本地，然后查看当前时间。时间是否与最新补丁的有效期匹配，匹配则应用模板，不匹配的过程结束。

　　完整流程如图：

　　实施细则

　　接口数据

　　根据功能需求，我们需要接口返回稳定模板信息和活动模板信息，两者分别收录id和url两个字段。id用于版本验证，url指向模板文件的下载地址，活动模板信息还需要提供额外的循环字段，定义与活动模板的有效期相反，我们还需要接口返回服务器的当前时间以匹配活动模板的有效期。最终完整的数据结构如下：

　　{ "status": "Y", "data": {

"stableVersion": {

"id": "17",

"url": ""

},

"activeVersion": {

"id": "18",

"url": "",

"cycle": "2018,02,01-2018,02,10"

},

"today": "2018,02,06" }

}

　　本地数据

　　本地保存的数据与接口数据大致相同。仅保留 stableVersion 和 activeVersion 信息。该字段被添加到 id 和 url 基础并添加模板以保存模板字符串。完整的本地数据结构如下：

　　{ "stableVersion": {

"id": "17",

"url": "",

"template": "" }, "activeVersion": {

"id": "18",

"url": "",

"cycle": "2018,02,01-2018,02,10",

"template": "" }

}

　　模板文件

　　前端页面由三种语言组成，但是我们想通过一个请求就得到模板文件，所以模板是一个收录html/css/js的文本文件，标签格式和普通的HTML文件一样，考虑模板对于应用部分的实现，需要就如何编写标签达成一致。比如css必须用标签包裹，js必须用标签包裹，这样使用正则表达式就可以很容易的提取出代码段的每一部分。

　　模板申请

　　如上一段所述，获取模板文件后，可以使用正则表达式获取三种语言代码，然后只需按照css>html>js的顺序插入到页面对应的位置即可完成模板申请。唯一的区别是html代码会以innerHTML的方式覆盖到body元素中。在应用的顺序上，css放在html之前，避免重绘，js放在html之后，可以在js中操作DOM。

　　虽然活动模板被定义为补丁，但模板的组成其实和稳定模板是一样的，申请方法也完全一样。但是，由于活动模板是在稳定模板之后应用的，所以活动模板的css和js会在补丁中影响页面。,对于普通的换肤需求，只需要css和js就够了，但是如果要对html进行一些改动，按照html叠加应用方法，需要在activity模板中给出完整的html代码，才能达到修改html的目的.

　　显示结果

　　/WEB-OTA/（自动识别二维码）

　　后记

　　整个方案的流程比较琐碎，但是实现过程其实很简单，部署成本也不高。它只需要后端来管理模板并提供更新接口。不过这套更新机制还有一个小问题，就是在发布新版本时，用户第一次看不到新版本，必须下次访问才能更新到新版本。这是为静默更新支付的小代价。如果你真的介意，这个问题其实很容易解决。当检测到新版本的*敏*感*词*时，您需要提示用户重新启动/刷新。

　　相比HTML5 manifest缓存方案，我觉得更灵活，但是缺点是不支持静态文件的碎片化管理，但是扩展这个功能并不复杂，无非就是在里面多几个字段模板信息。

　　代码在这里，让我们看一下代码了解更多细节。

　　IMWeb核心成员运营的前端NEXT学位课程第5期招生即将结束！

　　感兴趣的朋友，请点击这里了解更多课程！