你应该了解的前端标准化-阿里云开发者社区

开发者社区> 秦粤> 正文

你应该了解的前端标准化

简介: # 前言 ## 前端诞生记 截止2021年6月,全球已经有48亿互联网用户,占全球总人口的61%。前几天抖音宣布覆盖全球10亿互联网用户,但其实有一款100%覆盖48亿互联网用户的APP,它就是浏览器。 1995年第一次浏览器大战,到98年IE统领浏览器,微软的IE达到了巅峰。随后便慢慢开始IE的市场地位被标准化的浏览器实现挑战,但是最有力的就是:FireFox,Opera,Safari三家。标
+关注继续查看

前言

前端诞生记

截止2021年6月,全球已经有48亿互联网用户,占全球总人口的61%。前几天抖音宣布覆盖全球10亿互联网用户,但其实有一款100%覆盖48亿互联网用户的APP,它就是浏览器。

1995年第一次浏览器大战,到98年IE统领浏览器,微软的IE达到了巅峰。随后便慢慢开始IE的市场地位被标准化的浏览器实现挑战,但是最有力的就是:FireFox,Opera,Safari三家。标准化浏览器,通过标准规范天然跟开发者亲和,逐步蚕食IE的市场份额。2008年Chrome 的推出敲响了第二次浏览器大战,Chrome通过崭新先进的技术架构和极致的性能,迅速引领标准化浏览器的实现,并且Google主动加入浏览器标准化组织,积极推进浏览器标准化,逐步Google占据标准化组织中的引导地位。随着2015年IE 推出edge采用了Chroumium,Chrome和Safari等为代表的标准化浏览器实现胜出。浏览器大战告一段落。现在的浏览器厂商都在标准化组织内,浏览器标准化实现相对稳定,开发体验不再分裂。浏览器实现统一,也产生了一系列的连锁反应:跨浏览器抽象兼容的类库JQuery等等逐步退出舞台,浏览器性能的提升也使得模型驱动的MVVM类库流行,从此专业前端职业诞生。

image.png

前端--保持对深水区的感知

image.png
前后端的开发其实有很多类似的,大致都可以分为3层。需要强调一下,这里并没有高低贵贱之分,只是大家关注的内容不同。
应用层开发,更加偏业务侧逻辑,关注业务逻辑/业务特性/业务领域建模,因此会有开发体验,用户体验,复用性和安全性等等作为衡量指标。
框架类库的开发,关注通用性和跨业务封装,因此衡量指标是:工程/工效,性能,稳定性,基础设施抽象,安全兜底。
而在前后端深水区差异还是比较大的。前端的运行时:浏览器,是一套完全由国际开源组织标准化的应用,而且标准规范对底层操作系统运行环境的封装非常完善,底层操作系统完全透明。后端的运行时的实现大多掌握在商业公司手中,标准规范对跨操作系统的通用能力做了封装,但系统级的开发,还是有大量的操作系统接口需要关注,因此要求对操作系统层还是要有所感知。

作为一名VUCA时代的前端,我们应该如何去了解浏览器,了解我们前端的代码运行时呢?
经历过浏览器2次大战,现代的浏览器都是基于标准规范实现的(除了还有少量存在的IE8)。因此从标准化的维度来分,浏览器大致可以分为3层:浏览器厂商与实现,标准规范,标准化组织。image.png

浏览器厂商与实现

image.png
2021年全球的浏览器市占比:Chrome+Chromium(IE edage, samsung等等)占有72%,Safari占有18.5%,FireFox+Opera占有5.8%,IE内核浏览器0.5%。

浏览器站队--这个新特性我能用吗?

image.png
现代浏览器厂商基本上已经二分天下了:谷歌为代表的实现开源派,chrome本身已经具备了65%的市场占有率,在加上chromium衍生浏览器的 7%的市场占有率,基本上是独领风骚,但Chrome却一直无法触动苹果为代表的实现闭源派的市场。FireFox和Opera虽然也是开源派的,但是在实现具体新特性时,有时站队Safari,有时站队Chrome。

Chrome和Safari是竞合关系,合作是对于已经确定的标准。竞争则是在默认行为的定义:例如第三方Cookie,SameSite,还有争夺未被标准化锁定的议题,例如新的WebP,HTTP3等等。Safari更加注重苹果的生态和安全性,Chrome更加注重谷歌的战略推进与发展。因此双方都会在标准规范层面,相互掣肘,确保自身的利益不被侵犯。典型案例就是第三方Cookie,明知道涉及隐私数据泄露,Safari/FireFox/Opera都已经默认禁止了,但Chrome因为涉及到Google搜索广告商的用户追踪和计费策略,加上替代方案的进展也不太顺利,一直推迟禁用第三方Cookie。

对于前端在业务中使用浏览器新特性,为了确保用户覆盖率,推荐先查一下CanIUse的。另外关注浏览器厂商的新版本/新特性也很重要,所以我们阿里巴巴前端委员会--标准化组 ,特意为大家提供了《了不起的Chrome系列》,为大家持续更新Chrome新版本release notes中值得关注的内容。

浏览器实现

作为我们前端的代码运行时:浏览器。了解浏览器的基本原理,更有利于我们定位问题和优化代码。
现代浏览器中,Chrome是开源的(基于Chromium)。我们介绍浏览器实现原理也将采用Chrome,以下内容和截图都来自谷歌开发者文档,大家如果有兴趣进一步学习更多细节,也可以阅读原文: Inside look at modern web browser

多进程模型

image.png
图片来源:Inside look at modern web browser

首先现代浏览器的实现都是多进程模型的,例如UI Process负责和我们交互的浏览器窗口,还有Network Process负责处理网络事务,Storage Process负责存储相关的事务等等,但最值得我们关注的还是Renderer Process渲染进程。我们打开每个tab窗口,就是一个独立的Renderer Process进程,而且进程间是相互隔离的。我们常见的CSS, HTML, JavaScript标准规范都在渲染进程里。

单Tab渲染进程中的多线程

image.png
图片来源:Inside look at modern web browser
在 Chrome中一个Tab窗口就是一个渲染进程,而一个渲染进程则是有多个线程组成的:主线程,Worker线程,Compositor线程,Raster线程。我们前端所熟悉的HTML,DOM树,CSS解析树,JS解析执行都在这一个线程中。主线程慢,页面就展现的慢。主线程奔溃,这个Tab窗口就奔溃了。我们常见的标准规范也都在渲染进程的主线程里。我们再进一步看看主线程是如何执行的。

主线程--单线程串行执行

image.png图片来源:Inside look at modern web browser

如上图所示,渲染进程的主线程,是一帧一帧的绘制的。大多数情况下,我们的刷新率都是60fps,也就是说每帧执行间隔为17ms。
我们前端的代码:HTML/CSS/JS,最终都在这一个线程中解析执行,因此我们的代码不阻塞进程就变得尤为重要。当然浏览器将这些细节隐藏的很好,我们大多数情况不需要关心这些细节,但如果遇到渲染慢或需要极致优化渲染性能的场景,就需要引入异步加载,WebWorker,分时分片处理等等手段。推荐大家阅读大漠老师的ATA:消除阻塞页面渲染的资源

现代的前端MVVM框架,核心的逻辑都在JavaScript引擎中执行,而我们如果想再进一步,可能会涉及JavaScript性能提升,就需要学习JavaScript引擎的知识。例如Chrome的V8引擎。推荐大家阅读秦粤老师的系列ATA文章:JavaScript为什么快
image.png

浏览器的实现之所以这么复杂。其源头约束,都来自于浏览器的标准与规范。例如JavaScript的规范ECMAScript就限定了,它的实现是:弱类型的,动态解释执行的。因此才会有上图V8原理图中的,源码直接编译执行,而且还会在执行的过程中,不断优化代码的流程设计。

前端具体都有哪些标准和规范需要我们关注呢?

标准与规范

image.png
浏览器的标准和规范中,我们只关心与我们息息相关的部分:HTML, CSS, JavaScript的规范。

HTML和CSS是由WHATWG和W3C这2个开源组织维护,JavaScript是ECMAScript的实现,ECMAScript(即ECMA-262)是由ECMA的TC39技术组维护。
现在的HTML和DOM规范,主要都由WHATWG来维护。WHATWG还维护了Fetch API,Stream API, MIME type等等规范。而CSS,XHTML规范 ,则由W3C来维护。W3C还维护了SVG,XML, A11y等等规范。

JavaScript是ECMAScript的最著名的实现,我们前端熟知的ES6,也就是ES2015版本,目前全球的支持率已经高达98%了。因此我们的应用代码中大可去掉兼容ES5语法了,根据Google统计,单单代码去掉ES5支持平均可以提升JS代码执行效率12%。而且Google还做了一个工具检查网站去掉ES5支持后可以提速多少:https://estimator.dev/

对于上述和我们前端开发息息相关的标准和规范,我们应该熟知去哪里查询,常见的细节更加了然于胸。虽然我们也可以从MDN查询到简单的描述,但是如果要系统学习和了解更多的细节,还是需要查官方文档。HTML和DOM,访问WHATWG的官网查询:https://html.spec.whatwg.org/multipage/ 。CSS通过W3C-->Standards--> Web Design and Applications的HTML&CSS里面的CSS文档查询:https://www.w3.org/Style/CSS/ 。ECMAScript则通过ECMAScript官网查询:https://262.ecma-international.org/ 。熟练标准规范文档的查询,会让你对自己使用的底层接口掌握更多的技术细节,写出更加高效安全的应用。另外推荐大家阅读吞吞2片语雀文章:ECMAScript 规范文本阅读导引 part 1ECMAScript 规范文本阅读导引 part 2

对于标准和规范,我们熟练掌握和使用能解决日常大多数的问题。但是如果触碰到标准和规范的边界:例如发现一些规范实现的bug想去修复,某些标准相互冲突或者细节不太合理,甚至想引入推进一些新的议题扩展标准。这些都需要加入到标准化组织,才能推进。

标准化组织Jump in

标准化组织并不神秘,虽然都是开源组织,但是我们想参与到议题的修改和制定,还是有些门槛的。

W3C

W3C面向自己的会员开放,会员是机构为单位,会员加入W3C不需要获得委员会投票通过,申请即可,每年需要根据机构规模及营收情况支付年费。加入会员后,就可以参与到各类型的Group的中维护具体规范,例如CSS Working Group制定和维护CSS规范议题,A11y WorkGroup制定和维护可访问性的规范议题。Web技术跟国内互联网大厂紧密,因此国内大多数互联网大厂都已经加入了W3C,我们只需要找到公司内对应的负责人,即可申请加入。值得一提的是,阿里巴巴的标准化组朱红儒(茱滴)已经第四次当选W3C董事会成员。阿里巴巴可以联系:安琪。

ECMA

ECMA也是面向自己的会员开放,会员是机构为单位,会员需要申请,并获得ECMA的委员会投票同意加入,每年需支付年费。同样加入会员后,就可以参与到各个技术委员会TCs,影响相应的议题。例如ECMAScript就是由TC39技术委员会维护的。除了ECMAScript,ECMA的TCs维护着Dart,C++,C#等规范。相对于W3C,国内加入ECMA的大厂较少一些,360第一个加入ECMA之后,阿里巴巴紧随其后,今年字节跳动也加入了ECMA。阿里巴巴可以联系:吞吞和秦粤。

WHATWG

最难参与的标准化组织是WHATWG,WHATWG相对封闭,由核心浏览器厂商组成的steward进行管理,steward并不对外招收会员,由内部成员自己维护规范,但是通过Github issue的方式吸收社区的反馈意见,具体是否采纳社区反馈,由2-3名核心editor决定。

前置条件

个人加入标准化组织有三个前置条件:

  1. 英文好。W3C虽然有中文社区,但英文阅读和书写能力还是比较重要的。ECMA对非英语言更不友好,基本需要英语口语能力很强。
  2. 熟读标准和规范文档。在标准化组织中,这些文档是大家的基础背景知识,尤其是了解英文专业词汇。
  3. 有参与或者推进的具体议题。这点其实尤为重要,有切实具体的推进议题,才有动力持续克服议题推进的障碍,并在技术小组中维持活跃度。

议题推进过程

目前标准化组织的技术委员会或者工作组中,都由行业专家和业界大牛们在把关。包括浏览器厂商自己想推进一些议题,也没有那么容易,技术组中大家彼此之间更多的是博弈。因为任何一个简单议题,都可能会对整个前端生态影响深远,而且要防止整个技术组成为一言堂。所以我们有时反而很庆幸,还有Safari这样一个Chrome无法吞并的重要闭源浏览器,可以跟Chrome抗衡。推进议题,更多的是游说和文档的工作,将各方的意见能达成平衡统一后,就可以推进到下一个阶段。当然发展到现在,各个技术组中也已经存在大量无法达成共识的僵尸议题,因为各种原因无法继续推进。推进的后期阶段后,则是写文档和测试代码,最终浏览器厂商,会在未来的迭代中排期实现。
在标准化组织中成功推进议题,还是比较有成就感的。

阿里前端委员会在2020年就成功的将Error Cause议题推进到了Stage3,目前各大厂商的浏览器都已经实现支持了:

async function doJob() {
  const rawResource = await fetch('//domain/resource-a')
    .catch(err => {
      throw new Error('Download raw resource failed', { cause: err });
    });
  const jobResult = doComputationalHeavyJob(rawResource);
  await fetch('//domain/upload', { method: 'POST', body: jobResult })
    .catch(err => {
      throw new Error('Upload job result failed', { cause: err });
    });
}

try {
  await doJob();
} catch (e) {
  console.log(e);
  console.log('Caused by', e.cause);
}

总结回顾

image.png
浏览器标准化跟我们前端行业息息相关,现代浏览器是一个高度标准化的产品。各个浏览器厂商虽有竞争,但在标准化层面已经统一。所有浏览器的实现都受到标准规范的约束,这些标准和规范,提供给了我们前端一个稳定的系统基座。这些标准和规范的具体议题,则是由开源组织中一堆的行业专家和业界大牛们坚定的维护,浏览器厂商要推进新特性,也需要再标准化组织中相互博弈妥协。

其实标准化组织也是开源组织,前端的生态是非常开源友好的。即使大家没有机会参与前端标准化,其实也可以通过参与前端开源项目,维护前端生态的发展的。最后希望前端们应该对浏览器的实现和标准规范层有认知,如果有具体的业务场景和诉求涉及到标准和规范,欢迎大家加入标准化组织。另外更希望大家可以坚持贡献开源社区,共同维护前端的基座,推进行业发展。

image.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
6915 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4485 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
7758 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
5458 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
9425 0
腾讯云服务器 设置ngxin + fastdfs +tomcat 开机自启动
在tomcat中新建一个可以启动的 .sh 脚本文件 /usr/local/tomcat7/bin/ export JAVA_HOME=/usr/local/java/jdk7 export PATH=$JAVA_HOME/bin/:$PATH export CLASSPATH=.
2141 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
16829 0
+关注
秦粤
Ex百度Phper,Now阿里Noder
5
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载