跨平台是最近几年很火的技术栈，也是未来的趋势，一次开发，多出处行，能节约大量的人力和时间成本。目前主要的跨平台方案有三种
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”/
最低0.47元/天 解锁文章
579
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
