HTML面试知识点精讲：标准模式、HTML5与DTD、浏览器内核解析

"阿里前端第一期1"的课程内容主要涵盖了HTML相关的面试知识点，包括HTML的基础概念、语法特性、元素类型、浏览器的工作原理以及前端性能优化等方面。以下是这些知识点的详细说明： 1. **DOCTYPE的作用**：DOCTYPE声明是告诉浏览器文档使用的HTML版本，它有助于浏览器以正确的标准模式或兼容模式渲染页面。 2. **标准模式与兼容模式的区别**：标准模式遵循W3C标准，元素布局和渲染严格；兼容模式（也称quirks mode）是为兼容旧版浏览器，可能呈现非标准行为。 3. **HTML5只需<!DOCTYPEHTML>**：HTML5不再需要引用DTD（文档类型定义），因为它基于XML的简单语法，并且默认使用标准模式。 4. **SGML、HTML、XML和XHTML的区别**： - SGML是标准通用标记语言，是HTML和XML的父辈。 - HTML是用于创建网页的标记语言，基于SGML。 - XML是可扩展标记语言，强调数据结构和语义，而非显示。 - XHTML是HTML与XML的结合，具有更严格的语法。 5. **行内元素与块级元素**：行内元素如`<span>`在一行内显示，不独占一行；块级元素如`<div>`会占据整行，可以包含其他元素。 6. **DTD介绍**：DTD（文档类型定义）是定义XML或HTML文档结构的规则集，用于验证文档是否符合规范。 7. **HTML5元素分类**：HTML5元素分为行内元素、块级元素、行内块级元素等，还有一些新的语义化元素，如<header>、<nav>、<section>等。 8. **空元素定义**：如`<br>`、`<img>`等，它们没有闭合标签。 9. **link标签定义**：用于引入外部CSS样式表，还可以用于定义关系，如`rel="stylesheet"`表示引入样式表，`rel="alternate"`表示替代内容。 10. **link和@import的区别**：link是HTML标签，直接在HTML文档中引入样式；@import是CSS语法，在CSS内部引入样式，@import需放在所有其他样式规则之后，且在某些情况下支持性不同。 11. **浏览器理解**：浏览器是用户与互联网内容交互的软件，负责解析HTML、CSS和JavaScript，渲染网页并执行交互。 12. **浏览器内核**：内核是处理渲染和解析任务的核心组件，常见的有WebKit（Safari、Chrome）、Gecko（Firefox）、Trident（IE/Edge）和Blink（Chrome、Opera）。 13. **浏览器渲染原理**：浏览器首先解析HTML构建DOM树，接着解析CSS构建CSSOM树，合并成渲染树，然后布局和绘制页面。 14. **JS文件处理**：浏览器在解析到JS文件时会暂停HTML解析，等待脚本执行完毕再继续。 15. **async和defer**：两者都是延迟加载脚本，async不保证执行顺序，defer保证按脚本在文档中的顺序执行。 16. **预解析**：浏览器会提前读取部分HTML，解析链接的资源，以提高加载速度。 17. **CSS阻塞解析**：未加载完成的外部CSS会阻塞DOM解析，直到CSSOM树构建完成。 18. **渲染不良现象**：如闪烁、重排、重绘等，会影响用户体验。 19. **关键渲染路径优化**：通过减少HTTP请求、压缩资源、使用异步加载等方式，确保页面尽快呈现主要内容。 20. **重绘与回流**：重绘是元素外观改变但不影响布局，回流是元素尺寸或位置改变，导致周围元素重新布局。 21. **减少回流**：避免修改影响布局的属性，使用CSS3动画和变换，或者使用CSS伪类来减少DOM操作。 22. **DOM操作慢的原因**：DOM操作涉及内存和CPU资源，频繁操作会导致浏览器性能下降。 23. **DOMContentLoaded和Load事件**：DOMContentLoaded在DOM树加载完成后触发，Load则在所有资源加载完毕后触发。 24. **HTML5新特性**：包括离线存储、拖放、canvas、svg、geolocation、web workers等，移除了如frame、font等过时元素。 25. **HTML5兼容问题**：可以通过Modernizr库检测浏览器支持，或者使用polyfill提供老浏览器的兼容性。 26. **HTML语义化**：使用恰当的标签描述内容，提高可读性和辅助技术的兼容性。 27. **b与strong、i与em的区别**：b和i只是视觉强调，strong和em强调语义，如strong表示重要性，em表示强调。 28. **前端SEO**：包括关键词优化、元标签使用、URL结构、页面速度优化等，以提高搜索引擎排名。 29. **HTML5离线储存**：通过manifest文件，将部分资源缓存本地，离线时仍可访问。 30. **离线储存管理与加载**：浏览器根据manifest文件缓存指定资源，更新时检查版本，更新缓存。 31. **浏览器存储技术**：包括Cookie、localStorage、sessionStorage，分别用于不同场景的数据存储。 32. **cookies、sessionStorage和localStorage的区别**： - Cookie：大小限制4KB，每次请求都会发送，适用于小量数据，跨域共享。 - sessionStorage：关闭页面后清除，同源策略，用于临时存储页面数据。 - localStorage：长期存储，关闭浏览器后依然保留，同源策略，适合大量数据存储。 33. **iframe缺点**：增加页面加载时间，可能导致SEO问题，可能引发安全问题。 34. **Label作用**：Label用于绑定输入控件，点击label会触发关联控件的焦点或行为。 35. **HTML5 form的自动完成功能**：允许浏览器记住表单数据，提供填写建议，提高用户体验。 以上知识点是前端开发者必备的基础，理解和掌握这些内容对于编写高效、可维护的网页至关重要。