跨平台是最近几年很火的技术栈,也是未来的趋势,一次开发,多出处行,能节约大量的人力和时间成本。目前主要的跨平台方案有三种
1. 以原生组件为基础,对接web生态RN,快应用,weex这这一类为代表
2. 以Web为代表
3. 以独立绘,自有生态的flutter为代表
这里来通过横向对比这三类技术,来有一个深度和广度的认识。对于这三种技术,我这都通过介绍他们的渲染流程,优点,缺点,如何优化来进行一个横向的比较。
浏览器Web
在了解web是如何渲染之前,我们要先了解web是什么?一个完整的web页面由html,css和js这三部分组成。html负责描述页面结构和内容,css设定页面样式风格,js控制页面动态逻辑,通过这三部分,一个web页面就可以渲染成开发预期的ui效果。
渲染
我们接下来看看浏览器web是如何渲染的。
通过上图可以看到,一个web页面的完整渲染流程是这样的
1. 通过网络或者缓存加载我们想要展示的web页面及资源
2. 将我们获取到的web页面解析,遇到html的部分,就采用htmlparser来解析,遇到js的内容,就采用jsengine来解析,遇到css部分就采用css parser来解析。解析后的最终的结果是一棵节点带CSS Style、会响应自定义事件的Styled DOM树
3. 将我们生产的dom数执行layout过程,这个过程主要涉及生成渲染树,以及根据盒模型来进行测量和布局
4. 将经过测量和布局的渲染数绘制出来
我们来详细看一下上面的流程
parser过程
webkit在解析网页内容时,通过解码,分词,解析和建树四个步骤,将html最终转换成dom树。
- 解码:将网络上接收到的经过编码的字节流,解码成Unicode字符。
- 分词:按照一定的切词规则,将Unicode字符流切成一个个的词语(Tokens)。
- 解析:根据词语的语义,创建相应的节点(Node)。
- 建树:将节点关联到一起,创建DOM树、Render树和RenderLayer树。
<html>
<body>
<p>Hello, World</p>
<div><img src=”example.png”/><</