Author: Li Songfeng

Web standards is a collection of standards that form the foundation, operation, and evolution of the Web. If the front end developer is the Monkey King, then Web standards are the palm of the Buddha. It’s no exaggeration to say that for front-end practitioners, Web standards mean power, represent stage, represent space, and guide development.

Web standards are not developed by a standards organization, including IETF, Ecma, W3C, and WHATWG. This article describes Web standards by Web standards organizations, and provides guidance for learning Web standards in the front end.

IETF

The Internet Engineering Task Force (IETF) was established in 1986. The Internet name TCP/IP protocol is standardized by the IETF.

In 1991, Web inventor Tim Berners-Lee summarized the HTTP protocol implemented in his Web server and browser, known as HTTP 0.9:

HTTP / 0.9: www.w3.org/Protocols/H…

HTTP 0.9 is less than 700 words long and defines the simplest protocol for a browser to communicate with a server to get an HTML page. This protocol only defines GET requests.

With the rapid popularity of the Web, many Web servers have added extensions to version 0.9. To keep these extensions on record, the IETF set up the HTTP Working Group (HTTP WG) to work out HTTP/1.0. In May 1996, the IETF published an RFC (Request for Comments, Draft) : RFC 1945. The RFC of the IETF can be accepted as an official standard or as a reference document. RFC 1945 is a reference document (i.e. HTTP/1.0) :

HTTP / 1.0: tools.ietf.org/html/rfc194…

HTTP/1.0 added the HEAD and POST methods. Added optional HTTP version number. Added HTTP header field to describe request and response. Added a 3-digit response code (1xx reserved, 2XX successful, 3xx redirection, 4XX client error, 5XX server error). HTTP/1.0 has reached 20,000 words.

Just nine months later, IN January 1997, HTTP/1.1 was released. HTTP/1.1 is also largely an improvement over HTTP/1.0, with the addition of persistent connections, mandatory server headers, better caching, and block encoding. Laid the foundation for the development of the Web.

It was replaced by an updated version in May 1999. It was updated again in May 2014. With each update, the previous version is deprecated. HTTP/1.1 is already 305 pages and 100,000 words long.

HTTP / 1.1:

  • Tools.ietf.org/html/rfc206…
  • Tools.ietf.org/html/rfc261…
  • Tools.ietf.org/html/rfc723…
  • Tools.ietf.org/html/rfc723…

HTTP was originally a plain text protocol. HTTP messages are sent in plain text. Can be intercepted and viewed arbitrarily. HTTPS encrypts transmitted messages using the Transport Layer Security (TLS) protocol

The Transport Layer Security (TLS) Protocol Version 1.3: tools.ietf.org/html/rfc844…

HTTP/1.1 is a text-only protocol, parsing is difficult, and only one resource can be requested per connection. As the volume of HTTP requests increases, this inefficiency becomes more apparent. Although various schemes have been devised to improve efficiency, such as static resource server sharding and merging requests, they have limited effectiveness and create new problems.

HTTP/2 is the standardization of Google SPDY. These include byte streams for multiplex utilization, request optimization levels, and HTTP header compression. In 2012, the HTTP Working Group took note of SPDY’s success and proposed a new version of HTTP. In May 2015, HTTP/2, also known as RFC 7450, was approved as an official standard:

HTTP / 2: tools.ietf.org/html/rfc754…

Since HTTP/2 is based on SPDY, many browsers already support HTTP/2 (Firefox, Chrome, Opera). All browsers will support HTTP/2 (Internet Explorer 11, Edge, Safari) by the end of 2015.

Currently, HTTP/2 communication accounts for 43.8% of the world (w3techs.com/technologie…

Ecma

Ecma International was founded in 1961 and standardized the C# and Dart languages. Of course, JavaScript is also standardized by Ecma. TC39 was responsible for the development of THE ECMA-262, or ECMAScript standard.

  • June 1997: ECMA-262 1st Edition (110 pages)
  • August 1998: ECMA-262 2nd Edition
  • December 1999: ECMA-262 3rd Edition
  • Ecma-262 4th Edition: Non-existent
  • December 2009: ECMA-262 5th Edition
  • June 2011: ECMA-262 5.1 Edition
  • 2015 年 6 月 : ECMA-262 6th Edition (666 页)
  • June 2016: ECMA-262 7th Edition (556 pages)
  • June 2017: ECMA-262 8th Edition (885 pages)
  • Ecma-262 9th Edition 2018 年 6 月 : ECMA-262 9th Edition
  • June 2019: ECMA-262.pdf (764 pages)

History version: www.ecma-international.org/publication…

The current version: www.ecma-international.org/publication…

W3C

W3C, or World Wide Web Consortium, was founded in 1994 at MIT in the United States. It is the main maker of Web standards. There are currently nearly 300 (293) formal recommendations in force:

The Latest Recommendation: www.w3.org/TR/?status=…

An overview of

A section of the HTML5 specification covers the BOM because the W3C wants to standardize the most basic parts of JavaScript in the Browser.

  • The window object is the Global object defined in ECMAScript. All global objects, variables, and functions in the web page are exposed on this object.
  • Location object, passlocationObject to programmatically manipulate the browser’s navigation system.
  • Navigator object, which provides information about the browser.
  • Screen object that holds information about the client’s display.
  • The History object, which provides the ability to manipulate the browser history.

DOM: The DOM (Document Object Model) is a programming interface for HTML and XML documents. DOM represents a document composed of multiple layers of nodes through which developers can add, delete, and modify sections of a page. Born out of Netscape and Microsoft’s early DHTML (Dynamic HTML), DOM is now a truly cross-platform, language-independent way to represent and manipulate web pages.

DOM: Level 2 and Level 3: DOM1 (DOM Level 1) mainly defines the underlying structure of HTML and XML documents. DOM2 (DOM Level 2) and DOM3 (DOM Level 3) add more interaction capabilities to these structures, providing more advanced XML features. In fact, DOM2 and DOM3 are standardized along modularized lines, with each module related to each other, but for a subset of the DOM. These patterns are shown below.

  • DOM Core: Adds methods and attributes to nodes based on DOM1 Core.
  • DOM Views: Defines different Views based on style information.
  • DOM Events: Defines Events for DOM document interaction.
  • DOM Style: Defines an interface for programmatically accessing and modifying CSS styles.
  • DOM Traversal and Range: new Traversal and Traversal of a DOM document.
  • DOM HTML: Adds attributes, methods, and a new interface to the HTML section of DOM1.
  • DOM Mutation Observers: Define an interface for triggering callbacks based on DOM changes. This module is a DOM4 level module and is used to replace Mutation Events.

Animation and Canvas graphics: requestAnimationFrame and drawing 2D graphics using < Canvas > and drawing 3D graphics using WebGL.

The following is a filter of the major W3C Web standards related to front-end development, including the tags CSS, DOM, Graphics, HTML, HTTP, Performance, Security, and Web API. These are just some of the recommendations that have now been made. There are more standard drafts in WD (Working Draft), CR (Candidate Recommandation), PR (Proposed Recommandation) status. Web Payments, Web of Things, even proposals for small programs.

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), Dedicated to “Maintaining and evolving HTML since 2004”

The WHATWG is currently working with the W3C to develop HTML and DOM standards.

See Memorandum of Understanding Between W3C and WHATWG: www.w3.org/2019/04/WHA…

In addition to HTML and DOM standards, WHATWG is also developing other Web-related standards.

  • HTML Living Standard：html.spec.whatwg.org/multipage/
  • DOM Living Standard：dom.spec.whatwg.org/
  • Encoding Living Standard：encoding.spec.whatwg.org/
  • Fetch Living Standard：fetch.spec.whatwg.org/
  • Stream Living Standard：streams.spec.whatwg.org/
  • Console Living Standard：console.spec.whatwg.org/

More background: Search the Internet for “PRINCIPLES of HTML5 Design.”

summary

Web standards are mainly planned and formulated by W3C (World Wide Web Consortium), but IETF, Ecma and WHATWG are also important framers of Web standards. The development of Web standards is generally open and international. Browser manufacturers and other Web standards implementers have more say, but front-end developers also have many ways to participate in the development of Web standards.

Web standards are not only the specifications that front-end development must follow, but also the cornerstone of the development of the front-end industry. Learning, researching, mastering and practicing Web standards is the only way for anyone who wants to make a difference in the front-end industry. In this sense, Web standards are the force of all front-end developers, and the level of knowledge and mastery of Web standards determines the fate of every front-end practitioner.

I hope every student can study Web standards seriously and show their talents in the front end development field.

The resources

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