2023-07前端新活汇总

发表于 分类于 ， 阅读次数： 阅读次数： Valine： 本文字数： 3.4k
都是些二手信息罢了~

信源:

  • https://web.dev/
  • 前端食堂
  • MDN Blog
  • Google I/O
  • Google Developers

部分可用的内容

滚动驱动动画

来自 MDN

Chrome: 115, Firefox: NA, Safari: NA

允许用户将动画进度与某个可滚动元素的滚动进度关联起来, 使用纯 CSS 实现基于滚动的动画. 可以参考 Google Developers 的文章

ES module 外部引用完成基线支持

来自 Web Dev

Chrome: 89, Firefox: 108, Safari: 16.4

允许开发者通过 <script type="importmap"> 定义一个 ES 模块的外部引用地址, 例如:

开发者希望使用 browser-fs-access 这个 ES 模块, 但是又不希望让这个模块通过自己的服务器 / CDN 分发, 可以这么写

<script type="importmap">
  // 在这里定义 ES 模块名的引用地址
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>
<script type="module">
  // 直接用就可以了
  import {fileOpen} from 'browser-fs-access';

  const button = document.querySelector('button');
  button.addEventListener('click', async () => {
    const file = await fileOpen({
      mimeTypes: ['text/plain'],
    });
    console.log(await file.text());
  });
</script>

Prettier 3.0 发布

来自 prettier

  • 迁移所有源码到 ESM, 支持 ESM 配置文件
  • trailingComma 默认值从 es5 改为 all. 意味着以后对象尾部会默认带一个 ,
  • 从解析器中删除 follow 语法支持
  • --parser=css 将只可以解析 CSS 语法

Vite 4 发布

来自 前端食堂

  • 实验性的加入 Lightning CSS 解析器
  • 更新 ESBuild 0.18
  • 支持 Solid 和 Qwik 模板

Remotion 4 发布

来自 前端食堂

  • Remotion Studio: 一个新的图形界面, 可以让你在预览视频的同时, 编辑组件的属性, 配置和跟踪渲染, 管理文件和音乐等
  • 可视化编辑属性: 可以用 Zod schema 定义组件的属性, 然后在 Remotion Studio 中用图形界面直接编辑它们
  • Rust-powered architecture: Remotion 4.0 内置了一个 Rust 二进制文件和一个定制的 FFmpeg 6.0 版本, 这样可以提高性能, 减少安装时间, 支持更多的格式和功能
  • 数据驱动的视频: 你可以利用新的数据获取和动态计算视频时长和尺寸的系统, 来创建更灵活和个性化的视频

FireFox 115 & Chrome 115 发布

来自 Chrome Developers

  • 滚动驱动动画: 支持 ScrollTimeline 与 ViewTimeline
  • Topic API: 允许浏览器与三方共享用户兴趣信息并保护用户隐私. (在此之前这一功能由三方 Cookie 实现)
  • 默认启用 fenced frame (参考 前端安全策略总结)
  • 主线程上 WebAssembly.Module 的最大大小增加到 8MB
  • display 属性支持 multi-keyword 语法 (参考 MDN)
  • Compute Pressure 特性实验: Compute Pressure 是一种可以让网页应用根据系统的压力状态来调整自己的工作负载的 API
  • 支持在 Mac 上调试 Chrome IOS 上的网站
  • 更多数组方法
  • 动画 animation-composition 属性

介绍 DevTool 的 Record 面板

来自 Chrome Developers

  • 支持操作记录
  • 支持操作记录修改
  • 支持导出操作记录
  • 支持重放操作并测量性能

如果这里导出的内容可以与 E2E 测试框架兼容就很棒了

动画 animation-composition 属性

来自 Chrome Developers

当动画样式出现冲突时的处理行为

  • replace: 效果值取代基础值
  • add: 效果值添加到基础值中
  • accumulate: 效果值与基础值相结合

更多数组方法

来自: web.dev

  • Array.toReversed() / Array.toSorted() / Array.toSpliced() / TypedArrays.toReversed() / TypedArrays.toSorted(): [Typed]Array.toXXXed 是 [Typed]Array.XXX 的浅拷贝版本, 即该函数不会修改原数组的内容, 会将结果作为返回值返回, 例如

    arr = [1, 2, 3]
arr_r = arr.reverse()
arr // [3, 2, 1]
arr_r // [3, 2, 1]
    arr = [1, 2, 3]
arr_r = arr.toReversed()
arr // [1, 2, 3]
arr_r // [3, 2, 1]

  • Array.with() / TypedArrays.with(): [Typed]Array.with()

    const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]

Back/forward cache

来自 web.dev

将整个页面缓存到内存, 当浏览器导航回到该页面时直接展示页面而无需重新加载

在缓存时浏览器所有任务队列中的任务 (定时器与 Promise) 都会被挂起等待从 cache 中恢复. 该方案存在部分异步风险,

Back/forward Cache 是浏览器自身的优化机制, 无需显式声明开启, 但是部分 JS API 会导致 Back/forward Cache 无法开启, 在开发中可以打开 DevTools - Application - Back/forward cache 检查是否可以开启 Back/forward cache

工具

CrUX 仪表盘

来自 Chrome Developers

CrUX 仪表盘通过收集 Chrome 用户在访问网站时性能指标汇总了每个网站的平均性能报告, 只需要输入网址即可查询网站性能信息. 使用方法参考 Chrome Developers

treo.sh

一款付费的网站性能分析工具, 支持测试基于不同设备的性能并提供性能监测服务

gitstars

一款 github stars 管理工具, 参考 gitstars

低代码的页面自动化工具

atoma 允许用户通过拖拽的方式实现页面自动化操作

iframe 大小调整工具

iframe-resizer 允许用户将 frame 调整为任何或者适合的大小

检测 npm 包在浏览器中的真实大小

来自 前端食堂

借助 WebContainers, pkg-size 可以在浏览器检测出 npm 包的真实大小

TypeChat

TyoeChat 是一个可以阅读你的 ts 代码并给出 / 验证结构性例子的 GPT. 微软出品

实验性内容

未来可能支持的 JS 语法

来自 前端食堂

  • 支持类型系统
  • Intl.MessageFormat: 类似带参数的 i18n 格式化
  • 编译器符号规范: 目前希望支持 #__PURE__, #__NO_SIDE_EFFECTS__

文章

  • 现在 JavaScript 的十年: ES6+ 特性总结
  • 逆向分析 GitHub Copilot: 可以学到一些 JS 逆向的知识
  • 捍卫 DOMContentLoaded
  • 测试自动化的类型
  • 使用 SRI 提高 CDN 资源安全性: 加个 Hash 罢了
  • 为什么 Object.key 的类型不是 (kayof T)[]: 因为 JS 中的对象是结构化类型
  • React 18 如何提高应用程序性能: WIP
  • 加速 V8 堆快照的调试记录
  • 谷歌搜索的核心生命体征网络
  • 金字塔还是螃蟹？找到适合的测试策略: 聊了如何分配单元测试, 集成测试, E2E
  • CSS 使用CSS使排版适应用户偏好: 如何在不同阅读偏好模式下微调字体, 包括
  • 暗模式的灰度略有降低
  • 高对比度得到更大胆的字体
  • 低对比度得到更薄的字体