HarmonyOS之回顾前端基础历史

前言

PC时代，浏览器是一个网站的主入口。手机出现后，随着硬件性能的提升，对比PC互联网，移动互联网初期，大家也在抢入口，比如，开发自己的应用，移动设备网站。不知何时，有那么一阵研发操作系统的热潮(备注：Firefox OS 在2016年停止研发，此系统应用开发可完全采用网页模式开发)。再后来国内出现了一个新的技术创新名词-小程序/快应用，总之能跨端开发，加速入口的建设，不得不说入口是真的值钱，但是这些手段在真正的资本面前可能都是小儿科了，比如大资本加生态，直接研发手机。

入口即流量

背景

HarmonyOS UI应用采用ArkTS语言开发，ArkTS基于TypeScript设计，学习ArkTS后，感觉与学习其它语言的过程差异比较大，实践了一段时间的UI应用开发后，感觉需要对Web发展史做一次梳理学习。

历史

Web简史

来源 www.mozilla.org/en-US/firef...

1. Web 时代之前 ： 1969年，第一个世界网络：ARPANET(美国，互联网前身)
2. Web 时代 ：1989年，第一个Web 浏览和服务器(瑞士)，1993年，Mosaic浏览器发布(美国，即Mozilla Firefox前身)，1994年，Netscape浏览器发布(美国)
3. Web 竞逐：1995年，Microsoft 发布Internet Explorer, Netscape公司发布JavaScript, Microsoft公司推出CSS(即：层叠样式表)。1997年，Microsoft与Netscape发生字母e事件。2002年，Netscape开源自己的浏览器基础代码，并创建了非营利性组织Mozilla, 同时发布了FireFox浏览器。90年代末，Opera、Safari和Chrome三款浏览器也相继面世。

内容	时间	组织
HTML	1989年	CERN
JavaScript	1995年	Netscape
CSS	1995年	Microsoft

Web发展断代

• www.tinkerchild.com/post/the-ev...
• metamandrill.com/web-1-0-2-0...

Web时代	描述	特征
Web 1.0	The Static Web: The Dawn of the Internet	静态-脚本&内容
Web 2.0	The Social Web: A Paradigm Shift in Interaction	动态交互
Web 3.0	The Semantic Web: Unleashing Machine Intelligence	智能化，具备理解内容的能力
Web 4.0	The Intelligent Web: The Promise of Personalization
Web 5.0	The Ubiquitous Web: The Internet of Things (IoT) Era

制定Web标准的机构组织

Ecma

成立于1961年，地点在瑞士(Switzerland)。官网

Ecma历史

所有的JavaScript语言规范归属这个组织下的TC39维护

JavaScript语言的实现遵循ECMA262标准

ECMAScript 是基于几种起源技术，其中最著名的是 JavaScript（Netscape）和 JScript（Microsoft）。该语言由网景(Netscape)公司的布伦丹-艾奇（Brendan Eich）发明，并首次出现在该公司的 Navigator 2.0 浏览器中。从 Internet Explorer 3.0 开始，它出现在网景公司的所有后续浏览器和微软公司的所有浏览器中。

摘自：tc39.es/ecma262/

摘自：ecma-international.org/technical-c...

顺便提一句，Dart的语言规范也属于Ecma组织(TC52)，

W3C

国际性的一个非盈利组织，成立于1994年，地点在美国。官网

W3C全称：The World Wide Web Consortium

商标版权：MIT(Massachusetts Institute Of Technology), ERCIM(the European Research Consortium for Informatics and Mathematics), Keio

W3C主持者时间表

W3C在1994～2022采用的是Hosted Model的负责人方式

组织	开始时间
Inria	1995年
Keio University	1996年
ERCIM	2003年
Beihang University	2013年

W3C历史

CSS规范

HTML其它规范

html规范历史

有些已废弃，具体原因可参见WHATWG历史和HTML其它规范

版本	时间	备注
HTML 2.0	1995年	废弃
HTML 3.0	1995年	废弃
CSS 1.0	1996年
HTML 3.2	1997年	废弃
DOM 1.0	1998年
HTML 4.0	1999年	废弃
XHTML 1.0	2000年	基于HTML4的XML 1.0
DOM 2.0	2000年
DOM 3.0	2004年
XML 1.0	2008年
XHTML 2.0	2010年	状态：草稿
CSS 2.0	2011年
CSS 3.0		未正式发布，部分发布中

WHATWG

非盈利性组织，成立于2004年，地点在美国。官网

WHATWG全称：The Web Hypertext Application Technology Working Group

商标版权：Apple, Google, Mozilla, Microsoft

WHATWG历史，这里边描述了HTML技术演变的过程

Web相关规范列表

HTML5规范

DOM规范

W3C & WHATWG 备忘录

1. www.w3.org/news/2019/w...
2. www.w3.org/2019/04/WHA...

W3C与WHATWG签订备忘录，可能是双方在争夺Web领域的话语权或者是各自对彼此都有所嫌弃。如果从机构发起者来看，对备忘录事件的发生就相对比较好理解。W3C的发起者是研究者(虽然也参与了国家级大项目), WHATWG的发起者是企业(Apple, Google, Mozilla, Microsoft)

Internet 标准制定的组织

关于Internet中的事务组织，非常多，这里仅仅是简单梳理了一下。

来源：www.internetsociety.org/internet/hi...

IETF

国际性的网络标准制定性组织，成立于1986年，地点在美国

IETF全称：The Internet Engineering Task Force

介绍

IETF 的职责：制作技术文档(RFC)

IRTF

成立于1989年, 这个组织隶属于IETF

IRTF全称：The Internet Research Task Force

职责：解决互联网中长期存在的问题（参见RFC2014）

IRTF历史

RFC

国际性的网络标准制定组织，成立于1969年，地点在美国

创建原因：ARPANET(the Advanced Research Projects Agency Network)项目

RFC全称：Requests For Comments

RFC历史

职责：早期仅仅是记录技术想法和实现要点

由于RFC902的发布，从而被外界开始熟知

TCP草稿，1980年

这个TCP草稿参考了ARPA(Advanced Research Projects Agency) TCP规范早期的八个版本

TCP标准第一稿，1981年

IANA

国际性的互联网机构，成立于70年代，

IANA全称: the Internet Assigned Numbers Authority

职责

1. 根域名(科普：DNS Root Zone)
2. IP & # Autonomous System (AS) Numbers
3. 管理协议参数
   3.1 访问 ftp://ftp.iana.org/assignments 可以查询已登记的协议信息，包含协议规范文档编号
   3.2 比如各国语言标识(如：zh-Hans-CN)，可在这个文件中找到相关信息

IEEE

成立于1884年

IEEE全称: the Institute of Electrical and Electronics Engineers

IEEE历史

TCP通信协议原型，于1974年5月发表, 规范见RFC793

如果无法查看，可参见www.cs.princeton.edu/courses/arc...

IAB

成立于1979年，最初名称为：the Internet Configuration Control Board (ICCB)，在1984年正式解散，成立新的组织：the Internet Advisory Board (IAB)。因此，可以认为ICCB是IAB的前身。

IAB历史

IAB职责

机构关系

IEEE 802与IETF的关系

来源：www.rfc-editor.org/rfc/rfc7241...

IEEE 802全称：Project 802 of the Institute of Electrical and Electronics Engineers

两者为合作关系，IEEE 802从IETF共享到了IP数据报文封装，路由，安全和传输内容，IETF从IEEE 802共享到了局域网架构内容 （ieee802网站中的文档）

IAB 与 IETF，IRTF的关系

来源：www.rfc-editor.org/rfc/rfc4440...

1989年之前，IAB全称为：the Internet Activities Board，会监督非常多的任务工作组， 1989时，将所有的任务工作组合并成两个IETF和IRTF(注意：IETF是本身就存在的)，IRTF负责互联网长期演进中的问题，IETF负责互联网中短期演进中的问题

Internet权威信息文档列表

• BCP 9 (Internet Standards Process)
• BCP 25 (Working Group processes)
• BCP 25 (Anti-Harassment Procedures)
• BCP 54 (Code of Conduct)
• BCP 78 (Copyright)
• BCP 79 (Patents, Participation)
• www.ietf.org/privacy-pol... (Privacy Policy)

Internet 简史

互联网网关草案

• ISOC之互联网简史
• 1960到2020互联网简史
• Internet发展史
• 来源

计算机编程语言简史

来源:www.computer.org/publication...

时间	语言	备注
1843年	设计了第一个计算机器	Ada Lovelace
1936年	图灵机器	Alan Turing
1940s早期	Plankalkul	Konrad Zuse
1949年	(汇编语言)Assembly Language , (短代码)Shortcode
1952年	(自动代码)Autocode
1957年	FORTRAN	John Backus，历史
1958年	ALGOL, LISP	ALGOL用于算法，LISP用于AI
1959年	COBOL	用于银行
1964年	BASIC
1969年	第一个计算机网络出现	它用的是什么开发语言?
1970年	PASCAL
1972年	Smalltalk, C, SQL
1980s早期	ADA	用于空中交通管制和太空计划
1983年	C++, Objective C
1987年	Perl	用于文本处理
1990年	Haskell
1991年	Python, Visual Basic
1993年	Ruby
1994年	CLOS
1995年	Java, JavaScript, PHP
2000年	C#
2003年	Scala, Groovy
2009年	GO
2014年	Swift

Web 应用开发教程

教程

英文：developer.mozilla.org/en-US/docs/...

中文：developer.mozilla.org/zh-CN/docs/...

1. 安装基础软件
   1.1 代码编辑器（推荐 VS Code）
   1.2 浏览器 (FireFox, Chrome, Opera, Safari等等)
   1.3 安装本地Web服务器
2. 网站设计
3. 网站文件处理
4. HTML & CSS & JavaScript 基础学习
5. 网站发布

关于JavaScript的教程，也可以参考Microsoft文档，如果你已学习了Microsoft这篇文档，会发现Microsoft把它自己设计的TypeScript归类为开发工具，如下图

疑问

JavaScript为解释性语言，即不需要编译机器码，但我们在开发实际项目时，为什么还会有"编译"打包行为呢？

样例实践

创建一个 "testweb.html"文件， 复制文件路径到浏览器地址栏，然后回车，最终会看到网页可以正常加载。

整个过程其实是没有对 testweb.html进行过编译

<!DOCTYPE html>
<html>
    <head>
     <script>
        setTimeout(()=>{
            document.getElementById('loginfo').innerHTML = 'JavaScript脚本已执行'
        }, 1000)
     </script>
    </head>
    <body style="background-color: aqua;">
        验证本地网页脚本
        <div id="loginfo">初始状态</div>
    </body>
</html>

通过MDN(Mozilla Developer Network) 客户端工具描述文档中的"打包工具"和"转换"主题，可以理解"编译"一说

1. 使用工具打包（比如：webpack），处理多余代码

2. web 应用程序生命周期的这个阶段通常允许你编写"新特性代码"(比如最新的 CSS 或 JavaScript 特性，这些特性可能还没有得到浏览器的本地支持)，或者完全使用另一种语言编写代码，比如 TypeScript。转换工具将为你生成与浏览器兼容的代码，以用于生产。(比如：babel工具);

3. 选择用一种完全不同的语言编写代码，并将其转换为与 web 兼容的语言（比如：应用使用了TypeScript/Vue 或 React 或 SaSS/SCSS）

这3种情况，可以理解为"编译"

下边这篇文章，可能会更进一步解答"解释性语言和编译"疑惑。

• dev.to/robiulhr/is...

JavaScript作为Web前端应用开发的一部分，其语言规范名字为"ECMAScript"，接下来，我们了解一下ECMAScript规范的版本

ECMAScript

最初是由Ecma组织为JavaScript制定的语言规范(注: JavaScript先出现，ECMAScript后出现)

最新规范：tc39.es/ecma262/

历史规范列表：ecma-international.org/publication...

注意： ECMAScript Edition 4 没有发布

版本	备注
ECMAScript 2012	13ᵗʰ Edition/June 2022
ECMAScript 2021	12ᵗʰ Edition/June 2021
ECMAScript 2020	11ᵗʰ Edition/June 2020
ECMAScript 2019	10ᵗʰ Edition/June 2019
ECMAScript 2018	9ᵗʰ Edition/June 2018
ECMAScript 2017	8ᵗʰ Edition/June 2017
ECMAScript 2016	7ᵗʰ Edition/June 2016, 第一次由Ecma T39发布
ECMAScript 2015	6ᵗʰ Edition/June 2015，俗称:ES6
TypeScript 1.0	于2012年发布 , 参见"TS的十年"
5.1	5.1 Edition/June 2011
5	5th Edition/December 2009
4	废弃
3	3rd Edition-December 1999, 受到好评
2	2nd Edition-August 1998
1	June 1997, Ecma存档

TypeScript是基于JavaScript构建的一种"领域特定语言"(DSL)，是JavaScript的超集，TypeScript也遵循ES6及之后的规范

现代Web项目开发已普遍使用TypeScript语言，TypeScript文件的后缀为".ts"，ts文件是无法被浏览器直接运行，必须先转换为".js"文件（即 JavaScript语言文件), 转换可以使用tsc命令(全称：The TypeScript Compiler)。

开始使用TypeScript前，需要先安装，具体安装步骤可参见5分钟学会TypeScript工具，教程中使用到了npm(the Node.js package manager)命令, 因此你需要先安装Node.js.

• 来源：www.npmjs.com/about
• npm 是为Node.js提供包管理的工具，开源于2009年（注意：这个时候还没有TypeScript).
• 2014年成立npm.inc公司
• Node.js 历史
• Node.js 是在浏览器之外运行 V8 JavaScript 引擎，V8是Google Chrome的核心。这使得Node.js具有非常高的性能。
• V8发布于2008年开源

Node.js的入场，改变了整个前端研发环境，为后续Web框架的井喷式崛起提供了很大的帮助。关于Node.js，不得不了解的一个概念：JavaScript 运行时环境。网站可以运行JavaScript, 那么我们在研发过程中，其实也是需要这种识别JavaScript的能力的，不管是语法&安全检查，还是语法提醒，本地运行调试。

接下来我们开始了解一下相关历史和"JavaScript 运行时环境"概念

JavaScript 运行时环境（JavaScript Runtime Environments）

JS运行时环：支持运行JavaScript代码的综合环境

在开发Web应用时，JavaScript基本不会缺少，但我们在开发过程当中，.js文件还没有进入浏览器，所以就无法正常调试&运行，因此，我们需要有一个直接运行JavaScript的非浏览器环境. 这些环境其实就是JS运行时环境，其中就包含众所周知的 Node.js

下边列举一些非浏览器的"JS运行时环境"

1. Bun, 2021年
2. Deno, 2018年
3. Node.js, 2009年
4. Napa.js,2017年

下边列举一些常见的JS 引擎

1. ChakraCore,2016年
2. JerryScript,2016年(备注：鸿蒙在使用)
3. JavaScriptCore
4. Chrome V8
5. SpiderMonkey

这些"JS运行时环境"都用到JavaScript引擎来解析&编译JavaScript代码，如下展示

JS Runtime Environment	JS engine
Bun	JavaScriptCore
Deno	Chrome V8
Node.js	Chrome V8
Napa.js	Chrome V8

浏览器中的JS引擎

浏览器	JS engine
Firefox	SpiderMonkey
Chrome	V8
Safari	JavaScriptCore

为了更加形象一点理解JS engine，下边补几张浏览器的架构图

架构图中的JavaScript Interpreter便是JS engine

Chrome浏览器

Firefox浏览器

外部资料（1）

来源：dolszewski.com/javascript/...

这篇文章整体介绍了关于JavaScript 运行时环境

1. 什么是JavaScript 引擎
2. 什么是JavaScript 运行时环境
3. JavaScript是单线程吗？
4. 什么是Event Loop?
5. 浏览中的JavaScript 运行时环境
6. 浏览器外的JavaScript
7. JavaScript 引擎 VS 运行时环境
8. 总结

JavaScript引擎将你的脚本转换为可运行的机器代码指令，以方便CPU可以执行它。引擎只有在运行时才会编译代码。

JavaScript运行时环境为JavaScript脚本提供了可在运行期间使用的实用程序库。你的脚本会引用这些库。引擎本身并不依赖于它们。

很酷的是，JavaScript 引擎实现完全独立于运行时环境。引擎在开发时不会考虑任何特定环境。

外部资料（2）

来源： www.freecodecamp.org/news/javasc...

本篇文章介绍了JavaScript引擎的工作流程，JavaScript的编译和解释性，JavaScript运行时环境

JIT（just-in-time） in JavaScript

以下是浏览器运行时环境， CLICK事件样例，点击事件产生后，会先放在CALLBACK QUEUE，开始消费这个事件时，会将这个事件交给CALL STACK

浏览器渲染流程

来源1: frontendly.io/blog/browse...

来源2：blog.logrocket.com/how-browser...

这里翻译"来源1"的文章，以下为译文

---

作为开发人员/工程师，我们在构建 Web 应用程序/页面时将大部分时间花在浏览器（Chrome、Firefox、Safari、Opera 等）上。但是我们可能没有考虑太多关于浏览器如何实际呈现我们精心制作的Web应用程序/页面。

本文中，我将介绍浏览器如何呈现网页的步骤，因此在本文的最后，我们将掌握浏览器展示内容的知识，并对如何提高网页的性能有更好的想法。

在我们深入研究之前，请注意，每个浏览器可能具有不同的浏览器体系结构，因此每个浏览器在渲染过程中采用的方法可能不尽相同。但本文将为您提供浏览器通常如何渲染的整体想法。

浏览器通用架构

Web 浏览器由多个组件组成，如下所示。

当用户在浏览器用户界面的地址栏中键入搜索词或url时，UI线程将决定是否应将输入词或url发送到搜索引擎或网站。当用户按回车键时，网络线程会经过几个过程来请求数据并接收来自服务器的响应，如果响应是HTML/CSS 文件，它将经历如下渲染过程。

渲染引擎

在整篇文章中，我们将重点介绍渲染引擎（如上图所示）。渲染引擎的主要工作是：

在屏幕上绘制文本和图像。该引擎从文档（通常是 HTML）中绘制结构化文本，并根据给定的样式声明（通常在 CSS 中给出）正确设置其格式。

摘自 MDN

您可能已经听说过 Blink、Gecko 和 WebKit，它们是不同浏览器制造商的渲染引擎名称。

渲染引擎工作流程

渲染引擎通过 5 个步骤在屏幕上渲染内容。

让我们看一下第一阶段，解析。

1. 解析

在解析步骤中，渲染引擎会为HTML创建DOM树，为CSS创建CSSOM树。首先，让我们看一下DOM树是如何创建的。

DOM 树

当 HTML（与 CSS 和 JS 相同）文件从服务器发送到浏览器时，浏览器不会以HTML格式接收它，但神奇地理解并显示在了屏幕上。它实际上以原始字节格式接收文件，在"解析"这个期间以5个步骤来创建DOM树（CSSOM 树也几乎相同）。

在整篇文章中，我们将使用下面的 HTML 作为示例。

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>FrontEnd MasterClass</title>
  </head>
  <body>
    <h1>How the <span>browser rendering</span> works</h1>
    <div><img decoding="async" src="placeholder.png" alt=""></div>
  <body>
</html>

1. 字节

如上所述，服务器以原始字节的数据发送 HTML，并且必须将其转换为浏览器可以理解的格式。

下一步是将原始字节转换为字符。

2. 字符

解析器遍历每个原始字节的数据并将其转换为字符。对于我们的HTML示例，它将如下所示：

如果您熟悉 HTML，您可能理解转换后的字符，但是，对于浏览器来说，它仍然没有任何意义。它只是一个纯文本，需要标记化。

3. 符号

这些字符被进一步解析为符号。解析器理解尖括号内的HTML标签(tag)，并创建标签(tag)，包括开始和结束标签及其关联的属性名称和值，例如，标签(tag)包含HTML标准src和alt属性。

在符号化的过程中，在某些时候，会调用采用adoption agency 算法并处理缺少的结束标签(tag)。由于HTML错误得到妥善处理，因此缺少的结束标签(tag)（如**
**）是有效的 HTML 标签。如果您想深入了解 HTML 解析器如何处理错误标签(tag)的更多详细信息，请查看这篇文章：An introduction to error handling and strange cases in the parser.。

4. 节点

符号化之后，那些符号将转换为节点。节点是具有其属性和规则的对象。每个节点代表一个HTML标签(tag)。

5. DOM

分析的最后一步是创建DOM。上面创建的节点在树数据结构中链接，该结构创建不同标签(tags)（例如，父子、相邻同级等）之间的关系和层次结构，并捕获文档标记(MARKUP)的属性和关系。

现在，我们已经创建了DOM树，文档标记(MARKUP)也准备好了。接下来，让我们看一下如何创建CSSOM 树来设置元素的样式。

CSSOM 树

当浏览器构造DOM时，当它看到link包含在head标签时，它会立即开始获取样式资源，并且在构造 CSSOM之前，浏览器不会呈现任何已处理的内容。这就是CSS被视为渲染阻塞资源的原因。

就像DOM一样，当浏览器接收原始字节中的CSS时，它所经历的过程与构建DOM树的过程非常相似。

如下的CSS样式

body { font-size: 16px; }
h1 { color: green; }
span { font-weight: 400; }
h1 span { disaply: none; font-style: italic; }
img { display: block; }

它将使用CSSOM树构建，如以下图所示。下面的CSSOM树示例仅包含上述示例样式，但在实际情况下，用户代理样式也将应用于节点，然后递归遍历树结构并应用更具体的规则，从而创建CSS特异性。这就是为什么 CSS代表级联样式表。

2. 样式

在样式步骤中，DOM 和 CSSOM 树被组合成一个渲染树。

DOM + CSSOM = Render Tree

渲染树从 DOM 树的根开始，遍历每个节点，并确定要应用于每个节点的 CSS 规则。

任何带有 display： none 的节点;不会包含在渲染树中（即使它包含在 DOM 树中），并且它们不会出现在渲染输出中。而带 visibility: hidden 的节点，仍将包含在渲染树中，节点会一直占用空间。

需要注意的一点是，即使没有提供 CSS，每个 DOM 节点仍然带有默认样式，用户代理样式，来自浏览器，例如h1标题大于h2

3. 布局

一旦浏览器知道哪些 CSS 规则要应用于哪些节点以及哪些节点以其计算样式显示，它就可以开始计算每个节点的几何形状，例如宽度、高度和 x/y 坐标;它占用了多少空间以及它在屏幕上的位置。

第一次确定大小和尺寸时称为布局，每次对布局进行更改时，随后对大小和尺寸的重新计算称为重排。

重排

重排导致迫使浏览器重新计算其他元素的尺寸和位置并重新渲染页面。这个过程是相当昂贵的过程。

从我们的 HTML 示例中，

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>FrontEnd MasterClass</title>
  </head>
  <body>
    <h1>How the <span>browser rendering</span> works</h1>
    <div><img decoding="async" src="placeholder.png" alt=""></div>
  <body>
</html>

没有为 img 元素指定宽度和高度，因此浏览器在完全下载图像之前不知道图像的尺寸。下载图像时，浏览器现在需要重新计算尺寸和位置，这可能会导致其他元素发生偏移。

为了解决这个问题，我们可以为 img 元素提供宽度和高度，这样浏览器就不必等待重新计算其尺寸。

4. 绘制

该到绘制页面的时候了！在此阶段，通过将布局阶段计算的每个节点转换为屏幕上的实际像素来绘制各个节点，该过程包括绘制元素的每个视觉部分，例如文本、颜色、图像、边框、阴影和按钮。

在这个绘画阶段，用户开始在屏幕上看到一些东西，并测量了几个绘画时间。最常见的是，您可能已经听说过First Contentful Paint （FCP） 和 First Meaningful Paint （FMP）【注释：这两个指标已被淘汰，且严重依赖浏览器实现算法】。

FCP & FMP

【注释：不做翻译，指标已被淘汰】

LCP(Largest Contentful Paint)

LCP测量视口中可见的最大图像或文本块相对于页面首次开始加载时间的呈现时间。Chrome 团队建议 LCP 小于 2.5 秒，以获得良好的用户体验。

您可以在 Lighthouse 中查看 LCP 分数。

动画 -- 60 fps

在绘制阶段，我们还需要注意渲染性能，尤其是在为元素制作动画或滚动页面时。

大多数现代浏览器每秒刷新屏幕 60 次（每秒 60 帧）。这意味着每帧大约有 10 毫秒（1 秒 / 60 减去一些垃圾回收的 16.66 毫秒）的预算来完成计算样式、回流焊和绘制等操作。当动画超出预算并错过帧时，我们会看到动画变得"卡顿"。

硬件加速

我们可以避免卡顿动画的方法之一是使用 CSS 转换让 GPU 执行任务，以便 CPU 可以执行其他任务。这称为硬件加速。

一个很好的例子是在对 DOM 元素的位置进行动画处理时使用 translate3D 而不是 CSS left 属性，因为 translate3d 会创建直接上传到 GPU 的新复合层，并且不需要重新绘制。

因此，与上面的示例一样，现代浏览器通过将页面的各个部分分成多个复合层，并移动图层并合成新框架来更有效地处理该过程

5. 合成

这是最后一个阶段，合成对于确保在不同图层中绘制元素至关重要，尤其是那些以正确顺序相互重叠的元素。

在此阶段，图层将发送到 GPU 以在屏幕上显示。为了提高此操作的效率，这些层被分成不同的帧并发送到 GPU。分隔的图层可以在 Chrome DevTool > 图层 菜单中找到。

现在，这些元素将呈现在屏幕上

【注释：主流程已结束，剩余内容不做翻译，自行查看原文】

整个渲染流程已结束，非浏览器Web应用开发中不会用到，仅局限了解一下

接下来讲了解一个关于样式(CSS)的概念，CSS预处理器，了解学习它是因为在现代JavaScript框架中，基本都会用到它。并且让研发人员能感觉到编写CSS时，也是在写另外一种编程语言，但是又感觉不到语言的学习难度。

CSS 处理器

是一个能让你通过预处理器自己独有的语法生成CSS的程序。市面上有很多 CSS 预处理器可供选择，且绝大多数 CSS 预处理器会增加一些原生 CSS 不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让 CSS 的结构更加具有可读性且易于维护。

Sass(Syntactically Awesome Style Sheets)

2006年 sass-lang.com/

安装完成后，命令行使用样例： sass --watch input.scss output.css

例子：React 项目使用样例

LESS(Leaner Style Sheets)

2009年 lesscss.org/

安装完成后，命令行使用样例： lessc bootstrap.less bootstrap.css

例子：React 项目使用样例

Stylus

2010年 stylus-lang.com/

安装完成后，命令行使用样例： stylus --compress < some.styl > some.css

例子：React Native 项目样例

PostCSS

不属于CSS预处理器，放在这里，仅仅为了说明其重要性，可以认为它就是CSS的插桩工具.(即：CSS文件的转换器)

PostCSS，是一个处理CSS的工具，也不属于CSS语言，它可以让你自定义扩展自己的CSS，从而完成解析生成新的CSS。

PostCSS工作流程

关于PostCSS,在实际的Web应用项目中，研发人员直接使用的不多。

根据官网显示，此项目深受行业老大信赖：Facebook, Github, Google, WordPress, Wiki, JetBrains, TaoBao

小结

Web应用的CSS作为基础部分，如果研发人员从90年代开始使用，应该不存在现在所说的CSS用起来不顺手，毕竟熟能生巧。这些现代化CSS对于刚入门的编程人们来讲，可能感觉比较高效，因为有编程的感觉。 无论使用哪种布局模式，最终都会转换为CSS。

打包程序(Bundler)

什么是打包程序？

如果你是一个新手，只需要记住它的功能-把自己研发的工程代码和所依赖的非JavaScript运行时环境的代码放在一个统一的文件夹中，即，如果你的工程依赖了一个字符串处理工具库，在发布工程代码时，需要把字符串处理工具库的代码也合并到自己的工程代码中，因为在浏览器环境中运行时，它是不认识你用的字符串工具库API。(Web应用就是由3部分组成：html, css, javascript. 记住这个基本点，其余的工具和库都是为了开发方便，并且最终会回归到这3个基础部分)

如果你是一个有经验，应该听过甚至用过Webpack这个工具，它就是bundler(打包程序)

接下来介绍几个Bundler，希望你早已使用过

Webpack

2012年 webpack.js.org/

作者

Rollup

【注释：鸿蒙应用打包在用】

2015年 rollupjs.org/

Parcel

2013年 parceljs.org/

esbuild

2017年 esbuild.github.io/

友情链接：bundler的作用

软件包管理工具

"一种工具，它允许用户在操作系统上安装、删除、升级、配置和管理软件包"， 定义来源

常用的Web前端的管理工具如下

NPM

2009年

安装

PNPM

2016年

安装

采用单独脚本安装

Windows

iwr https://get.pnpm.io/install.ps1 -useb | iex

POSIX

curl -fsSL https://get.pnpm.io/install.sh | sh -

如果curl还没有安装，请执行

wget -qO- https://get.pnpm.io/install.sh | sh -

Docker

# bash
wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.bashrc" SHELL="$(which bash)" bash -
# sh
wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.shrc" SHELL="$(which sh)" sh -
# dash
wget -qO- https://get.pnpm.io/install.sh | ENV="$HOME/.dashrc" SHELL="$(which dash)" dash -

使用 Corepack安装

要求Node.js版本大于v16.13

corepack enable pnpm 如果你的Node.js是用Brew安装的，你需要执行命令 brew install corepack

使用NPM安装

npm install -g pnpm

Yarn

2019年

安装

npm install -g corepack

corepack enable

JSPM

2013年

安装 npm install -g jspm

Bower

2012年

安装 npm install -g bower

Web 应用框架(framework)

小实验

Web应用页面由3部分组成：HTML，CSS，JavaScript. 如果要求仅用VS Code编辑器和Node.js，开发一个静态网站。

感受：coding非常糟糕

因此应用框架(或脚手架)的出现变得适合时宜

分类

Web 应用框架分为两大类：

1. CSS 框架
2. JavaScript 框架

随着开源框架数目的增加，应用框架基本趋于综合类型

框架历史

框架	时间	备注
JQuery	2006年
Backbone	2010年
Angular	2010年
Express	2010年
Bootstrap	2011年	CSS framework
Ember	2011年
ZURB	2011年	CSS framework
Foundation	2011年
Grunt	2012年
Gulp	2013年
semantic-ui	2013年	CSS framework
React	2013年
PureCSS	2013年	CSS framework
UIKit	2013年	CSS framework
Vue	2015年
Ant Design	2015年	组件库
Svelte	2016年
Bulma	2016年	CSS framework
Tailwind CSS	2017年	CSS framework
Vite	2021年

来源

1. www.lambdatest.com/blog/best-c...
2. www.sam-solutions.com/blog/best-f...

如果你已使用过这里某些框架，应该看到过一个非常熟悉词loader, 根据loader规范会发现，loader是JavaScript 模块化的产物

模块&Loader

备注： 关于JavaScript模块，可参见Mozilla社区文档

关于loader：whatwg.github.io/loader/

在整个开发过程中，JavaScript 模块分为两个主要领域：

1. authoring format，用于定义导入和导出语法，以及变量绑定和循环的语义。
2. JavaScript loader，它为按需异步加载 JavaScript 模块提供管道。

JavaScript Loader 允许主机环境（如Node.js和浏览器）按需获取和加载模块。它提供了一个钩子(hook)管道，允许前端打包解决方案（如 Browserify、WebPack 和 jspm）挂接到加载过程中。

关于JavaScript/前端 模块化的文章，已非常多，这里为大家提供几个入口

1. www.zachgollwitzer.com/posts/scrip...
2. juejin.cn/post/725443...
3. juejin.cn/post/684490...
4. juejin.cn/post/684490...

模块类型

• UMD(Universal Module Definition)

github.com/umdjs/umd

(function (root, factory) {
  if (typeof exports === 'object') {
    // CommonJS
    module.exports = factory(require('b'));
  } else if (typeof define === 'function' && define.amd) {
    // AMD
    define(['b'], function (b) {
      return (root.returnExportsGlobal = factory(b));
    });
  } else {
    // Global Variables
    root.returnExportsGlobal = factory(root.b);
  }
}(this, function (b) {
  // Your actual module
  return {};
}));

相关文章：dontkry.com/posts/code/...

• AMD(The Asynchronous Module Definition)

github.com/amdjs/amdjs...

define(['dep1', 'dep2'], function (dep1, dep2) { 

//Define the module value by returning a value. 
return function () {}; 

});

// "simplified CommonJS wrapping" https://requirejs.org/docs/whyamd.html

define(function (require) { 

var dep1 = require('dep1'), 
dep2 = require('dep2'); 

return function () {}; 

});

• CommonJS(简称：CJS)

wiki.commonjs.org/wiki/Common...

//importing 
const doSomething = require('./doSomething.js'); 

//exporting 
module.exports = function doSomething(n) { 
 do something 
}

• ES

import * as module from './module.js';

export const CONSTANT = 42;

Loader

• RequireJS

requirejs.org/

处理模块类型：CJS, AMD, UMD ES6

• Stealjs

stealjs.com/

处理模块类型：ES6, CJS, AMD

• SystemJS

github.com/systemjs/sy...

处理模块类型: ES6，AMD, UMD

• cujojs

github.com/cujojs/curl

处理模块类型：AMD, CJS

总结

一个看似简单的3元素Web世界，从诞生之日起，貌似一直从 框架.规范.语言.生态社区 抢夺"入口"大门的钥匙。