iOS WKWebView秒开方案实战记录

目录
  • 前言
  • 秒开流程图
  • 秒开方案
  • 技术数据
  • 秒开效果对比
  • WKWebView究竟好在哪里呢？
  • 总结

前言

WKWebView 秒开方案，不仅需要端上优化，也需要前后端配合，我们业务前期在UIWebView上已经通过各种优化达到了秒开，但是由于苹果2020年12月份就不允许上架UIWebView，所以我们紧急切换到WKWebView，但由于WKWebView在启动初始化的时候表现还是不如人意，我们的目标是低端机型至少大部分页面也能秒开。经过一系列的优化操作，实现效果和数据都是非常可观的。

秒开流程图

秒开方案

1、模板下载。

2、首图预加载。

3、正文列表body预取。

4、CDN预加载。

5、双缓存池（目前一共不超过8个）：一个负责feed流列表滚动停止时异步执行js预热；一个负责进入文章后准备好一个干净的WKWebview供下一次未命中秒开WKWebview使用。

6、点击cell命中预热好的秒开WKWebview，则进行预热下一篇文章，这样提高秒开率。

7、initpage预热好的WebView需要先放在屏幕最右侧隐藏，在进入后显示并重设frame回归正常视图中。

8、feed流预热的WebView通过initPage传false参数、进入文章页后的WebView通过initPage传true参数，为保证不会刷新跳动，模板中有设置flag确保一次initPage

9、动态js回填方案：load模板 → 成功会收到前端桥接Ready状态 → 客户端收到Ready状态会进行initPage操作，此时只是静态加载页面渲染显示给用户看的界面，不会触发任何网络或其他模板加载，initPage成功后会回调init状态 → 客户端收到init状态会进行执行showPage操作，表示已经进入页面需要继续加载好所有未加载好的逻辑，例如图片渲染、网络请求、模板加载等，showPage成功后前端回调show状态 → 客户端仍为页面已经加载完成，处理加载完成后的逻辑，例如打点上报等

10、全局并没有持有WKWebview不释放，而是只要进入文章页就会预创建下次需要预热的WKWebview，保证每次的WKWebview都是干净无历史痕迹，在dealloc方法中会释放双缓存池当前加载的WebView。

其中initpage和showPage等都是前端处理相关逻辑回调给客户端状态，客户端拿到状态进行下一步操作。

技术数据

Item 端到端平均耗时 端到端p90耗时
对照组 1210 ms 2800 ms
实验组 780 ms 1800 ms

秒开效果对比

低端机型:真机6P，12.4.5系统

优化前线上UIWebview展示:

WKWebview展示:

WKWebView究竟好在哪里呢？

  1. 内存开销更小
  2. 内置手势
  3. 支持更多H5特性
  4. 有Safari相同的JavaScript引擎
  5. 提供更多属性，比如加载进度、标题、准确的得到页面数等等
  6. 提供了更精细的加载流程回调（当然相比UIWebView看起来也更麻烦一些，毕竟方法多了）

总结

到此这篇关于iOS WKWebView秒开方案的文章就介绍到这了,更多相关iOS WKWebView秒开内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • iOs迁至WKWebView跨过的一些坑

    前言 在iOS中有两种网页视图可以加载网页除了系统的那个控制器.一种是UIWebView,另一种是WKWebView,其实WKWebView就是想替代UIWebView的,因为我们都知道UIWebView非常占内存等一些问题,但是现在很多人还在使用UIWebView这是为啥呢?而且官方也宣布在iOS12中废弃了UIWebView让我们尽快使用WKWebView.其实也就是这些东西:**页面尺寸问题.JS交互.请求拦截.cookie带不上的问题.**所以有时想要迁移还得解决这些问题,所以还是很烦的

  • iOS11 WKWebView 无法加载内容的解决方法

    iOS11 WKWebView 无法加载内容的解决方法

    问题描述: iOS9和iOS10用WKWebView加载URL都没有问题,iOS11却是一片空白 可能是用了 NSMutableURLRequest ,iOS11貌似不支持 NSMutableURLRequest ,无论是用 UIWebView 还是 WKWebView ,都不支持 NSMutableURLRequest 解决方法参考 if #available(iOS 11, *) { let request = NSURLRequest.init(url: URL.init(string:

  • iOS中WKWebView白屏问题的分析与解决

    iOS中WKWebView白屏问题的分析与解决

    前言 随着WKWebView的推出, 解决了很多UIWebView 的问题.比如加载速度慢,内存泄露等问题.WKWebView是在iOS 8 推出,前段时间正好把项目也适配到iOS 8 以上了,终于可以把项目中的UIWebView 替换成WKWebView. WKWebView的特点: 性能高,稳定性好,占用的内存比较小, 支持JS交互 支持HTML5 新特性 可以添加进度条(然并卵,不好用,还是习惯第三方的). 支持内建手势, 据说高达60fps的刷新频率(不卡) 但是发现在使用的时候还是有很

  • iOS11 WKWebView问题汇总

    问题一描述: iOS9和iOS10用WKWebView加载URL都没有问题,iOS11却是一片空白 可能是用了NSMutableURLRequest,iOS11貌似不支持NSMutableURLRequest,无论是用UIWebView还是WKWebView,都不支持NSMutableURLRequest 解决方法参考 if #available(iOS 11, *) { let request = NSURLRequest.init(url: URL.init(string: urlStr)!

  • iOS WKWebView秒开方案实战记录

    iOS WKWebView秒开方案实战记录

    目录 前言 秒开流程图 秒开方案 技术数据 秒开效果对比 WKWebView究竟好在哪里呢? 总结 前言 WKWebView 秒开方案,不仅需要端上优化,也需要前后端配合,我们业务前期在UIWebView上已经通过各种优化达到了秒开,但是由于苹果2020年12月份就不允许上架UIWebView,所以我们紧急切换到WKWebView,但由于WKWebView在启动初始化的时候表现还是不如人意,我们的目标是低端机型至少大部分页面也能秒开.经过一系列的优化操作,实现效果和数据都是非常可观的. 秒开流程

  • iOS组件化开发实战记录

    iOS组件化开发实战记录

    1. 组件化需求来源 起初的这个项目,App只有一条产品线,代码逻辑相对比较清晰,后期随着公司业务的迅速发展,现在App里面承载了大概五六条产品线,每个产品线的流程有部分是一样的,也有部分是不一样的,这就需要做各种各样的判断及定制化需求.大概做了一年多后,出现了不同产品线提过来的需求,开发人员都需要在主工程中开发,但是开发人员开发的是不同的产品线,也得将整个工程跑起来,代码管理.并行开发效率.分支管理.上线时间明显有所限制.大概就在去年底,我们的领导提出了这个问题,希望作成组件化,将代码重构拆分

  • iOS WKWebView适配实战篇

    一.Cookie适配 1.现状 WKWebView适配中最麻烦的就是cookie同步问题 WKWebView采用了独立存储控件,因此和以往的UIWebView并不互通 虽然iOS11以后,iOS开放了WKHTTPCookieStore让开发者去同步,但是还是需要考虑低版本的 同步问题,本章节从各个角度切入考虑cookie同步问题 2.同步cookie(NSHTTPCookieStorage->WKHTTPCookieStore) iOS11+ 可以直接使用WKHTTPCookieStore遍历方

  • ios wkwebview离线化加载h5资源解决方案

    思路: 使用NSURLProtocol拦截请求转发到本地. 1.确认离线化需求 部门负责的app有一部分使用的线上h5页,长期以来加载略慢... 于是考虑使用离线化加载. 确保[低速网络]或[无网络]可网页秒开. 2.使用[NSURLProtocol]拦截 区别于uiwebview wkwebview使用如下方法拦截 @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [su

  • iOS WKWebview 白屏检测实现的示例

    前言 自ios8推出wkwebview以来,极大改善了网页加载速度及内存泄漏问题,逐渐全面取代笨重的UIWebview.尽管高性能.高刷新的WKWebview在混合开发中大放异彩表现优异,但加载网页过程中出现异常白屏的现象却仍然屡见不鲜,且现有的api协议处理捕捉不到这种异常case,造成用户无用等待体验很差.     针对业务场景需求,实现加载白屏检测.考虑采用字节跳动团队提出的webview优化技术方案.在合适的加载时机对当前webview可视区域截图,并对此快照进行像素点遍历,如果非白屏颜

  • 使用Pyinstaller的最新踩坑实战记录

    前言 将py编译成可执行文件需要使用PyInstaller,之前给大家介绍了关于利用PyInstaller将python程序.py转为.exe的方法,在开始本文之前推荐大家可以先看下这篇文章,本文主要给大家介绍了Pyinstaller最新踩坑实战记录,现在网上关于pyinstaller的问题充斥着各种copy过来copy过去的答案,这大概就是各种无脑博客爬虫站最让人讨厌的地方. 而且这方面的问题,stackoverflow也是回答的千奇百怪. 强烈推荐官方文档 http://pythonhost

  • vue 项目 iOS WKWebView 加载

    1.首先让前端的同事打一个包(index.html,static文件包含css.资源文件.js等)导入项目: :warning: 注意: 把index.html放入项目根目录下,command+n创建一个资源文件.bundle,资源文件里也的包含一份 index.html 下面开始代码: 懒加载WKWebView 引入#import <WebKit/WebKit.h> #import <WebKit/WKWebView.h> 继承 WKNavigationDelegate,WKUI

  • iOS WKWebView无法处理URL Scheme和App Store链接的问题解决

    WKWebView简介 UIWebView自iOS2就有,WKWebView从iOS8才有,毫无疑问WKWebView将逐步取代笨重的UIWebView.通过简单的测试即可发现UIWebView占用过多内存,且内存峰值更是夸张.WKWebView网页加载速度也有提升,但是并不像内存那样提升那么多. 下面列举一些其它的优势: 1.更多的支持HTML5的特性 2.官方宣称的高达60fps的滚动刷新率以及内置手势 3.Safari相同的JavaScript引擎,且允许JavaScript的Nitro库

  • IOS 屏幕适配方案实现缩放window的示例代码

    背景: 公司有个iPad项目(只支持横屏),是11年开发的,那时的iPad只有1024x768的分辨率,所以没有屏幕适配的问题,frame都是写死的.后来不同尺寸的iPad相继出现,本来应该会出现屏幕不能适配的问题,但是由于该项目没有设置启动图,页面会自动等比例缩放撑满整个屏幕,各分辨率的宽高比相差不多,所以并没有出现太大问题.但是2020年3月4日,苹果要求所有提交至 App Store 的 app 都须使用 Xcode storyboard(故事板) 来提供 app 的启动屏幕,之前的不设置

  • Redis主从配置和底层实现原理解析(实战记录)

    Redis主从配置和底层实现原理解析(实战记录)

    我们使用Redis的时候往往都是主从模式或者集群架构,不会使用单台Redis服务. 一.Redis主从配置实战 我们使用master节点写输入,然后将数据同步到slave节点,从节点可以提供读取或者备份的功能,分担master节点压力. redis主从架构搭建,配置从节点步骤 1. 复制一份redis.conf文件为redis-6380.conf cp ./redis.conf ./conf/redis-6380.conf 2.打开redis-6380.conf配置文件,将相关配置修改为如下值:

随机推荐