前端面试深度解析：HTML, CSS, JavaScript 篇

"阿里前端面试第三期.pdf" 这篇面试资料主要涵盖了前端开发中的HTML、CSS和JavaScript三个核心领域的知识要点，旨在帮助面试者准备前端面试。以下是对这些知识点的详细解释： **HTML篇** 1. **link vs @import**：在HTML中，`<link>`用于引入外部样式表，它在页面解析时并行加载，而`@import`是在CSS内部使用的，它会阻塞页面的渲染，直到所有样式表加载完成。 2. **常见浏览器内核**：主要有Trident（IE）、Gecko（Firefox）、Webkit（Safari, Chrome）和Blink（Chrome, Opera）等。 3. **浏览器渲染原理**：大致包括解析HTML构建DOM树、解析CSS构建CSSOM树、合并成渲染树、布局（Layout）和绘制（Painting）等步骤。 4. **HTML5 form的自动完成功能**：允许表单字段使用autocomplete属性来开启或关闭浏览器的自动填充功能。 5. **标签页间通信**：可以通过HTML5的`window.postMessage` API或者WebSocket、Local Storage、Session Storage等实现。 **CSS篇** 1. **BFC（块格式化上下文）**：是CSS布局的一个概念，用来规定元素如何对其子元素进行布局，如浮动元素、绝对定位元素、`display: inline-block`、`overflow: auto|hidden`等都会创建BFC。 2. **水平垂直居中**：可以使用Flexbox或Grid布局，也可以通过绝对定位、transform等传统方法实现。 3. **重绘与回流**：重绘是只更新视觉样式不改变布局，回流则是元素尺寸或位置变化导致整个或部分渲染树重新布局，两者都会消耗性能，应尽量避免不必要的触发。 4. **opacity、visibility:hidden、display:none**：opacity改变透明度但保留占据空间，visibility:hidden隐藏元素但保留空间，display:none完全移除元素及占用空间，不同场景选择合适的方案。 5. **CSS盒模型**：包括content、padding、border和margin四部分，有W3C标准盒模型和IE盒模型之分。 6. **Rem单位**：root em，基于根元素（html）的字体大小的相对单位，常用于响应式设计。 7. **移动端视口配置**：如设置meta标签`<meta name="viewport" content="width=device-width, initial-scale=1">`来适配不同设备。 8. **伪类与伪元素**：伪类如`:hover`、`:active`等改变元素状态，伪元素如`::before`、`::after`用于添加额外内容。 9. **行内元素的margin和padding**：对行内元素设置margin和padding可能不会像对块级元素那样立即生效，因行内元素默认不占据完整行宽。 10. **可继承属性**：如color、font-size等，一些样式可以被子元素继承，而如display、position等则不能。 **JavaScript篇** 1. **Vue响应式原理**：基于`Object.defineProperty`实现数据监听，Vue3.0采用Proxy提供了更强大的数据监听能力。 2. **列表组件中的key**：用于标识列表项，提高DOM操作效率，方便虚拟DOM匹配和更新。 3. **['1','2','3'].map(parseInt)**：结果是[1, NaN, NaN]，因为parseInt没有指定第二个参数，所以解析时默认为整数，'2'和'3'无法解析为整数。 4. **防抖与节流**：防抖是限制事件处理函数在一定时间内执行，如输入框输入时只在停止输入后一段时间内执行；节流则是确保函数在一定频率内执行，如滚动事件中每隔固定时间执行一次。 5. **Set、Map、WeakSet和WeakMap**：Set和Map是存储唯一值的数据结构，WeakSet和WeakMap则弱引用，对象被垃圾回收时，它们的键也会自动删除。 6. **ES5/ES6继承的区别**：ES5使用原型链继承，ES6引入了class和extends，更符合面向对象编程思想，且具有更好的语法糖。 7. **setTimeout、Promise、Async/Await**：setTimeout是定时器，Promise处理异步，Async/Await是Promise的语法糖，提供同步代码的阅读体验。 8. **Async/Await同步实现异步**：通过生成器（Generator）和异步操作的配合，可以模拟同步代码执行，实际上仍是异步。 9. **Generator函数**：是ES6引入的迭代器生成器，可以暂停执行和恢复，用于处理异步操作。 10. **JS异步发展历程**：从回调函数、Promise到async/await，解决了回调地狱和错误处理等问题，但各有优缺点，如回调难以管理，Promise链式调用，async/await易读性好但仍有异步本质。 **其他** 1. **Vuex的mutation和Redux的reduce**：都是状态管理库中的核心概念，mutation是Vue中修改状态的唯一途径，reduce是Redux中处理状态变化的函数，二者都要求状态变化可预测。 这份面试资料详细梳理了前端开发中的关键概念和技术，对于提升面试者的技术深度和广度非常有帮助。