2020 前端技术发展回顾

以下文章来源于公众号 「iconfontplus」 ,作者前端快爆

2020 终究是一个不平凡的一年,我们经历了太多坎坷与磨炼。甚至受 COVID-19 疫情的影响,Chrome 浏览器罕见的断更了,Chrome 82 就此缺席。但 Web 生态依旧保持了欣欣向荣的活力,一大批新特性持续不断涌现出来。

标准与协议

ECMAScript

  • ES2020 如期发布[1],此前进入 Stage 4 的提案均被纳入正式规范。

    • import():用于动态加载模块;

    • import.meta:一个对象,用来携带模块相关的元信息;

    • export * as newModule from 'package':一种新的聚合导出语法;

    • 新增 可选链运算符 [2] ?.:能够在属性访问、方法调用前检查其是否存在;

    • 新增 空值合并操作符 [3] ??:用来提供默认值,说明上下文是 nullundefined

    • 新增 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 [4]已经全面普及,垂直居中不再是前端「打工人」的烦恼丝。双飞翼、圣杯布局等各种 Hack 的手法也终究淹没在历史的长河之中。

  • Flexbox 中也支持了 gap [5]属性,可以非常方便的调节相邻元素的间距, 主流浏览器均已支持 [6];

  • 所有主流浏览器都支持了 CSS Grid [7],同时也被更多人熟知和使用, Subgrid [8](子网格)在 Firefox 71 [9]中 正式发布 [10]。Float、inline-block 不再成为页面布局首选,CSS 布局正在从一维向二维挺近;

  • 纵横比属性 aspect-ratio [11]已经在 Chrome 88 中支持 [12],通过它可以非常方便的实现元素的等比缩放;

  • Firefox 创新性的基于 CSS Grid 实现了瀑布流布局 [13]( grid-template-rows: masonry),并推动其 进入规范 [14],这将比 JavaScript 方案拥有更好的性能;

  • 容器查询(Container Queries)取得了实质性进展, Chrome 正在快马加鞭的实现中 [15]。有了它响应式组件如虎添翼,可以根据容器大小来设置不同的样式;

  • Chrome 86 和 Firefox 85 支持了 :focus-visible伪类,可以单独控制键盘的焦点样式,请停止使用 * { outline: none; },改用 :focus:not(:focus-visible) { outline: none; } :focus-visible { outline: auto; },这样既可以保证鼠标点击时没有焦点框,也保留了键盘 Tab 键操作的时候出现焦点框,使页面的无障碍性更加友好。

技术领域

数据来自The State of CSS 2020[16]

  • 处理器:三大预处理器( Sass [17]、 Less [18]、 Stylus [19])中,Sass 满意度最高,其他两者相对较低,其中很大一部分人转投了后处理器 PostCSS [20]的阵营。Sass 社区的 LibSass 宣布已弃用 [21],不再支持新的功能的开发,LibSass 和 node-sass [22]将在最大努力的基础上继续无限期维护,包括修复主要的错误和安全性问题,并保持与最新版本的 Node.js 相兼容;

  • CSS 框架层面:前有 CSS-in-JS 的持续追击,后有以「实用原子类」为代表的 Tailwind CSS [23]异军突起,迫使我们重新思考 CSS 语义化类名的真谛。传统 CSS 框架中,用户继续使用 Bootstrap [24]的意愿明显下降, Pure.CSS [25]欢迎度不减;

  • CSS-in-JS: CSS Modules [26]和 Styled Components [27]继续保持在第一阵营;

  • Linter: Stylelint [28]依然是 Style Lint 领域的领头羊。 Prettier [29]作为「全能」的格式化工具,支持原生 CSS、 SCSS、Less 三种语法,是开发者格式化样式的不二之选, 搭配 Git Hooks [30]使用,妙不可言。

端技术
WebAPI

  • Chrome 87 开始,可以在 JavaScript 层面控制摄像头的平移、倾斜和缩放了 [31];

  • Web NFC [32]在 Chrome 81 开始进入初始试用计划;

  • Safari 14 [33]已支持 WebP 图片格式,至此,四大主流浏览器(Chrome、Firefox、Edge、Safari)已全部支持 WebP;

  • Safari 14 [34]已支持 Web 端通过 Web Authentication API [35]调用 Face ID 和 Touch ID 验证用户;

  • 优化高 DOM 渲染压力场景的 Display Locking [36](展现锁定)提案再次更新;

  • 下一代图片格式 AVIF [37](AV1 Image File Format)已经来了,此格式比 JPEG 小 50% 左右、比 WebP 小 20% 左右,相关性能跑分 见此 [38],目前 Chrome 85 [39]、 Firefox 77 [40]已支持;

  • HTML enterkeyhint 属性 [41]已在 Chrome 77、Safari 13.1 得到支持(Firefox 支持私有的 mozactionhint [42]属性),该属性可以使移动设备键盘中的 enter 键根据情景展现为不同的文案和样式;

  • W3C 沉浸式 Web 工作组发布 WebXR 手势输入模块 Level 1 规范 [43]的首个公开工作草案,该模块具有追踪关节手势的功能,可用于在 VR 场景中识别手部关节姿势或渲染手势模型。

安全隐私保护得到完善

2020 年是欧盟通用数据保护协议 GDPR 强制生效的第三年,也是熔断 Meltdown 与幽灵 Spectre[44]漏洞发生的第三年。在 2020 年,各大浏览器安全和隐私保护策略得到了很大的进展。

  • 下线有安全隐患的支持:

    • TLS 1.0 & TLS 1.1 已在 Chrome 84+ [45]、 Firefox 74+ [46]、 Safari 13.1+ [47]中下线:

    • FTP 已在 Safari 14+ [48]、 Chrome 87+ [49]中下线,将在 Firefox 将来版本 [50]中下线;

    • Flash 已在 Safari 14+ [51]中下线,将在 Chrome 88+ [52]、 Firefox 85+ [53]中下线;

  • 跨站隔离优化:

    • 2018 年初,由于 Spectre 漏洞的暴露,高精度定时器和 Shared Memory API 被禁用,为预防相关漏洞,浏览器需要保证不同站点在不同进程,相互隔离;

    • 为了保证跨站进程隔离, Cross-Origin-Opener-PolicyCross-Origin-Embedder-Policy返回头被设计出来。当它们被服务端正确返回时, Firefox 79+ [54]和 Chrome 88+ [55]对 Shared Memory API 的支持将重新打开;

  • 跨站嗅探预防:

    • 在 Safari 13.1+ 中 [56],第三方 Cookie 完全被禁用,JavaScript 可写的存储最多保留一周;

    • 在 Safari 14+ 中 [57],跨域资源的 Cookie 完全被禁用,除非经由 Storage Access API 显式获取用户的同意;第三方 CNAME 的域名 Cookie 最多可设置 7 天有效期;

    • 在 Firefox 79+ 中 [58],新版智能跨站嗅探预防(ETP 2.0)上线,将每 24 小时清除被判定为跨站嗅探的相关 Cookie 设置;

  • 缓存粒度优化:

    • Chrome 85+,HTTP 缓存 采用更细粒度的键 [59](ETLD+1);

    • Firefox 将在 85 后实现同粒度的缓存键 [60];

    • Safari 12.1+ 实现了 顶部 window 域名 + URL 的键控制机制 [61];

    • 新的缓存机制隔离了 iframe 内外的跨域请求,能有效规避站点访问嗅探、 跨站搜索攻击 [62]、跨站访问跟踪等隐私问题;

  • 其他安全策略:

    • Chrome 83+ [63]支持了 Trusted Types [64]以预防基于 DOM 的 XSS;

    • Chrome 80+ [65]全量了 SameSite Cookie 默认值 SameSite=Lax,此举可以提升站点安全性,从源头防御大量的 CSRF 漏洞;

    • Firefox 76+ [66]中使用 location.href<meta http equiv=“refresh”>等方法导航到未知协议的操作将被阻止。

框架和解决方案

框架

2020年 React 没有什么全新的概念,React Hooks 在社区从广受关注变成了实际落地;大家等待已久的 Vue 3.0 正式发布,在保留自身特色的同时也从 React 中汲取养分。

  • React 发布了 17 版本[67],号称一个没有新特性的大版本更新,提供多版本 React 共存的能力;

  • 经过持续两年的努力,2600+ 个提交之后,Vue 3.0 发布了代号 One Piece 的正式版[68]:

    • 重新划分了模块:可以减少近半运行时大小。拆出的一些独立包也可复用在更多场景: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 正式发布 [69],这是时隔 2 年半的大版本更新,通过持久缓存提高构建性能,通过更好的 Tree Shaking 和代码生成来降低打包大小;

  • vite [70]作为 Vue 作者的新项目快速引来关注,它基于浏览器原生 ES imports,因而有更快的冷启动和热更新,整体速度与模块数量无关。没有打包的过程,源码直接传输给浏览器使用原生的 <script module>语法进行引入,开发服务器拦截请求和对需要转换的代码进行转换,实现了真正的按需编译。生产环境提供了 vite build 脚本进行打包,它基于 rollup [71]进行打包;

  • 基于原生 ES Module \(ESM\) [72]的现代打包工具 Snowpack 2.0 发布 [73],其启动时间不到 50 毫秒,可以在大型项目中保持快速运行,内置对 TypeScript,JSX,CSS Modules 的支持,可与 React,Preact,Vue,Svelte 等前端开发框架结合使用;

  • Babel 作者 Sebastian McKenzie 推出了 JavaScript 工具链 Rome [74],包含编译器、代码风格检查、格式化、打包、测试框架等内容,亮点在于零第三方依赖并简化 API 配置。

致谢

今年是前端快爆的第三年,还是要感谢四位轮值编辑:承虎、一丝、池冰、墨尘,以及特邀编辑:紫云飞。谢谢各位的一路陪伴,字字句句的斟酌,才有了这三年的沉淀。当然最需要感谢的还是各位粉丝,谢谢你们一直以来的关注与点赞,给了我们很大的动力。新的一年里,我们将继续秉承:原创、求精、求严的精神,一起前行!

勘误

  • @尤雨溪 [75]:Rome 已经跟 Facebook 无关,作者 Sebastian McKenzie 之前跳槽去了 Discord,现在已经辞职靠捐赠全职开发 Rome。


本期编辑:一丝、承虎、池冰、墨尘;审阅:全体编辑。

参考资料

[1]

ES2020 如期发布: https://link.zhihu.com/?target=https%3A//www.ecma-international.org/ecma-262/11.0/index.html

[2]

可选链运算符: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

[3]

空值合并操作符: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

[4]

Flexbox: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout

[5]

gap: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/CSS/gap

[6]

主流浏览器均已支持: https://link.zhihu.com/?target=https%3A//caniuse.com/flexbox-gap

[7]

CSS Grid: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

[8]

Subgrid: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid

[9]

Firefox 71: https://link.zhihu.com/?target=https%3A//caniuse.com/css-subgrid

[10]

正式发布: https://link.zhihu.com/?target=https%3A//hacks.mozilla.org/2019/06/css-grid-level-2-subgrid-is-coming-to-firefox/

[11]

aspect-ratio: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

[12]

Chrome 88 中支持: https://link.zhihu.com/?target=https%3A//www.chromestatus.com/feature/5738050678161408

[13]

CSS Grid 实现了瀑布流布局: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout

[14]

进入规范: https://link.zhihu.com/?target=https%3A//drafts.csswg.org/css-grid-3/%23masonry-layout

[15]

Chrome 正在快马加鞭的实现中: https://link.zhihu.com/?target=https%3A//groups.google.com/a/chromium.org/g/blink-dev/c/u1AKdrXhPGI/m/wrJb-unhAgAJ

[16]

The State of CSS 2020: https://link.zhihu.com/?target=https%3A//2020.stateofcss.com/en-US/

[17]

Sass: https://link.zhihu.com/?target=https%3A//sass-lang.com/

[18]

Less: https://link.zhihu.com/?target=https%3A//lesscss.org/

[19]

Stylus: https://link.zhihu.com/?target=https%3A//stylus-lang.com/

[20]

PostCSS: https://link.zhihu.com/?target=https%3A//postcss.org/

[21]

LibSass 宣布已弃用: https://link.zhihu.com/?target=https%3A//sass-lang.com/blog/libsass-is-deprecated

[22]

node-sass: https://link.zhihu.com/?target=https%3A//github.com/sass/node-sass

[23]

Tailwind CSS: https://link.zhihu.com/?target=https%3A//tailwindcss.com/

[24]

Bootstrap: https://link.zhihu.com/?target=https%3A//getbootstrap.com/docs/3.4/css/

[25]

Pure.CSS: https://link.zhihu.com/?target=https%3A//purecss.io/

[26]

CSS Modules: https://link.zhihu.com/?target=https%3A//github.com/css-modules/css-modules

[27]

Styled Components: https://link.zhihu.com/?target=https%3A//www.styled-components.com/

[28]

Stylelint: https://link.zhihu.com/?target=https%3A//stylelint.io/

[29]

Prettier: https://link.zhihu.com/?target=https%3A//prettier.io/

[30]

搭配 Git Hooks: https://link.zhihu.com/?target=https%3A//prettier.io/docs/en/precommit.html

[31]

JavaScript 层面控制摄像头的平移、倾斜和缩放了: https://link.zhihu.com/?target=https%3A//web.dev/camera-pan-tilt-zoom/

[32]

Web NFC: https://link.zhihu.com/?target=https%3A//developers.chrome.com/origintrials/%23/view_trial/236438980436951041

[33]

Safari 14: https://link.zhihu.com/?target=https%3A//webkit.org/blog/11340/new-webkit-features-in-safari-14/

[34]

Safari 14: https://link.zhihu.com/?target=https%3A//webkit.org/blog/11340/new-webkit-features-in-safari-14/

[35]

Web Authentication API: https://link.zhihu.com/?target=https%3A//www.w3.org/TR/webauthn-1/

[36]

Display Locking: https://link.zhihu.com/?target=https%3A//github.com/WICG/display-locking

[37]

AVIF: https://link.zhihu.com/?target=https%3A//netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4

[38]

见此: https://link.zhihu.com/?target=https%3A//netflixtechblog.com/avif-for-next-generation-image-coding-b1d75675fe4

[39]

Chrome 85: https://link.zhihu.com/?target=https%3A//developers.google.com/web/updates/2020/08/nic85

[40]

Firefox 77: https://link.zhihu.com/?target=https%3A//bugzilla.mozilla.org/show_bug.cgi%3Fid%3D1625363

[41]

enterkeyhint 属性: https://link.zhihu.com/?target=https%3A//html.spec.whatwg.org/multipage/interaction.html%23input-modalities%3A-the-enterkeyhint-attribute

[42]

mozactionhint: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/HTML/Element/input%23attr-mozactionhint

[43]

WebXR 手势输入模块 Level 1 规范: https://link.zhihu.com/?target=https%3A//www.w3.org/TR/2020/WD-webxr-hand-input-1-20201022/

[44]

熔断 Meltdown 与幽灵 Spectre: https://link.zhihu.com/?target=https%3A//blog.google/topics/google-cloud/answering-your-questions-about-meltdown-and-spectre/

[45]

Chrome 84+: https://link.zhihu.com/?target=https%3A//developers.google.com/web/updates/2020/05/chrome-84-deps-rems

[46]

Firefox 74+: https://link.zhihu.com/?target=https%3A//hacks.mozilla.org/2020/03/security-means-more-with-firefox-74-2/

[47]

Safari 13.1+: https://link.zhihu.com/?target=https%3A//webkit.org/blog/10247/new-webkit-features-in-safari-13-1/

[48]

Safari 14+: https://link.zhihu.com/?target=https%3A//developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes

[49]

Chrome 87+: https://link.zhihu.com/?target=https%3A//www.chromestatus.com/feature/6246151319715840

[50]

Firefox 将来版本: https://link.zhihu.com/?target=https%3A//www.ghacks.net/2020/03/19/mozilla-will-remove-ftp-support-in-the-firefox-web-browser/

[51]

Safari 14+: https://link.zhihu.com/?target=https%3A//developer.apple.com/documentation/safari-release-notes/safari-14-beta-release-notes

[52]

Chrome 88+: https://link.zhihu.com/?target=https%3A//www.chromium.org/flash-roadmap

[53]

Firefox 85+: https://link.zhihu.com/?target=https%3A//blog.mozilla.org/futurereleases/2020/11/17/ending-firefox-support-for-flash/%23%3A~%3Atext%3DOn%2520January%252026%252C%25202021%252C%2520Firefox%2Cfinal%2520version%2520to%2520support%2520Flash.

[54]

Firefox 79+: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SharedArrayBuffer/Planned_changes

[55]

Chrome 88+: https://link.zhihu.com/?target=https%3A//web.dev/coop-coep/

[56]

在 Safari 13.1+ 中: https://link.zhihu.com/?target=https%3A//webkit.org/blog/10247/new-webkit-features-in-safari-13-1/

[57]

在 Safari 14+ 中: https://link.zhihu.com/?target=https%3A//webkit.org/blog/11340/new-webkit-features-in-safari-14/

[58]

在 Firefox 79+ 中: https://link.zhihu.com/?target=https%3A//blog.mozilla.org/blog/2020/08/04/latest-firefox-rolls-out-enhanced-tracking-protection-2-0-blocking-redirect-trackers-by-default/

[59]

采用更细粒度的键: https://link.zhihu.com/?target=https%3A//developers.google.com/web/updates/2020/10/http-cache-partitioning

[60]

将在 85 后实现同粒度的缓存键: https://link.zhihu.com/?target=https%3A//bugzilla.mozilla.org/show_bug.cgi%3Fid%3D1536058

[61]

顶部 window 域名 + URL 的键控制机制: https://link.zhihu.com/?target=https%3A//webkit.org/blog/8613/intelligent-tracking-prevention-2-1/

[62]

跨站搜索攻击: https://link.zhihu.com/?target=https%3A//portswigger.net/daily-swig/new-xs-leak-techniques-reveal-fresh-ways-to-expose-user-information

[63]

Chrome 83+: https://link.zhihu.com/?target=https%3A//developers.google.com/web/updates/2020/05/nic83

[64]

Trusted Types: https://link.zhihu.com/?target=https%3A//github.com/w3c/webappsec-trusted-types

[65]

Chrome 80+: https://link.zhihu.com/?target=https%3A//www.chromium.org/updates/same-site

[66]

Firefox 76+: https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/76

[67]

React 发布了 17 版本: https://link.zhihu.com/?target=https%3A//reactjs.org/blog/2020/10/20/react-v17.html

[68]

Vue 3.0 发布了代号 One Piece 的正式版: https://link.zhihu.com/?target=https%3A//github.com/vuejs/vue-next/releases/tag/v3.0.0

[69]

Webpack 5.0 正式发布: https://link.zhihu.com/?target=https%3A//webpack.js.org/blog/2020-10-10-webpack-5-release/

[70]

vite: https://link.zhihu.com/?target=https%3A//github.com/vuejs/vite

[71]

rollup: https://link.zhihu.com/?target=https%3A//rollupjs.org/

[72]

ES Module (ESM): https://link.zhihu.com/?target=https%3A//developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

[73]

Snowpack 2.0 发布: https://link.zhihu.com/?target=https%3A//www.snowpack.dev/posts/2020-05-26-snowpack-2-0-release/

[74]

Rome: https://link.zhihu.com/?target=https%3A//github.com/rome/tools

[75]

@尤雨溪: https://www.zhihu.com/people/cfdec6226ece879d2571fbc274372e9f

 

本文分享自微信公众号 - 前端从进阶到入院(code_with_love)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

展开阅读全文
打赏
2
7 收藏
分享
加载中
更多评论
打赏
0 评论
7 收藏
2
分享
返回顶部
顶部