iTeaTime(技术清谈)【-004期】【代号：星际穿越】

Open ChenYilong opened this issue 4 years ago • 0 comments

iTeaTime(技术清谈)【-004期】【代号：星际穿越】

本期特辑：hybrid、跨平台特辑本期出品人：微博@iOS程序犭袁

注：题目难度五星为满分，各个类目下题目从易到难依次排列。

hybrid 类【easy级别】

1【问题】【iOS】【hybrid】请阐述 JavaScriptCore 与 WebCore 工作过程中与线程的关系，阐述基于这种关系，对 JS 与 native 交互的影响，阐述解决优化。

【难度】🌟 【出题人】微博@iOS程序犭袁

2【问题】【iOS】【Android】【hybrid】嵌入 native 的 web 页面，其 dom 的 localStorage 操作，在 iOS 的沙盒环境下的，阐述使用场景与限制或优势。基于局限，有无替代方案或者优化建议。

【难度】🌟🌟 【出题人】微博@iOS程序犭袁

3【问题】【iOS】【hybrid】阐述 UIWebView 迁移到 WKWebView 的原因，以及有无遇到阻力，如何解决？

【注】work around 方案也可以。【难度】🌟🌟 【出题人】微博@iOS程序犭袁

4【问题】【iOS】【Android】【hybrid】如何用 js 创建一个原生的 Label 居中显示到某个 ViewController/ activity 上，可以通过 JS 修改 Label 的 text 属性，iOS版本代码如下：

var label = new Label();
label.text("Lefe_x");

// view 为 App 当前显示的 ViewController 的 view，通过 js 获取。
label.addToSuperView(view);

【难度】🌟🌟🌟 【出题人】百度阅读-Lefe_x

5【问题】【iOS】【Android】【hybrid】阐述 H5 秒开方案，从 Web 层，和native层分别阐述。

【难度】🌟🌟🌟 【出题人】微博@iOS程序犭袁

【答案】

iTeaTime(技术清谈)@ChenYilong：

web组件加载前：预加载，启动后就加载web组件，减少web组件冷启动时间。
web组件加载后：webView的网络请求走native的网络库，可以 HOOK 网络请求或者直接在回调中，将response的数据缓存起来，webview请求的数据会走缓存。

iTeaTime(技术清谈)@yahaha-xsl-北京:

H5 秒开方案：如果仅仅只需要实现秒开，不考虑服务端页面是否支持Last-Modified （304）的情况下，最简单方式，是客户端定义一个 WebView 预加载池就可以了。在前一个页面滑动的时候就将出现在屏幕上和即将有可能显示的加入WebView 预加载池，提前加载，然后通过LRU 进行缓存池清理。"

预加载池这种方法使用不当，内存可能会暴涨。可采用下面的方式缓解：

根据用户行为分析，预测可能被点击的页面，排名靠前的网页预加载。用户行为分析的理论依据：

产品经理经验，比如网页上的“下一页”按钮。
基于埋点用户路径---漏斗模型。
基于热力图，最直观、最直接的分析预测用户操作行为体现方式

iTeaTime(技术清谈)@yahaha-xsl-北京: 可以采用两种方式知道即将有可能要显示的： 1.根据滑动的方向。2.根据用户的行为数据分析命中，他有可能要点开的H5。

iTeaTime(技术清谈)@叮当-广州-iOS ： UC浏览器是这样的，会在网页中分析即将可能点击的按钮去预加载

iTeaTime(技术清谈)@赵三岁-北京-“低层”iOS：这个webview预加载我在掘金上看到过有个团队就是这么优化的，还是个电商项目，购物完成后他们会预加载评论的 webview、好像是他们有统计这个用户打开评论的概率比较大。

这样操作预加载后，大部分人都感觉网页打开很快，后台统计的秒开数据报表也很漂亮。

6【问题】【iOS】【hybrid】iOS 中如何低成本实现 WebRTC 功能，你的方案，请罗列有什么限制，主要从以下角度分析：

与其他平台相比
与常规native功能相比

【难度】🌟🌟🌟 【出题人】微博@iOS程序犭袁

7【问题】【iOS】【Android】【hybrid】请阐述下 app 开发者如何保证用户访问的页面是安全页面，如何保证自己的网站，嵌入到 native 的 WebView 中，不会被劫持、被 js 注入。

参考场景：

PC端的Chrome在遇到非HTTPS页面时可以报警告，但很少见 native 应用中报这些错误。

【难度】🌟🌟🌟 【出题人】微博@iOS程序犭袁

8【问题】【iOS】【hybrid】跨平台方案中，如何截取特定 div 标签，并保存为一张图片。跨平台语言不限：RN、Weex。

场景参考招商银行-掌上生活，发送电影卡邀请函。

【难度】🌟🌟🌟🌟 【出题人】微博@iOS程序犭袁

招商银行app电影邀约	海底捞app饭局邀约
(gif图)	(gif图)

类似邀约图片分享的场景，模版为了可以可以随节日动态更新，hydrid 实现更为灵活。这是就会使用到native对前端栈实现的页面进行div截图。

9【问题】【iOS】【hybrid】针对 RN 开发人员不熟悉native开发的情况下，会出现很多操作，比如绘制一个3000px的cell，cell重用符号滥用，在scrollView上强行拼view而不用tableView，等等，针对这些情况，你作为一个native的开发，怎么避免或者及时预警？

【难度】🌟🌟🌟🌟 【出题人】大灰灰-平安-iOS-上海

常规类

10【问题】【iOS】如何设计一个圆形的按钮,点击区域也是圆形的? 【难度】🌟 【出题人】微博@iOS程序犭袁

11【问题】【计算机基础】16进制的 FF+2 后等于什么，有哪几种情况? 【难度】🌟 【出题人】微博@iOS程序犭袁

12【问题】【iOS】【C】AB线程执行到一半去执行C线程,用Objective-C/Swift和C各自怎么实现。给出代码示例。【难度】🌟🌟🌟 【出题人】微博@iOS程序犭袁

13【问题】【算法】给出10W条人和人之间的朋友关系,求出这些朋友关系中有多少个朋友圈(如AB、BC、DE、E F,这4对关系中存在两个朋友圈),并给出算法的时间复杂度。【难度】🌟🌟 【出题人】微博@iOS程序犭袁

hybrid 类【medium级别】

14【问题】如何自定义 Web 使用的 UserAgent ?

【难度】🌟🌟🌟 【出题人】颜-物灵-iOS

比较通用的方法, 适用于 WKWebView 或者 UIWebview.

15【问题】嵌套进native的 web 页面，如何展示用户相册图片?

【难度】🌟🌟🌟 【出题人】颜-物灵-iOS

(思路供参考.我验证过,可行)

调用系统相册, 从用户手机获取图片 assetId. (native)
根据 assetId, 找到对应图片,根据方向信息, 正确旋转图片后, 以缩略图形式,存储到沙盒缓存目录.(native)
将 assetId 传递给 web,未来用作图片原图 "路径"; 将缩略图地址,传给 web,用作直接展示到UI上的缩略图地址.(native -> web)
使用标签,显示缩略图, 正常显示,需要在图片路径前拼接 "file://"(web)
根据需要,将 assetId 回传给 native, 以完成进一步的后续交互, 如自定义图片裁剪,上传高清图等.(web -> native)

16【问题】如何实现 ReactNative 代码的动态更新?

【难度】🌟🌟🌟 【出题人】颜-物灵-iOS

(思路供参考.我验证过,可行)

将 ReactNative 引擎, 正确引入项目中.
配置 main.bundle 代码路径时, 路径支持动态根据server配置获取.
有新更新, 本地打包生成 main.bundle, 并通过 Server 下发给 App.

17【问题】【 Lua 实现 App 动态化方案】如何在 iOS 项目中,集成 luajit, 实现特定业务逻辑的动态更新.

【难度】🌟🌟🌟 【出题人】颜-物灵-iOS

iTeaTime(技术清谈)@颜-物灵-iOS：

(仅供讨论, 个人对 lua 比较钟爱, 获取能找到更多的小伙伴)

简单描述下: lua 最吸引我的一点是: 它可以真正 "同步" 地和 native API 在同一线程中高效通信. 这一点, 是 JS, Flutter , 不太容易做到的一点.

引入: 基于源码编译 luajit 为 .a, 引进项目中.(极小, 不到300kb, 就可以集成一个独立的完整的脚本引擎)
通过 C 文件, 桥接 lua 和 objc. lua 可以指定暴露给 native 的方法, native 也可以根据需要暴露一些常用的安全性要求不高的方法, 如文件管理相关的 API.
lua 源文件中,编辑为字节码文件, 通过 Server 下发给 App. App 根据特定逻辑,加载指定的 lua 文件,来实现特定业务的动态管理.

关于带入luajit的问题：

luajit 然后需要把 jit 特性关掉比lua 本身还是快一些（我没具体测试过）

项目中我们真正在用的并不多# 做了一个 iOS 和 Andoroid 通用的资源管理器，自动工具app的状态信息返回对应的图片素材。有一点像一个可以直接写代码的配置文件

Q：那当时为什么选lua不选js？

A：luavm可以多线程并发，jscore是单线程，硬伤。还有一个原因是考虑调用时的线程切换 # 另外考虑的是后续能尽可能在 iOS 和Android 间复用逻辑。线程切换指的是，js 和 native 同步通信，在任意 native 线程中。因为写的资源管理器，是无法预知自己会在哪个线程被调用。基于 jscore 好像也是可以同步通信的 #但是没有通过 c 文件桥接通用性高。 android 的kotlin 可以通过 ndk 基于c 和lua桥接。另外的原因可能就是 lua 体积比较小，方便集成 300k左右#

Q：（iTeaTime(技术清谈)@五子棋-淘宝-iOS） js 和 native 同步通信，在任意 native 线程中。因为写的资源管理器，是无法预知自己会在哪个线程被调用这个问题在哪…？

如果要说基于c的桥接 jscore是可以直接操作void *裸指针的…

A：（iTeaTime(技术清谈)@颜-物灵-iOS）就是 native 调用某个 js 方法，立即获取返回值，用 c 桥接 jscore ，我还没试过。

Q：（iTeaTime(技术清谈)@味精-蚂蚁-北京） jscore 不占体积，ios内置，jscore是直接有c api 的并不是只可以使用oc封装，rn就是直接用的jscore capi

A：（iTeaTime(技术清谈)@颜-物灵-iOS）lua的多线程。我没有进一步看过# 我观察到的现象是: 多个native线程，是一个共享同一个 lua虚拟机的

Q：（iTeaTime(技术清谈)@味精-蚂蚁-北京）本质上没区别跨上下文的通信都是数据在两个环境下的序列化...lua的虚拟机风云很老的一篇文章提到过，lua本质上下文依然依赖一个线程一个上下文但是lua有库，可以跨线程同步上下文。看似是在支持单虚拟机多线程。

Q：（iTeaTime(技术清谈)@五子棋-淘宝-iOS）不用，3.2 lua把一堆的全局变量改了，可以每个真实线程里创建一个luavm。

A：（iTeaTime(技术清谈)@颜-物灵-iOS）这个当时主要是考虑到 Android那边 webview 好像很乱，似乎没有可以类比 jscore的东西（Andorid 大白我是）

Q：（iTeaTime(技术清谈)@味精-蚂蚁-北京）子奇说的那个也是每个线程一个vm 和上下文吧... 并不是看似一个虚拟机同时直接操作多线程

A：（iTeaTime(技术清谈)@颜-物灵-iOS）那 lua 和 c 的栈通信，有什么特殊的吗？或者说有比较轻量的方式模拟吗？（我还是第一次接触这种跨语言的通信方式）

A：（iTeaTime(技术清谈)@味精-蚂蚁-北京）并不是跨语言通信而是跨上下文通信。本质上是一个数据流压栈出栈（我不确定现在的lua 早年间大概四五年前...是这样的。所有数据先得序列化然后压到虚拟机里然后由虚拟机读序列化重新构建虚拟机里的各种对象结构。本质是两个上下文对内存结构的组织差异...无法互相认识。

Q：（iTeaTime(技术清谈)@颜-物灵-iOS）那现在 flutter 基于dart，有可能和 c 这么通信吗？（我们当时技术调研我专门看了下没看到相关介绍就把flutter 否了）。

A：（iTeaTime(技术清谈)@味精-蚂蚁-北京）但lua 与c的结合度很高...有很多trick的方案可以直接操作内存传值但风险太大了..并不了解dart虚拟机不多扯了╮(╯_╰)╭

A：（iTeaTime(技术清谈)@五子棋-淘宝-iOS）感觉lua和c直接调用不存在问题…lua底层不就用c写的吗…就跟cpython一样…

A：（iTeaTime(技术清谈)@味精-蚂蚁-北京）对不存在。就是刀子太锋利了

Q：GitHub@ChenYilong 真实，来自灵魂的解释，儿子和父亲交流，没什么障碍。

A：（iTeaTime(技术清谈)@味精-蚂蚁-北京）障碍在儿子和父亲的文化代沟，就是各自上下文对象的组织结构。

18 【问题】【iOS】【hybrid】调用 js 绘图库的情况下，调用 js 绘图通过以下方式调用会出现什么情况, 该怎么解决

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    // 调用 js 绘图
}

// 或者

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
   // 调用 js 绘图
}

【难度】🌟🌟 【出题人】 PlutoY-广州YY

19 【问题】【iOS】【hybrid】WKWebView 加载本地文件如何做兼容？

【难度】🌟🌟 【出题人】PlutoY-广州YY

Posted by 微博@iOS程序犭袁
原创文章，版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0

One more thing...

【非礼勿视】以下为彩蛋部分，建议28岁以上男性观看

//one more thing

Jul 16 '19 13:07 ChenYilong

Friday-QA Friday-QA copied to clipboard