English
使用Canvas渲染HTML代码的项目，目前处于开发阶段 0.0.1-alpha
简易版本体验地址
目标与应用场景：
- 实现浏览器环境，实现跨端运行HTML与JS代码
- 小程序、小游戏上运行html代码
- 基于此实现在小程序上运行vue、react以及第三方UI
- 支持小游戏及游戏引擎，实现绘制游戏UI
目前正在开发中，如果您有好的想法和建议，欢迎提 Issue 与 MR
Done list
- 虚拟DOM的构建
- PIXI渲染
- 解析属性
- 解析部分样式 color，fontSize，width，height，display，left，top
- 完成基础布局
- querySelector 等api完成
- 单元测试
Todo List
- 更多样式的完善
- css支持 done
- 重绘制重排优化 done
- 事件支持
- style标签支持
- script标签支持
- z-index支持
- flex布局
- DOM 与 window api的完善
- 盒模型
- img、audio、video等标签的支持
- resize改变布局
- ...
原理
HTML -> vdom + css -> pixi渲染
记录
layout 布局实现
计算elemnt的layout与boundary实现
inline + block relative布局
执行顺序
对于元素
- 解析标签开始
- 创建元素 添加到parent
- 渲染样式
- 解析标签完成（子元素添加完成）
- 由父元素layout自身
对于textNode
- 创建 textNode 添加到父元素
- 渲染样式
- 由父元素layout自身
IDEA
adapter实现类
pixi提供ui显示 背后有不同端各自adapter实现
- input web：input； 小游戏 wx.showKeyboard
- audio web: Audio； 小游戏 wx.createWebAudioContext
- video web: video； 小游戏 wx.createVideo （将video至于顶层 调整位置） // wx.createVideoDecoder 方案2：解码逐帧绘制
重绘 => 重排
重新渲染
难点：
- 样式继承
- css+选择器
- important修饰符处理
分类
- class id attr 修改：
需要对当前元素及其之下的所有元素进行重新cssom比对渲染
- style=xxx
由于需要对当前元素style重置，所以采用对当前元素进行重新cssom比对渲染
- style.xx = xx
只需要对当前元素的某个style进行覆盖 需要考虑important属性
重排
pixi绘制完成之后 元素的初始长宽都已经计算好了
使用renderManager 进行统一管理重绘和重排
收集样式改变、选择器改变 进行统一局部重绘 优化性能
收集可造成重排的改变进行 进行统一重排，最小化重排局部改变 优化性能
https://davidfig.github.io/pixi-scrollbox/
