gubaojian / gubaojian.github.io Goto Github PK

"type":"scroller", background color clip 效果失效

问题背景

2018年最热跨平台技术Flutter凌空出世，直接对标React-Native 和Weex，通过自绘制模型，自建UI组件的方式，解决通过封装系统组件难以解决的双端一致性问题。Flutter背后Goodle有雄心勃勃，打算通过Flutter统一无线、PC等多端的开发技术。又掀起了大家对跨平台技术的热情，集团内闲鱼 GCanvas 钉钉 支付宝等投入了不少人力研究，通过Flutter打造自己的渲染引擎，支持APP内业务、小程序等业务。那下一代跨平台技术非Flutter莫属吗，基于Flutter引擎有哪些误区？有木有性能媲美Flutter的跨平台渲染技术？本文通过实际探索来阐述下一代渲染引擎。

第一代跨平台技术尝试

 第一代框架主要以Webview容器，代表有PhoneGap/Cordova。通过Bridge把原生接口封装后暴露给JavaScript使用。Webview被吐槽慢，为何慢？大家都以为Dom慢，这是被React V-DOM技术给带歪了；实际情况Dom本身操作并不慢，就是一个接口调用，非常快。慢的在于Dom操作后引起的一系列渲染流水的操作比较耗时；可以从浏览器架构以及实际的渲染流水线来阐述此问题。


  第一代架构渲染流水线及缺点
   Web本身就是面向PC端设计，PC端图形方面CPU是主力，浏览器设计在

第二代跨平台技术尝试

第三代跨平台技术尝试

第四代跨平台技术

下一代跨平台技术探索

参考文章：
https://www.cnblogs.com/liangxiaofeng/p/5429113.html

增加滑动组件遮挡的HitTest用例

支持Gif图

首先的4点。

1、伪类支持 http://dotwe.org/vue/bd7cbf491d547afe9a6d9308273591c0. demo已通结合hittest进行处理

2、hitest梳理, simiple hit test

3、hahuo clip bugfix

4, opengl share texture and lru cache for texture image

2、C++ List确定出来， 所有线程放到C++中

5, background image supported

6、transition 和 transform 支持 动画支持

7、position: fixed; scroller 支持， 或者其它元素

其它支持

6, scroller code clean， delay

7， syn view design

重要优先级不高

2, auto test case and trace log
later supported:

complete task

1、工程结构梳理， Node节点属性处理。非相关的属性，迁移出去。

Transform Rotate 3D Style

图片加载优先级及策略优化，主要优化临时变量。

.goIndex {
position:fixed;
right:20rpx;
bottom:200rpx;
width:80rpx;
height:80rpx;
border-radius:15px;
background-color: #fff;
text-align: center;

}

TransformStyle3DPreserve3D Style Has None Effect

动画以及Touch时间时间矫正，滑动间隔及动画均匀性，更流畅

eglSwapBuffersWithDamageKHR

Performance Layer Tool

https://github.com/flutter/engine/blob/master/flow/layers/performance_overlay_layer.cc

https://github.com/flutter/engine/blob/5ce5ace6ea1ab2009c23cf64361b72286554384d/flow/instrumentation.cc

多层Layer穿透技术目前满足需求，后续再开发。

1、https://github.com/v8/v8/wiki/Embedder's%20Guide

Gif和下拉刷新支持产品化

display: inline-block， inline
transition支持
position: fixed;
backgroundImage支持
transform， translate3d

##支持适配
z-index
text-indent
box-sizing

Supported Horizontal Scroller

Display Table-CELL支持

Clip时背景色

iOS平台支持，与Flutter方案PK滚动列表性能以及首屏等性能参数

Position Fixed支持

http://www.wowotech.net/

UpdateStyle IF语句性能优化，转换成map加lambda表达式

渲染流水线更高的并行化，GPU和Layout可以并行渲染，进一步提升渲染的性能。