2020 前端技术发展回顾

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()才http://groups.tianya.cn/post-208292-e7af664450794829ac50ed89d5ddaf03-1.shtml会得到所有匹配的结果，而 matchAll只需要调用一次；

新增 globalThis：http://groups.tianya.cn/post-208292-45a866a49ec74ee2970ddb7c133aaa8d-1.shtml用来解决浏览器、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; }，http://groups.tianya.cn/post-208292-444538087bf74b76add9e01154f9152b-1.shtml改用 :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: auto; }，这样既可以保证鼠标点击时没有焦点框，也保留了键盘 Tab 键操作的时候出现焦点框，使页面的无障碍性更加友好。