移动H5首屏秒开优化方案探讨

本来出自:IT摆渡网---一个IT实时问答系统--快速解决你的任何IT问题,无需等待!

IT摆渡网


网页设计


随着移动设备功用不断增强,web 页面的功用体会逐步变得能够承受,又由于 web 开发形式的许多优点(跨渠道,动态更新,减体积,无限扩展),APP 客户端里呈现越来越多内嵌 web 页面(为了配上当时流行的说法,以下把一切网页都称为 H5 页面,尽管可能跟 H5 没关系),许多 APP 把一些功用模块改成用 H5 完结。

尽管说 H5 页面功用变好了,但如果没针对性地做一些优化,体会仍是很糟糕的,首要两部分体会:

  • 呼应流通度:由于 webkit 的烘托机制,单线程,前史包袱等原因,页面改写/交互的功用体会不如原生。

本文先不评论第二点,只评论第一点,怎样削减白屏时刻。对 APP 里的一些运用 H5 完结的功用模块,怎样加速它们的发动速度,让它们发动的体会挨近原生。

移动H5首屏秒开优化计划评论

进程

为什么翻开一个 H5 页面会有一长段白屏时刻?由于它做了许多作业,大概是:

  • 一些简略的页面可能没有 JS 恳求数据 这一步,但大部分功用模块应该是有的,依据当时用户信息,JS 向后台恳求相关数据再烘托,是惯例开发方法。
  • 下降恳求量: 兼并资源,削减 HTTP 恳求数,minify / gzip 压缩,webP,lazyLoad。
  • 缓存: HTTP 协议缓存恳求,离线缓存 manifest,离线数据缓存localStorage。
  • 问询是否有更新:依据 If-Modified-Since / ETag 等协议向后端恳求问询是否有更新,没有更新回来304,浏览器运用本地缓存。
  • 没有预加载: 第一次翻开的体会很差,一切数据都要从网络恳求。
  • 更新体会差: 后台 HTML/JS/CSS 更新时全量下载,数据量大,弱网下载耗时长。
  • 简略的计划是如果本地离线包没有或不是最新,就同步堵塞等候下载最新离线包。这种用户翻开的体会更差了,由于离线包体积相对较大。
  • 还能够对离线包做一个线上版别,离线包里的文件在效劳端有一一对应的拜访地址,在本地没有离线包时,直接拜访对应的线上地址,跟传统翻开一个在线页面一样,这种体会相对等候下载整个离线包较好,也能保证用户拜访到最新。<li "="" style="background: url("");">第三种 Fallback 的方法还带来兜底的优点,在一些意外状况离线包犯错的时分能够直接拜访线上版别,功用不受影响,此外像公共资源包更新不及时导致版别没有对应上时也能够直接拜访线上版别,是个不错的兜底计划。

上述几种计划战略也能够混着运用,看事务需求。

运用客户端接口

网路和存储接口如果运用 webkit 的 ajax 和 localStorage 会有不少约束,难以优化,能够在客户端供给这些接口给 JS,客户端能够在网络恳求上做像 DNS 预解析/IP直连/长衔接/并行恳求等更详尽的优化,存储也运用客户端接口也能做读写并发/用户阻隔等针对性优化。

效劳端烘托

前期 web 页面里,JS 仅仅负责交互,一切内容都是直接在 HTML 里,到现代 H5 页面,许多内容现已依赖 JS 逻辑去决议烘托什么,例如等候 JS 恳求 JSON 数据,再拼接成 HTML 生成 DOM 烘托到页面上,所以页面的烘托展示就要等候这一整个进程,这儿有一个耗时,削减这儿的耗时也是白屏优化的规模之内。

优化方法能够是人为削减 JS 烘托逻辑,也能够是更彻底地,回归到原始,一切内容都由效劳端回来的 HTML 决议,无需等候 JS 逻辑,称之为效劳端烘托。是否做这种优化视事务状况而定,究竟这种会带来开发形式改变/流量增大/效劳端开支增大这些负面影响。手Q的部分页面就是运用效劳端烘托的方法,称为动态直出,见 文章 。

最终

从前端优化,到客户端缓存,到离线包,到更多的细节优化,做到上述这些点,H5 页面在发动上差不多能够比美原生的体会了。

总结起来,大体优化思路就是:缓存/预加载/并行,缓存一切网络恳求,尽量在用户翻开之前就加载好一切内容,能并行做的事不串行做。这儿有些优化手法需求做好一整套东西和流程支持,需求跟开发效率权衡,视实践需求优化。

别的上述评论的是针对功用模块类的 H5 页面秒开的优化计划,客户端 APP 上除了功用模块,其他一些像营销活动/外部接入的 H5 页面可能有些优化点就不适用,还需求视实践状况和需求而定。别的微信小程序就是归于功用模块的类别,差不多是这个套路。

这儿评论了 H5 页面首屏发动时刻的优化,上述优化往后,基本上耗时只剩 webview 自身的发动/烘托机制问题了,这个问题跟后续的呼应流通度的问题一起归于另一个优化规模,就是类 RN / Weex 这样的计划,有时机再评论。

没有更多推荐了,返回首页