Web Components 小程序组件实现原理( 二 )

4）以上，可以在页面上使用我们定义的了，浏览器中解析如下
5）在线code：
2.3. 组件框架介绍
1）字节小程序：基于 UI框架实现
是由谷歌的Palm webOS团队打造，并在2013I/O大会上推出，旨在用最少的代码实现Web ，解除框架间的限制的UI框架。的核心思想是" is an " 。
优点：
代码轻量化，支持模块开发，会自动生成 dom
支持数据绑定、事件监听，通过更改属性变量，控制UI状态
提供易用的生命周期回调：创建、节点首次挂载完毕，每次挂载，从文档树移除，属性变化时触发函数
2）微信小程序：基于框架实现
是微信小程序的组件组织框架，内置在小程序基础库中，的组件模型与标准中的高度相似。会维护整个页面的节点树相关信息，包括节点的属性、事件绑定等，相当于一个简化版的 DOM实现，性能表现更好同时代码尺寸也较小。
三、原生组件（组件）
小程序踩过的坑：

文章插图
为什么官方建议不要在-view中使用input？
为什么页面滚动会出现输入框漂移？
为什么视频组件中的样式无法覆盖，新增功能按钮？
为什么在IDE中调试没问题，到真机上组件展示异常？
......
3-1. 组件优点
扩展Web的能力。比如像输入框组件（input, ）有更好地控制键盘的能力。
体验更好，同时也减轻的渲染工作。比如像地图组件（map）这类较复杂的组件，其渲染工作不占用线程，而交给更高效的客户端原生处理。
3-2. 运行机制
在创建容器，并将将web端的位置信息和大小信息传给客户端
客户端创建跟web容器位置大小相同的视图view视图，组件覆盖空白区域
当容器位置或宽高发生变化时，组件会通知客户端做相应的调整，同理客户端位置发生变化也会通知
当用户直接操作原生组件时，接收不到对应的事件响应，由组件监听到事件直接发送至逻辑层，触发层渲染。
IOS\安卓原生组件表现相同：组件覆盖在上层
3-3. 原生组件的使用限制：四、同层渲染 4-1. 同层渲染
同层渲染是为了解决原生组件的层级问题，在支持同层渲染后，原生组件与其它组件可以随意叠加，有关层级的限制将不再存在。但需要注意的是，组件内部仍由原生渲染，样式一般还是对原生组件内部无效。
4-2. IOS方案
当DOM设置为时，IOS系统自动生成（也为原生组件，内核已经处理了与其他DOM元素间的层级关系），可以监听滚动，原生组件会直接挂载在预先创建好的容器下，通过给DOM元素添加属性匹配对应的容器（作为id，匹配rgb值），IOS10以上通过匹配。
4-3. 安卓方案
使用头条自研内核，当dom元素设置tt--in-属性时，可在页面挖一个透明洞，将组件放在下面，解决覆盖问题，通过设置特定属性用于滚动监听。