前端面试宝典

### 前端面试宝典知识点详解 #### HTML与CSS基础 1. **方向与文档流执行顺序** `direction` 和 `writing-mode` 是CSS中的两个属性，用于控制文本的方向以及页面元素如何在文档流中排列。`direction` 属性主要控制文本的方向（从左到右或从右到左），而 `writing-mode` 控制文本块的行方向（水平或垂直）。这两种属性可以影响整个页面布局和元素间的排列方式。 2. **浏览器兼容性和内核识别** - **Trident内核**: 主要用于Internet Explorer系列浏览器。 - **Gecko内核**: Firefox浏览器的核心。 - **WebKit内核**: Safari浏览器的基础。 - **Blink内核**: 基于WebKit的子项目，被广泛应用于Google Chrome、Opera等浏览器。此外，许多国产浏览器也采用了Blink内核（例如360浏览器、猎豹浏览器、QQ浏览器、百度浏览器等）。 3. **文档声明的重要性** `<!DOCTYPE>` 声明位于HTML文档的最前面，它告诉浏览器文档使用哪种HTML或XHTML规范。如果文档声明缺失或错误，浏览器可能会进入“怪异模式”，从而导致一系列的CSS兼容性问题。 4. **布局方式的选择** - **div+CSS布局** 的优势在于它实现了结构与样式的分离，提高了代码的语义性，更加符合HTML标准，有利于SEO。在正常情况下，通常推荐使用div+CSS布局。 - **Table布局** 适用于一些特殊情况，例如邮件正文等，因为即使在没有CSS的情况下，也能确保页面布局的基本结构。 5. **HTML元素属性的理解** - `alt` 属性用于替代图像无法加载时的文本描述，对于提高网站的可访问性非常重要。 - `title` 属性提供额外的信息提示，当鼠标悬停在元素上时显示。 - `em` 和 `strong` 分别表示强调和强烈强调，它们在视觉呈现上有所不同（斜体和粗体），但在语义上有明显的区分。 6. **渐进增强与优雅降级的区别** - **渐进增强** 的思路是从最基本的版本开始构建页面，确保核心功能能够在所有浏览器中正常工作，然后逐步添加更多高级特性以提升用户体验。 - **优雅降级** 则是先实现完整功能，再考虑向后兼容的问题，即确保在低版本浏览器中仍能提供基本的浏览体验。两种方法各有侧重，选择哪一种取决于项目的具体需求和目标。 #### 浏览性能优化 7. **多域名存储资源的优势** 使用多个域名来存储网站资源可以带来诸多好处，例如： - **提高CDN缓存效率**：通过分散资源到不同的域名，可以更好地利用CDN缓存机制。 - **突破浏览器并发限制**：大多数浏览器对同一域名的并发连接数量有限制，使用多域名可以增加同时下载的数量。 - **减少Cookie带宽消耗**：避免在非必要的情况下将Cookie发送给每个资源请求。 - **优化页面响应时间**：通过减少主域名的连接数，可以加快页面加载速度。 - **提高安全性**：分隔关键资源可以减少潜在的安全风险。 8. **网页标准与标准制定机构的重要性** 遵循统一的网页标准有助于确保网站的稳定性和兼容性，降低开发成本和维护难度。标准制定机构如W3C等组织通过发布和维护这些标准，为开发者提供了一个共同的语言和框架，从而促进了Web技术的发展和普及。 9. **Cookies、SessionStorage和LocalStorage的对比** - **Cookies**: 存储在客户端的小型文本文件，常用于跟踪用户信息和状态管理。每个Cookie的大小通常不超过4KB，而且每次HTTP请求都会携带对应的Cookie。 - **SessionStorage**: 提供了一种在用户会话期间存储数据的方式。存储的数据只在当前窗口或标签页可用，并在窗口关闭后被清除。 - **LocalStorage**: 为持久化存储提供了更大的容量（通常可达5MB），存储的数据不会随会话结束而消失，除非手动清除。 WebStorage（SessionStorage和LocalStorage）相较于Cookies，提供了更大的存储空间和更灵活的API，适合于存储复杂的数据结构，但需要注意的是，这些数据不会随着HTTP请求自动发送给服务器。 以上是根据《前端面试宝典》中提供的部分知识点的详细解读，希望能帮助大家更好地理解和掌握前端开发的相关知识。