Web 前端工程师面试题 + 参考答案
Web 前端工程师面试题 + 参考答案
使用说明
这份题库按初级 -> 中级 -> 高级 顺序整理，适合按岗位级别准备。
喜欢作者就关注一下哈，关注不迷路，可以看更多文章哦
1. 什么是 HTML 语义化？为什么要做语义化？
参考答案：
HTML 语义化是指根据内容的真实含义选择合适的标签，而不是一味使用div 和span。
例如：
- 页头用header
- 导航用nav
- 主内容用main
- 文章内容用article
- 侧边栏用aside
- 页脚用footer
这样做的好处主要有三点：
- 代码结构更清晰，后期维护更容易
- 搜索引擎更容易理解页面结构，有利于SEO
- 屏幕阅读器等无障碍工具能更好地解析页面内容
──────────────────────────────────────────────────
2. 块级元素和行内元素有什么区别？
参考答案：
块级元素通常会独占一行，默认宽度会撑满父元素，例如div、p、ul。
行内元素不会独占一行，会和其他元素排在同一行，例如span、a、strong。
主要区别：
- 块级元素通常可以直接设置宽高
- 行内元素设置宽高通常不生效
- 行内元素的上下margin 和padding 表现不如块级元素直观
如果既想同行显示，又想设置宽高，通常会使用display: inline-block。
──────────────────────────────────────────────────
3. CSS 盒模型是什么？box-sizing 有什么作用？
参考答案：
CSS 盒模型由四部分组成：
- content
- padding
- border
- margin
标准盒模型下，元素设置的width 和height 只表示内容区大小。
如果元素还有padding 和border，最终渲染出来的尺寸会更大。
box-sizing 用来控制宽高的计算方式：
- content-box：默认值，宽高只包含内容区
- border-box：宽高包含content + padding + border
实际开发中常把所有元素设为border-box，因为这样更容易控制布局，不容易出现宽度超出预期的问题。
──────────────────────────────────────────────────
4. CSS 选择器优先级怎么计算？
参考答案：
CSS 优先级一般可以理解为：
- !important
- 行内样式
- id 选择器
- class、属性选择器、伪类
- 标签选择器、伪元素
- 通配符和继承样式
例如：
#app .title {
color: red;
}
.title {
color: blue;
}
因为#app .title 的优先级更高，所以最终颜色是红色。
需要注意：
- 优先级相同时，后写的样式会覆盖前面的样式
- !important 虽然强，但会让样式维护变难，项目里不建议滥用
──────────────────────────────────────────────────
5. 什么是 BFC？有什么应用场景？
参考答案：
BFC 的全称是Block Formatting Context，可以理解为块级格式化上下文，是页面中的一块独立渲染区域。
它有几个常见特性：
- 内部元素的布局不会影响外部
- 可以包含浮动元素
- 可以阻止相邻块级元素的margin 重叠
常见触发方式：
- overflow: hidden/auto
- display: flow-root
- position: absolute/fixed
- float 不为none
常见应用场景：
- 清除浮动
- 防止父子或兄弟元素的外边距重叠
- 实现两栏布局时避免文字环绕浮动元素
──────────────────────────────────────────────────
6.var、let、const 有什么区别？
参考答案：
三者都可以用来声明变量，但区别很明显：
- var 是函数作用域，存在变量提升，可以重复声明
- let 是块级作用域，也会提升，但存在暂时性死区，不能重复声明
- const 也是块级作用域，声明时必须赋值，之后不能重新赋值
例如：
- var 在if 代码块外仍然可访问
- let 和const 只在当前块内有效
需要注意，const 如果保存的是对象或数组，不能改的是变量指向，但对象内部属性仍然可以修改。
──────────────────────────────────────────────────
7.== 和=== 有什么区别？
参考答案：
== 在比较时会进行隐式类型转换，=== 不会，它会同时比较类型和值。
例如：
- 1 == '1' 的结果是true
- 1 === '1' 的结果是false
开发中通常更推荐使用===，因为它判断更严格，能避免很多由类型转换带来的隐藏问题。
──────────────────────────────────────────────────
8. 什么是原型和原型链？
参考答案：
在 JavaScript 中，每个对象都可以关联到另一个对象，这个被关联的对象就是它的原型。
当我们访问一个对象的属性时，如果对象本身没有这个属性，就会沿着原型向上查找，这条查找路径就叫原型链。
例如：
- 实例对象可以访问构造函数原型上的方法
- 如果原型上也没有，就继续往上找，直到Object.prototype
原型链是 JavaScript 实现继承和属性复用的基础。
──────────────────────────────────────────────────
9. 什么是闭包？闭包有什么应用场景？
参考答案：
闭包本质上是函数和它的词法作用域组合在一起形成的结构。
简单说，就是一个函数即使在外部作用域执行，仍然可以访问定义时所在作用域中的变量。
常见应用场景：
- 封装私有变量
- 函数柯里化
- 防抖、节流
- 回调中保存上下文数据
需要注意：
- 闭包用得不当可能导致不再需要的变量一直被引用
- 在一些场景下可能引发内存占用增加
──────────────────────────────────────────────────
10.this 的指向怎么判断？
参考答案：
this 不是在定义时确定的，而是在调用时确定的。
常见规则：
- 普通函数直接调用时，非严格模式下指向全局对象，严格模式下是undefined
- 作为对象方法调用时，指向调用它的对象
- call、apply、bind 可以显式指定this
- 使用new 调用构造函数时，this 指向新创建的实例
- 箭头函数没有自己的this，它会继承外层作用域的this
面试中最好强调一句：判断this，关键看“函数是怎么调用的”。
──────────────────────────────────────────────────