第六届360前端星计划_web标准：前端的原力

主讲人

• 李松风
• 360前端技术专家
• 奇舞团
  主要内容：

1. web标准概述
2. web标准介绍

web标准概述

• Web是World Wide Web（万维网）的简称。World Wide Web由Tim Berners-Lee在1989年发明。

• Web标准是构成Web基础、运行和发展的一系列标准的总称。

  Web标准并不是由一家标准组织制定。

Web标准介绍

http发展：

IETF Internet Enginering Task ForceIT 成立(于1986年)tcp/ip 协议由其标准化

当时三个主要技术之一http ，1989年发明web的时候创立的,另外是html，url主要技术

• HTTP/0.9：https://www.w3.org/Protocols/HTTP/AsImplemented.html

  tim总结自己实现浏览器和服务器协议的一份文档，只定义了一个get方法

  是一个文档并不是标准

• HTTP/1.0：https://tools.ietf.org/html/rfc1945 1996提出，新增 head post 方法，http版本号，头部字段描述和相应，3位数相应码

  rfc可以作为标准或文档而 rfc1945是参考文档不是标准，记录了一下当时的实现

• 1997 年 1月HTTP/1.1：

  999年 2004年分别更新

*   [https://tools.ietf.org/html/rfc2068](https://tools.ietf.org/html/rfc2068)

*   [https://tools.ietf.org/html/rfc2616](https://tools.ietf.org/html/rfc2616)

*   [https://tools.ietf.org/html/rfc7230](https://tools.ietf.org/html/rfc7230) ... [https://tools.ietf.org/html/rfc7235](https://tools.ietf.org/html/rfc7235)

• The Transport Layer Security (TLS) Protocol Version 1.3

  http明文传输，IETF增加了TLS 进行加密

  • https://tools.ietf.org/html/rfc8446

• HTTP/2：https://tools.ietf.org/html/rfc7540

  http请求量增大不能满足需求，其他方法有限

  对谷歌SPDY标准化

  2012年提出，2015年5正式成为标准 所有主流浏览器已经支持

ecma ecmaInternationnal

内容 c#、dark

• 1997年6月：ECMA-262 1st edition（110页）

• 1998年8月：ECMA-262 2nd edition

• 1999年12月：ECMA-262 3rd edition

• ECMA-262 4th edition：不存在

• 2009年12月：ECMA-262 5th edition（252页）

• 2011年6月：ECMA-262 5.1 edition

• 2015年6月：ECMA-262 6th edition（566页）

• 2016年6月：ECMA-262 7th edition（556页）

• 2017年6月：ECMA-262 8th edition（885页）

• 2018年6月：ECMA-262 9th edition（805页）

• 2019年6月：ECMA-262.pdf（764页）

所有版本存档：

https://www.ecma-international.org/

publications/

standards/

Ecma-262-arch.htm

w3c web标准主要定制者

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

BOM 浏览器对象模型

BOM（Browser Object Model，浏览器对象模型）HTML5规范中有一部分涵盖了BOM的主要内容，因为W3C希望将JavaScript在浏览器中最基础的部分标准化。

• window对象，也就是ECMAScript中定义的Global对象。网页中所有全局对象、变量和函数都暴露在这个对象上。

• location对象，通过location对象可以以编程方式操纵浏览器的导航系统。

• navigator对象，对象提供关于浏览器的信息。

• screen对象，保存着客户端显示器的信息。

• history对象，提供了操纵浏览器历史记录的能力。

DOM（Document Object Model，文档对象模型）是HTML和XML文档的编程接口。DOM表示由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。DOM现在是真正跨平台、语言无关的表示和操作网页的方式。

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。

whatwg标准 和w3c并行开发

• HTML Living Standard：https://html.spec.whatwg.org/multipage/

• DOM Living Standard：https://dom.spec.whatwg.org/

• Encoding Living Standard：https://encoding.spec.whatwg.org/

• Fetch Living Standard：https://fetch.spec.whatwg.org/

• Stream Living Standard：https://streams.spec.whatwg.org/

• Console Living Standard：https://console.spec.whatwg.org/

和w3c签署的协议，whatwg 开发，w3c联系社区主要是html和dom，将whatwg 作为候选标准

Memorandum of Understanding Between W3C and WHATWG

着手其他标准，living standard（string，fetch，console等）

总的来说主要由w3c规划和制定