My Weekly Reading Progress Report

一套自研多态协议
开发工具而言 uni-app 应该是一骑绝尘，它的文档内容最为翔实丰富，还自带了 IDE 图形化开发工具，鼠标点点点就能编译测试发布
先以 JavaScript 作为基础选定一个 DSL 框架，以这个 DSL 框架为标准在各端分别编译为不同的代码，各端分别有一个运行时框架或兼容组件库保证代码正确运行
开发迅速复用前端生态易于学习上手，不管前端后端移动端，多多少少都会一点 JS、CSS
从底层的渲染引擎、布局引擎，到中层的 DSL，再到上层的框架全部由自己开发，代表框架是 Qt 和 Flutter

JELLY | 小程序框架全面测评

5 annotations

jelly.jd.com

604

这样，开发者就可以将精力聚焦在 Vue.js 上，遵循 Vue.js
开发者就可以将精力聚焦在 Vue.js 上，遵循 Vue.js 规范编写业务逻辑，也就实现了完整的 Vue 开发体验。

前端搞跨端跨栈|保哥-如何打磨 uni-app 跨端框架的高性能和易用性 · 语雀

2 annotations

www.yuque.com

603

安全”和“管控
方便多个页面之间数据共享和交互为native开发者提供更好的编码体验为了性能（防止用户的JS执行卡住UI线程）
安全”和“管控
在这个架构下，开发者可以操作DOM，可以操作BOM，可以操作Vue.js，什么都可以干，但它无法直接操作被我锁住的ShadowDOM，想操作这个ShadowDOM，必须通过合法的途径操作，而这个ShadowDOM才是小程序用于展示的主要的窗口
通过ShadowDOM的Close模式把Body锁住。这样开发者自己的代码是无法操作DOM的，因为被我锁住了，但是开发者的JavaScript是自由的
先在沙箱中注册一个Vue的组件，然后这个组件不去实现具体的功能，只是接收用户传递的数据，然后把数据传递给UI线程，然后UI线程有一个这个组件对应的真实的组件去做具体的功能并最终渲染到UI上
“性能”和“原生能力受限”
沙箱中的代码我称为Master，它通过一系列计算，最终输出一些指令：创建元素、修改元素、插入元素、路由跳转、事件绑定等一些基础指令。这些指令从沙箱中通过线程间的消息机制传递到网页中，这个网页有一个模块叫做Slave，它负责监听Master发过来的指令并根据指令做指定操作
不允许使用<iframe>、不允许<a>直接外跳到其他在线网页、不允许开发者触碰DOM、不允许使用某些未知的危险API

小程序底层实现原理及一些思考 · Issue #43 · berwin/Blog

9 annotations

github.com

616

无论是UI层“用户”发出的信号，还是沙箱中“开发者”发出的信号，该信号都应该发送到Master层，由Master层统一控制路由。
Master层控制iframe时底层可以使用postMessageAPI。
创建一个新的iframe盖在前一个页面的上面，并初始化新页面的生命周期
通过这样的方案达到了让逻辑线程尽可能的 “轻” （只是执行开发者提供的函数而已），且减少逻辑线程与UI线程的通信频率（只在初始化及状态数据发生变化时产生通信）目的。
执行用户的函数（生命周期、方法等）收发状态数据
多个UI线程
安全，指的是小程序的安全性，由于小程序提供给开发者更高的权限，小程序开发者拥有很多OS能力的API，如果开发者利用这些API做些恶意的事情，那么对用户来说将是一场灾难（随便打开一个小程序，结果被黑客攻击了）。稳定，指的是小程序的稳定性，某个小程序崩溃或者卡死，不应该影响宿主APP及其他小程序。手机上的小程序大部分只能同时打开一个小程序，所以读者可能无法理解什么是稳定性。PC上可以同时打开很多个小程序，根据产品形态不同，有的产品形态的小程序可能在一个网页里面运行（多个小程序同时在同一个网页里运行），这时候某个小程序卡死（例如写一个死循环），它不应该导致其他的小程序和宿主环境也跟着卡死。性能，要保证小程序的执行、渲染等效率要足够高效。简单，小程序对于开发者要足够简单，最好无需学习直接上手。
安全、稳定、性能、简单

小程序底层实现原理及一些思考（2） · Issue #49 · berwin/Blog

8 annotations

github.com

636

Segregation

Redux从设计到源码 - 美团技术团队

1 annotation

tech.meituan.com

377

Google Chrome developers are exploring ways to reduce the overhead of CPU-to-GPU data transfers, including use of special shared memory with zero copy overhead
Safari is already able to delegate the drawing of simple elements (such as an empty DOM element with a background-color) to the GPU, instead of creating an image of it on the CPU
when a very large texture consumes much more memory than a few small layers
The size of compositing layers is likely be more important than the number of layers
Watch out for the number and size of composite layers
negotiate with the client and designer
this solution has a significant flaw: The animation now works on the CPU and can be blocked by heavy JavaScript calculations
A rectangle made by a DOM element will be rendered as a texture for the GPU, not the PNG image
We’ve made it easier on ourselves to rotate the entire sun container. So, this container was promoted to a compositing layer and painted into a single large texture image, which was then sent to the GPU
It works entirely on the GPU
JavaScript animation happens when each step is manually calculated in a requestAnimationFrame callback.
opacity first in order to ensure that the element gets its own compositing layer.
Yet memory consumption can be reduced greatly in this case.
it could cause implicit compositing and require additional memory.
The transform and opacity properties are guaranteed to neither affect nor be affected by the normal flow or DOM environment
s
You can give browser a hint that you’re going to use compositing with the will-change CSS property
Try to keep animated objects as high as possible in the z-index
end the updated texture to the GPU.
remove the reason for compositing from A element
the texture’s size and the complexity of content, repainting and data transferring could take a significant amount of time to perform
Promotion to a compositing layer always causes a repaint
all non-compositing DOM elements above one with an explicit compositing reason
Optimization Tips
Additional repainting is required to promote an element to a composite layer. Sometimes this is very slow (i.e. when we get a full-layer repaint, instead of an incremental one).Painted layers have to be transferred to the GPU. Depending on the number and size of these layers, the transfer can be very slow, too. This could lead to an element flickering on low-end and mid-market devices.Every composite layer consumes additional memory. Memory is a precious resource on mobile devices. Excessive memory use could crash the browser.If you don’t consider implicit compositing, then the chances of slow repainting, extra memory usage and browser crashes are very high.We get visual artifacts, such as with text rendering in Safari, and page content will disappear or get distorted in some case
The animation is fast and smooth, at 60 frames per second.A properly crafted animation works in a separate thread and is not blocked by heavy JavaScript calculations.3D transforms are “cheap.”
does not affect the document’s flow,does not depend on the document’s flow,does not cause a repaint.
It’s able to compose images very quickly with subpixel precision, which adds a sexy smoothness to animations
composing the images of cached elements would be faster
render the image of the page’s new state (i.e. repaint) and then send it again to the GPU to display on screen

CSS GPU Animation: Doing It Right — Smashing Magazine

30 annotations

www.smashingmagazine.com

608

绿色方块也被提升为合成层，则剩下的两个被压缩到了一起
translateZ 提升为了合成层，其他的方块元素因为重叠的原因，被压缩了一起，大小就是包含这 3 个方块的矩形大小
由于重叠的原因，可能随随便便就会产生出大量合成层来，而每个合成层都要消耗 CPU 和内存资源，岂不是严重影响页面性能
每个 GraphicsLayer 都有一个 GraphicsContext，GraphicsContext 会负责输出该层的位图，位图是存储在共享内存中，作为纹理上传到 GPU 中，最后由 GPU 将多个位图进行合成，然后 draw 到屏幕上

淘系前端团队

4 annotations

fed.taobao.org

533