HTML5页面无缝闪开的问题及解决方案_html页面切换白屏资源-CSDN文库

55 浏览量 2020-11-20 15:10:48 上传评论收藏 95KB PDF 举报

资源详情

资源评论

资源推荐

HTML5页面无缝闪开的问题及解决方案页面无缝闪开的问题及解决方案

在传统的 web 优化中，我们可以采取压缩、拆包、动态加载等方法减少首屏资源大小，也能通过离线包、页面直出等方案加

速 html 返回，之前一篇h5 秒开大全有部分简析。在大部分场景中，这些方案都足够用，也能得到出色的效果。但仍有两种无

法尽善尽美的地方：其一是短暂的白屏现象不可避免，其二是对于超大型 web 应用难以做到秒开。结合客户端特性，我们有

没有办法，进一步做到极致，打开 web 页面和打开客户端页面无差异的体验呢？

传统方案的困境传统方案的困境

无论是 html 离线，还是直出，以及让 webview 启动和网络请求并行，页面的切换和打开都无法避免 html 加载这一过程。对

于大型应用而言，庞大的 js 初始化解析和执行会耗费巨大的时间。

新的思考方向？新的思考方向？

速度优化的本质是以空间换时间。我们是否可以从这个思路，将打开 webview 及解析 html 这以过程省略掉呢？答案是可以

的。

容器化方案容器化方案

容器化即是我们最终探索与实践的出来的一套方案。正常 web 页面关闭后，webview 组件即会销毁掉，下一次再打开需要重

新启动。通常让 webview 保持常驻的做法可以节省 webview 启动时间，但简单的常驻 webview 并不能做到页面秒开，页面

打开仍然需要重新解析 html。

对于我们的应用特征而言，页面切换实际上是仅仅内容数据的变化，比如切换一篇文档，其 html 容器及样式都是同一套，而

差异仅仅只是在数据上，重新载入 html 及初始化 js 这部分耗时完全可以避免掉。让 webview 组件及其容器内的 html 页面常

驻，在文档切换的过程，仅仅对数据进行替换，这即是容器化方案。容器化方案省去了 webview 重复启动和渲染 html 的问

题，打开文档，耗时只在做数据替换，真正做到了秒开。

容器切换

web 侧如何感知到不同的页面在进行互切换，数据如何做到替换呢？

首先在 app 打开的时候，文档列表会进行数据预拉取，同时触发客户端预启动容器，除此外，其他任意场景也能按需触发容

器启动（后面会聊到）。容器内会提前进行 html 渲染和 js 执行，此时的数据是空的。用户点击文档，客户端会对打开 url 这

一行为进行监听，同时解析 url，取出唯一标识符，判断本地是否已经存在并且符合要求的数据，如果条件命中，直接使用已

经打开的容器切出，通知到容器内的 web，web 收到通知，通过 url 取出标识符，从本地进行数据获取，然后对数据进行替换

渲染，从而完成页面切换。

容器化数据替换

直接容器替换的思路省去了代码加载和解析时间，但对于前端代码而言，需要支持直接替换数据。大部分前端项目代码设计都

是自执行调用方式，支持容器化的前提是：需要对代码改造成可支持数据组装和销毁。

// 大部分应用加载页面初始化的场景

class App {

public init() {

initA();

initB();

// 初始化各种模块

...

}

}

const app = new App();

app.init();

自执行调用后，大量的内部依赖模块也依次进行初始化，然后数据常驻在内存中，通常对于加载一个正常网页而言，用户每次

都是新开页面，加载 html，重新进行解析和初始化，并不会带来什么问题。但是按照容器化思路，页面不会重新载入，只进

行数据替代，对于大型应用而言意味着成千上万的模块需要支持内存释放和数据切换，一旦没有处理好，会面临严重的内存泄

露和代码健壮性问题。如何组织和管理这些代码，支持可插拔式，让整个页面初始化流程都能链式组装，可以进行配置，是进

行容器化代码改造的难点。

依赖倒置

依赖倒置原则的是指内部模块不应该依赖外部模块，底层模块不应该依赖上层模块。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余2页未读，立即下载

评论0

内容反馈

weixin_38652196

粉丝: 1
资源: 939

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip