移动开拓中的Web:WebView、WebKit、JSCore、Web 优化、热修复、跨平台……
因为 Web 页面内哀求流程不行控以及收集情形的影响,对付 Web 的加载来说,收集哀求一向是优化的重点。开拓者较为常用的做法是行使 Native 并行署理数据哀求,更换 Web 内核的资源加载。在客户端初始化页面的同时,并行开始收集哀求数据;当 Web 页面渲染时向 Native 获取其署理哀求的数据。 而将并行加载和预加载做到极致的优化,就是离线包的行使。将常用的必要下载资源(HTML 模板、JS 文件、CSS 文件与占位图片)打包,App 选择吻合的机缘全手下载到当地,当 Web 页面渲染时向 Native 获取其数据。 通过离线包的行使,Web 页面可以并行(提前)加载页面资源,同时挣脱了收集的影响,进步了页面的加载速率和乐成率。虽然离线包作为资源动态更新的一个方法,公道的下载机缘、增量更新、加密和校验等方面都是必要举办计划和思索的偏向,后文会简朴先容。 伟大 Dom 节点 Native 化实现 当并行哀求资源,客户端署理数据哀求的技能方案逐渐成熟时,因为 WKWebView 的限定,开拓者不得不面临营业调解和适配。个中保存原有署理逻辑、回收 LocalServer 的方法最为广泛。可是因为 WKWebView 的历程间通讯、LocalServer Socket 成立与毗连、资源的一再编解码都影响了署理哀求的服从。 以是对付一些资讯类 App,凡是回收 Dom 节点占位、Native 渲染实现的方法举办优化,如图片、舆图、音视频等模块。这样不单能镌汰通讯和哀求的成立、提供越发友爱的交互、也能并行地举办 View 的渲染和处理赏罚,同时镌汰 Web 页面的营业逻辑。 HybridPageKit 中就提供封装好的成果框架,开拓者可以简朴的替代 Dom 节点为 NativeView。 按优先级分别营业逻辑 从 App 的维度上看,一个 Web 页面从进口点击到渲染完成,或多或少城市有 Native 的营业逻辑并行执行。以是这个角度的优化要害渲染路径,就是优先担保 WebView 以及其余在首屏直接展示的 Native 模块优先渲染,以是承载 Web 页面的 Native 容器,可以按照营业逻辑的优先级,在担保 WebView 模块展示之后,选择吻合的机缘举办数据加载、视图渲染等。这样就能担保在 Native 的维度上,要害路径优先渲染。 4. 优化整体流程 整体上对付客户端来说,我们可以从 Native 维度(容器和数据加载)以及 Web 维度两个偏向晋升加载速率,凭证页面的加载流程,整体的优化偏向如下: iOS 中 Web 相干延长营业1. 模板引擎 为了并行加载数据以及并行处理赏罚伟大的展示逻辑,对付非直出范例的 Web 页面,绝大部门 App 都回收数据和模板疏散下发的方法。而这样的技能架构,导致在客户端内必要增进替代对应 DSL 的模板标签,形成最终的 HTML 营业逻辑。简朴的字符串替代逻辑不单低效,还无法做到公道的组件化打点,以及组件公道地与 Native 交互,而模板引擎相干技能会使这种逻辑和示意疏散的营业场景实现得越发简捷和优雅。 基于模板引擎与数据疏散,客户端可以按照数据并行建设子营业模块,同时在子营业模块中处理赏罚和 Native 交互的部门,如图片裁剪适配、点击跳转等,天生 HTML 代码片断,之后基于模板举办替代天生完备的页面。这样不单镌汰了大量的字符串替代逻辑,同时营业也获得了公道拆分。 模板引擎的本质就是字符串的理会和替代拼接,在 Web 端差异的行使场景有许多差异语法的引擎范例,而在客户端较为风行的,有行使较为伟大的 MGTemplateEngine,它相同于 Smarty,支持部门模板逻辑。也有基于 mustache,Logic-less 的 GRMustache 可供选择。 2. 资源动态更新和打点 无论是离线包、当地注入的 JS、CSS 文件,照旧当地化 Web 中的默认图片,目标都是通过提前下载,替代收集哀求为当地读取来优化 Web 的加载体验和乐成率,而对付这些资源的打点,开拓者必要从下载与更新,以及 Web 中的会见这两个方面举办计划优化。 下载与更新
基于 LocalServer 的会见 (编辑:湖南网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |