02-大前端底层原理|Web和类RN大前端的渲染原理

[TOC]

前言

大前端的开发框架主要分为两类：

第一类是基于 WebView 的，第二类是类似 React Native 的。

对于第一类 WebView 的大前端渲染，主要工作在 WebKit 中完成。

WebKit 的渲染层来自以前 macOS 的 Layer Rendering 架构，而 iOS 也是基于这一套架构。

所以，从本质上来看，WebKit 和 iOS 原生渲染差别不大。

第二类的类 React Native 更简单，渲染直接走的是 iOS 原生的渲染。

那么，我们为什么会感觉 WebView 和类 React Native 比原生渲染得慢呢？我们接下来就进一步去了解看看吧！

一、WebView渲染流程

对于WebView渲染，其主要工作在WebKit中完成。
WebKit本身的渲染基于macOS的Layer Rendering架构，iOS本身渲染也是基于这套架构。
因此，本身从渲染的实现方式来说，性能应该和原生差别不大。
但为什么我们能明显感觉到使用WebView渲染要比原生渲染的慢呢？
- 第一，首次加载。会额外多出网络请求和脚本解析工作。即使是本地网页加载，WebView也要比原生多出脚本解析的工作。 WebView要额外解析HTML+CSS+JavaScript代码。
- 第二，语言解释执行性能来看。JS的语言解析执行性能要比原生弱。特别是遇到复杂的逻辑与大量的计算时，WebView 的解释执行性能要比原生慢不少。(关于编译型语言和解释型语言区别可以从我这篇文章中了解:到:计算机编译原理-概述)
- 第三，WebView的渲染进程是独立的，每一帧的更新都要通过IPC调用GPU进程，会造成频繁的IPC进程通信，从而造成性能消耗。并且，两个进程无法共享纹理资源，GPU无法直接使用context光栅化，而必须要等待WebView通过IPC把context传给GPU再光栅化。因此GPU自身的性能发挥也会受影响
  - 概念解释:IPC
因此，WebView的渲染效率，是弱于原生渲染的。

二、类RN技术渲染原理

ReactNative是使用JavaScriptCore引擎做为虚拟机的技术方案,市面上有不上方案都和其雷同,所以本文就以ReactNative技术为代表展开讨论

代表：React Native、Weex、小程序等。
我们以 ReactNative 举例：
- React Native的渲染层直接走的是iOS原生渲染，只不过是多了Json+JavaScript脚本解析工作。
- 通过JavaScriptCore引擎将“JS”与“原生控件”产生相对应的关联。
- 进而，达成通过JS来操控iOS原生控件的目标。（简单来说，这个json就是一个脚本语言到本地语言的映射表，KEY是脚本语言认识的符号，VALUE是本地语言认识的符号。）
但与 WebView 一样，RN也需要面临JS语言解释性能的问题。
因此，从渲染效率角度来说，WebView < 类ReactNative < 原生。（因为json的复杂度比html+css低）

三、Native渲染

在Section一、二中提及到的Native渲染部分,我们可以参考:

02-大前端底层原理|Web和类RN大前端的渲染原理

前言

大前端的开发框架主要分为两类：

一、WebView渲染流程

二、类RN技术渲染原理

三、Native渲染

相关阅读(共计14篇文章)

iOS相关专题

webApp相关专题

跨平台开发方案相关专题

阶段性总结:Native、WebApp、跨平台开发三种方案性能比较

Android、HarmonyOS页面渲染专题

小程序页面渲染专题

总结