WKWebView
date
Aug 13, 2019
slug
qbczqkbq
status
Published
tags
iOS
summary
type
Post
加载
推荐阅读h5 秒开方案大全
说起 h5 性能优化方案，是个老生常谈的话题，通常的 web 优化方法，基本围绕在资源加载和 html 渲染两个方面。前者针对首屏，后者针对可交互。资源优化上，我们总的方向是围绕更小的资源包上，比如常见的：压缩、减包、拆包、动态加载包及图片优化上。html 渲染上总的方向是更快的展示内容，比如通过 cdn 分发、dns 解析、http 缓存、数据预请求，数据缓存及首屏优化大杀器——直出等。
这些方案是各种前端面试中必考点，也是作为一个前端开发，当遇到性能问题、需要解决性能问题时最为首要和基本的思路。而具体应该使用什么样的方案，取决于实际开发需求、优先级、综合成本、及投入产出比等。
在 H5 在 App、公众号、小程序内等多端复用的背景下，提高加载速度的思考，内容要点：
- SSR：结合 Serverless 速度应该非常快！首选方案！
- App 离线加载
- 本地拦截：首先加载 index.html，然后拦截 js/css 文件请求，用原生方式去下载该文件缓存到本地，然后响应被拦截的请求。
- Zip 包：此方式只适合 App 端。首先管理端配置 H5 离线包，App 端根据入口 json 文件下载 zip 包后解压，最后加载。
目前 Web 开发都会是使用 React、Vue 等 SPA 框架，结合流行或定制的脚手架进行开发。如果存在多端复用代码，且两端业务要尽量保持一致的情况下，需要处理更多的优化问题。正常情况下，一般会考虑如下方法：
- webpack 打包文件自带 hash 值；
- 独立 image 等静态资源，分拆 js 和 css，懒加载等方式，尽可能减小文件体积，然后使用 CDN 分发；
- 针对重要业务入口页面，使用 SSR 解决首次加载白屏和等待时间过长；
网上有很多解决 SPA 加载问题的问题，读者可自行搜索了解。
笔者最近三年主要在医疗行业带领团队负责前端开发，涉及到的终端：
- 患者
- 患者 App - person_app
- 患者 H5（微信公众号、支付宝生活号、其他渠道的 H5）- person_h5
- 医生
- 医生 App - doctor_app
- 医生 PC - doctor_pc
- 管理端
- 管理后台用户端（医院、科室、机构等用户）- admin_pc
- 管理后台运营端（自己公司的运营和运维）- superadmin_pc
其中几乎所有的用户、大部分业务集中在患者的两个端和医生 App，所以终端的优化和兼容性也是集中再次。考虑到机型性能的差一和多端复用情形，所以我为啥推崇 SSR，毕竟这是。
- App 离线加载的本地拦截，大致分为利用 ① 自定义 NSURLProtocol、② 代理 WKURLSchemeHandler，zip 包可以参考蚂蚁金服科技的支付宝离线包。
通信
可以直接看从零收拾一个 hybrid 框架（一）– 从选择 JS 通信方案开始，里面详细的列出了各种通信方案。
我带过的项目里都是用的假跳转，原因是业务和设计不复杂，Android、iOS、公众号三端都会使用到同一份 H5，所以假跳转更适合我。
另外推荐几篇好文：