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 配置。