2020 前端技术发展回顾

大家好，我是若川，今天给大家分享一篇来自阿里妈妈前端快爆的好文。另外，偷偷告诉你，截止今晚9点点此抽奖送红包还送3本比红宝书还贵的书

可以点击文章末尾阅读原文直达知乎链接，以下是正文

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

标准与协议

ECMAScript

ES2020 如期发布，此前进入 Stage 4 的提案均被纳入正式规范。

- import()：用于动态加载模块；
- import.meta：一个对象，用来携带模块相关的元信息；
- export * as newModule from 'package'：一种新的聚合导出语法；
- 新增可选链运算符?. ：能够在属性访问、方法调用前检查其是否存在；
- 新增空值合并操作符?? ：用来提供默认值，说明上下文是 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 已经全面普及，垂直居中不再是前端「打工人」的烦恼丝。双飞翼、圣杯布局等各种 Hack 的手法也终究淹没在历史的长河之中。
Flexbox 中也支持了 gap 属性，可以非常方便的调节相邻元素的间距，主流浏览器均已支持；
所有主流浏览器都支持了 CSS Grid，同时也被更多人熟知和使用，Subgrid（子网格）在 Firefox 71 中正式发布。Float、inline-block 不再成为页面布局首选，CSS 布局正在从一维向二维挺进；
纵横比属性 aspect-ratio 已经在 Chrome 88 中支持，通过它可以非常方便的实现元素的等比缩放；
Firefox 创新性的基于 CSS Grid 实现了瀑布流布局（grid-template-rows: masonry），并推动其进入规范，这将比 JavaScript 方案拥有更好的性能；
容器查询（Container Queries）取得了实质性进展，Chrome 正在快马加鞭的实现中。有了它响应式组件如虎添翼，可以根据容器大小来设置不同的样式；
Chrome 86 和 Firefox 85 支持了 :focus-visible 伪类，可以单独控制键盘的焦点样式，请停止使用* { outline: none; }，改用 :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: auto; }，这样既可以保证鼠标点击时没有焦点框，也保留了键盘 Tab 键操作的时候出现焦点框，使页面的无障碍性更加友好。

技术领域

数据来自 The State of CSS 2020

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

端技术

WebAPI

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

安全隐私保护得到完善

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

下线有安全隐患的支持：有安全隐患的支持：

- TLS 1.0 & TLS 1.1 已在 Chrome 84+、Firefox 74+、Safari 13.1+ 中下线：
- FTP 已在 Safari 14+、Chrome 87+ 中下线，将在 Firefox 将来版本中下线；
- Flash 已在 Safari 14+ 中下线，将在 Chrome 88+、Firefox 85+ 中下线；

跨站隔离优化：

- 2018 年初，由于 Spectre 漏洞的暴露，高精度定时器和 Shared Memory API 被禁用，为预防相关漏洞，浏览器需要保证不同站点在不同进程，相互隔离；
- 为了保证跨站进程隔离，Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 返回头被设计出来。当它们被服务端正确返回时，Firefox 79+ 和 Chrome 88+ 对 Shared Memory API 的支持将重新打开；

跨站嗅探预防：

- 在 Safari 13.1+ 中，第三方 Cookie 完全被禁用，JavaScript 可写的存储最多保留一周；
- 在 Safari 14+ 中，跨域资源的 Cookie 完全被禁用，除非经由 Storage Access API 显式获取用户的同意；第三方 CNAME 的域名 Cookie 最多可设置 7 天有效期；
- 在 Firefox 79+ 中，新版智能跨站嗅探预防（ETP 2.0）上线，将每 24 小时清除被判定为跨站嗅探的相关 Cookie 设置；

缓存粒度优化：

- Chrome 85+，HTTP 缓存采用更细粒度的键（ETLD+1）；
- Firefox 将在 85 后实现同粒度的缓存键；
- Safari 12.1+ 实现了顶部 window 域名 + URL 的键控制机制；
- 新的缓存机制隔离了 iframe 内外的跨域请求，能有效规避站点访问嗅探、跨站搜索攻击、跨站访问跟踪等隐私问题；

其他安全策略：

- Chrome 83+ 支持了 Trusted Types 以预防基于 DOM 的 XSS；
- Chrome 80+ 全量了 SameSite Cookie 默认值 SameSite=Lax，此举可以提升站点安全性，从源头防御大量的 CSRF 漏洞；
- Firefox 76+ 中使用 location.href 或 <meta http equiv=“refresh”> 等方法导航到未知协议的操作将被阻止。

框架和解决方案

框架

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

React 发布了 17 版本，号称一个没有新特性的大版本更新，提供多版本 React 共存的能力；
经过持续两年的努力，2600+ 个提交之后，Vue 3.0 发布了代号 One Piece 的正式版：

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