2020 前端技术发展回顾

以下文章来源于公众号「iconfontplus」，作者前端快爆

2020 终究是一个不平凡的一年，我们经历了太多坎坷与磨炼。甚至受 COVID-19 疫情的影响，Chrome 浏览器罕见的断更了，Chrome 82 就此缺席。但 Web 生态依旧保持了欣欣向荣的活力，一大批新特性持续不断涌现出来。

标准与协议

ECMAScript

ES2020 如期发布[1]，此前进入 Stage 4 的提案均被纳入正式规范。
- import()：用于动态加载模块；
- import.meta：一个对象，用来携带模块相关的元信息；
- export * as newModule from 'package'：一种新的聚合导出语法；
- 新增可选链运算符 [2] ?.：能够在属性访问、方法调用前检查其是否存在；
- 新增空值合并操作符 [3] ??：用来提供默认值，说明上下文是 null或 undefined；
- 新增 BigInt基础数值类型：可以表示绝对值大于 2^53-1的整数而无精度损失；
- 新增 Promise.allSettled()：返回一个在所有给定的 Promise 已进入 fullfilled 或 rejected 状态的 Promise，并带有一个对象数组，每个对象表示对应的 Promise 结果；
- 新增 String.prototype.matchAll：一个包含所有匹配正则表达式的结果及分组捕获组的迭代器。与 RegExp.prototype.exec的区别在于：如果要得到所有匹配项，需要正则表达式有 /g标志，且多次调用 .exec()才会得到所有匹配的结果，而 matchAll只需要调用一次；
- 新增 globalThis：用来解决浏览器、Node.js 等不同环境下，全局对象名称不统一，获取全局对象比较麻烦的问题。

CSS

特性

Flexbox [4]已经全面普及，垂直居中不再是前端「打工人」的烦恼丝。双飞翼、圣杯布局等各种 Hack 的手法也终究淹没在历史的长河之中。
Flexbox 中也支持了 gap [5]属性，可以非常方便的调节相邻元素的间距，主流浏览器均已支持 [6]；
所有主流浏览器都支持了 CSS Grid [7]，同时也被更多人熟知和使用， Subgrid [8]（子网格）在 Firefox 71 [9]中正式发布 [10]。Float、inline-block 不再成为页面布局首选，CSS 布局正在从一维向二维挺近；
纵横比属性 aspect-ratio [11]已经在 Chrome 88 中支持 [12]，通过它可以非常方便的实现元素的等比缩放；
Firefox 创新性的基于 CSS Grid 实现了瀑布流布局 [13]（ grid-template-rows: masonry），并推动其进入规范 [14]，这将比 JavaScript 方案拥有更好的性能；
容器查询（Container Queries）取得了实质性进展， Chrome 正在快马加鞭的实现中 [15]。有了它响应式组件如虎添翼，可以根据容器大小来设置不同的样式；
Chrome 86 和 Firefox 85 支持了 :focus-visible伪类，可以单独控制键盘的焦点样式，请停止使用 * { outline: none; }，改用 :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: auto; }，这样既可以保证鼠标点击时没有焦点框，也保留了键盘 Tab 键操作的时候出现焦点框，使页面的无障碍性更加友好。

技术领域

数据来自The State of CSS 2020[16]

处理器：三大预处理器（ Sass [17]、 Less [18]、 Stylus [19]）中，Sass 满意度最高，其他两者相对较低，其中很大一部分人转投了后处理器 PostCSS [20]的阵营。Sass 社区的 LibSass 宣布已弃用 [21]，不再支持新的功能的开发，LibSass 和 node-sass [22]将在最大努力的基础上继续无限期维护，包括修复主要的错误和安全性问题，并保持与最新版本的 Node.js 相兼容；
CSS 框架层面：前有 CSS-in-JS 的持续追击，后有以「实用原子类」为代表的 Tailwind CSS [23]异军突起，迫使我们重新思考 CSS 语义化类名的真谛。传统 CSS 框架中，用户继续使用 Bootstrap [24]的意愿明显下降， Pure.CSS [25]欢迎度不减；
CSS-in-JS： CSS Modules [26]和 Styled Components [27]继续保持在第一阵营；
Linter： Stylelint [28]依然是 Style Lint 领域的领头羊。 Prettier [29]作为「全能」的格式化工具，支持原生 CSS、 SCSS、Less 三种语法，是开发者格式化样式的不二之选，搭配 Git Hooks [30]使用，妙不可言。

端技术
WebAPI

Chrome 87 开始，可以在 JavaScript 层面控制摄像头的平移、倾斜和缩放了 [31]；
Web NFC [32]在 Chrome 81 开始进入初始试用计划；
Safari 14 [33]已支持 WebP 图片格式，至此，四大主流浏览器（Chrome、Firefox、Edge、Safari）已全部支持 WebP；
Safari 14 [34]已支持 Web 端通过 Web Authentication API [35]调用 Face ID 和 Touch ID 验证用户；
优化高 DOM 渲染压力场景的 Display Locking [36]（展现锁定）提案再次更新；
下一代图片格式 AVIF [37]（AV1 Image File Format）已经来了，此格式比 JPEG 小 50% 左右、比 WebP 小 20% 左右，相关性能跑分见此 [38]，目前 Chrome 85 [39]、 Firefox 77 [40]已支持；
HTML enterkeyhint 属性 [41]已在 Chrome 77、Safari 13.1 得到支持（Firefox 支持私有的 mozactionhint [42]属性），该属性可以使移动设备键盘中的 enter 键根据情景展现为不同的文案和样式；
W3C 沉浸式 Web 工作组发布 WebXR 手势输入模块 Level 1 规范 [43]的首个公开工作草案，该模块具有追踪关节手势的功能，可用于在 VR 场景中识别手部关节姿势或渲染手势模型。

安全隐私保护得到完善

2020 年是欧盟通用数据保护协议 GDPR 强制生效的第三年，也是熔断 Meltdown 与幽灵 Spectre[44]漏洞发生的第三年。在 2020 年，各大浏览器安全和隐私保护策略得到了很大的进展。

下线有安全隐患的支持：
- TLS 1.0 & TLS 1.1 已在 Chrome 84+ [45]、 Firefox 74+ [46]、 Safari 13.1+ [47]中下线：
- FTP 已在 Safari 14+ [48]、 Chrome 87+ [49]中下线，将在 Firefox 将来版本 [50]中下线；
- Flash 已在 Safari 14+ [51]中下线，将在 Chrome 88+ [52]、 Firefox 85+ [53]中下线；
跨站隔离优化：
- 2018 年初，由于 Spectre 漏洞的暴露，高精度定时器和 Shared Memory API 被禁用，为预防相关漏洞，浏览器需要保证不同站点在不同进程，相互隔离；
- 为了保证跨站进程隔离， Cross-Origin-Opener-Policy和 Cross-Origin-Embedder-Policy返回头被设计出来。当它们被服务端正确返回时， Firefox 79+ [54]和 Chrome 88+ [55]对 Shared Memory API 的支持将重新打开；
跨站嗅探预防：
- 在 Safari 13.1+ 中 [56]，第三方 Cookie 完全被禁用，JavaScript 可写的存储最多保留一周；
- 在 Safari 14+ 中 [57]，跨域资源的 Cookie 完全被禁用，除非经由 Storage Access API 显式获取用户的同意；第三方 CNAME 的域名 Cookie 最多可设置 7 天有效期；
- 在 Firefox 79+ 中 [58]，新版智能跨站嗅探预防（ETP 2.0）上线，将每 24 小时清除被判定为跨站嗅探的相关 Cookie 设置；
缓存粒度优化：
- Chrome 85+，HTTP 缓存采用更细粒度的键 [59]（ETLD+1）；
- Firefox 将在 85 后实现同粒度的缓存键 [60]；
- Safari 12.1+ 实现了顶部 window 域名 + URL 的键控制机制 [61]；
- 新的缓存机制隔离了 iframe 内外的跨域请求，能有效规避站点访问嗅探、跨站搜索攻击 [62]、跨站访问跟踪等隐私问题；
其他安全策略：
- Chrome 83+ [63]支持了 Trusted Types [64]以预防基于 DOM 的 XSS；
- Chrome 80+ [65]全量了 SameSite Cookie 默认值 SameSite=Lax，此举可以提升站点安全性，从源头防御大量的 CSRF 漏洞；
- Firefox 76+ [66]中使用 location.href或 <meta http equiv=“refresh”>等方法导航到未知协议的操作将被阻止。

框架和解决方案

框架

2020年 React 没有什么全新的概念，React Hooks 在社区从广受关注变成了实际落地；大家等待已久的 Vue 3.0 正式发布，在保留自身特色的同时也从 React 中汲取养分。

React 发布了 17 版本[67]，号称一个没有新特性的大版本更新，提供多版本 React 共存的能力；
经过持续两年的努力，2600+ 个提交之后，Vue 3.0 发布了代号 One Piece 的正式版[68]：
- 重新划分了模块：可以减少近半运行时大小。拆出的一些独立包也可复用在更多场景：AST 转换、自定义渲染器（如小程序）、响应式系统抽离出来独立使用；
- 新的 Composition API：在保留原有基于对象的 API 同时提出的新的 API，以达到类似 React Hooks 式的逻辑重用；
- 性能提升：与 Vue2 相比，打包后文件尺寸 (tree-shaking 时减少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和内存使用 (少了 54%) 方面都有显著的性能提升，模板编译时优化对性能提升有很大贡献；
- 更好的 TypeScript 集成：Vue3 由 TypeScript 写成，新的 Composition API 能很好支持 TS 类型推断，官方的 VSCode 扩展 Vetur 支持了模板中的类型检查，Vue3 更是完整支持了 tsx。

Webpack 又有更多对手

出于对 Webpack 的爱恨交加，大家纷纷用更新颖的想法或更激进的技术造起了全新的开发工具链，也促使 Webpack 加快自我迭代的步伐。

Webpack 5.0 正式发布 [69]，这是时隔 2 年半的大版本更新，通过持久缓存提高构建性能，通过更好的 Tree Shaking 和代码生成来降低打包大小；
vite [70]作为 Vue 作者的新项目快速引来关注，它基于浏览器原生 ES imports，因而有更快的冷启动和热更新，整体速度与模块数量无关。没有打包的过程，源码直接传输给浏览器使用原生的 <script module>语法进行引入，开发服务器拦截请求和对需要转换的代码进行转换，实现了真正的按需编译。生产环境提供了 vite build 脚本进行打包，它基于 rollup [71]进行打包；
基于原生 ES Module \(ESM\) [72]的现代打包工具 Snowpack 2.0 发布 [73]，其启动时间不到 50 毫秒，可以在大型项目中保持快速运行，内置对 TypeScript，JSX，CSS Modules 的支持，可与 React，Preact，Vue，Svelte 等前端开发框架结合使用；
Babel 作者 Sebastian McKenzie 推出了 JavaScript 工具链 Rome [74]，包含编译器、代码风格检查、格式化、打包、测试框架等内容，亮点在于零第三方依赖并简化 API 配置。