最新公告
  • 欢迎您光临起源地模板网，本站秉承服务宗旨 履行“站长”责任，销售只是起点 服务永无止境！立即加入钻石VIP
    • 10年
    专注帝国cms二次开发
    升级SVIP
    站长资源平台
    当前位置：站长学院 > 综合教程 > 前端应该知道的Web标准

    前端应该知道的Web标准

    正文概述 掘金(字节前端)   2021-04-01   744

    作者：李松峰

    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： www.w3.org/Protocols/H…

    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： tools.ietf.org/html/rfc194…

    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/1.1:

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

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

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

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

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

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

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

    目前 HTTP/2 通信已经占全球 43.8%（w3techs.com/technologie…

    Ecma

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

    • 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 页）

    历史版本：www.ecma-international.org/publication…

    当前版本：www.ecma-international.org/publication…

    W3C

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

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

    概览

    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 标准。

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

    • 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/

    小结

    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.）

    起源地下载网 » 前端应该知道的Web标准

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用？
    本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了？
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量，若小于网盘提示的容量则是这个原因。这是浏览器下载的bug，建议用百度网盘软件或迅雷下载。若排除这种情况，可在对应资源底部留言，或 联络我们.。
    找不到素材资源介绍文章里的示例图片？
    对于PPT，KEY，Mockups，APP，网页模版等类型的素材，文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买，且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况，但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发？
    请QQ联系我们
    掘金(字节前端)

    掘金(字节前端) SVIP

    分享到：

    相关推荐

    发表评论

    还没有评论，快来抢沙发吧！

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元