一、关于前端开发

1. 起源，架构，变迁

前端开发是指使用HTML、CSS、JavaScript等语言和技术来构建Web应用的用户界面和交互功能的过程。前端开发的起源可以追溯到1989年，当时Web之父Tim Berners-Lee在欧洲核子研究中心（CERN）提出了关于Web的构想，他将超文本（Hypertext）、传输协议（HTTP）和统一资源标识符（URI）结合起来，创建了第一个Web服务器、浏览器和网页。这些网页使用HTML语言来描述文档的结构和内容，使用HTTP协议来在服务器和浏览器之间传输数据，使用URI来唯一标识每个资源。

随着Web技术的发展，前端开发也逐渐演变和丰富。1996年，W3C推出了CSS语言，用于控制网页的样式和布局。1997年，Netscape公司发布了JavaScript语言，用于在浏览器端执行动态脚本。这些语言使得前端开发能够实现更多的视觉效果和交互功能，提高了用户体验。此后，前端开发又出现了许多新的技术和框架，比如说XML、AJAX、jQuery、Bootstrap、React、Vue等，它们都为前端开发提供了更多的可能性和便利。

前端开发在Web应用中扮演着重要的角色，它直接影响着用户对Web应用的第一印象和满意度。前端开发可以应用于各种领域和场景，比如说电子商务、社交媒体、在线教育、游戏、数据可视化等。

Web开发的历史可以分为三个阶段：

• 静态网页阶段：这是Web开发的最初阶段，网页只能展示固定的内容，没有交互功能，用户只能浏览信息，不能修改或提交数据。
• 动态网页阶段：这是Web开发的第二个阶段，网页可以根据用户的请求或输入来生成不同的内容，有一定的交互功能，用户可以查询或提交数据，但是需要刷新页面才能看到结果。
• 单页应用阶段：这是Web开发的当前阶段，网页可以实现复杂的交互功能，用户可以像使用桌面应用一样操作数据，不需要刷新页面就能看到结果。

Web开发涉及到多种技术和工具，其中最核心和基础的是三种语言：HTML、CSS和JavaScript。HTML是超文本标记语言（Hypertext Markup Language）的简称，它用于描述网页的结构和内容。CSS是层叠样式表（Cascading Style Sheets）的简称，它用于控制网页的样式和布局。JavaScript是一种在浏览器端执行的脚本语言，它用于实现网页的动态效果和交互功能。

除了这三种语言外，Web开发还需要使用一些其他的技术和工具，比如说：

• Web服务器：负责接收和响应用户请求，提供网页和数据服务。常见的Web服务器有Apache、Nginx、IIS等。
• 数据库：负责存储和管理用户数据，提供数据查询和操作功能。常见的数据库有MySQL、Oracle、MongoDB等。
• 框架：负责提供一些常用的功能和模块，简化开发过程和提高开发效率。常见的框架有Bootstrap、jQuery、React、Vue等。

2. 前端应用的领域

To B, To D, To C

• To Businese：前端开发为业务需求提供解决方案，包括设计、实现、测试、部署、维护等阶段。这个领域需要前端开发者具备良好的业务理解能力、用户体验意识、项目管理能力、沟通协作能力等，以及熟练掌握HTML、CSS、JavaScript等基础技术，以及React、Vue、Angular等主流框架，以及Webpack、Vite、ESBuild等工程化工具。
• To Developer：前端开发为其他开发者提供基础设施、组件库、工具库、框架等，以提高开发效率和质量。这个领域需要前端开发者具备深厚的技术功底、创新思维、架构设计能力、文档编写能力等，以及熟悉各种前端技术的原理和实现，如DOM、BOM、Event Loop、Virtual DOM、SSR等，以及掌握TypeScript、Rust、WebAssembly等高级语言和技术。
• To Customer：前端开发为最终用户提供优质的产品和服务，包括网页应用、小程序、桌面应用等。这个领域需要前端开发者具备良好的审美能力、交互设计能力、性能优化能力、安全防护能力等，以及熟悉各种前端技术的应用和优化，如PWA、Web Components、Service Workers等，以及使用Electron、Flutter等跨平台技术。

跨端

以及桌面端网页的开发和移动端网页的开发。现在由于基于V8引擎的Node.js的出现，前端也可以在不需要学习新的语言的基础上进行学习后端开发。目前在国内，Node.js书写的后端很少，但是在国外会相对多一些。

此外，还涉及到终端以及跨端的问题，跨端的话，到桌面端，目前有electron和NW.js，像大家非常熟悉的VSCode就是借助electron进行开发的。到移动端的话，目前有React Native和uniapp。其中Uniapp和vue非常相似。

WebAssembly：

WebAssembly是一种新的编码方式，可以在现代的网络浏览器中运行。它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如C/C++等语言提供一个编译目标，以便它们可以在Web上运行。它也被设计为可以与JavaScript共存，允许两者一起工作。

WebAssembly的目的是为了提高Web应用的性能、安全性、可移植性和可扩展性。它可以让开发者使用自己熟悉的语言和工具来构建Web应用，而不需要依赖于JavaScript的限制和兼容性问题。它也可以让用户体验更加流畅和快速，无需等待代码下载和解析。

WebAssembly是一个开放的网络标准，由W3C WebAssembly Community Group和W3C WebAssembly Working Group共同制定和维护。它得到了来自所有主流浏览器厂商的支持和参与。

3. 前端开发的语言，框架和工具

目前常用的如下：

老师推荐了解框架的作者，了解作者创造这个框架是为了什么，这样可以方便我们更好的掌握框架。

4. 浏览器，网络，服务器

可以参考这篇文章：github.com/75team/w3c/…

不想看长文的同学看这里，我给大家总结了一下：

这篇文章是由360 W3C工作组的成员@cncuckoo撰写的，主要介绍了现代浏览器的架构和工作原理，以及一些优化和调试的技巧。文章的主要内容如下：

• 现代浏览器的架构是多进程架构，即浏览器进程、渲染器进程、GPU进程、插件进程等，每个进程负责不同的功能和任务，通过IPC（进程间通信）协作完成网页的加载和渲染。
• 浏览器进程是最上层的进程，负责协调承担各项工作的其他进程，比如实用程序进程、渲染器进程、GPU进程、插件进程等。它还负责用户界面的显示和交互，比如地址栏、标签栏、菜单栏等。
• 渲染器进程是负责网页内容的渲染的进程，每个标签页对应一个渲染器进程。它使用Blink引擎来解析HTML、CSS、JavaScript等资源，并生成DOM树、CSSOM树、Render树等数据结构，然后通过布局（Layout）和绘制（Paint）等步骤将网页内容绘制到位图中，最后通过合成（Composite）和光栅化（Rasterize）等步骤将位图发送给GPU进程进行显示。
• GPU进程是负责图形处理的进程，它使用GPU（图形处理单元）来加速网页内容的显示，提高性能和效果。它接收来自渲染器进程的位图，并将其转换为纹理（Texture），然后通过OpenGL或DirectX等图形接口将纹理绘制到屏幕上。
• 插件进程是负责插件的运行的进程，比如Flash、PDF等。它使用PPAPI（Pepper Plugin API）来与浏览器进行通信，保证插件的安全和稳定。

文章还介绍了一些优化和调试的技巧，比如：

• 使用Chrome DevTools中的Performance面板来分析网页性能，查看主线程和渲染线程的执行情况，找出性能瓶颈和优化点。
• 使用Chrome DevTools中的Layers面板来查看网页内容的分层情况，了解哪些元素会触发合成层（Composite Layer），以及如何避免不必要的合成层。
• 使用Chrome DevTools中的Rendering面板来开启一些辅助功能，比如显示帧率（FPS）、显示重绘区域（Paint Flashing）、显示合成边界（Layer Borders）等，以便更直观地观察网页渲染过程中的各种细节。

现代浏览器是一个复杂而精妙的系统，它涉及到多种技术和领域，需要不断地学习和探索。

5. 前端学习路线图

老师给出的参考链接：roadmap.sh/frontend

二、Web标准

1. 总览

Web开发标准是指为了保证Web技术的质量和兼容性而制定的一系列规范和指南。Web开发标准对于Web开发者有着重要的意义和作用，它们可以帮助Web开发者：

• 遵循统一的规范，提高代码的质量和可维护性
• 保证网页在不同的浏览器、设备、平台上都能正常显示和运行
• 提高网页的性能、安全性、可访问性、可扩展性等
• 适应Web技术的快速变化和创新

Web开发标准是由一些国际标准组织和社区共同制定和实施的。与Web开发相关的主要的国际标准组织有：

• W3C：万维网联盟（World Wide Web Consortium）的简称，它是一个由Web技术领域的各方利益相关者组成的非盈利性国际组织，它的目标是通过制定Web标准来促进Web的发展和进步。W3C由Web之父Tim Berners-Lee在1994年创立，目前有超过500个会员，包括各国政府、企业、学术机构、非政府组织等。W3C负责制定HTML、CSS、SVG等Web技术规范。
• Ecma TC39：Ecma国际（Ecma International）下属的一个技术委员会（Technical Committee），它负责制定JavaScript语言规范。Ecma国际是一个由信息和通信技术领域的各方利益相关者组成的非盈利性国际组织，它的目标是通过制定标准来促进信息和通信技术的发展和应用。Ecma国际成立于1961年，目前有超过100个会员，包括苹果、谷歌、微软、英特尔等知名企业。Ecma TC39负责制定ECMAScript语言规范，它是JavaScript语言的官方名称。
• IETF：互联网工程任务组（Internet Engineering Task Force）的简称，它是一个由互联网领域的各方利益相关者组成的开放式社区，它的目标是通过制定互联网标准来促进互联网的发展和运行。IETF成立于1986年，目前有超过6000个参与者，包括研究人员、工程师、设计师、运营商等。IETF负责制定HTTP、TCP/IP等互联网协议规范。

其中，与前端开发相关的两个主要的国际标准组织是W3C和Ecma TC39。

这些国际标准组织都有自己的标准制定流程和方法，一般包括以下几个步骤：

• 提出需求或建议：由任何人提出对Web技术的改进或新增功能的需求或建议
• 编写草案或提案：由专家或工作组编写符合需求或建议的草案或提案
• 征求意见或反馈：向公众或会员征求对草案或提案的意见或反馈
• 修订或完善：根据意见或反馈修订或完善草案或提案
• 审核或批准：由总监或委员会审核或批准草案或提案
• 发布或推荐：正式发布或推荐草案或提案作为Web标准

2. W3C

W3C是万维网联盟（World Wide Web Consortium）的简称，它是一个由Web技术领域的各方利益相关者组成的非盈利性国际组织，它的目标是通过制定Web标准来促进Web的发展和进步。W3C由Tim Berners-Lee在1994年创立，目前有超过500个会员，包括各国政府、企业、学术机构、非政府组织等。W3C在全球有多个分支机构，其中中国分支机构是由中国计算机学会（CCF）承办的。

W3C负责制定HTML、CSS、SVG等Web技术规范，它的标准制定流程如下：

• 制定工作组（Working Group）：由会员、邀请专家、W3C工作人员等组成，负责某一领域或主题的规范制定
• 发布工作草案（Working Draft）：由工作组编写的规范的初稿，向公众征求意见和反馈
• 发布候选推荐（Candidate Recommendation）：由工作组修订后的规范草案，表示已经达到了技术稳定性，需要进行实现测试和验证
• 发布提案推荐（Proposed Recommendation）：由工作组提交给W3C总监审查的规范草案，表示已经通过了实现测试和验证，需要得到会员的批准
• 发布正式推荐（Recommendation）：由W3C总监正式发布的规范，表示已经得到了会员的一致同意，具有权威性和普遍性

W3C除了制定规范外，还举办各种研讨会、培训、活动等，以促进Web技术的交流和合作。

3. Ecma TC39

Ecma TC39是Ecma国际（Ecma International）下属的一个技术委员会（Technical Committee），它负责制定JavaScript语言规范。Ecma国际是一个由信息和通信技术领域的各方利益相关者组成的非盈利性国际组织，它的目标是通过制定标准来促进信息和通信技术的发展和应用。Ecma国际成立于1961年，目前有超过100个会员，包括苹果、谷歌、微软、英特尔等知名企业。

Ecma TC39负责制定ECMAScript语言规范，它是JavaScript语言的官方名称。ECMAScript语言规范目前已经发布了12个版本，最新的版本是ECMAScript 2021。Ecma TC39的标准制定流程如下：

• 提出提案（Proposal）：由任何人提出对ECMAScript语言规范的改进或新增功能的建议
• 进入阶段0（Stage 0）：提案被TC39委员会接受为一个正式文件，并分配给一个负责人（Champion）
• 进入阶段1（Stage 1）：提案被TC39委员会认可为一个值得探索和追求的想法，并编写一个正式描述（Formal Description）
• 进入阶段2（Stage 2）：提案被TC39委员会认为已经具备了初步的规范和实现，并编写一个草案规范（Draft Specification）
• 进入阶段3（Stage 3）：提案被TC39委员会认为已经达到了规范的成熟度和稳定性，并得到了至少两个独立的实现和测试
• 进入阶段4（Stage 4）：提案被TC39委员会推荐给Ecma国际总监，作为ECMAScript语言规范的一部分发布

Ecma TC39除了制定规范外，还通过Github、Discourse等平台，与广大的JavaScript社区进行沟通和协作。

这些国际标准组织都有自己的网站和平台，可以查询和阅读它们制定和发布的Web标准，也可以参与和贡献Web标准。

三、个人理解

前端开发与Web标准是一个非常广泛和深刻的主题，它涉及到Web技术的方方面面，也影响着Web应用的各个层面。

在观看课程的过程中，我也发现了一些自己感兴趣或者想要深入学习的话题或者问题，比如说：

• 如何使用一些新出现或者即将出现的前端技术或者Web标准，比如说WebAssembly、Web Components、Service Workers等
• 如何优化前端开发的性能、安全性、可访问性、可扩展性等方面
• 如何参与Web标准的制定和实施过程，比如说如何提交提案、如何进行测试和验证、如何给出反馈和建议等
• 如何跟踪Web标准的最新动态和趋势，比如说如何关注W3C、Ecma TC39等组织的活动和公告、如何阅读规范和草案等

这些话题或者问题对于我来说都是很有意义的，我希望能够通过进一步的学习和实践，来掌握和应用它们。