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

【51CTO晃荡】8.26 带你深度懂得清华大年夜学、搜狗基于算法的IT运维实践与摸索

为什么打开一个 H5 页面会有一长段白屏时光?因为它做了很多工作，大年夜概是：

初始化 webview -> 请求页面 -> 下载数据 -> 解析HTML -> 请求 js/css 资本 -> dom 衬着 -> 解析 JS 履行 -> JS 请求数据 -> 解析衬着 -> 下载衬着图片
一些简单的页面可能没有 JS 请求数据这一步，但大年夜部分功能模块应当是有的，根据当前用户信息，JS 向后台请求相干数据再衬着，是惯例开辟方法。
一般页面在 dom 衬着后能显示雏形，在这之前用户看到的都是白屏，比及下载衬着图片后全部页面才完全显示，首屏秒开优化就是要削减这个过程低砟瓯。

跟着移动设备机能赓续加强，web 页面的机能体验逐渐变得可以接收，又因为 web 开辟模式的诸多好处(跨平台，动态更新，减体积，无穷扩大)，APP 客户妒攀里出现越来越多内嵌 web 页面(为了配上当前风行的说法，以下把所有网页都称为 H5 页面，固然可能跟 H5 没紧要)，很多 APP 把一些功能模块改采取 H5 实现。

固然说 H5 页面机能变好了，但如不雅没针对性地做一些优化，体验照样很糟糕的，重要两部分体验：

页面启动白屏时光：打开一个 H5 页面须要做一系列处理，会有一段白屏时光，体验糟糕。
响应流畅度：因为 webkit 的衬着机制，单线程，汗青包袱等原因，页面刷新/交互的机能体验不如原生。

过程

前端优化

上述打开一个页面的过程有很多优化点，包含前端和客户端，惯例的前端和后端的机能优化在桌面时代已经有最佳实践，重要的是：

降低请求量：归并资本，削减 HTTP 请求数，minify / gzip 紧缩，webP，lazyLoad。
加快请求速度：预解析DNS，削减域名数，并行加载，CDN 分发。
缓存： HTTP 协定缓存请求，离线缓存 manifest，离线数据缓存localStorage。
衬着： JS/CSS优化，加载次序，办事端衬着，pipeline。

HTML 和 JS/CSS/image 资本都属于静态文件，HTTP 本身供给了缓存协定，浏览器实现了这些协定，可以做到静态文件的缓存，具体可以参考这里，总的来说，就是两种缓存：

询问是否有更新：根据 If-Modified-Since / ETag 等协定向后端请求询问是否有更新，没有更新返回304，浏览器应用本地缓存。
直接应用本地缓存：根据协定里的 Cache-Control / Expires 字段去肯定多长时光内可以不去发请求询问更新，直接应用本地缓存。

前端能做的最大年夜限度的缓存策略是：HTML 文件每次都向办事器询问是否有更新，JS/CSS/Image资本文件则不请求更新，直接应用本地缓存。那 JS/CSS 资本文件若何更新?常见做法是在在构建过程中给每个资本文件一个版本号或hash值，若资本文件有更新，版本号和 hash 值变更，这个资本请求的 URL 就变更了，同时对应的 HTML 页面更新，变成请求新的资本URL，资本也就更新了。

json 数据的缓存可以用 localStorage 缓存请求下来的数据，可以在初次显示时先用本地数据，再请求更新，这都由前端 JS 控制。

这些缓存策略可以实现 JS/CSS 等资本文件以及用户数据的缓存的全缓存，可以做到每次都直接应用本地缓存数据，不消等待收集请求。但 HTML 文件的缓存做不到，对于 HTML 文件，如不雅把 Expires / max-age 时光设长了，长时光只应用本地缓存，那更新就不及时，如不雅设短了，每次打开页面都要发收集请求询问是否有更新，再肯定是否应用本地资本，一般前端在这里的策略是每次都请求，这在弱网情况下用户感触感染到的白屏时光仍然会很长。所以 HTML 文件的“缓存”和跟“更新”存放在抵触。

本文先不评论辩论第二点，只评论辩论第一点，如何削减白屏时光。对 APP 里的一些应用 H5 实现的功能模块，如何加快它们的启动速度，让它们启动的体验接近原生。

客户端优化

接着轮到客户端出场了，桌面时代受限于浏览器，H5 页面无法做更多的优化，如今 H5 页面是内嵌在客户端 APP 上，客户端有更多的权限，于是客户端上可以超出浏览器典范围，做更多的优化。

如不雅用户拜访某个离线包模块时，这个离线包还没有下载，或设备表检测到已有新版本但本地是旧版本的情况若何处理?几种筹划：

简单的筹划是如不雅本地离线包没有或不是最新，就同步壅塞等待下载最新离线包。这种用户打开的体验更差了，因为离线包体积相对较大年夜。
也可所以如不雅本地有旧包，用户本次就直接应用旧包，如不雅没有再同步壅塞等待，这种会导致更新不及时，无法确保用户应用最新版本。
还可以对离线包做一个线上版本，离线包狼９依υ?件在办事端有一一对应的拜访地址，在本地没有离线包时，直接拜访对应的线上地址，跟传统打开一个在线页面一样，这种体验相对等待下载全部离线包较好，也能包管用户拜访到最新。
第三种 Fallback 的方法还带来兜底的好处，在一些不测情况离线包掉足的时刻可以直接拜访线上版本，功能不受影响，此外像公共资本包更新不及时导致版本没有对应上时也可以直接拜访线上版本，是个不错的兜底筹划。

HTML 缓存

移动H5首屏秒开优化筹划商量

先接着缓存说，在客户端有更自由的缓存策略，客户端可以拦截 H5 页面的所有请求，由本身治理缓存，针对上述 HTML 文件的“缓存”和“更新”之间的抵触，我们可以用如许的策略解决：

在客户妒攀拦截请求，初次请求 HTML 文件后缓存数据，第二次不二请求，直接应用缓存数据。
什么时刻去请求更新?这个更新请求可以客户端自由控制策略，可以在应用本地缓存打开本地页面后再在后台提议请求询问更新缓存，下次打开时生效;也可以在 APP 启动时或某个机会在后台去提议请求预更新，晋升用户拜访最新代码的几率。
1/3 1 2 3 下一页尾页

　　推荐阅读

　　数字化变革势不可挡，采购即将进入“全线上”时代

第三阶段，招投标交易流程全在线，然则交易后的每个环节还没有完全在线。【51CTO晃荡】8.26 带你深度懂得清华大年夜学、搜狗基于算法的IT运维实践与摸索在当局的积极推动和市场内生需求>>>详细阅读

本文标题：移动H5首屏秒开优化方案探讨

地址：http://www.17bianji.com/lsqh/36745.html

1/2 1