前端大厂面试题精华：HTML, CSS, JavaScript与优化策略

"前端大厂面试题汇总(1)(1).pdf" 这是一份针对前端开发者准备的面试题集，涵盖了HTML和CSS的基础知识及高级应用。以下是其中部分重点问题的详细解答： 1. **浏览器内核**：常见的浏览器内核有 Trident（IE）、Gecko（Firefox）、Blink（Chrome 和 Opera）以及 WebKit（Safari）。 2. **DOCTYPE**：DOCTYPE 声明告知浏览器文档应遵循的HTML或XHTML规范版本，以便正确解析和渲染页面。 3. **Quirks模式**：在Quirks模式下，浏览器按照早期的标准或者非标准方式进行渲染，以兼容旧的网页。而Standards模式则是遵循现代Web标准进行渲染，更注重网页的标准化。 4. **Div+CSS布局优点**：相比于Table布局，Div+CSS更有利于SEO，代码简洁，易于维护，页面加载速度快，且具有更好的响应式设计能力。 5. **img的alt与title**：alt属性提供图片无法显示时的替代文本，对SEO友好；title属性是鼠标悬停时显示的提示信息。 6. **渐进增强与优雅降级**：渐进增强是从基础功能开始，逐步添加复杂性，确保所有用户能访问核心内容；优雅降级则是先创建高级功能，然后针对不支持的浏览器提供备选方案，保证老用户也能获得基本功能。 7. **多域名存储资源**：可以分散请求，减少单个域名的并发限制，提高页面加载速度，同时利于CDN分发，降低服务器压力。 8. **网页标准与制定机构**：W3C等机构制定的网页标准旨在促进互操作性，确保不同浏览器和设备间的一致性，提高用户体验和网页质量。 9. **cookies，sessionStorage和localStorage的区别**：cookies是客户端与服务器间交互的数据，大小有限，每次请求都会发送；sessionStorage仅在当前会话中有效，关闭窗口后数据消失；localStorage长期存储，但仅限于同源策略。 10. **src与href**：src用于引入外部资源，如图片、脚本或框架；href主要用于链接到其他页面或资源。 11. **图片格式**：常见格式有JPEG、PNG、GIF、SVG等，各有适用场景，例如JPEG适用于照片，PNG适合透明背景，SVG则用于矢量图形。 12. **微格式**：微格式是一种在HTML中嵌入结构化数据的方法，让机器也能理解网页内容，有助于搜索引擎抓取和增强可访问性。 13. **缓存处理**：HTTP缓存包括浏览器缓存、代理服务器缓存等，通过Cache-Control、ETag等头部字段控制缓存策略。 14. **图片优化**：可以通过压缩图片、使用懒加载、CSS精灵、WebP格式等方式提高加载速度。 15. **HTML语义化**：使用正确的HTML元素表示内容结构，有助于屏幕阅读器、搜索引擎理解网页，同时提升无障碍访问。 16. **前端SEO**：需考虑关键词优化、元标签使用、URL结构、图片Alt标签、避免JavaScript渲染关键内容等。 17. **DOM样式设置**：可以通过内联样式、内部样式表、外部样式表、JavaScript操作DOM.style属性或CSSOM来设置样式。 18. **CSS选择器**：包括标签选择器、类选择器、ID选择器、属性选择器、伪类和伪元素等。 19. **隐藏DOM元素**：display:none、visibility:hidden、CSS定位负值等方法可以使元素不可见。 20. **超链接hover问题**：已访问链接可能不会显示hover样式，可通过CSS重置或JavaScript解决。 21. **CssHack**：针对特定浏览器的CSS样式修复，如_内联hack、*前缀hack等。 22. **幻灯片效果**：通常使用CSS动画、JavaScript库（如jQuery Slider）实现，涉及过渡效果、定时器和事件监听。 23. **行内元素与块级元素**：行内元素不占据整行，如span；块级元素独占一行，如div。行内元素的padding和margin在某些浏览器中可能有限制，但可通过display属性转换为块级元素来设置。 24. **外边距重叠**：相邻的垂直外边距会合并，导致重叠效果，可通过清除浮动、设置边框或使用clearfix类解决。 25. **rgba()与opacity**：rgba()允许设置透明度，不影响子元素；opacity会影响整个元素及其所有子元素。 26. **垂直居中浮动元素**：可以使用负margin、绝对定位、Flexbox或Grid布局实现。 27. **px与em**：px是固定单位，em是相对单位，基于父元素字体大小。 28. **CSS reset文件**：用于消除浏览器默认样式差异，使各浏览器呈现一致效果，如Eric Meyer Reset或 Normalize.css，引入后全局应用。 以上只是部分内容，完整的面试题集将涵盖更多前端技术，包括JavaScript、DOM操作、网络协议、性能优化等。对于准备面试的前端开发者来说，深入理解和掌握这些知识至关重要。