3

技术周刊 2021-10-15：Firefox 支持 AVIF

 2 years ago
source link: https://zhuanlan.zhihu.com/p/422865599
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

技术周刊 2021-10-15：Firefox 支持 AVIF

  • Firefox 93 发布：
    • 正式支持了 AVIF 图片格式，此前 Chrome 85 已支持；
    • 支持了 ES2022 语法类静态初始化区块 Class Static Initialization Blocks；
    • 支持了 Custom Element 新 API：
      • 用于绑定 <slot> 元素变更的 slotchange 事件，将联动 API HTMLSlotElement.assign()；
      • 为自定义组件添加形同 <form> API 表现的 HTMLElement.attachInternals()；
      • attachInternals() 的返回值类型 ElementInternals 追加了 shadowRoot API，可获取 Shadow DOM 的根结点；
    • HTTP 鉴权支持了 SHA-256 算法，这个算法比之前的 MD5 更为安全。
  • Sanitizer API 是近期由 Google 和 Mozilla 共同提出的，可预防 XSS 的 API：
    • 它将解析用户输入的字符串，并移除其中可能有安全风险的属性和标签；
    • 此方法和字符串转义不同，它不将一些字符串转义为实体，而是直接移除字符串中的有害部分，同时保留内部的其他部分 HTML 结构；
    • 和 DOM Purify 相比，此 API 不会造成 string 被 parse 两次；DOM Purify 可作为 Sanitizer API 的 polyfill；
    • 可以通过 new Sanitizer() 来创建一个 Sanitizer 对象，目前对应 API 仍未完全确定，部分提案包括 sanitizer.sanitizeFor()、sanitizer.sanitizeToString()、sanitizer.sanitize() 等；
    • 此 API 在 Chrome 中正在开发试用阶段，在 Firefox 83+ 中可通过开启 dom.security.sanitizer.enabled 来进行试用。
v2-f4cfab8256e547f37792b955053d1ac3_720w.jpg
  • Priority Hints 提案于 Chrome 96 开始进入初期试用中：
    • 它包括资源标签（link、img、script 和 iframe）上的 importance 属性，可以设置为值 low、high 或 auto，允许用户进一步细化控制资源优加载的先级，可以在加载时不阻塞渲染以及更关键的资源;
    • 在浏览器中，资源获取存在优先级（Resource Priority）的相关概念：
      • Chrome 的资源优先级有如下规则：
        • 优先级最高（Highest）：HTML 和 CSS；
        • 优先级为高（High）：字体、<head> 中的 <script>、XMLHttpRequest 或 fetch() 请求；
        • 优先级为中（Medium）：首屏图片、<body> 底部的 <script>；
        • 优先级为低（Low）： 非首屏图片、<script async>、<script defer>；
      • 可用 rel="preload" 来将资源加载的优先级提到高（High）；
      • 可用 rel="prefetch" 来将资源加载的优先级降低到最低（Lowest）；
      • 和上述手段的区别是，importance="high" 或 importance="low" 只是会把资源优先级进行相对原优先级的调整，粒度相对更细，它是对原有的 rel="preload" 等手段的扩展，可搭配或单独使用；
    • 同时，Priority Hints 也有适用于 fetch API 的提案，它允许在第二参声明请求的优先级，让浏览器协调 fetch API 网络请求的优先级。

点评：此外，Chrome 的 script 标签还存在执行优先级和加载优先级的区分，性能优化时也可以了解一下

  • Parcel 2 发版，新版本特性包括：
    • 使用 Rust 重写 JavaScript 编译器，并支持并发编译，使得性能大幅提升；
    • 全新设计了插件系统；
    • 支持 Tree Shaking、Code Splitting、Bundle Inlining；
    • 原生支持 ES Modules；
    • 强化缓存可靠性，更精确地生成 SourceMap；
    • 强化 Web Worker 的支持；
    • 优化 SVG 支持，支持图片转码等操作；
    • 支持打包编译一个 JavaScript 库；
    • 对相关打包性能的比较见下图：

点评：Parcel、Vite 来势汹汹，Webpack 你颤抖了没

  • napi-cs 是一个允许开发者使用 .NET 6.0 和 C# 开发 Node.js 包的工具，目前还在初期试用阶段，并非所有的 API 都被实现。

注：optionalDependencies 目前只在 cnpm 7.1+、pnpm 和 npm 中支持，yarn 暂不支持，详见一丝的测试

编辑：承虎 & 审阅：一丝


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK