<sup id="2ucmy"><wbr id="2ucmy"></wbr></sup>
<sup id="2ucmy"><noscript id="2ucmy"></noscript></sup>
<sup id="2ucmy"><noscript id="2ucmy"></noscript></sup>
<sup id="2ucmy"><noscript id="2ucmy"></noscript></sup>
<sup id="2ucmy"><wbr id="2ucmy"></wbr></sup>
全國統一24小時(shí)服務(wù)咨詢(xún)熱線(xiàn)0755-8257993612年專(zhuān)業(yè)網(wǎng)絡(luò )服務(wù)供應商

行業(yè)資訊

2020 前端技術(shù)發(fā)展回顧

1970-01-01 08:00:00 分享 瀏覽次數:0次

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


標準與協(xié)議

ECMAScript


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

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

    • import.meta:一個(gè)對象,用來(lái)攜帶模塊相關(guān)的元信息;

    • export * as newModule from 'package':一種新的聚合導出語(yǔ)法;

    • 新增可選鏈運算符?. :能夠在屬性訪(fǎng)問(wèn)、方法調用前檢查其是否存在;

    • 新增空值合并操作符?? :用來(lái)提供默認值,說(shuō)明上下文是 nullundefined;

    • 新增 BigInt 基礎數值類(lèi)型:可以表示絕對值大于 2^53-1 的整數而無(wú)精度損失;

    • 新增 Promise.allSettled():返回一個(gè)在所有給定的 Promise 已進(jìn)入 fullfilled 或 rejected 狀態(tài)的 Promise,并帶有一個(gè)對象數組,每個(gè)對象表示對應的 Promise 結果;

    • 新增 String.prototype.matchAll:一個(gè)包含所有匹配正則表達式的結果及分組捕獲組的迭代器。與 RegExp.prototype.exec 的區別在于:如果要得到所有匹配項,需要正則表達式有 /g 標志,且多次調用 .exec() 才會(huì )得到所有匹配的結果,而 matchAll 只需要調用一次;

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


CSS

特性

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

  • Flexbox 中也支持了 gap 屬性,可以非常方便的調節相鄰元素的間距,主流瀏覽器均已支持;

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

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

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

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

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


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

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


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

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

  • CSS-in-JS:CSS Modules 和 Styled Components 繼續保持在第一陣營(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)入初始試用計劃;

  • Safari 14 已支持 WebP 圖片格式,至此,四大主流瀏覽器(Chrome、Firefox、Edge、Safari)已全部支持 WebP;

  • Safari 14 已支持 Web 端通過(guò) Web Authentication API 調用 Face ID 和 Touch ID 驗證用戶(hù);

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

  • 下一代圖片格式 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)設備鍵盤(pán)中的 enter 鍵根據情景展現為不同的文案和樣式;

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



安全隱私保護得到完善


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


  • 下線(xiàn)有安全隱患的支持:有安全隱患的支持:

    • TLS 1.0 & TLS 1.1 已在 Chrome 84+、Firefox 74+、Safari 13.1+ 中下線(xiàn):

    • FTP 已在 Safari 14+、Chrome 87+ 中下線(xiàn),將在 Firefox 將來(lái)版本中下線(xiàn);

    • Flash 已在 Safari 14+ 中下線(xiàn),將在 Chrome 88+、Firefox 85+ 中下線(xiàn);

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

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

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

  • 跨站嗅探預防:

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

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

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

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

    • Chrome 85+,HTTP 緩存采用更細粒度的鍵(ETLD+1);

    • Firefox 將在 85 后實(shí)現同粒度的緩存鍵;

    • Safari 12.1+ 實(shí)現了頂部 window 域名 + URL 的鍵控制機制;

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

  • 其他安全策略:

    • Chrome 83+ 支持了 Trusted Types 以預防基于 DOM 的 XSS;

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

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


框架和解決方案

框架


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


  • React 發(fā)布了 17 版本,號稱(chēng)一個(gè)沒(méi)有新特性的大版本更新,提供多版本 React 共存的能力;

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

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

    • 新的 Composition API:在保留原有基于對象的 API 同時(shí)提出的新的 API,以達到類(lèi)似 React Hooks 式的邏輯重用;     

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

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


Webpack 又有更多對手


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


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

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

最新網(wǎng)站案例

洞悉市場(chǎng)趨勢演變讓傳播回歸社會(huì )

免費獲取網(wǎng)站建設與網(wǎng)絡(luò )推廣方案報價(jià)

  • 關(guān)于我們

    深圳市廣雅達科技有限公司,是一家新型的全案網(wǎng)絡(luò )開(kāi)發(fā)公司,作為以互聯(lián)網(wǎng)高端網(wǎng)站建設、APP開(kāi)發(fā)、小程序開(kāi)發(fā)為核心的專(zhuān)業(yè)網(wǎng)絡(luò )技術(shù)服務(wù)供應商,廣達網(wǎng)絡(luò )致力于全面分析市場(chǎng)環(huán)境、衡量與預測市場(chǎng)需求、整合區別于行業(yè)競爭對手的絕對優(yōu)勢,結合品牌理念深度挖掘項目?jì)?yōu)勢和產(chǎn)品價(jià)值,提升客戶(hù)品牌認知、認可度。

  • 我們的客戶(hù)

    廣達網(wǎng)絡(luò )歷經(jīng)十年沉淀,與國內外數千家客戶(hù)達成合作關(guān)系。廣達網(wǎng)絡(luò )始終堅持“帷有專(zhuān)業(yè),才能拓展無(wú)限”的服務(wù)理念,堅持“認真堅持細節”的優(yōu)質(zhì)服務(wù)理念,不斷完善自身,成就企業(yè),最終實(shí)現共贏(yíng)。

  • 我們的業(yè)務(wù)

    廣達網(wǎng)絡(luò )主營(yíng)業(yè)務(wù)范圍包含互聯(lián)網(wǎng)高端網(wǎng)站建設、APP開(kāi)發(fā)、小程序開(kāi)發(fā)、商城網(wǎng)站建設、公眾號運營(yíng)以及數字營(yíng)銷(xiāo)等,涵蓋了服務(wù)、房產(chǎn)、數碼、服裝、物流貿易等行業(yè),根據品牌現狀,為每個(gè)客戶(hù)量身定制項目整體服務(wù)方案,以敏銳的市場(chǎng)洞察力、創(chuàng )新的市場(chǎng)策劃能力,全面把握市場(chǎng)變化,為客戶(hù)實(shí)現從企業(yè)到消費者的價(jià)值轉換。

Designerpart Designagentur
Designerpart Designagentur
Designerpart Designagentur
Designerpart Designagentur
Designerpart Designagentur
Designerpart Designagentur
中文字幕精品一区二区精品_里番全彩爆乳女教师_午夜男女爽爽羞羞影院在线观看_邪恶肉肉全彩色无遮盖