前端全链路性能优化之：服务端和网络优化

前端全链路性能优化之：服务端和网络优化，了解 WebView内核，加深对浏览器优化的认知，辨明主流HTML5离线化的技术实现，对混合式开发-React Native内核的了解等方面出发，了解前端性能优化。

前端全链路性能优化之：服务端和网络优化

• 2、浏览器优化
  • 如何设置全局WebView？
    • 启动过程
      • 当 App 首次打开时，默认是并不初始化浏览器内核的
      • 当创建 WebView 实例的时候，才会启动浏览器内核（打开时间需要 70~700ms），并创建 WebView 的基础框架
    • 实施步骤
      • 使用全局 WebView 进行优化
      • 在客户端刚启动时，就初始化一个全局的 WebView 待用，并隐藏
      • 当用户访问了 WebView 时，直接使用这个 WebView 加载对应网页，并展示
    • 具体流程
      • 在初始页面上创建全局 WebView
      • 根据页面跳转流向，确定目标网页
      • 利用全局 WebView，加载目标网页对应的基础文件
      • 向服务器发送请求消息，请求目标网页对应的网页数据
      • 将请求到的网页数据渲染到初始页面上
      • 运行状态切换为退出状态，销毁 WebView
    • 选型建议
      • 技术好处
        • 减少首次打开 WebView
      • 不足之处
        • 额外的一点内存消耗
  • 如何实现导航栏预加载？
    • 原来
      • 在 WebView 加载完成之后进行初始化
    • 现在
      • 和 WebView 并行一起加载
  • 如何打通登录态？
    • 原来
      • HTML5 页面上接口每次查询，Cookies 里是否有登录态，无登录态 HTML5 跳转统一登录页，app拦截统一登录页，进入原生登录，原生登录成功，在浏览器写登录态 Cookies
    • 现在
      • Cookies 由 app 发统一登录接口并埋上登录态 Cookies，并且在 Cookies 有效时间内无需再次请求登录接口
  • 如何实现URL预加载？
    • 原来
      • 所有准备好再请求页面
    • 现在
      • 准备和请求页面同步进行，URL load和动画并行加载
  • 如何提升滚动条的使用体验？
    • 原来
      • 采用系统自带的进度条
    • 现在
      • 模拟 WiFi 下页面加载过程，让用户感觉页面加载变快了
  • 如何对JS-SDK进行优化？
    • 原来
      • Scheme：长度有限制
      • iframe：依赖 JSSDK.js 文件
    • 现在
      • WebKit：无依赖 JSSDK.js 文件，直接调用
  • 目前主流的缓存策略有哪些？
• 3、HTML5离线化：主流的技术实现方案有哪些？
  • 离线包类型
    • 全局离线包：包含公共的资源，可供多个应用共同使用
    • 私有离线包：只可以被某个应用单独使用
  • 离线包架构
  • 离线包下载
    • 如果用户处于移动网络下，不会再后台下载离线包
    • 如果当前用户点击 app，离线包没有下载好，用户就要等待离线包下载好才能用
  • 离线包运行模式
    • 请求包信息：聪服务端请求离线包信息存储到本地数据库的过程。离线包信息包括离线包的下载地址、离线包版本号、加密/签名信息等
    • 下载离线包：把离线包从服务端下载到手机
    • 安装离线包：下载目录，拷贝到手机安装目录
  • 大厂离线包方案
    • 美团：LsLoader - 通用移动端 WebApp 离线化方案
    • 腾讯：Alloykit - 手Q离线包
    • 阿里：极致的 Hybrid - 航旅离线包再加速
• 4、混合式开发：React Native内核及优势介绍
  • 愿景
    • Learn once，write anywhere
    • 学习一次，写在任何地方
  • 技术优势
    • 代码共享，iOS 和 Android（基于 HTML5 ）只编写一套代码
    • 性能方面，与 Navtive 几乎相同
    • 动画方面，Reacet Native 提供了非常流畅的动画，因为在渲染之前代码已转换为原生视图
  • 效率
    • 调试时，无需每次代码变更都在编译器打包，可即使查看更改
    • iOS、Android 2人力变更成1人力
  • 发版
    • 支持热更新，不用每次发版都发布应用商店
    • 发版时间自由控制，支持iOS、Android 两平台同一时间发布
  • 底层内核
  • 行业背景
    • 应用商店发版问题
    • 两端研发不同步问题
  • 选型建议
    • 首次发布：2015年1月
    • GitHub starts：8.33w（2019年底）
    • 社区活跃：非常活跃
    • 组件：很丰富
    • 学习曲线：低
    • Native性能：好
    • 综合建议：React 技术全家桶业务建议选用 RN
• 1、WebView：如何选择合适的WebView内核？
  • iOS UIWebView
    • 优点：
      • ① 从 iOS 2 开始就作为 App 内展示 Web 内容的容器
      • ② 排版布局能力强
    • 不足：
      • ① 内存泄漏
      • ② 极高内存峰值
      • ③ Touch Delay（300ms延迟）
      • ④ JavaScript 的运行性能和通信限制
      • ⑤ 2018年 iOS 12 以后已经被标记为 Deprecated 不再维护
  • iOS WKWebView
    • 优势：
      • ① 苹果在 WWDC 2014 上推出的新一代 WebView 组件
      • ② WKWebView 的内存开销比 UIWebView 小很多
      • ③ 在性能、稳定性、占用内存方面有很大提升
      • ④ 高达 60fps 的滚动刷新率
      • ⑤ 自身就支持了右滑返回手势
      • ⑥ 支持了更多的 HTML 的属性
      • ⑦ 内存占用是 UIWebView 的 1/4~1/3
      • ⑧ 加载速度比 UIWebView 提升了一倍左右
      • ⑨ 更为细致地拆分了 UIWebViewDelegate 中的方法
      • ⑩ 允许 JavaScript 的Nitro 库加载并使用（UIWebView 中限制）大大提高了页面 JS执行速度
      • ⑩① 可以和 JS 直接互调函数，不像 UIWebView 需要第三方库 WebViewJavaScriptBridge 来协助处理和 JS 的交互
    • 不足：
      • ① 不支持页面缓存，需要自己注入cookie，而 UIWebView 是自动注入 Cookie
      • ② 无法发送 POST 参数问题
  • Android WebKit 和 Chromium
  • Android 第三方
    • X5 内核
      • ① 速度快：相比系统 WebView 的网页打开速度有 30+% 的提升
      • ② 省流量：使用云端优化技术使流量节省 20+%
      • ③ 更安全：安全问题可以在24小时内修复
      • ④ 更稳定：经过亿级用户的使用考验， CRASHE 率低于0.15%
      • ⑤ 兼容好：无系统内核的碎片化问题，更少的兼容性问题
      • ⑥ 体验优：支持夜间模式、适屏排版、字体设置等浏览增强功能
      • ⑦ 功能全：在 H5、ES6 上有更完整支持
      • ⑧ 更强大：集成强大的视频播放器，支持视频格式远多于系统 WebView
      • ⑨ 视频和文件格式的支持 X5 内核多余系统内核
      • ⑩ 防劫持是 X5 内核的一大亮点
  • 选型建议
    • iOS：WKWebView
    • Android：X5