前端十万字八股文面试笔记

其实不是我吹，基本他问得到的，这里都有，引以为豪的面试版本，哈哈哈，面得多了懒了，相同问题都直接一个套路回答~~~ 文档分类，分为 JavaScript / vue / 计算机网络 / 操作系统 / CSS 等基本前端知识。 这篇“前端十万字八股文面试笔记”是一个全面的前端面试指南，涵盖了JavaScript、CSS、计算机网络、操作系统以及Vue等多个核心领域。以下是其中的关键知识点详解： **JavaScript** 1. **DOM事件处理**：`onclick`是内联事件处理，直接在HTML元素上设置，而`addEventListener`是DOM2级事件处理，可以添加多个事件监听器，更灵活。 2. **逻辑运算符**：`&&`用于逻辑与，当两边都为真时结果才为真；`||`用于逻辑或，只要有一边为真，结果就为真。 3. **作用域和作用域链**：JavaScript有全局作用域和局部作用域，作用域链决定了变量的查找顺序。 4. **数据类型**：包括基本类型（如字符串、数字、布尔、null、undefined）和引用类型（如对象）。 5. **判断数据类型的方法**：`typeof`、`instanceof`和`Object.prototype.toString.call()`。 6. **中文长度**：一个中文字符在JavaScript中通常占用两个字节。 7. **NaN属性**：`NaN`代表非数字，它不等于任何值，包括自身。 8. **null和undefined**：`undefined`表示未定义，`null`表示空值，两者是不同的。 9. **undeclared和undefined**：undeclared表示变量未声明，undefined表示变量声明但未赋值。 10. **相等运算符**：`==`和`===`，前者忽略类型比较值，后者既比较值也比类型；`=`是赋值运算符。 11. **浮点数精度问题**：由于二进制浮点数表示方式，有时会出现`0.1 + 0.2 !== 0.3`的情况。 12. **语言类型**：JavaScript是一种动态类型、弱类型的语言。 13. **日期时间转换**：JavaScript提供`Date`对象处理日期和时间，可以进行格式化转换。 14. **函数length属性**：表示函数的参数数量。 15. **事件冒泡**：事件会从最深的节点向上冒泡到最外层节点。 16. **构造函数**：用于创建特定类型对象的函数，通过`new`关键字调用。 17. **原型**：JavaScript中每个对象都有一个`__proto__`属性，指向创建它的函数的原型。 18. **属性类型**：数据属性和访问器属性，分别对应值的存储和获取。 19. **数组方法**：如`push`、`pop`、`shift`、`unshift`、`slice`、`splice`等。 20. **遍历对象的方法**：`for...in`遍历可枚举属性，`Object.keys()`返回所有可枚举属性。 21. **for...in和for...of的区别**：前者遍历对象的属性，后者遍历可迭代对象的元素。 22. **this指向**：取决于函数的调用方式，如方法调用、函数调用、构造函数调用、`call`/`apply`/`bind`。 23. **改变this指向**：`bind`、`call`、`apply`方法可以修改函数执行时的上下文。 24. **闭包**：函数及其相关的变量组合形成的独立作用域。 **ES6** 1. **var、let和const**：var是变量声明，let和const是块级作用域，const不可重新赋值。 2. **暂时性死区**：在let/const声明之前，该区域无法使用这些变量。 3. **const深入**：const变量的值不能改变，但引用类型变量的属性可以修改。 4. **箭头函数**：更简洁的函数表示，`=>`后的`{}`表示函数体，没有自己的`this`。 5. **剩余参数**：`...rest`用于捕获不定数量的参数，`arguments`对象则用于获取所有参数。 6. **解构赋值**：可以对数组和对象进行结构化赋值，方便地提取值。 7. **模板字面量**：使用反引号`表示，支持插值表达式。 8. **symbol类型**：唯一且不可变的数据类型，用于创建独一无二的标识符。 **CSS** 1. **重排和重绘**：重排涉及布局计算，重绘涉及元素视觉更新。 2. **定位**：绝对定位元素相对于最近的非静态定位祖先元素定位，相对定位相对于其正常位置。 3. **浮动和清除浮动**：浮动元素会影响周围元素，`clear:both`可以清除影响。 4. **BFC**：块格式化上下文，用于解决元素塌陷等问题。 5. **伪元素和伪类**：`::before`和`::after`创建元素，`:hover`、`:active`等操作元素状态。 6. **CSS选择器**：包括标签选择器、类选择器、ID选择器、属性选择器等。 7. **选择器优先级**：ID > 类 > 标签 > 通配符 > 内联样式。 8. **display:none与visibility:hidden**：前者元素不占用空间，后者仍保留空间。 9. **隐藏元素方法**：还包括`opacity:0`、`position:absolute;width:0;height:0`等。 10. **id与class**：id是唯一标识，class可以复用。 11. **单位**：px固定，em基于父元素，rem基于根元素，vh/vw基于视口高度/宽度。 12. **小于12px字体**：使用transform缩放、CSS3的`font-size-adjust`或`px-to-em`转换。 13. **居中方法**：如margin负值、`text-align:center`、`flexbox`、`grid`等。 14. **src与href**：src用于加载资源，href用于链接资源。 15. **link与@import**：link是HTML标签，可实现外部资源并行加载；@import是CSS导入，同步加载。 16. **三角形绘制**：利用边框宽度和透明度创建。 17. **初始化CSS**：确保浏览器样式一致性，避免样式冲突。 18. **继承**：某些CSS属性可以从父元素继承到子元素。 19. **百分比margin**：相对于父元素宽度。 20. **margin合并**：垂直方向相邻块级元素的margin会合并。 **计算机网络** 1. **Cookie**：用于存储客户端状态的小型文本文件。 2. **TCP与UDP**：TCP面向连接，可靠，有顺序和错误校验；UDP无连接，快速，但不可靠。 3. **HTTP**：超文本传输协议，用于从Web服务器传输数据到客户端。 4. **HTTP请求头和响应头**：包含请求/响应信息，如方法、URL、状态码、头部字段等。 5. **HTML5新特性**：如离线存储、拖放、canvas、geolocation、web workers等。 6. **三次握手**：建立TCP连接的过程，确保双方都能通信。 7. **GET与POST**：GET用于获取数据，POST用于提交数据，POST安全性较高。 8. **HTML5离线存储**：通过`localStorage`和`sessionStorage`保存用户数据。 9. **同步与异步**：同步阻塞执行，异步非阻塞，常用回调、Promise、async/await处理。 10. **DNS域名查找**：通过递归查询和迭代查询找到IP地址。 **Vue** 1. **Vue优点**：轻量级、组件化、易学易用，MVVM模式简化开发。 2. **MVVM与MVC**：MVVM强调数据驱动，MVC分离视图、模型和控制器。 3. **双向数据绑定**：借助`v-model`实现视图与模型间的实时同步。 4. **生命周期**：包括创建、挂载、更新、销毁等阶段，可通过生命周期钩子函数干预。 5. **ref**：在模板中引用Vue实例的属性，可用于组件通信和操作DOM。 6. **$nextTick**：在下次DOM更新循环结束时执行延迟回调，确保DOM更新。 7. **Vue-Router**：Vue的官方路由库，用于管理页面间导航。 8. **路由拦截**：`beforeEach`和`afterEach`钩子用于路由守卫，进行权限控制、数据预加载等。 9. **路由传参**：通过URL查询参数、命名路由、`props`传递数据。 这些只是前端面试中的一部分关键知识点，全面掌握这些将极大地提升面试者的竞争力。