1. React18 自动批量更新
React18版本，通过默认执行更多的批处理增加开箱即用的性能改进，无需在应用程序或库代码中手动批量更新。
- before
在之前的版本中，React只会在合成事件内或者class语法的内置生命周期内(componentWillMount、componentDidMount等)进行state合并后re-render。默认情况下不会对promise、setTimeout、手动事件绑定的中的state更新做批处理。
- after
通过createRoot，创建的应用，所有的更新都将自动处理，包括promise、setTimeout、手动事件绑定，这样会导致更少的渲染，从而获得更好的性能。
2. 构建打包非 JavaScript 的资源
有多种方法可以在 Web 上包含非 JavaScript 资源，但它们有各种缺点，并且不能跨各种工具链工作。new URL(..., import.meta.url)模式是最有前途的解决方案，如今已在浏览器、各种打包程序（Vite、Rollup、Webpack5）和 WebAssembly 工具链中运行。
example
// regular JavaScript import
import { loadImg } from './utils.js';
// special "URL imports" for assets
import imageUrl from 'asset-url:./image.png';
import wasmUrl from 'asset-url:./module.wasm';
import workerUrl from 'js-url:./worker.js';
loadImg(imageUrl);
WebAssembly.instantiateStreaming(fetch(wasmUrl));
new Worker(workerUrl);
// regular JavaScript import
import { loadImg } from './utils.js';
// URL imports
loadImg(new URL('./image.png', import.meta.url));
WebAssembly.instantiateStreaming(
fetch(new URL('./module.wasm', import.meta.url)),
{ /* … */ }
);
new Worker(new URL('./worker.js', import.meta.url));
扩展阅读，import stylesheets
3. 优化图片资源加载顺序
-
资源优先级概念
-
chrome浏览器的资源加载优先级
- html、css、font这三种类型的资源优先级最高
- preload资源、script、xhr请求
- 图片、语音、视频
- prefetch预读取资源
-
提升图片资源优先级的方法
- ✅ preload图片资源提升图片资源的优先级
- ✅ 图片资源给予单独的域名
- ✅ 改变JS、CSS的插入时机
- ✅ 采用http2.0
4. 新的样式与动画方案?
CSS Paint API: 允许开发人员编写一个绘制函数，这个函数允许我们直接绘制元素、背景、边框和内容，可用于实现特殊的css效果。目前只有chrome & edge 支持。
新闻速览
1. 云端vscode
- 在
登陆github的状态下，快捷方式【.】打开在线版vscode预览github项目或者将url中 「.com 替换成 .dev」直接打开在线版vscode - github.dev集成了codespaces，使用云端资源开发，随时随地贡献代码
- 目前公司提供的devcloud环境配合vscode ssh 能力也可以做到云端开发。
2. 灵活强大的React Table组件
基于styled-components的开箱即用React Table组件，支持声明式配置、可定制主题、响应式。
3. TypeScript类型挑战
向typescript前进，练习typescript的高级使用, 去看看
4. FFCreator视频加工库
您只需要添加几张图片或视频片段再加一段背景音乐，就可以快速生成一个很酷的视频短片。有点想早的gif制作工具。
5. Node V16.9.0
此次更新里包含了一个实现性的”包管理“管理器Corepack，Corepack不仅能够管理npm，还支持Yarn和pnpm。 Corepack 是一款零运行时依赖的 Node 脚本工具，它充当 Node 项目和包管理工具之间的桥梁。实际上，Corepack 可以让你直接使用 yarn 和 pnpm，而无需安装它们。就像使用 npm 一样，默认由 Node 提供。
