前端 50 题
HTML（5 题）
1. 说一下 DOCTYPE 的作用
<!DOCTYPE html> 声明位于文档最前面，告诉浏览器以标准模式渲染页面，而不是怪异模式。怪异模式下浏览器会模拟旧版 IE 的盒模型与布局行为。2. src 与 href 的区别
src（source）用于替换当前元素内容（如 <script src>、<img src>），浏览器会暂停解析并下载执行。href（hypertext reference）用于建立文档与资源的关联（如 <link href>、<a href>），浏览器会并行下载，不阻塞渲染。
3. 列举 HTML5 新增的语义化标签
<header> · <footer> · <nav> · <article> · <section> · <aside> · <main> · <figure> · <figcaption> · <mark> · <time> · <details> · <summary>。优点是可访问性更好、SEO 更友好。4. Canvas 与 SVG 的区别
Canvas 是像素位图，用 JS API 逐像素绘制，缩放失真，需要自行处理事件，适合游戏等大量元素。SVG 是矢量图形，DOM 声明式，不失真，支持 DOM 事件，适合少量交互元素。
5. defer 和 async 的区别
defer 异步下载，HTML 解析完后按顺序执行，适合依赖 DOM 的脚本。async 异步下载，下载完立即执行，顺序不确定，适合独立脚本。CSS（10 题）
1. 盒模型及 box-sizing
标准盒模型：width/height 只包含 content。box-sizing: content-box（默认）宽高只算 content，border-box 宽高算到 border（开发常用）。
2. BFC 是什么？如何触发？
块级格式化上下文，独立渲染区域。触发条件：float 非 none、overflow 非 visible、display: flex/inline-block/flow-root、position: absolute/fixed。作用：清除浮动、防止 margin 合并。
3. CSS 选择器优先级
!important > 行内样式(1000) > ID(100) > 类/伪类/属性(10) > 元素/伪元素(1) > 通配符(0)。同级后覆盖前。
4. 水平垂直居中的方法
flex：display: flex; align-items: center; justify-content: center; grid：display: grid; place-items: center; absolute + transform：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
5. Flexbox 常用属性
容器：flex-direction · justify-content · align-items · flex-wrap · gap 子项：flex(grow shrink basis) · align-self · order
6. Grid 与 Flexbox 的选择
Flexbox 适合一维布局（导航栏、居中），Grid 适合二维布局（页面骨架、仪表盘）。
7. position 取值
static（默认）| relative（相对自身）| absolute（最近定位祖先）| fixed（视口）| sticky（粘性定位）
8. 回流与重绘
回流（Reflow）是几何属性变化重新计算布局，开销大。重绘（Repaint）是外观变化不影响布局。优化：用 transform 代替 top/left 做动画、批量读写 DOM。
9. 伪类与伪元素的区别
伪类用 : 描述状态（:hover），伪元素用 :: 创建虚拟元素（::before）。
10. px、em、rem、vw/vh 的区别
px 物理像素固定，em 相对于父元素字体（会累积），rem 相对于根元素（全局统一），vw 视口宽度 1%，vh 视口高度 1%。
JavaScript（35 题）
1. var、let、const 的区别
var 函数作用域，变量提升，可重复声明。let 块级作用域，TDZ，不可重复声明。const 块级作用域，声明必须赋值，基本类型值不可变。建议默认 const，需重赋值用 let。2. 闭包（Closure）
函数有权访问外部函数作用域变量的现象，即使外部函数已返回。用途：数据私有化、柯里化、防抖/节流。注意可能导致内存泄漏。
3. 原型与原型链
每个函数有 prototype，每个实例有 proto 指向构造函数的 prototype。访问属性沿 proto 链向上查找，终点 Object.prototype -> null。
4. this 指向规则
普通函数 → 全局对象，对象方法 → 该对象，new → 新实例，call/apply/bind → 指定参数，箭头函数 → 定义时的外层 this，DOM 事件 → 绑定元素。
5. 箭头函数与普通函数的区别
没有自己的 this、不能 new、没有 arguments、不能作 Generator、没有 prototype、写法更简洁。
6. Promise
异步编程解决方案，状态 pending → fulfilled/rejected，不可逆。
7. async/await
async 函数返回 Promise，await 等待 Promise 决议。本质是 Generator + Promise 语法糖。8. 事件循环（Event Loop）
宏任务：setTimeout · setInterval · I/O · UI 渲染。微任务：Promise.then · MutationObserver · queueMicrotask。顺序：当前宏任务 → 清空微任务 → 渲染 → 下一宏任务。
9. 深拷贝与浅拷贝
浅拷贝只复制第一层引用（Object.assign、{...obj}）。深拷贝递归复制所有层级（JSON.parse/stringify 有缺陷、structuredClone 推荐、手写递归+WeakMap）。
10. 防抖与节流
防抖：触发后 N 毫秒内无新触发才执行，适合搜索输入。节流：N 毫秒内只执行一次，适合滚动事件。
11. ES6 常用新特性
let/const · 箭头函数 · 模板字符串 · 解构赋值 · 展开运算符 · class · Map/Set · Promise · async/await · Symbol · Proxy · 模块 · Generator12. == 与 ===
=== 不转换类型比较值和类型。== 类型转换后再比较。建议始终用 ===。
13. 事件委托
利用冒泡机制将子元素事件绑到父元素统一处理，节省内存，动态元素自动生效。
14. 柯里化
f(a,b,c) → f(a)(b)(c)，参数复用、延迟执行、函数组合。
15. call、apply、bind
call 逐个传参立即执行，apply 数组传参立即执行，bind 返回新函数不立即执行。
16. new 操作符
创建空对象 → proto 指向 fn.prototype → 以该对象为 this 执行构造函数 → 返回对象或新对象。
17. typeof 与 instanceof
typeof 返回类型字符串（typeof null === "object" 是 bug），instanceof 判断原型链。数组判断用 Array.isArray()。
18. Map 和 Set
Map 键任意类型，有序可迭代。Set 值唯一，查找 O(1)。
19. WeakMap 和 WeakSet
键/值必须是对象，弱引用不影响 GC，不可遍历。优点：避免内存泄漏。
20. Proxy vs Object.defineProperty
Proxy 可拦截 13 种操作，可直接监听数组下标和新增属性，惰性劫持，不污染原对象。Vue 3 响应式基础。
21. for...in 与 for...of
for...in 遍历可枚举属性（含原型链），适合对象。for...of 遍历可迭代对象，适合数组/Set/Map。22. Symbol
第七种基本类型，每次返回唯一值。用途：唯一属性名、内置元编程（Symbol.iterator）、类私有方法约定。
23. 数组去重
Set：[...new Set(arr)]；filter + indexOf；Map 法。
24. reduce 用法
累加、展平、计数、管道函数组合。
25. null 与 undefined
undefined 未赋值，null 主动赋值表示空对象。null == undefined 为 true，=== 为 false。
26. 浏览器缓存
强缓存（Cache-Control/Expires）不请求直接使用。协商缓存（ETag/Last-Modified）带条件请求。优先级：Cache-Control > Expires > ETag > Last-Modified。
27. 跨域
同源策略限制。解决方式：CORS、JSONP（仅 GET）、代理服务器、postMessage、WebSocket。
28. localStorage、sessionStorage、Cookie
Cookie 4KB 自动携带，localStorage 5MB 永久，sessionStorage 5MB 关闭页失效。
29. V8 垃圾回收
分代回收：新生代用 Scavenge（From → To），老生代用 Mark-Sweep + Mark-Compact。优化：增量标记、并发标记。
30. 前端性能优化
加载：代码分割、资源压缩、CDN、preload/prefetch、Tree Shaking。渲染：减少回流重绘、transform 做动画、虚拟列表、防抖/节流。
31. CSRF 攻击
利用用户登录态发恶意请求。防范：SameSite Cookie、CSRF Token、验证 Referer、二次验证。
32. XSS 攻击
注入恶意脚本（存储型/反射型/DOM 型）。防范：转义输入、CSP、textContent 代替 innerHTML、HttpOnly Cookie。
33. Generator
function* gen() { yield 1; }，async/await 是 Generator + Promise 语法糖。34. 手写 Promise.all 和 Promise.race
Promise.all 等所有完成或任一失败，按索引返回结果。Promise.race 返回第一个完成的。35. 从 URL 输入到页面渲染
DNS 解析 → TCP 三次握手 → HTTPS TLS 握手 → HTTP 请求 → 服务器返回 HTML → 构建 DOM/CSSOM 树 → Render Tree → 布局 → 绘制 → 合成 → 加载子资源