亚洲高清在线观看_亚洲国产91_国产精品vvv_99国产精品国产精品久久

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

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

ECMAScript

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

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

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

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

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

• 新增空值合并操作符?? ：用來提供默認值，說明上下文是 null 或 undefined；

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

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

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

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

CSS

特性

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

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

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

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

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

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

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

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

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

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

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

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

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

端技術(shù)

WebAPI

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

• Web NFC 在 Chrome 81 開始進入初始試用計劃；

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

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

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

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

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

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

安全隱私保護得到完善

2020 年是歐盟通用數(shù)據(jù)保護協(xié)議 GDPR 強制生效的第三年，也是熔斷 Meltdown 與幽靈 Spectre 漏洞發(fā)生的第三年。在 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+ 中下線；

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

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

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

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

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

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

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

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

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

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

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

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

• 其他安全策略：

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

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

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

框架和解決方案

框架

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

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

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

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

• 新的 Composition API：在保留原有基于對象的 API 同時提出的新的 API，以達到類似 React Hooks 式的邏輯重用；     

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

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

Webpack 又有更多對手

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

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

• vite 作為 Vue 作者的新項目快速引來關(guān)注，它基于瀏覽器原生 ES imports，因而有更快的冷啟動和熱更新，整體速度與模塊數(shù)量無關(guān)。沒有打包的過程，源碼直接傳輸給瀏覽器使用原生的