Skip to content

Latest commit

 

History

History
241 lines (180 loc) · 18.3 KB

20200328_cncuckoo_Web标准：前端的原力.md

File metadata and controls

241 lines (180 loc) · 18.3 KB
Raw

Web标准：前端的原力

本文是作者根据为“360第六届前端星计划”录制的在线培训课程整理的提纲。

Web标准是构成Web基础、运行和发展的一系列标准的总称。如果把前端开发人员比喻成“孙悟空”，那么Web标准就是“如来佛的手掌”。可以毫不夸张地说：对前端从业者来说，Web标准意味着能力，代表着舞台，象征着空间，指引着发展。

Web标准并不是由一家标准组织制定，涉及IETF、Ecma、W3C和WHATWG等。本文按Web标准组织分别简述相关Web标准，为前端学习Web标准提供指导。

IETF

IETF，全称Internet Engineering Task Force（互联网工程任务组），成立于1986年。Internet其名的TCP/IP协议由IETF标准化。

1991年，Web发明人Tim Berners-Lee总结了其Web服务器和浏览器中实现的HTTP协议，也就是HTTP 0.9：

HTTP 0.9全文不到700个单词，定义了最简单的浏览器与服务器通信获得HTML页面的协议。这个协议只定义了GET请求。

随着Web的迅速流行，很多Web服务器在0.9版基础上增加了扩展。为了把这些扩展及时记录下来，IETF成立HTTP Working Group（HTTP WG）着手制定HTTP/1.0。1996年5月，IETF发布了一份RFC（Request for Comments，征求意见稿）：RFC 1945。IETF的RFC可以接受为正式标准，也可以作为参考文档。RFC 1945就是一份参考文档（也就是HTTP/1.0）：

HTTP/1.0增加了HEAD和POST方法。增加了可选的HTTP版本号。增加了HTTP头部字段描述请求和响应。增加了3位数的响应码（1xx保留，2xx成功，3xx重定向，4xx客户端错误，5xx服务器错误。）HTTP/1.0已经达到20000单词。

仅仅9个月后，1997年1月HTTP/1.1就发布了。HTTP/1.1很大程度上也是对HTTP/1.0的改进，增加了持久连接、强制服务器头部、更好的缓存和分块编码。为Web的发展奠定了基础。

1999年5月被更新版替代。2014年5月再次被更新。每次更新，之前的版本就废弃了。HTTP/1.1已经长达305页，100000单词。

HTTP最初是纯文本协议。HTTP消息是明文发送的。可以被任意截获和查看。HTTPS通过使用TLS（Transport Layer Security）协议对传输消息进行加密

HTTP/1.1是纯文协议，解析不便，而且一个连接只能请求一个资源。随着HTTP请求量越来越大，这种低效越来越明显。尽管人们想出各种方案来提升效率，比如静态资源服务器分片、合并请求，但效果有限，而且会带来新问题。

HTTP/2是对谷歌SPDY的标准化。包括多路利用的字节流、请求优化级和HTTP头部压缩。2012年，HTTP Working Group注意到SPDY的成功，提议制定新版本的HTTP。2015年5月，HTTP/2也就是RFC 7450被批准为正式标准：

因为HTTP/2是基于SPDY的，在此之前，很多浏览器其实已经支持HTTP/2（Firefox、Chrome、Opera），2015年年底前所有浏览器都支持HTTP/2（Internet Explorer 11、Edge、Safari）。

目前HTTP/2通信已经占全球43.8%（https://w3techs.com/technologies/details/ce-http2）。

Ecma

Ecma International成立于1961年，C#、Dart语言由该组织标准化。当然，JavaScript也是由Ecma标准化的。TC39负责ECMA-262，即ECMAScript标准的制定。

历史版本：https://www.ecma-international.org/publications/standards/Ecma-262-arch.htm

当前版本：https://www.ecma-international.org/publications/standards/Ecma-262.htm

W3C

W3C，即World Wide Web Consortium（万维网联盟），1994年在美国MIT成立，是Web标准的主要制定者。目前有效的正式推荐标准有近300个（293个）：

概览

  • BOM：BOM（Browser Object Model，浏览器对象模型）HTML5规范中有一部分涵盖了BOM的主要内容，因为W3C希望将JavaScript在浏览器中最基础的部分标准化。
    • window对象，也就是ECMAScript中定义的Global对象。网页中所有全局对象、变量和函数都暴露在这个对象上。
    • location对象，通过location对象可以以编程方式操纵浏览器的导航系统。
    • navigator对象，对象提供关于浏览器的信息。
    • screen对象，保存着客户端显示器的信息。
    • history对象，提供了操纵浏览器历史记录的能力。
  • DOM：DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。DOM表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。脱胎于网景和微软早期的DHTML（Dynamic HTML，动态HTML），DOM现在是真正跨平台、语言无关的表示和操作网页的方式。
  • DOM Level 2和Level 3：DOM1（DOM Level 1）主要定义了HTML和XML文档的底层结构。DOM2（DOM Level 2）和DOM3（DOM Level 3）在这些结构之上加入更多交互能力，提供了更高级的XML特性。实际上，DOM2和DOM3是按照模块化的思路来制定标准的，每个模块之间有一定关联，但分别针对某个DOM子集。这些模式如下所示。
    • DOM Core：在DOM1核心部分的基础上，为节点增加方法和属性。
    • DOM Views：定义基于样式信息的不同视图。
    • DOM Events：定义通过事件实现DOM文档交互。
    • DOM Style：定义以编程方式访问和修改CSS样式的接口。
    • DOM Traversal and Range：新增遍历DOM文档及选择文档内容的接口。
    • DOM HTML：在DOM1 HTML部分的基础上，增加属性、方法和新接口。
    • DOM Mutation Observers：定义基于DOM变化触发回调的接口。这个模块是DOM4级模块，用于取代Mutation Events。
  • 动画与canvas图形：requestAnimationFrame及使用<canvas>绘制2D图形及使用WebGL绘制3D图形。

以下是对与前端开发相关主要W3C Web标准的筛选，包括CSS、DOM、Graphics、HTML、HTTP、Performance、Security和Web API这几个标签。这些只是目前已经成为推荐标准的部分。还有更多处于WD（Working Draft，工作草案）、CR（Candidate Recommandation，候选推荐标准）、PR（Proposed Recommandation，提议推荐标准）状态的标准草稿，比如Web Payment、Web of Things，甚至关于小程序的提案。

CSS

  1. CSS Containment Module Level 1
  2. Selectors Level 3
  3. CSS Fonts Module Level 3
  4. CSS Basic User Interface Module Level 3 (CSS3 UI)
  5. CSS Color Module Level 3
  6. CSS Namespaces Module Level 3
  7. CSS Style Attributes
  8. Selectors API Level 1
  9. Media Queries
  10. A MathML for CSS Profile
  11. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
  12. Associating Style Sheets with XML documents 1.0 (Second Edition)
  13. Document Object Model (DOM) Level 2 Style Specification

DOM

  1. Server-Sent Events
  2. Progress Events
  3. Element Traversal Specification
  4. Document Object Model (DOM) Level 3 Core Specification
  5. Document Object Model (DOM) Level 3 Load and Save Specification
  6. Document Object Model (DOM) Level 3 Validation Specification
  7. XML Events
  8. Document Object Model (DOM) Level 2 HTML Specification
  9. Document Object Model (DOM) Level 2 Style Specification
  10. Document Object Model (DOM) Level 2 Traversal and Range Specification
  11. Document Object Model (DOM) Level 2 Views Specification
  12. Document Object Model (DOM) Level 2 Core Specification
  13. Document Object Model (DOM) Level 2 Events Specification

Graphics

  1. Graphics Accessibility API Mappings
  2. WAI-ARIA Graphics Module
  3. HTML Canvas 2D Context
  4. WebCGM 2.1
  5. Scalable Vector Graphics (SVG) Tiny 1.2 Specification
  6. Portable Network Graphics (PNG) Specification (Second Edition)
  7. Mobile SVG Profiles: SVG Tiny and SVG Basic

HTML

  1. HTML Media Capture
  2. HTML 5.2
  3. HTML 5.1 2nd Edition
  4. Encrypted Media Extensions
  5. Media Source Extensions™
  6. Web Storage (Second Edition)
  7. HTML Canvas 2D Context
  8. XHTML+RDFa 1.1 - Third Edition
  9. RDFa Core 1.1 - Third Edition
  10. RDFa Lite 1.1 - Second Edition
  11. HTML+RDFa 1.1 - Second Edition
  12. HTML5 Image Description Extension (longdesc)
  13. CSS Style Attributes
  14. Internationalization Tag Set (ITS) Version 2.0
  15. Mobile Web Best Practices 1.0
  16. Document Object Model (DOM) Level 2 HTML Specification
  17. Ruby Annotation

HTTP

  1. Server-Sent Events

Performance

  1. Trace Context - Level 1
  2. WebAssembly Core Specification
  3. WebAssembly JavaScript Interface
  4. WebAssembly Web API
  5. High Resolution Time Level 2
  6. User Timing Level 2
  7. Performance Timeline
  8. Page Visibility (Second Edition)
  9. Navigation Timing

Security

  1. Web Authentication:An API for accessing Public Key Credentials Level 1
  2. Web Cryptography API
  3. Content Security Policy Level 2
  4. Subresource Integrity
  5. Cross-Origin Resource Sharing

Web API

  1. WebAssembly JavaScript Interface
  2. High Resolution Time Level 2
  3. Pointer Events
  4. User Timing Level 2
  5. WebDriver
  6. HTML Media Capture
  7. Indexed Database API 2.0
  8. Encrypted Media Extensions
  9. Web Cryptography API
  10. WebIDL Level 1
  11. Media Source Extensions™
  12. Geolocation API Specification 2nd Edition
  13. Pointer Lock
  14. Vibration API (Second Edition)
  15. Web Storage (Second Edition)
  16. Web Notifications
  17. HTML5 Web Messaging
  18. Server-Sent Events
  19. Indexed Database API
  20. Metadata API for Media Resources 1.0
  21. Progress Events
  22. Performance Timeline
  23. Page Visibility (Second Edition)
  24. Touch Events
  25. Selectors API Level 1
  26. Navigation Timing
  27. Element Traversal Specification

WHATWG

WHATWG（Web Hypertext Application Technology Working Group，Web超文本应用技术工作组），致力于“Maintaining and evolving HTML since 2004”（维护和推动HTML发展）。

WHATWG目前与W3C合作制定HTML和DOM标准。

参见“Memorandum of Understanding Between W3C and WHATWG”（W3C与WHATWG谅解备忘录）：https://www.w3.org/2019/04/WHATWG-W3C-MOU.html

除了HTML和DOM标准，WHATWG也在制定其他Web相关标准。

更多背景：请自行在互联网上搜索“HTML5设计原理”。

小结

Web标准主要由W3C（万维网联盟）负责规划和制定，但IETF、Ecma、WHATWG也是Web标准的重要制定者。Web标准的制定总体上是开放性、国际性的，浏览器厂商和其他Web标准实现者拥有较多话语权，但前端开发者也有很多途径参与Web标准的制定。

Web标准不仅是前端开发必须遵循的规范，也是前端行业发展的基石。任何人，只要希望在前端行业有所成就、有所作为，有所创新，有所突破，不断学习、研究、掌握和实践Web标准绝对是不二法门。从这个意义说，Web标准是所有前端开发者的原力所在，对Web标准了解和掌握的程度，决定了每一个前端从业者的命运。

希望每位同学都能认真学习Web标准，在前端开发领域大显身手。

参考资料

  • HTTP/2 in Action（2019，Manning）
  • Professional JavaScript for Web Developers 4th Edition（2019，John Wiley & Sons, Inc.）