时隔许久的一次更新：关于AVIF、前端职责的演进

关于AVIF的一些进展

AVIF是一个现代图片格式，是从AV1的视频格式演变而来，完全免费。压缩效果超过WebP、JPEG、PNG等。

AVIF has landed 2020年9月8日

Chrome85已经支持AVIF格式了。安卓和Firefox不久之后也会支持，Safari曾经用了10年才支持了WebP，但因为苹果是AV1的开发者之一，所以AVIF应该会更快一些。
目前Netflix已经正式使用AVIF了，Cloudflare也很感兴趣。而且现在AV1的发展也不错。
同样体积，AVIF比JPEG图片质量好太多。同等画质下，WebP大概是JPEG的一半体积，AVIF是WebP的一半体积。

AVIF目前也有一些缺点：加载时，JPEG可以多个阶段加载，从模糊→最清晰。WebP可以从上到下依次加载。AVIF虽然体积最小，但AVIF不能渐进式加载。可以加一个3KB的模糊预览图来达到渐进式的效果，但AVIF官方还不支持，不过已经在spec里提了。
另一个问题是编码复杂度高。目前AV1的编码复杂度也是超过H265的。

Cloudeflare: Introducing support for the AVIF image format 2020年10月3日

Cloudflare已经支持AVIF了。
这篇文章提到上述说的两个问题。第一个问题并没有解决，但因为AVIF体积小，所以整体加载速度更快些。

关于编解码的问题：AVIF虽然提高了解码复杂度，但日常使用中也足够快了，低端Android手机可以不使用硬件加速播放full HD 的AV1视频，而AVIF只是AV1视频的一帧。
AVIF的编码速度则慢得多，不过编码可以利用多核CPU，Cloudflare的CPU核心数又很多(单机48核)，再加上缓存机制，使得只有未命中缓存时才有可见的编码速度慢的问题。

Cloudflare使用基于Rust开发的AVIF编码器 rav1e。该编码器属于Xiph基金会，这个基金会非常值得关注一下，我们熟知的许多多媒体项目都在该基金会里，比如：ogg/opus/vorbis/speex/flac 等等。

上文提到的其它关于AVIF文章：

• Netflix: AVIF for Next-Generation Image Coding 2020年2月14日
• How to Use AVIF: The New Next-Gen Image Compression Format 2020年8月5日

CSS-Tricks/Codepen作者Chris Coyier关于前端演进的文章

Chris Coyier认为前端的职责在不断地扩宽与转换

Front-end development is at the intersection of art and logic. A cross of business and expression. Both left and right brain. A cocktail of design and nerdery.

• 前端开发者不断扩展的职责 The Widening Responsibility for Front-End Developers 2020年10月7日
• 想必现在我们已经是全栈工程师了 ooooops I guess we’re* full-stack developers now 2020年9月27日
• When frontend means full stack: Reflections on the shifting responsibilities of frontend developers 2020年5月
• The Great Divide Two front-end developers are sitting at a bar. They have nothing to talk about 2019年1月

值得关注的更新

Atomics.wait, Atomics.notify, Atomics.waitAsync

这篇文章介绍了浏览器的Atomics特性。从v8 8.7开始(Chrome dev channel)，支持了可用于并发编程(基于workerthread)的Atomics.waitAsync 功能。

原本只有 Atomics.wait 方法，但该方法会阻塞主线程，所以几乎不可能在主线程使用。而 waitAsync 的出现，就可以在主线程正常使用了。

这个特性的意义：除了Atomics外，还有SharedArrayBuffer。二者搭配使用，就可以把计算复杂的事情交给workerthread执行，主线程 waitAsync 即可。应该会更多的在wasm里使用，或者图片生成功能，可以把生成逻辑放到worker里等等..

TC39的一些提案

这里提到的几个新提议：

ArrayBuffer可以动态调整大小了。原本想要扩大ArrayBuffer，需要创建一个更大的ArrayBuffer，把现有的拷贝过去，然后再等现有的ArrayBuffer GC。内存使用比较低效。现在可以直接使用新的可变ArrayBuffer了

Error Cause：给Error增加了一个cause 字段，当chain error时，可以知道这个错误是由哪个错误引发的。

Double-Ended Iterator and Destructuring：这个蛮实用的，简单来说，就是支持了 [start, ...rest, last] = [1,2,3,4,5,6] 这种解构方法了。

有趣的项目

Kubedoom

通过玩Doom，随机Kill Kubernetes里的Pods

Elsa

使用Go开发的极小、快速、安全的JavaScript与Typescript运行时。

• 使用QuickJS运行
• 使用Esbuild构建

如果之前没有了解过QuickJS的作者Bellard的话，值得了解一下。他的项目有：QEMU、FFMPEG、TinyEMU、自己搭建的4G/5G基站、基于Javascript开发的PC模拟器、在浏览器运行的X Windows or Windows 2000。

如果有想要讨论的可以直接回复这封邮件。如果觉得有价值，欢迎分享给其他感兴趣的人吧~

如果想拥有自己的Newsletter，也可以来 https://hedwig.pub 注册，邀请码是 hedwigpub

订阅地址: https://se7en.hedwig.pub