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

主讲人

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

web标准概述
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

CSS Containment Module Level 1
Selectors Level 3
CSS Fonts Module Level 3
CSS Basic User Interface Module Level 3 (CSS3 UI)
CSS Color Module Level 3
CSS Namespaces Module Level 3
CSS Style Attributes
Selectors API Level 1
Media Queries
A MathML for CSS Profile
Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification
Associating Style Sheets with XML documents 1.0 (Second Edition)
Document Object Model (DOM) Level 2 Style Specification

DOM

Server-Sent Events
Progress Events
Element Traversal Specification
Document Object Model (DOM) Level 3 Core Specification
Document Object Model (DOM) Level 3 Load and Save Specification
Document Object Model (DOM) Level 3 Validation Specification
XML Events
Document Object Model (DOM) Level 2 HTML Specification
Document Object Model (DOM) Level 2 Style Specification
Document Object Model (DOM) Level 2 Traversal and Range Specification
Document Object Model (DOM) Level 2 Views Specification
Document Object Model (DOM) Level 2 Core Specification
Document Object Model (DOM) Level 2 Events Specification

Graphics

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

HTML

HTML Media Capture
HTML 5.2
HTML 5.1 2nd Edition
Encrypted Media Extensions
Media Source Extensions™
Web Storage (Second Edition)
HTML Canvas 2D Context
XHTML+RDFa 1.1 - Third Edition
RDFa Core 1.1 - Third Edition
RDFa Lite 1.1 - Second Edition
HTML+RDFa 1.1 - Second Edition
HTML5 Image Description Extension (longdesc)
CSS Style Attributes
Internationalization Tag Set (ITS) Version 2.0
Mobile Web Best Practices 1.0
Document Object Model (DOM) Level 2 HTML Specification
Ruby Annotation

HTTP

Server-Sent Events

Performance

Trace Context - Level 1
WebAssembly Core Specification
WebAssembly JavaScript Interface
WebAssembly Web API
High Resolution Time Level 2
User Timing Level 2
Performance Timeline
Page Visibility (Second Edition)
Navigation Timing

Security

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

Web API

WebAssembly JavaScript Interface
High Resolution Time Level 2
Pointer Events
User Timing Level 2
WebDriver
HTML Media Capture
Indexed Database API 2.0
Encrypted Media Extensions
Web Cryptography API
WebIDL Level 1
Media Source Extensions™
Geolocation API Specification 2nd Edition
Pointer Lock
Vibration API (Second Edition)
Web Storage (Second Edition)
Web Notifications
HTML5 Web Messaging
Server-Sent Events
Indexed Database API
Metadata API for Media Resources 1.0
Progress Events
Performance Timeline
Page Visibility (Second Edition)
Touch Events
Selectors API Level 1
Navigation Timing
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规划和制定