大家好，我是若川，今天給大家分享一篇來(lái)自阿里媽媽前端快爆的好文。另外，偷偷告訴你，截止今晚9點(diǎn)?點(diǎn)此抽獎(jiǎng)送紅包還送3本比紅寶書(shū)還貴的書(shū)

可以點(diǎn)擊文章末尾閱讀原文直達(dá)知乎鏈接，以下是正文

---

2020 終究是一個(gè)不平凡的一年，我們經(jīng)歷了太多坎坷與磨煉。甚至受 COVID-19 疫情的影響，Chrome 瀏覽器罕見(jiàn)的斷更了，Chrome 82 就此缺席。但 Web 生態(tài)依舊保持了欣欣向榮的活力，一大批新特性持續(xù)不斷涌現(xiàn)出來(lái)。

標(biāo)準(zhǔn)與協(xié)議

ECMAScript

• ES2020 如期發(fā)布，此前進(jìn)入 Stage 4 的提案均被納入正式規(guī)范。

• • import()：用于動(dòng)態(tài)加載模塊；

  • import.meta：一個(gè)對(duì)象，用來(lái)攜帶模塊相關(guān)的元信息；

  • export * as newModule from 'package'：一種新的聚合導(dǎo)出語(yǔ)法；

  • 新增可選鏈運(yùn)算符?. ：能夠在屬性訪問(wèn)、方法調(diào)用前檢查其是否存在；

  • 新增空值合并操作符?? ：用來(lái)提供默認(rèn)值，說(shuō)明上下文是 null 或 undefined；

  • 新增 BigInt 基礎(chǔ)數(shù)值類(lèi)型：可以表示絕對(duì)值大于 2^53-1 的整數(shù)而無(wú)精度損失；

  • 新增 Promise.allSettled()：返回一個(gè)在所有給定的 Promise 已進(jìn)入 fullfilled 或 rejected 狀態(tài)的 Promise，并帶有一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象表示對(duì)應(yīng)的 Promise 結(jié)果；

  • 新增 String.prototype.matchAll：一個(gè)包含所有匹配正則表達(dá)式的結(jié)果及分組捕獲組的迭代器。與 RegExp.prototype.exec 的區(qū)別在于：如果要得到所有匹配項(xiàng)，需要正則表達(dá)式有 /g 標(biāo)志，且多次調(diào)用 .exec() 才會(huì)得到所有匹配的結(jié)果，而 matchAll 只需要調(diào)用一次；

  • 新增 globalThis：用來(lái)解決瀏覽器、Node.js 等不同環(huán)境下，全局對(duì)象名稱不統(tǒng)一，獲取全局對(duì)象比較麻煩的問(wèn)題。

CSS

特性

• Flexbox 已經(jīng)全面普及，垂直居中不再是前端「打工人」的煩惱絲。雙飛翼、圣杯布局等各種 Hack 的手法也終究淹沒(méi)在歷史的長(zhǎng)河之中。

• Flexbox 中也支持了 gap 屬性，可以非常方便的調(diào)節(jié)相鄰元素的間距，主流瀏覽器均已支持；

• 所有主流瀏覽器都支持了 CSS Grid，同時(shí)也被更多人熟知和使用，Subgrid（子網(wǎng)格）在 Firefox 71 中正式發(fā)布。Float、inline-block 不再成為頁(yè)面布局首選，CSS 布局正在從一維向二維挺進(jìn)；

• 縱橫比屬性 aspect-ratio 已經(jīng)在 Chrome 88 中支持，通過(guò)它可以非常方便的實(shí)現(xiàn)元素的等比縮放；

• Firefox 創(chuàng)新性的基于 CSS Grid 實(shí)現(xiàn)了瀑布流布局（grid-template-rows: masonry），并推動(dòng)其進(jìn)入規(guī)范，這將比 JavaScript 方案擁有更好的性能；

• 容器查詢（Container Queries）取得了實(shí)質(zhì)性進(jìn)展，Chrome 正在快馬加鞭的實(shí)現(xiàn)中。有了它響應(yīng)式組件如虎添翼，可以根據(jù)容器大小來(lái)設(shè)置不同的樣式；

• Chrome 86 和 Firefox 85 支持了 :focus-visible 偽類(lèi)，可以單獨(dú)控制鍵盤(pán)的焦點(diǎn)樣式，請(qǐng)停止使用* { outline: none; }，改用 :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: auto; }，這樣既可以保證鼠標(biāo)點(diǎn)擊時(shí)沒(méi)有焦點(diǎn)框，也保留了鍵盤(pán) Tab 鍵操作的時(shí)候出現(xiàn)焦點(diǎn)框，使頁(yè)面的無(wú)障礙性更加友好。

技術(shù)領(lǐng)域

數(shù)據(jù)來(lái)自 The State of CSS 2020

• 處理器：三大預(yù)處理器（Sass、Less、Stylus）中，Sass 滿意度最高，其他兩者相對(duì)較低，其中很大一部分人轉(zhuǎn)投了后處理器 PostCSS 的陣營(yíng)。Sass 社區(qū)的 LibSass 宣布已棄用，不再支持新的功能的開(kāi)發(fā)，LibSass 和 node-sass 將在最大努力的基礎(chǔ)上繼續(xù)無(wú)限期維護(hù)，包括修復(fù)主要的錯(cuò)誤和安全性問(wèn)題，并保持與最新版本的 Node.js 相兼容；

• CSS 框架層面：前有 CSS-in-JS 的持續(xù)追擊，后有以「實(shí)用原子類(lèi)」為代表的 Tailwind CSS 異軍突起，迫使我們重新思考 CSS 語(yǔ)義化類(lèi)名的真諦。傳統(tǒng) CSS 框架中，用戶繼續(xù)使用 Bootstrap 的意愿明顯下降，Pure.CSS 歡迎度不減；

• CSS-in-JS：CSS Modules 和 Styled Components 繼續(xù)保持在第一陣營(yíng)；

• Linter：Stylelint 依然是 Style Lint 領(lǐng)域的領(lǐng)頭羊。Prettier 作為「全能」的格式化工具，支持原生 CSS、 SCSS、Less 三種語(yǔ)法，是開(kāi)發(fā)者格式化樣式的不二之選，搭配 Git Hooks 使用，妙不可言。

端技術(shù)

WebAPI

• Chrome 87 開(kāi)始，可以在 JavaScript 層面控制攝像頭的平移、傾斜和縮放了；

• Web NFC 在 Chrome 81 開(kāi)始進(jìn)入初始試用計(jì)劃；

• Safari 14 已支持 WebP 圖片格式，至此，四大主流瀏覽器（Chrome、Firefox、Edge、Safari）已全部支持 WebP；

• Safari 14 已支持 Web 端通過(guò) Web Authentication API 調(diào)用 Face ID 和 Touch ID 驗(yàn)證用戶；

• 優(yōu)化高 DOM 渲染壓力場(chǎng)景的 Display Locking （展現(xiàn)鎖定）提案再次更新；

• 下一代圖片格式 AVIF（AV1 Image File Format）已經(jīng)來(lái)了，此格式比 JPEG 小 50% 左右、比 WebP 小 20% 左右，相關(guān)性能跑分見(jiàn)此，目前 Chrome 85、Firefox 77 已支持；

• HTML enterkeyhint 屬性已在 Chrome 77、Safari 13.1 得到支持（Firefox 支持私有的 mozactionhint 屬性），該屬性可以使移動(dòng)設(shè)備鍵盤(pán)中的 enter 鍵根據(jù)情景展現(xiàn)為不同的文案和樣式；

• W3C 沉浸式 Web 工作組發(fā)布 WebXR 手勢(shì)輸入模塊 Level 1 規(guī)范 的首個(gè)公開(kāi)工作草案，該模塊具有追蹤關(guān)節(jié)手勢(shì)的功能，可用于在 VR 場(chǎng)景中識(shí)別手部關(guān)節(jié)姿勢(shì)或渲染手勢(shì)模型。

安全隱私保護(hù)得到完善

2020 年是歐盟通用數(shù)據(jù)保護(hù)協(xié)議 GDPR 強(qiáng)制生效的第三年，也是熔斷 Meltdown 與幽靈 Spectre 漏洞發(fā)生的第三年。在 2020 年，各大瀏覽器安全和隱私保護(hù)策略得到了很大的進(jìn)展。

• 下線有安全隱患的支持：有安全隱患的支持：

• • TLS 1.0 & TLS 1.1 已在 Chrome 84+、Firefox 74+、Safari 13.1+ 中下線：

  • FTP 已在 Safari 14+、Chrome 87+ 中下線，將在 Firefox 將來(lái)版本中下線；

  • Flash 已在 Safari 14+ 中下線，將在 Chrome 88+、Firefox 85+ 中下線；

• 跨站隔離優(yōu)化：

• • 2018 年初，由于 Spectre 漏洞的暴露，高精度定時(shí)器和 Shared Memory API 被禁用，為預(yù)防相關(guān)漏洞，瀏覽器需要保證不同站點(diǎn)在不同進(jìn)程，相互隔離；

  • 為了保證跨站進(jìn)程隔離，Cross-Origin-Opener-Policy 和 Cross-Origin-Embedder-Policy 返回頭被設(shè)計(jì)出來(lái)。當(dāng)它們被服務(wù)端正確返回時(shí)，Firefox 79+ 和 Chrome 88+ 對(duì) Shared Memory API 的支持將重新打開(kāi)；

• 跨站嗅探預(yù)防：

• • 在 Safari 13.1+ 中，第三方 Cookie 完全被禁用，JavaScript 可寫(xiě)的存儲(chǔ)最多保留一周；

  • 在 Safari 14+ 中，跨域資源的 Cookie 完全被禁用，除非經(jīng)由 Storage Access API 顯式獲取用戶的同意；第三方 CNAME 的域名 Cookie 最多可設(shè)置 7 天有效期；

  • 在 Firefox 79+ 中，新版智能跨站嗅探預(yù)防（ETP 2.0）上線，將每 24 小時(shí)清除被判定為跨站嗅探的相關(guān) Cookie 設(shè)置；

• 緩存粒度優(yōu)化：

• • Chrome 85+，HTTP 緩存采用更細(xì)粒度的鍵（ETLD+1）；

  • Firefox 將在 85 后實(shí)現(xiàn)同粒度的緩存鍵；

  • Safari 12.1+ 實(shí)現(xiàn)了頂部 window 域名 + URL 的鍵控制機(jī)制；

  • 新的緩存機(jī)制隔離了 iframe 內(nèi)外的跨域請(qǐng)求，能有效規(guī)避站點(diǎn)訪問(wèn)嗅探、跨站搜索攻擊、跨站訪問(wèn)跟蹤等隱私問(wèn)題；

• 其他安全策略：

• • Chrome 83+ 支持了 Trusted Types 以預(yù)防基于 DOM 的 XSS；

  • Chrome 80+ 全量了 SameSite Cookie 默認(rèn)值 SameSite=Lax，此舉可以提升站點(diǎn)安全性，從源頭防御大量的 CSRF 漏洞；

  • Firefox 76+ 中使用 location.href 或 <meta http equiv=“refresh”> 等方法導(dǎo)航到未知協(xié)議的操作將被阻止。

框架和解決方案

框架

2020年 React 沒(méi)有什么全新的概念，React Hooks 在社區(qū)從廣受關(guān)注變成了實(shí)際落地；大家等待已久的 Vue 3.0 正式發(fā)布，在保留自身特色的同時(shí)也從 React 中汲取養(yǎng)分。

• React 發(fā)布了 17 版本，號(hào)稱一個(gè)沒(méi)有新特性的大版本更新，提供多版本 React 共存的能力；

• 經(jīng)過(guò)持續(xù)兩年的努力，2600+ 個(gè)提交之后，Vue 3.0 發(fā)布了代號(hào) One Piece 的正式版：

• • 重新劃分了模塊：可以減少近半運(yùn)行時(shí)大小。拆出的一些獨(dú)立包也可復(fù)用在更多場(chǎng)景：AST 轉(zhuǎn)換、自定義渲染器（如小程序）、響應(yīng)式系統(tǒng)抽離出來(lái)獨(dú)立使用；

  • 新的 Composition API：在保留原有基于對(duì)象的 API 同時(shí)提出的新的 API，以達(dá)到類(lèi)似 React Hooks 式的邏輯重用；? ? ?

  • 性能提升：與 Vue2 相比，打包后文件尺寸 (tree-shaking 時(shí)減少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和內(nèi)存使用 (少了 54%) 方面都有顯著的性能提升，模板編譯時(shí)優(yōu)化對(duì)性能提升有很大貢獻(xiàn) ? ? ；

  • 更好的 TypeScript 集成：Vue3 由 TypeScript 寫(xiě)成，新的 Composition API 能很好支持 TS 類(lèi)型推斷，官方的 VSCode 擴(kuò)展 Vetur 支持了模板中的類(lèi)型檢查，Vue3 更是完整支持了 tsx。

Webpack 又有更多對(duì)手

出于對(duì) Webpack 的愛(ài)恨交加，大家紛紛用更新穎的想法或更激進(jìn)的技術(shù)造起了全新的開(kāi)發(fā)工具鏈，也促使 Webpack 加快自我迭代的步伐。

• Webpack 5.0 正式發(fā)布，這是時(shí)隔 2 年半的大版本更新，通過(guò)持久緩存提高構(gòu)建性能，通過(guò)更好的 Tree Shaking 和代碼生成來(lái)降低打包大小；

• vite 作為 Vue 作者的新項(xiàng)目快速引來(lái)關(guān)注，它基于瀏覽器原生 ES imports，因而有更快的冷啟動(dòng)和熱更新，整體速度與模塊數(shù)量無(wú)關(guān)。沒(méi)有打包的過(guò)程，源碼直接傳輸給瀏覽器使用原生的 <script module> 語(yǔ)法進(jìn)行引入，開(kāi)發(fā)服務(wù)器攔截請(qǐng)求和對(duì)需要轉(zhuǎn)換的代碼進(jìn)行轉(zhuǎn)換，實(shí)現(xiàn)了真正的按需編譯。生產(chǎn)環(huán)境提供了 vite build 腳本進(jìn)行打包，它基于 rollup 進(jìn)行打包；

• 基于原生 ES Module (ESM) 的現(xiàn)代打包工具 Snowpack 2.0 發(fā)布，其啟動(dòng)時(shí)間不到 50 毫秒，可以在大型項(xiàng)目中保持快速運(yùn)行，內(nèi)置對(duì) TypeScript，JSX，CSS Modules 的支持，可與 React，Preact，Vue，Svelte 等前端開(kāi)發(fā)框架結(jié)合使用；

• Babel 作者 Sebastian McKenzie 推出了 JavaScript 工具鏈 Rome，包含編譯器、代碼風(fēng)格檢查、格式化、打包、測(cè)試框架等內(nèi)容，亮點(diǎn)在于零第三方依賴并簡(jiǎn)化 API 配置。

致謝

今年是前端快爆的第三年，還是要感謝四位輪值編輯：承虎、一絲、池冰、墨塵，以及特邀編輯：紫云飛。謝謝各位的一路陪伴，字字句句的斟酌，才有了這三年的沉淀。

當(dāng)然最需要感謝的還是各位粉絲，謝謝你們一直以來(lái)的關(guān)注與點(diǎn)贊，給了我們很大的動(dòng)力。新的一年里，我們將繼續(xù)秉承：原創(chuàng)、求精、求嚴(yán)的精神，一起前行！

勘誤

• @尤雨溪：Rome 已經(jīng)跟 Facebook 無(wú)關(guān)，作者 Sebastian McKenzie 之前跳槽去了 Discord，現(xiàn)在已經(jīng)辭職靠捐贈(zèng)全職開(kāi)發(fā) Rome。

---

本期編輯：壹絲、承虎、池冰、墨塵；審閱：全體編輯。

總結(jié)

以上是生活随笔為你收集整理的2020 前端技术发展回顾的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。