学习笔记——查缺补漏，多看面试题😁

送鱼的老默
30 阅读5分钟

  1. HTML中语义化标签有哪些？使用语义化标签的好处是什么？
    答案要点：语义化标签如 <header> <nav> <main> <article> <footer> 等；好处是提升代码可读性、利于SEO、方便无障碍访问（如屏幕阅读器）。

  2. CSS选择器的优先级是怎样的？请举例说明。
    答案要点：!important > 内联样式 > ID选择器 > 类选择器/属性选择器/伪类 > 标签选择器/伪元素 > 通配符 *；示例：#box（ID）优先级高于 .box（类），高于 div（标签）。

  3. 如何实现CSS垂直居中？请说出至少3种方法。
    答案要点： - flex布局：父元素 display: flex; align-items: center; justify-content: center; - 定位+transform：子元素 position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); - table-cell布局：父元素 display: table-cell; vertical-align: middle;

  4. 什么是BFC？BFC的触发条件和作用是什么？
    答案要点：BFC即块级格式化上下文，是独立的渲染区域；触发条件：根元素、float不为none、overflow不为visible、display为inline-block/table-cell等；作用：清除浮动、防止margin重叠、避免元素被浮动元素覆盖。

  5. JavaScript中==和===的区别是什么？
    答案要点：== 会进行类型转换后比较值是否相等；=== 是严格相等，既比较值也比较类型，不进行类型转换。示例：0 == '' 为true，0 === '' 为false。

  6. JavaScript的数据类型有哪些？基本类型和引用类型的区别是什么？
    答案要点：基本类型（7种）：String Number Boolean Null Undefined Symbol BigInt；引用类型：Object（包括 Array Function Date 等）；区别：基本类型存储在栈内存，值不可变；引用类型存储在堆内存，变量存的是地址，值可变。

  7. 如何理解JavaScript的原型和原型链？
    答案要点：每个函数都有 prototype（原型对象），每个实例对象都有 __proto__ 属性指向其构造函数的 prototype；原型链是实例对象查找属性/方法的链路，当访问对象属性时，会依次向上查找原型对象，直到 Object.prototype。

  8. JavaScript中this的指向规则是什么？请分别说明不同场景。
    答案要点： - 全局作用域：this 指向 window（浏览器）/ global（Node） - 函数普通调用：this 指向 window（非严格模式）/ undefined（严格模式） - 对象方法调用：this 指向调用方法的对象 - 构造函数调用：this 指向新建的实例对象 - call/apply/bind：this 指向第一个参数指定的对象

  9. 什么是闭包？闭包的作用和缺点是什么？
    答案要点：闭包是指有权访问另一个函数作用域中变量的函数；作用：延长变量生命周期、创建私有变量；缺点：容易造成内存泄漏（未及时释放变量）。

  10. JavaScript中如何实现防抖和节流？它们的应用场景有哪些？
    答案要点： - 防抖：触发事件后延迟n秒执行，若期间再次触发则重新计时；应用：搜索框输入联想、窗口resize。 - 节流：规定n秒内只执行一次，避免频繁触发；应用：滚动加载、按钮点击防重复提交。

  11. 请简述AJAX的工作原理？如何使用原生JavaScript实现AJAX？
    答案要点：AJAX即异步JavaScript和XML，通过 XMLHttpRequest 对象在不刷新页面的情况下与服务器交互；步骤：创建 XMLHttpRequest 对象 → 调用 open() 配置请求 → 监听 onreadystatechange 事件 → 调用 send() 发送请求。

  12. HTTP的常见请求方法有哪些？GET和POST的区别是什么？
    答案要点：常见方法：GET POST PUT DELETE HEAD 等；区别： - GET 用于获取数据，参数在URL上，长度有限，幂等； - POST 用于提交数据，参数在请求体，长度无限制，非幂等。

  13. 什么是跨域？解决跨域的方法有哪些？
    答案要点：跨域是指浏览器的同源策略限制，当协议、域名、端口任一不同即为跨域；解决方法：CORS（后端设置响应头）、JSONP（利用script标签无跨域限制）、代理服务器（如webpack devServer）、iframe通信等。

  14. 请简述Vue的生命周期钩子函数？至少说出5个及其作用。
    答案要点： - beforeCreate：实例创建前，数据和方法未初始化 - created：实例创建完成，可访问数据和方法，DOM未生成 - beforeMount：挂载前，模板已编译，DOM未渲染 - mounted：挂载完成，DOM已渲染，可操作DOM - beforeUpdate：数据更新前，虚拟DOM未重新渲染 - updated：数据更新后，DOM已重新渲染 - beforeDestroy：实例销毁前，仍可访问实例 - destroyed：实例销毁后，所有指令解绑

  15. Vue中v-if和v-show的区别是什么？
    答案要点：v-if 是条件渲染，条件不满足时元素会被移除DOM；v-show 是样式切换，条件不满足时元素通过 display: none 隐藏，DOM仍存在；频繁切换用 v-show，初始渲染条件少用 v-if。

  16. Vue中双向数据绑定的原理是什么？
    答案要点：基于数据劫持+发布订阅模式；通过 Object.defineProperty() 监听数据的 getter/setter，当数据变化时触发setter，通知订阅者更新视图；视图变化时触发事件，更新数据。

  17. React中props和state的区别是什么？
    答案要点： - props 是父组件传递给子组件的参数，只读不可修改； - state 是组件内部的状态数据，可修改，修改需通过 setState()，修改后触发组件重新渲染。

  18. React中函数组件和类组件的区别是什么？
    答案要点： - 函数组件：无状态（早期），轻量简洁，通过Hooks实现状态管理； - 类组件：有状态，继承 React.Component，有生命周期钩子，写法较繁琐。

  19. 如何优化前端页面的加载性能？
    答案要点： - 资源优化：压缩JS/CSS/图片、使用CDN、懒加载图片和路由 - 代码优化：减少HTTP请求、避免重排重绘、使用缓存（强缓存/协商缓存） - 构建优化：Tree-Shaking（删除无用代码）、代码分割

  20. 前端常见的性能指标有哪些？如何检测页面性能？
    答案要点：常见指标：首屏加载时间、白屏时间、DOMContentLoaded时间、Load时间；检测方法：浏览器开发者工具（Performance面板）、Lighthouse工具、第三方性能检测平台（如WebPageTest）。

avatar
文章
阅读
粉丝