在前端面试中，面试官经常会考察一些基础知识和常见问题，这些问题虽然看似简单，但却是衡量候选人基本功的重要标准。以下是一些常见的“八股文”问题及其解答，供大家参考。
添加图片注释，不超过 140 字（可选）
如果需要面经八股文的话可以小伙伴可以直接github.com/encode-stud…
1. HTML 相关
1.1 HTML5 新特性有哪些？
- 语义化标签：如 、、、 等。
- 表单增强：新增了 email、url、date 等输入类型，以及 placeholder、required 等属性。
- 多媒体支持： 和 标签。
- 本地存储：localStorage 和 sessionStorage。
- Canvas 和 SVG：用于绘制图形和动画。
- Web Workers：允许在后台运行 JavaScript，不阻塞主线程。
- Geolocation API：获取用户地理位置。
1.2 什么是语义化标签？为什么要使用语义化标签？
- 语义化标签：指使用具有明确含义的 HTML 标签来描述页面结构，如 、、 等。
- 优点：
- 提高代码可读性，便于维护。
- 有利于 SEO，搜索引擎更容易理解页面内容。
- 提升无障碍访问体验，屏幕阅读器可以更好地解析页面。
2. CSS 相关
2.1 盒模型是什么？标准盒模型和 IE 盒模型的区别？
- 盒模型：每个 HTML 元素都可以看作一个盒子，包括内容（content）、内边距（padding）、边框（border）、外边距（margin）。
- 标准盒模型：width 和 height 只包括内容区域。
- IE 盒模型：width 和 height 包括内容、内边距和边框。
- 可以通过 box-sizing 属性切换：
- box-sizing: content-box;（标准盒模型）
- box-sizing: border-box;（IE 盒模型）
2.2 BFC 是什么？如何触发 BFC？
- BFC（块级格式化上下文）：是页面上的一个独立渲染区域，内部元素的布局不会影响外部元素。
- 触发条件：
- float 不为 none。
- position 为 absolute 或 fixed。
- display 为 inline-block、table-cell、flex 等。
- overflow 不为 visible。
- 作用：
- 防止外边距重叠。
- 清除浮动。
- 阻止元素被浮动元素覆盖。
2.3 Flexbox 布局有哪些常用属性？
- 容器属性：
- display: flex;：定义 Flex 容器。
- flex-direction：主轴方向（row、column 等）。
- justify-content：主轴对齐方式（flex-start、center、space-between 等）。
- align-items：交叉轴对齐方式（flex-start、center、stretch 等）。
- flex-wrap：是否换行（nowrap、wrap 等）。
- 子项属性：
- flex-grow：定义子项的放大比例。
- flex-shrink：定义子项的缩小比例。
- flex-basis：定义子项的基础大小。
- align-self：单独设置子项的对齐方式。
添加图片注释，不超过 140 字（可选）
如果需要面经八股文的话可以小伙伴可以直接github.com/encode-stud…
3. JavaScript 相关
3.1 什么是闭包？闭包有什么作用？
- 闭包：函数和其词法环境的组合，内部函数可以访问外部函数的变量。
- 作用：
- 创建私有变量，避免全局污染。
- 实现函数柯里化。
- 延迟执行（如定时器、事件监听器）。
- 缺点：可能导致内存泄漏，因为闭包会保留对外部函数变量的引用。
3.2 什么是原型链？如何实现继承？
- 原型链：每个对象都有一个 proto 属性，指向其构造函数的 prototype 对象，通过原型链可以实现属性和方法的继承。
- 实现继承的方式：
- 原型链继承：Child.prototype = new Parent();
- 构造函数继承：在子类构造函数中调用父类构造函数 Parent.call(this);
- 组合继承：结合原型链和构造函数继承。
- ES6 类继承：使用 class 和 extends 关键字。
3.3 什么是事件循环（Event Loop）？
- 事件循环：JavaScript 是单线程的，事件循环机制用于处理异步任务。
- 过程：
- 同步任务在主线程中执行。
- 异步任务（如 setTimeout、Promise）会被放入任务队列。
- 主线程执行完毕后，事件循环会从任务队列中取出任务执行。
- 宏任务和微任务：
- 宏任务：setTimeout、setInterval、I/O 操作等。
- 微任务：Promise.then、MutationObserver 等。
- 微任务优先于宏任务执行。
4. 浏览器相关
4.1 浏览器渲染页面的过程是什么？
- 步骤：
- 解析 HTML：生成 DOM 树。
- 解析 CSS：生成 CSSOM 树。
- 合并 DOM 和 CSSOM：生成渲染树（Render Tree）。
- 布局（Layout）：计算每个节点的位置和大小。
- 绘制（Paint）：将渲染树绘制到屏幕上。
- 合成（Composite）：将多个图层合并显示。
- 重排（Reflow）和重绘（Repaint）：
- 重排：布局改变，需要重新计算。
- 重绘：样式改变，不需要重新计算布局。
4.2 如何优化页面性能？
- 减少 HTTP 请求：合并文件、使用雪碧图。
- 使用 CDN：加速静态资源加载。
- 压缩资源：如 CSS、JavaScript、图片。
- 懒加载：延迟加载非首屏资源。
- 减少重排和重绘：避免频繁操作 DOM。
- 使用 Web Workers：将耗时任务放到后台线程。
- 启用缓存：合理使用 localStorage、sessionStorage 和 HTTP 缓存。
5. 框架相关
5.1 React 和 Vue 的区别？
- React：
- 使用 JSX 语法，更灵活。
- 单向数据流，状态管理依赖外部库（如 Redux）。
- 函数式编程思想，强调不可变数据。
- Vue：
- 使用模板语法，更易上手。
- 双向数据绑定，内置状态管理（Vuex）。
- 响应式数据，基于 Object.defineProperty 或 Proxy。
5.2 Vue 的响应式原理是什么？
- Vue 2.x：使用 Object.defineProperty 劫持对象的属性，通过 getter 和 setter 实现数据的响应式。
- Vue 3.x：使用 Proxy 代理对象，可以监听整个对象的变化，性能更好。
5.3 React 的生命周期有哪些？
- 挂载阶段：
- constructor
- static getDerivedStateFromProps
- render
- componentDidMount
- 更新阶段：
- static getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
- 卸载阶段：
- componentWillUnmount
6. 网络相关
6.1 HTTP 和 HTTPS 的区别？
- HTTP：明文传输，不安全。
- HTTPS：通过 SSL/TLS 加密传输，安全性更高。
- 区别：
- HTTPS 需要申请证书。
- HTTPS 默认端口是 443，HTTP 是 80。
- HTTPS 可以防止数据被篡改和窃听。
6.2 常见的 HTTP 状态码有哪些？
- 1xx：信息性状态码（如 100 Continue）。
- 2xx：成功状态码（如 200 OK、204 No Content）。
- 3xx：重定向状态码（如 301 Moved Permanently、302 Found）。
- 4xx：客户端错误状态码（如 400 Bad Request、404 Not Found）。
- 5xx：服务器错误状态码（如 500 Internal Server Error、502 Bad Gateway）。
7. 其他
7.1 什么是跨域？如何解决跨域问题？
- 跨域：浏览器同源策略限制了不同源之间的资源访问。
- 解决方案：
- JSONP：通过
- CORS：服务器设置 Access-Control-Allow-Origin 响应头。
- 代理服务器：通过服务器转发请求。
- WebSocket：全双工通信，不受同源策略限制。
7.2 什么是 Webpack？它的作用是什么？
- Webpack：是一个模块打包工具，用于将多个模块打包成一个或多个文件。
- 作用：
- 支持多种模块化规范（CommonJS、ES Module 等）。
- 支持代码分割、懒加载。
- 支持加载器（Loader）和插件（Plugin）扩展功能。
- 支持开发环境和生产环境的配置。
添加图片注释，不超过 140 字（可选）
如果需要面经八股文的话可以小伙伴可以直接github.com/encode-stud…
总结
以上是前端面试中常见的“八股文”问题，涵盖了 HTML、CSS、JavaScript、浏览器、框架和网络等方面的基础知识。掌握这些内容可以帮助你在面试中更加自信地应对各种问题。当然，实际开发中还需要结合项目经验，深入理解这些知识的应用场景。
