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 配置。
致谢
今年是前端快爆的第三年,还是要感谢四位轮值编辑:承虎、一丝、池冰、墨尘,以及特邀编辑:紫云飞。谢谢各位的一路陪伴,字字句句的斟酌,才有了这三年的沉淀。
当然最需要感谢的还是各位粉丝,谢谢你们一直以来的关注与点赞,给了我们很大的动力。新的一年里,我们将继续秉承:原创、求精、求严的精神,一起前行!
勘误
@尤雨溪:Rome 已经跟 Facebook 无关,作者 Sebastian McKenzie 之前跳槽去了 Discord,现在已经辞职靠捐赠全职开发 Rome。
本期编辑:壹丝、承虎、池冰、墨尘;审阅:全体编辑。
2020 前端技术发展回顾相关推荐
- 干货报告:八大科技领域,280 页,InfoQ《2020 中国技术发展白皮书》开放下载...
GitHub 在 2019 年发布的年度报告显示:GitHub 上已有超过 4000 万开发人员.近 300 万个组织帐户.其中来自中国的贡献者数目仅次于美国,排名第二,中国的开发者 fork 并 c ...
- 2015前端生态发展回顾(转)
引用苏宁前端架构师的一个总结作为开篇 编程技术及生态发展的三个阶段 最初的时候人们忙着补全各种API,代表着他们拥有的东西还很匮乏,需要在语言跟基础设施上继续完善 然后就开始各种模式,标志他们做的东西 ...
- 大时代、新技术——2020中国技术发展白皮书 附下载地址
整个报告共分为综述篇和技术篇两大部分.综述篇涵盖了全球技术发展现状.整体技术概述.中国改革开放四十年以来技术整体发展路径.中国技术现状深度分析四大部分.技术篇则通过对当前最受关注的人工智能.5G.云计 ...
- Jeaf Dean万字长文回顾2020谷歌技术发展(上)
转载自:新智元 编辑:QJP,小匀 [导读]2021年已经度过十余天,谷歌Jeff Dean也在酝酿后在Google Blog发表了一篇万字长文,回顾了谷歌AI2020年的发展与成就,同时,也展望 ...
- 淘宝网技术发展回顾(六):Java时代:创造技术-Tair
Tair TFS 的开发,让淘宝的图片功能得到了充分的发挥.同 TFS 一样,很多技术都是在产品的推动下得到发展的.在讲下面的技术之前,有必要说说那些年,我们一起做过的几个产品. 先说个比较悲剧的-- ...
- 淘宝网技术发展回顾(三):Oracle/支付宝/旺旺
Oracle/支付宝/旺旺 淘宝网作为个人网站发展的时间其实并不长,由于它太引人注目了,马云在2003年7月就宣布了这个是阿里巴巴旗下的网站,随后在市场上展开了很成功的运作.最著名的就是利用中小网站来 ...
- 近几年前端技术盘点以及 2016 年技术发展方向
近几年前端技术盘点以及 2016 年技术发展方向 Web 发展了几十个春秋,风起云涌,千变万化.我很庆幸自己没有完整地经历过这些年头,而是站在前人的肩膀上行走.Web 技术发展的速度让人感觉那几乎不是 ...
- 前端技术的发展和趋势
Web 发展了几十个春秋,风起云涌,千变万化.我很庆幸自己没有完整地经历过这些年头,而是站在前人的肩膀上行走.Web 技术发展的速度让人感觉那几乎不是继承式的迭代,而是一次又一次的变革,一次又一次的创 ...
- 转 近几年前端技术盘点以及 2016 年技术发展方向
原文http://www.barretlee.com/blog/2015/12/10/after-framework-we-gonna-to-hug-data/ Web 发展了几十个春秋,风起云涌,千 ...
最新文章
- python代码壁纸-一个爬取壁纸的python代码
- python装饰器实例-Python装饰器原理与简单用法实例分析
- HTML如何在按钮右侧显示div,如何实现点击页面中的一个按钮相应位置的div显示隐藏?...
- PendingIntent与Intent区别
- mysql window怎么安装补丁_window下mysql安装步骤
- Spark自带的集群模式(Standalone),Spark/Spark-ha集群搭建
- 切图崽的自我修养-规范CSS元素命名
- linux shell脚本备份mysql数据库
- Win10升级后,文件夹背景变成黑色
- C语言开关读程序,手把手教你学单片机的C语言程序设计(十)开关语句和循环语句.pdf...
- steam怎么看邮箱绑定的账号_【一问一答】账号篇丨账号密码忘记了怎么办?不方,看这里!...
- ASIC 芯片 PVT
- 数据结构(3)常见的树
- 达梦数据库管理工具使用
- Idea多次启动同一个服务
- java模拟实现操作系统进程调度中的多级反馈队列算法
- yaml语法 关于key为中文时的问题
- 戴尔笔记本开机提示operating system not found的解决办法
- 亚马逊无货源开店 精品模式和铺货模式怎么选?
- 解读:CVPR1903_图卷积网络GCN无监督人脸聚类
热门文章
- 金蝶系统服务器要求,金蝶服务器安装及其相关要求.doc
- 单链表删除所有值为x的元素_线性表之单链表
- uniaccess进程无法结束 拒绝访问_嵌入式Linux编程——程序员小白不懂的进程、信号量、并发、互斥...
- xxx.jar 中没有主清单属性
- C# Web实时消息后台服务器推送技术-GoEasy
- hdu2457 Trie图+dp
- Wayland 源码解析之代码结构
- 【翻译】How-To: Using the N* Stack, part 3
- 位运算(按位与、按位或、异或、取反)以及原码、反码、补码
- 安卓APP_ Fragment(4)—— Fragment + ViewPager2 模拟微信首页 (1)两者联动实现翻页