回顾前端2019

标准进行时 #

ECMAScript 2019 如期到来 #

ECMAScript 2019 年包含这些更新：

• Array.prototype.flat、Array.prototype.flatMap；
• String.prototype.trimStart、String.prototype.trimEnd；
• Object.fromEntries；
• Symbol.prototype.description；
• try catch 语句允许不填入参数了；
• Array.prototype.sort 将用 Timsort 算法 保证排序结果的稳定性；
• Function.prototype.toString() 行为修改；
• 修复 JSON 中 Unicode 边界问题的 Well Formed JSON 和 Subsume JSON。

ECMAScript 2020 年可以期待这些更新。

WebAPI 趋于丰富 #

• WebAuthn 进入 W3C 推荐规范，WebAuthn 允许用户通过生物识别、个人移动设备等多种方式来进行身份认证；

• 三个 WebAssembly 标准进入 W3C 推荐阶段： WebAssembly 核心规范、WebAssembly Web API、WebAssembly JavaScript 接口；

• W3C 发布  CSS Animation Worklet API 工作草案，提供了在专用线程中运行动画的 API；

• Web Monetization API （小额支付 API）在过去一年有了声音；

• 画中画提案 Picture-in-Picture API 已经在三个主流浏览器（Chrome 71、Firefox 69 和 Safari TP 95）中得到实验性支持；

• WebXR Device API 在 Chrome 79 中进入试验性支持，为智能手机和头戴式显示器创建沉浸式体验；

• ResizeObserver API 在 Safari TP 97 和 Chrome 64+ 中被支持；

  TC39 提出了 Binary AST 提案，旨在压缩 JavaScript 冷启动过程中的编译与字节码生成时间；

  基于 ES modules 的 HTML Imports 重回标准，Chrome 80 也已经正式支持；

  • 网页数学公式标记语言 MathML 与 Chrome 「重归于好」，Igalia 公司正在全力为 Chrome 实现新的 MathML，[MathML 与浏览器的爱恨情仇]22在庚子之年能否了结，我们拭目以待。

CSS 飞速发展 #

• 过去一年里，很高兴几乎再也听不到 IE6，取而代之的是 Android。Flexbox 成为无线页面布局首选，CSS Grid 也逐渐普及，Firefox 71 也率先支持了 Subgrid；

• 随着 macOS/iOS 带起的深色模式浪潮，主流浏览器也也实现了 CSS 媒体查询属性 prefers-color-scheme，Web 与操作系统的无缝体验更加顺滑；

• backdrop-filter 属性在 Chrome 76 中迎来无前缀版本，Web 页面可以更加方便的实现背景滤镜；

• CSS Scroll Snap 规范趋于稳定，主流浏览器也已经全部实现无前缀版本。CSS 也可以实现简单的轮播切换了；

• 文字与字体上，Variable Fonts（可变字体）技术快速发展，为字体创作带来了无限遐想的空间。line-clamp 多行溢出控制属性正式进入规范，Edge 和 Firefox 也都支持了历史遗留的前缀属性：-webkit-line-clamp；

• 数学计算上，有了全新的 min()、max()、clamp() 比较函数，传统的预处理器有的功能，CSS 也逐渐完善。自定义属性进入普及阶段，在实现动态换肤等场景时大放异彩；

• CSS Houdini 进展略慢，只有 CSS Properties and Values API进入 Chrome 78，Animation Worklet 进入 Chrome 71。路漫漫其修远兮，Houdini 未来还有很长的路要走。

  CSS 框架方面，根据 stateofcss.com 的统计，Bootstrap 持续走低，但各种基于它的主题和插件依然火热。基于原子类的 Tailwind CSS 满意度达到了 81%，不得不让我们重新思考 CSS 到底该如何编写？

端技术 #

跨端技术机遇与危机并存 #

2019 年发展得较快的跨端框架有：

• Flutter 于年初发布了正式版 1.0，并快速迭代到了 1.12；
• 基于 Web Component 的跨端框架 Ionic 年初发布了 4.0，并随后支持了 Ionic React；

而国内编译到各大小程序也成为跨端框架的一个刚需：

• W3C 发布了小程序标准化白皮书；
• 百度搜索全面接入百度小程序，将致搜索权重提升；
• 年末，腾讯开源跨端框架 hippy；
• 过去两年崭露头角的 wepy 和 taro 开发依然活跃，而 mpVue 已有半年以上没有维护。

容器亦有新公司入局：

• React Native on Windows 于 2019 年 Microsoft Build 提出；
• 微软发布了 WebView 2 预览版，允许开发者在 Windows 原生应用中展示网页内容；

隐私与安全越来越受重视 #

浏览器和 Node.js 端有如下安全更新：

• 不安全的 TLS 1.0 和 1.1 默认被禁用（Safari TP 91、Google Chrome 72+、Firefox Nightly）；
• Firefox 67 开始，<a target="_blank">、<area target="_blank"> 自动附加 rel="noopener"，以防止新页面恶意篡改当前页面；
• Chrome 69 开始支持 Content-Security-Policy 的 report-to 指令，此指令支持了合并多个违规上报请求；
• Chrome 76 起实现 Fetch Metadata 请求头提案 ，允许请求时带上上下文，使服务器端可以进行安全相关的校验；
• Node.js 12.7.0+ 支持了 --policy-integrity=sri，可以让不符合 Subresource Integrity 规范的请求在服务端执行任何代码前就被拦截。

对于前端指纹技术和跨站追踪，也有更多的浏览器限制：

• 在调用传感器接口时，Chrome 75+ 将弹出警告，Safari 12 默认禁止，防止利用传感器接口辅助生成指纹；
• Safari 12+ 中包含了更新的智能跟踪预防模块，限制了采用跨站追踪技术的网站写入第三方 Cookie。

性能优化被浏览器更多考量 #

Chrome 提出展现锁定提案，使得开发者可以跳过部分渲染，子规范在后续更新陆续得到实验性支持：

• Chrome 76 原生支持了 Lazy Loading，可以直接在 img、iframe 标签上增加 loading 属性来实现懒加载；
• Chrome 79 新增 HTML rendersubtree 属性，用来控制部分 DOM 是否立即呈现；
• Chrome 80 实现了 CSS intrinsic-size 属性，在 img 或 video 元素未加载的时候可以用来设置占位的高度。

多个浏览器团队也在过去一年更新了相关的性能优化故事：

• V8 团队介绍了 React 遭遇 V8 性能悬崖的故事，带我们了解了 V8 内部的存储数据的机制和优化；
• V8 团队发表了博文 The cost of JavaScript in 2019，介绍在新时代下我们对 JavaScript 代码的优化策略；
• WebKit 团队的这篇文章讨论了如何让网页更节能；
• FireFox 介绍了给 JavaScript 执行管道中添加了 Baseline Interpreter 如何使得页面加载速度提升。

JavaScript 与框架 #

Hooks 元年与并发渲染 #

Hooks 抛弃了传统的生命周期模型，保证了更细粒度和更简洁的逻辑抽象：

• React 16.8 于年初发布，正式支持了 React Hooks；
• Vue 3.0 Pre-Alpha 的源码公开，也将支持 Hooks 风格的代码，将于 2020 年 Q1 正式发布；
• 社区热门库均已推出 hooks 版本，如 react-redux 7.1+、react-router 5.1+、react-dnd 7.6+ 等等，而 styled-components 等库也进入了 Hooks 测试支持阶段。

并发渲染特性在 React Roadmap 的前列，此模式还没有在稳定版本支持：

• 官方已发布了并发模式的文档；
• 官方也介绍了渲染和获取数据同时进行的最佳实践；
• React 16.10.1 起实验性实现了调度器 Scheduler，支持了 useSubscription 以实现并发安全的事件系统。

Node.js 稳步迭代，又有新人入场 #

Node.js 一年一更新，一年一淘汰：

• 去年 4 月 30 日，Node.js 6 的维护正式终止；
• Node.js 12 该版本带来了巨大的性能提升，TLS 1.3 默认开启；
• Node.js 12.11 起，worker_thread 模块正式进入稳定版；
• Node.js 13 起，默认支持了 ESM，ESM 允许在源代码中使用 import 和 export 来引入相关包。

但仍有不满足于 Node.js 和 V8 的人，他们都在尝试提供更受控的脚本运行时环境：

• Node.js 作者更新了 deno 动向，但原定于去年夏发布的 1.0 版本依然没有到来；
• FFmpeg 作者发布了 JavaScript 引擎：QuickJS，专注于提供嵌入式环境的运行时；
• Facebook 开源了 JavaScript 引擎：Hermes，专注于提高 React Native 应用的性能；

此外，不能遗忘 Make JavaScript Great Again 的 TypeScript：

• TypeScript 迭代到了 3.7 版本，支持大量 TC39 stage 3 的特性如 Top-Level Await、Nullish Coalescing 等
• 2019 年是 TypeScript 渗透率突飞猛进的一年