Worklet

Tags
webapi
Created
May 16, 2018 12:44 PM
image

Worklets 和web workers 十分相似,他们都允许你引入脚本文件并且运行JavaScript代码,而且他可以在渲染过程中的不同地方被调用。

Worklet 脚本会为了保证高性能严重限制你可以用的操作类型,可以去修改一些不造成重绘的 DOM 元素属性(如transform、opacity、scroll offset)。

// 和主线程频繁通信的成本???

Worklets are JavaScript contexts with an isolated scope and a very small API surface. The small API surface allows more aggressive optimization from the browser, especially on low-end devices. Additionally, worklets are not bound to a specific event loop, but can moved between threads as necessary. This is especially important for AnimationWorklet.

https://developer.mozilla.org/en-US/docs/Web/API/Worklet

https://github.com/GoogleChromeLabs/houdini-samples

CSS Paint API(运行在非主线程):

CSS.paintWorklet.addModule('paintworklet.js’);

// .css

background: paint(circle);

// paintworklet.js

registerPaint('circle', class {

static get inputProperties() { return ['--circle-color']; }

paint(ctx, geom, properties) { }

});

// ctx 不支持 currentColor

CSS Layout API 使用生成器函数对子元素进行一个一个布局

CSS Animation Worklet API 可以自定义属性,由该 worklet 来渲染其位置和大小等.

// 可以修改时间,可以将滚动作为时间线:ScrollTimeline,实现自定义滚动条

// Scroll Timeline for Web Animations

AudioWorklet 扩展 Web Audio API

SuperMade with Super