你应该了解的前端标准化

Posted 2022-01-27 技术漫谈

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了你应该了解的前端标准化相关的知识，希望对你有一定的参考价值。

前言：之前某次跟狼叔闲聊，聊到前端和后端的对比，还有前端职业的发展。狼叔说，到现在都没有人将前端的体系讲的很清楚，大家都在应用层竞争：前端去搞Serverless，前端去搞AI，前端去搞客户端。我就在想，能不能将我对前端标准化的理解体系化一下，讲清楚。至少可以达成前端对浏览器技术底层技术的一定共识，也就有了这篇文章的大体架构。

前端诞生记

截止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类库流行，从此专业前端职业诞生。

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

前后端的开发其实有很多类似的，大致都可以分为3层。需要强调一下，这里并没有高低贵贱之分，只是大家关注的内容不同。

应用层开发，更加偏业务侧逻辑，关注业务逻辑/业务特性/业务领域建模，因此会有开发体验，用户体验，复用性和安全性等等作为衡量指标。

框架类库的开发，关注通用性和跨业务封装，因此衡量指标是：工程/工效，性能，稳定性，基础设施抽象，安全兜底。

而在前后端深水区差异还是比较大的：

前端的运行时：浏览器，是完全遵从国际开源组织标准化的应用，而且标准规范对底层操作系统运行环境的封装非常完善，底层操作系统完全透明。

后端的运行时的实现大多掌握在闭源商业公司手中，标准规范对跨操作系统的通用能力做了封装，但系统级的开发，还是有大量的操作系统的特性和接口需要关注，因此要求对操作系统层还是要有所感知。

我们今天的文章就是将深水区这层，一层层剥开，带大家看看标准化组织是怎么影响我们前端工作的。那作为一名VUCA时代的前端，我们应该对前端的代码运行时有基本的了解：到底我们的html，CSS，javascript在浏览器中是如何运行的呢？为什么不同的浏览器执行的结果基本是一致的？他们遵循了什么规范？又是谁在把控，掌握这些规范呢？

经历过浏览器2次大战，现代的浏览器都是基于标准规范实现的（除了还有少量存在的IE8）。因此从标准化的维度来分，浏览器大致可以分为3层：浏览器厂商与实现，标准规范，标准化组织。

浏览器厂商与实现

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

从上图可以看出浏览器的市场份额基本已经被国外浏览器厂商瓜分干净了。chrome本身已经具备了65%的市场占有率，再加上chromium衍生浏览器的 7%的市场占有率，一骑绝尘，其后的Safari的市场份额每年相对稳定在18%左右。我们上面既然说现代浏览器厂商(即排除IE8，IE6)实现都是标准化的，为什么还会有差异呢？浏览器厂商他们的差异在哪里呢？

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

现代浏览器都要考虑对Web标准覆盖率，因此所有现代浏览器都需要跑通web-platform-tests ，一个专门为浏览器兼容性准备的test case，我们也可以给WPT贡献我们自己的兼容性测试用例。在兼容性以外，浏览器厂商还存在竞争关系，主要的竞争来自两个阵营：

Chrome为代表的实现开源派代表，基于Blink内核(webkit分支)的Chrome源码是闭源的，但开源了Chromium。可以理解为，Chrome是为了快速迭代开发，尝试各种新架构新特性。Chromium将Chrome较为稳定的部分沉淀，开源反哺到浏览器生态。Chrome倾向谷歌的战略推进与发展。

Safari为代表的闭源派代表，基于webkit内核的Safari源码是闭源的。得益于苹果的硬件和操作系统闭环生态，Safari的地位很难被撼动。Safari倾向苹果的生态和安全性。

FireFox和Opera等则是骑墙派（非贬义），缺乏自己主张的新特性。这些厂商大多也是开源的，甚至是Chromium衍生出来的，但是在实现具体新特性时，有时站队Safari，有时站队Chrome。

Chrome和Safari两大阵营，在浏览器标准和规范限定的兼容性边界外做差异化竞争，差异化除了浏览器性能以外，主要是2个方面：默认的行为，例如第三方Cookie，SameSite。未被标准化锁定的新特性：例如新的WebP，HTTP3等等。典型案例就是第三方Cookie，明知道涉及隐私数据泄露，Safari/FireFox/Opera都已经默认禁止了，但Chrome因为涉及到Google搜索广告商的用户追踪和计费策略，加上替代方案的进展也不太顺利，一直推迟禁用第三方Cookie。而浏览器新特性的支持例如WebP等等，Safari的webkit内核设计老旧很明显跟进乏力。而这些差异化内容一旦要引入成为标准/规范时，浏览器厂商们就会在标准规范组织中，相互掣肘和站队，确保自身的利益不被侵犯。

对于我们前端在业务生产环境中使用浏览器新特性，为了确保用户覆盖率，推荐先查一下CanIUse。另外持续关注浏览器厂商的新版本/新特性也很重要，有些默认行为可能会被篡改，有些新特性可以为我们业务创造新的价值。因此我们阿里巴巴前端委员会--标准化组的寒雁同学筹划了《了不起的Chrome》系列文章，通过F2E公众号，为大家持续追踪Chrome最新版本release notes中值得关注的内容。

看完差异，我们接下来看看相同的部分：Chrome和Safari最早都是来自webkit内核，机制上还是有很多共同点的。作为我们前端的代码运行时：浏览器，理解浏览器内核基本原理。浏览器是如何将我们HTML/CSS/JS源码，解析并最终渲染出来的，更有利于我们定位问题和优化代码。

浏览器实现

现代浏览器中，Chrome是比较有代表性的，而且文档也最全面。我们本文中介绍浏览器实现原理也将采用Chrome，以下内容和截图都来自谷歌开发者文档，大家如果有兴趣进一步学习更多细节，也可以阅读原文：Inside look at modern web browser。

多进程模型

图片来源：Inside look at modern web browser

首先现代浏览器的实现都是多进程模型的，例如UI Process负责和我们交互的浏览器窗口，还有Network Process负责处理网络事务，Storage Process负责存储相关的事务等等，多进程模型就意味着进程之间是相互隔离的，进程间通信需要IPC（图中虚线）。这些进程中最值得我们关注的是Renderer Process渲染进程，我们打开每个Tab窗口，就是一个独立的Renderer Process进程。我们常见的CSS, HTML, JavaScript标准规范都在渲染进程里。我们Zoom In看看一个Tab窗口的渲染进程。

单Tab渲染进程中的多线程

图片来源：Inside look at modern web browser

一个Tab窗口就是一个独立的渲染进程，而一个渲染进程则是有多个线程组成的：主线程，Worker线程，Compositor线程，Raster线程。我们前端所熟悉的HTML，DOM树，CSSOM树，JS解析执行，渲染树，页面的计算都在这一个线程中。主线程阻塞，页面就展现的慢。主线程奔溃，这个Tab窗口就奔溃了