2021 前端领域总结

技术文章

一、 2021 CSS 使用状况年度报告

关于 2021 年的 CSS 使用状况调查报告。

• 跳转译文

二、 2021 Javascript 使用趋势

1. 平均(中位数)每个 PC 页面会加载 463kb 的 Javascript 资源
2. 平均(中位数)每个 PC 页面回加载 21 条 Javascript 资源请求
3. 平均(中位数)总加载的 JavaScript 资源中未使用的占到了 36.2%
4. 63.9% 的移动页面使用了具有已知安全漏洞的 JavaScript 库和框架

• 跳转译文

三、 2021 CSS 使用趋势

undefined

• [跳转译文](https://almanac.httparchive.org/en/2021/css

1. 平均(中位数)每个 PC 页面会加载 71kb 的 CSS 资源 1. 最常见的 class 为 .active 1. 最常见的 id 为 #content)

四、 2021 年在 Web 领域有哪些关键进展？

W3C 领域在 2021 的一些发展列举如下

1. 小程序
2. 音频 - Web Audio 1.0
3. Web 文本编辑 - 虚拟键盘API
4. 机器学习 - Web 神经网络 API
5. WebRTC - Encoded Transform
6. 浏览器自动化测试 - WebDriver API 2.0
7. 身份认证 - WebAuthn Level 3
8. Web支付 - Payment Request API
9. 分散式标识符 - DID 标准
10. Web字体 - 增量字体传输

工具推荐

一、 Tauri 新一代桌面开发方式

Tauri 是一个使用 Web 技术构建桌面应用程序的解决方案，后续将会支持 Android/IOS。

与 Electron 相比，它是用 Rust 编写的，它并不依赖于 Chromium，也不依赖于 Node 与 v8。

二、 zustand: 极易上手的 React 状态管理器

超简单、超好用的 React 状态管理器。

1. 无需 Context Provider 包裹组件，使用简单方便
2. 主要使用 hooks 消费应用状态
3. 代码简洁，方便，即可几行即可管理全局状态

import create from "zustand";

const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}));

function Controls() {
  const inc = useStore((state) => state.inc);
  return <button onClick={inc}>one up</button>;
}

function Counter() {
  const count = useStore((state) => state.count);
  return <h1>{count}</h1>;
}

三、 更快的 SSG 静态网站生成器

超快的、体积超小的网站构建器。

工具推荐

一、 2021 年 Javascript 明星项目

关于 2021 年前端领域的明星项目。

它会从前端框架、构建工具、生态圈等维度了解其最受欢迎的项目。

值得关注的几个项目有:

1. zx，谷歌出的一个命令行脚本工具
2. tauri，一个新的桌面开发方式
3. zustand，一个小巧的 React 状态管理库

二、 HTTP Archive 年度报告

HTTP Archive 会周期性爬取头部网站，并分析其资源的信息，这是一个关于其资源、性能的统计图表的一个网站。