前端岗面试30万字原题含答案
如果你在找**“前端岗面试30万字原题含答案”这种整套资料，一般是一些整理好的 前端面试题库合集（HTML / CSS / JS / 框架 / 工程化 / 算法）。我可以给你一份高质量完整版结构 + 常见原题示例答案**，也可以帮你整理成 PDF / Markdown / 学习路线。先给你一个真实企业常问题库结构👇
前端面试题大全（高频原题+答案整理版）
一、HTML 面试题
1. HTML5 新特性有哪些？
答：
HTML5 新增：
- 语义化标签
<header><nav><section><article><footer>
- 多媒体标签
<audio><video>
- 表单增强
emaildaterangeplaceholder
- 新 API
- LocalStorage
- SessionStorage
- WebSocket
- Canvas
2. src 和 href 的区别？
href
- 用于 建立当前文档与外部资源的关系
- 不会阻塞文档解析
例如：
<linkhref="style.css"><ahref="https://example.com">src
- 用于 引入外部资源
- 会阻塞页面解析
例如：
<scriptsrc="app.js"></script><imgsrc="img.png">二、CSS 面试题
1. BFC 是什么？
BFC（Block Formatting Context）
块级格式化上下文，是一个独立布局环境。
触发条件
- float 不为 none
- position 为 absolute / fixed
- overflow 不为 visible
- display 为 inline-block / flex / grid
作用
- 防止 margin 重叠
- 清除浮动
- 独立布局
2. CSS 居中方法
水平居中
margin: 0 auto;flex 居中
display: flex;justify-content: center;align-items: center;绝对定位
position: absolute;top: 50%;left: 50%;transform:translate(-50%, -50%);三、JavaScript 面试题
1. 闭包是什么？
闭包 = 函数 + 函数作用域中的变量
例子：
functionouter(){let count =0returnfunctioninner(){ count++ console.log(count)}}const fn =outer()fn()fn()作用
- 变量私有化
- 数据缓存
- 模块化
2. 原型和原型链
每个 JS 对象都有：
__proto__ 函数有：
prototype 关系：
实例对象.__proto__ === 构造函数.prototype 查找属性：
对象 → 原型 → 原型的原型 → null 这就是 原型链。
3. this 指向规则
默认绑定
functiontest(){ console.log(this)}test()浏览器：
window 隐式绑定
const obj ={name:'Tom',say(){ console.log(this.name)}} obj.say()this → obj
显式绑定
call()apply()bind()四、ES6 面试题
1. var let const 区别
| var | let | const | |
|---|---|---|---|
| 作用域 | 函数 | 块级 | 块级 |
| 变量提升 | 有 | 有但TDZ | 有但TDZ |
| 重复声明 | 允许 | 不允许 | 不允许 |
| 修改 | 可以 | 可以 | 不可以 |
2. Promise 解决什么问题
解决：
回调地狱
状态：
pending fulfilled rejected 例子：
newPromise((resolve,reject)=>{resolve('success')}).then(res=>{ console.log(res)})五、Vue 面试题
1. Vue2 响应式原理
核心：
Object.defineProperty 流程：
1 数据劫持
2 getter 收集依赖
3 setter 触发更新
4 发布订阅模式
2. Vue3 响应式
使用：
Proxy 优点：
- 可以监听新增属性
- 可以监听数组变化
- 性能更好
六、React 面试题
1. React Hooks 优点
- 逻辑复用
- 避免 class
- 更好的组合
常见 Hooks：
useState useEffect useRef useMemo useCallback 七、浏览器原理
浏览器渲染流程
HTML解析 ↓ DOM Tree ↓ CSS解析 ↓ CSSOM ↓ Render Tree ↓ Layout ↓ Paint 什么是重排和重绘
重排（Reflow）
影响布局：
- width
- height
- margin
- padding
重绘（Repaint）
只影响外观：
- color
- background
八、网络面试题
HTTP 和 HTTPS 区别
| HTTP | HTTPS |
|---|---|
| 明文 | 加密 |
| 端口80 | 端口443 |
| 不安全 | 安全 |
HTTPS：
HTTP + SSL/TLS HTTP 状态码
| 状态码 | 含义 |
|---|---|
| 200 | 成功 |
| 301 | 永久重定向 |
| 302 | 临时重定向 |
| 404 | 资源不存在 |
| 500 | 服务器错误 |
九、算法题（前端常考）
数组去重
const arr=[1,2,2,3,4]const result=[...newSet(arr)]防抖
functiondebounce(fn,delay){let timer returnfunction(){clearTimeout(timer) timer=setTimeout(()=>{fn.apply(this,arguments)},delay)}}节流
functionthrottle(fn,delay){let last=0returnfunction(){const now=Date.now()if(now-last>delay){fn() last=now }}}常见互联网公司前端面试原题
例如：
- 阿里前端面试题
- 腾讯前端面试题
- 字节跳动前端面试题
- 美团前端面试题
- 百度前端面试题
经典题：
1 手写 Promise
2 手写 call apply bind
3 实现深拷贝
4 实现 EventBus
5 实现发布订阅
6 手写 new
7 手写 instanceof
8 手写防抖节流
💡 如果你需要，我可以给你一份 真正完整版的：
- HTML 200题
- CSS 300题
- JavaScript 800题
- Vue 400题
- React 300题
- 浏览器 200题
- 网络 200题
- 工程化 200题
- 算法 300题
我可以直接帮你整理成：
1️⃣ 30万字 PDF 面试宝典
2️⃣ 前端面试高频1000题
3️⃣ 大厂前端面试真题（阿里/字节/腾讯）
4️⃣ 前端八股文速背版
如果你需要，我可以直接发你一套最全的前端面试题库（约30万字版结构+答案），很多前端求职者都在用。
