适合用于前端基础复习、面试自测、候选人筛选。
建议使用方式：先遮住答案独立作答，再对照「考察点」查漏补缺。
参考回答：
HTML 语义化是指使用具有明确语义的标签来表达页面结构，例如 header、nav、main、article、section、footer。
好处包括：
参考回答：
常见语义化标签包括：
header：页眉或区域头部nav：导航区域main：页面主要内容article：独立文章内容section：页面中的章节aside：侧边栏或补充内容footer：页脚figure / figcaption：图片及说明div 和 span 有什么区别？参考回答：
div 是块级元素，默认独占一行，常用于布局容器。
span 是行内元素，默认不会独占一行，常用于包裹文本或局部内容。
img 标签的 alt 属性有什么作用？参考回答：
alt 用于描述图片内容：
alt 内容script 标签中 defer 和 async 有什么区别？参考回答：
async：异步加载脚本，加载完成后立即执行，执行顺序不保证defer：异步加载脚本，等 HTML 解析完成后按顺序执行适用场景：
async 适合无依赖的第三方脚本defer 适合依赖 DOM 或需要保持执行顺序的脚本参考回答：
DOCTYPE 用于告诉浏览器当前文档使用的 HTML 版本。
HTML5 中常用：
html<!DOCTYPE html>它可以让浏览器以标准模式渲染页面，避免进入怪异模式。
data-* 属性有什么用？参考回答：
data-* 用于在 HTML 元素上存储自定义数据。
示例：
html<button data-id="123">删除</button>JS 中可以通过 dataset 读取：
javascriptconst btn = document.querySelector('button')
console.log(btn.dataset.id)iframe 有哪些常见应用和问题？参考回答：
常见应用：
常见问题：
sandbox、allow 等属性label 标签有什么作用？参考回答：
label 用于关联表单控件，点击文本时可以聚焦或选中对应控件。
html<label for="username">用户名</label>
<input id="username" type="text" />它能提升用户体验和可访问性。
参考回答：
块级元素：
div、p、h1、section行内元素：
span、a、strong参考回答：
CSS 盒模型由以下部分组成：
标准盒模型中，width 只包含 content。
IE 盒模型中，width 包含 content、padding 和 border。
box-sizing: border-box 有什么作用？参考回答：
设置 box-sizing: border-box 后，元素的 width 和 height 会包含 padding 和 border。
css* {
box-sizing: border-box;
}这样更方便布局计算。
参考回答：
优先级大致为：
text!important > 行内样式 > ID 选择器 > 类/属性/伪类选择器 > 标签/伪元素选择器
例如：
css#app .title p {}权重高于：
css.title p {}display: none 和 visibility: hidden 的区别？参考回答：
display: none：元素不显示，也不占据布局空间visibility: hidden：元素不可见，但仍占据布局空间opacity: 0、visibility: hidden、display: none 的区别？参考回答：
display: none：不占空间，不能触发事件visibility: hidden：占空间，通常不能触发事件opacity: 0：占空间，仍可能触发事件参考回答：
Flex 方式：
css.parent {
display: flex;
justify-content: center;
align-items: center;
}Grid 方式：
css.parent {
display: grid;
place-items: center;
}绝对定位方式：
css.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}参考回答：
容器属性：
display: flexflex-directionjustify-contentalign-itemsflex-wrapalign-content子项属性：
flexflex-growflex-shrinkflex-basisalign-selforderflex: 1 表示什么？参考回答：
通常 flex: 1 等价于：
cssflex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;表示元素可以放大、可以缩小，并按剩余空间等分。
参考回答：
BFC 是 Block Formatting Context，块级格式化上下文。
常见作用：
触发方式：
overflow: hiddendisplay: flow-rootposition: absolute/fixeddisplay: inline-blockfloat 非 none参考回答：
垂直方向相邻块级元素的 margin 可能发生合并。
解决方式：
overflow: hiddendisplay: flow-rootborder 或 paddingposition 有哪些取值？参考回答：
static：默认定位relative：相对自身原位置定位absolute：相对最近非 static 定位祖先元素fixed：相对视口定位sticky：粘性定位absolute 相对于谁定位？参考回答：
absolute 相对于最近一个 position 不为 static 的祖先元素定位。
如果没有这样的祖先元素，则相对于初始包含块，通常是视口或文档根元素。
em、rem、px 的区别？参考回答：
px：固定像素单位em：相对于当前元素或父元素字体大小rem：相对于根元素 html 的字体大小移动端适配中常用 rem。
参考回答：
css.triangle {
width: 0;
height: 0;
border: 10px solid transparent;
border-top-color: red;
}通过元素宽高为 0，设置不同方向的边框颜色来形成三角形。
参考回答：
伪类用于描述元素的特殊状态，例如：
cssa:hover {}
input:focus {}
li:first-child {}伪元素用于创建或选择元素的一部分，例如：
cssp::before {}
p::after {}
p::first-line {}参考回答：
常见方法：
css.clearfix::after {
content: "";
display: block;
clear: both;
}也可以使用：
css.parent {
overflow: hidden;
}或：
css.parent {
display: flow-root;
}参考回答：
常见方式：
transition：用于状态变化的过渡动画animation + @keyframes：用于复杂关键帧动画transition 和 animation 的区别？参考回答：
transition 需要状态变化触发，适合简单过渡animation 可以自动执行，支持关键帧、循环、暂停等复杂控制参考回答：
可能触发重排的属性：
widthheightmarginpaddingtopleftdisplay可能只触发重绘的属性：
colorbackgroundvisibility通常推荐动画优先使用：
transformopacity参考回答：
常见方案：
rem / vw / vh示例：
css@media (max-width: 768px) {
.container {
flex-direction: column;
}
}参考回答：
基本数据类型：
stringnumberbooleanundefinednullsymbolbigint引用类型：
objectarrayfunctiondateregexptypeof null 的结果是什么？为什么？参考回答：
javascripttypeof null // "object"这是 JavaScript 早期实现中的历史遗留问题。
虽然结果是 "object"，但 null 本身是基本数据类型。
== 和 === 有什么区别？参考回答：
==：会进行隐式类型转换后比较===：不会进行类型转换，类型和值都相同才为 true推荐优先使用 ===。
参考回答：
推荐：
javascriptArray.isArray(arr)其他方式：
javascriptObject.prototype.toString.call(arr) === '[object Array]'null 和 undefined 的区别？参考回答：
undefined：表示变量已声明但未赋值null：表示人为设置的空值javascriptlet a
console.log(a) // undefined
let b = null
console.log(b) // null参考回答：
作用域决定变量和函数的可访问范围。
常见作用域：
let 和 const 支持块级作用域，var 不支持。
参考回答：
当访问变量时，JS 会先在当前作用域查找，如果找不到，就向外层作用域继续查找，直到全局作用域。
这种查找链路称为作用域链。
参考回答：
闭包是指函数可以访问其定义时所在词法作用域中的变量，即使外层函数已经执行完毕。
示例：
javascriptfunction createCounter() {
let count = 0
return function () {
count++
return count
}
}
const counter = createCounter()
console.log(counter()) // 1
console.log(counter()) // 2参考回答：
常见应用：
参考回答：
闭包会让外部函数中的变量持续被引用，可能导致内存无法及时释放。
如果闭包引用了大量数据，可能造成内存占用过高，需要在不使用时解除引用。
var、let、const 有什么区别？参考回答：
var：函数作用域，存在变量提升，可重复声明let：块级作用域，不可重复声明，存在暂时性死区const：块级作用域，声明时必须赋值，不能重新赋值注意：const 声明对象时，对象内部属性仍可修改。
参考回答：
变量提升指变量和函数声明会在代码执行前被提升到当前作用域顶部。
javascriptconsole.log(a) // undefined
var a = 1等价于：
javascriptvar a
console.log(a)
a = 1参考回答：
使用 let 或 const 声明的变量，从块级作用域开始到变量声明语句之前，都不能访问。
javascriptconsole.log(a) // ReferenceError
let a = 1这个区域称为暂时性死区。
参考回答：
每个对象都有内部原型 [[Prototype]]，可以通过 __proto__ 或 Object.getPrototypeOf() 访问。
函数有 prototype 属性，用于实例对象的原型。
当访问对象属性时，如果自身没有，会沿着原型链向上查找，直到 null。
prototype 和 __proto__ 的区别？参考回答：
prototype：函数特有属性，用于构造函数创建实例时作为实例原型__proto__：对象的内部原型引用，指向其构造函数的 prototype示例：
javascriptfunction Person() {}
const p = new Person()
console.log(p.__proto__ === Person.prototype) // truenew 操作符做了什么？参考回答：
new 主要做了四件事：
prototypethis 指向新对象并执行this 指向如何判断？参考回答：
常见规则：
window，严格模式为 undefinedcall / apply / bind：显式指定this参考回答：
主要区别：
thisnewargumentsprototypethiscall、apply、bind 的区别？参考回答：
call：立即执行，参数逐个传入apply：立即执行，参数以数组形式传入bind：返回一个新函数，不会立即执行javascriptfn.call(obj, 1, 2)
fn.apply(obj, [1, 2])
const newFn = fn.bind(obj, 1, 2)参考回答：
事件循环是 JavaScript 处理同步任务、异步任务的机制。
执行流程：
参考回答：
宏任务：
setTimeoutsetIntervalsetImmediate，Node.js微任务：
Promise.thenMutationObserverqueueMicrotaskprocess.nextTick，Node.js参考回答：
Promise 有三种状态：
pending：进行中fulfilled：已成功rejected：已失败状态一旦从 pending 变为 fulfilled 或 rejected，就不可再改变。
参考回答：
then 会返回一个新的 Promise，因此可以链式调用。
javascriptPromise.resolve(1)
.then(value => value + 1)
.then(value => {
console.log(value) // 2
})如果 then 返回普通值，会被包装成成功状态的 Promise。
如果抛出错误，会返回失败状态的 Promise。
async/await 的本质是什么？参考回答：
async/await 是 Promise 的语法糖。
async 函数总是返回 Promiseawait 会等待 Promise 状态完成await 后面的代码相当于放入微任务中执行async/await 中的错误？参考回答：
可以使用 try...catch：
javascriptasync function fetchData() {
try {
const res = await request()
return res
} catch (error) {
console.error(error)
}
}也可以在调用处使用 .catch()。
参考回答：
浅拷贝只复制对象第一层属性，如果属性值是引用类型，复制的是引用地址。
深拷贝会递归复制对象内部所有引用类型，拷贝后的对象与原对象互不影响。
参考回答：
javascriptconst obj2 = Object.assign({}, obj)javascriptconst obj2 = { ...obj }数组浅拷贝：
javascriptconst arr2 = arr.slice()
const arr3 = [...arr]参考回答：
简单场景：
javascriptconst copy = JSON.parse(JSON.stringify(obj))缺点：
undefinedSymbol现代浏览器可使用：
javascriptconst copy = structuredClone(obj)复杂场景需要手写递归或使用工具库。
参考回答：
会改变原数组：
pushpopshiftunshiftsplicesortreverse不会改变原数组：
mapfilterreducesliceconcatfindsomeeverymap、forEach、filter、reduce 的区别？参考回答：
forEach：遍历数组，无返回新数组map：遍历并返回新数组filter：筛选符合条件的元素，返回新数组reduce：累计计算，返回最终结果参考回答：
javascriptconst unique = arr => [...new Set(arr)]对象数组按 id 去重：
javascriptconst uniqueById = arr => {
const map = new Map()
arr.forEach(item => {
map.set(item.id, item)
})
return [...map.values()]
}参考回答：
防抖是指事件频繁触发时，只在最后一次触发后的指定时间执行函数。
适用场景：
javascriptfunction debounce(fn, delay) {
let timer = null
return function (...args) {
clearTimeout(timer)
timer = setTimeout(() => {
fn.apply(this, args)
}, delay)
}
}参考回答：
节流是指事件频繁触发时，在固定时间间隔内最多执行一次函数。
适用场景：
javascriptfunction throttle(fn, delay) {
let last = 0
return function (...args) {
const now = Date.now()
if (now - last >= delay) {
last = now
fn.apply(this, args)
}
}
}参考回答：
一句话：
参考回答：
柯里化是将接收多个参数的函数，转换成多个接收单个参数函数的过程。
javascriptfunction add(a) {
return function (b) {
return a + b
}
}
console.log(add(1)(2)) // 3参考回答：
事件委托是利用事件冒泡，将子元素的事件统一绑定到父元素上处理。
javascriptdocument.querySelector('ul').addEventListener('click', event => {
if (event.target.tagName === 'LI') {
console.log(event.target.textContent)
}
})优点：
参考回答：
DOM 事件流分为三个阶段：
默认事件监听在冒泡阶段触发。
参考回答：
阻止冒泡：
javascriptevent.stopPropagation()阻止默认行为：
javascriptevent.preventDefault()例如阻止链接跳转、表单默认提交。
localStorage、sessionStorage、cookie 的区别？参考回答：
| 类型 | 生命周期 | 大小 | 是否自动随请求发送 |
|---|---|---|---|
| cookie | 可设置过期时间 | 较小，约 4KB | 是 |
| localStorage | 手动清除前一直存在 | 较大，约 5MB | 否 |
| sessionStorage | 页面会话结束清除 | 较大，约 5MB | 否 |
参考回答：
javascriptObject.prototype.hasOwnProperty.call(obj, 'name')或现代写法：
javascriptObject.hasOwn(obj, 'name')不推荐直接使用 obj.hasOwnProperty()，因为对象可能没有继承该方法。
参考回答：
主要流程：
参考回答：
DNS 解析是将域名转换为 IP 地址的过程。
例如：
textwww.example.com -> 93.184.216.34
浏览器需要知道服务器 IP，才能建立网络连接。
参考回答：
HTTPS 默认端口是 443，HTTP 默认端口是 80。
参考回答：
200：请求成功301：永久重定向302：临时重定向304：资源未修改，可使用缓存400：请求参数错误401：未认证403：无权限404：资源不存在500：服务器错误502：网关错误503：服务不可用参考回答：
常见区别：
注意：安全性不是由 GET/POST 决定的，而是由 HTTPS 等机制决定。
参考回答：
HTTP 缓存主要分为：
304参考回答：
强缓存字段：
httpCache-Control: max-age=3600
Expires: Wed, 21 Oct 2025 07:28:00 GMT优先级：
textCache-Control > Expires
Cache-Control 是 HTTP/1.1 字段，控制更灵活。
参考回答：
协商缓存字段：
Last-Modified / If-Modified-SinceETag / If-None-Match优先级通常：
textETag > Last-Modified
如果资源未修改，服务器返回 304 Not Modified。
参考回答：
跨域是指浏览器当前页面请求了不同源的资源。
同源要求：
只要其中一个不同，就是跨域。
参考回答：
常见方案：
script 标签不受同源限制，只支持 GET
关注公众号回复「资源」获取全部下载链接