前端面试题精选：闭包、事件循环与 Vue 核心原理 | 极客日志

JavaScript大前端

前端面试题精选：闭包、事件循环与 Vue 核心原理

综述由AI生成前端面试题涵盖闭包、事件循环、BFC、内存泄漏、虚拟 DOM、MVVM 模式、Vue 响应式原理、深浅拷贝、npm 依赖管理、ES6 模块化、组件通信及性能优化等核心知识点。文章详细解析了 JavaScript 基础概念如作用域、原型链、继承方式，以及 Vue 框架相关的虚拟 DOM、Diff 算法、v-model 原理和组件通信机制。此外还涉及 CSS 布局技巧、HTTP 协议、浏览器缓存策略、安全性防护（XSS/CSRF）及项目性能优化手段。内容旨在帮助开发者系统复习前端核心技术，提升面试准备效率与实战能力。

1739658202发布于 2026/4/9更新于 2026/5/2214 浏览

前端面试题

闭包

1. 定义

闭包（Closure） 是指一个函数能够访问并记住其外部作用域中的变量，即使外部函数已经执行完毕。闭包由两部分组成：

一个函数（通常是内部函数）。
该函数被创建时所在的作用域（即外部函数的变量环境）

function outer() {
    let count = 0; // 外部函数的变量
    function inner() { 
        count++; // 内部函数访问外部变量
        console.log(count);
    }
    return inner;
}
const counter = outer();
counter(); // 输出 1
counter(); // 输出 2

2. 闭包的核心原理

作用域链：函数在定义时，会记住自己的词法环境（即外部作用域）。当内部函数访问变量时，会沿着作用域链向上查找。
变量持久化：闭包使得外部函数的变量不会被垃圾回收，因为内部函数仍持有对它们的引用。

3. 闭包的常见用途

3.1 私有变量封装

通过闭包隐藏内部变量，仅暴露操作接口：

function createCounter() {
    let count = 0; // 私有变量
    return {
        increment: () => count++,
        getValue: () => count
    };
}
const counter = createCounter();
counter.increment();
console.log(counter.getValue());

function add(a) {
    return function(b) {
        return a + b;
    };
}
const add5 = add(5);
console.log(add5(3)); // 输出 8

function setupButton() {
    const button = document.getElementById('myButton');
    let clicks = 0;
    button.addEventListener('click', function() {
        clicks++;
        console.log(`按钮被点击了 ${clicks} 次`);
    });
}
// 每次点击都会更新同一个 clicks 变量

for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 输出 3, 3, 3
    }, 100);
}

// 使用 IIFE
for (var i = 0; i < 3; i++) {
    (function(j) {
        setTimeout(function() {
            console.log(j); // 输出 0, 1, 2
        }, 100);
    })(i);
}
// 使用 let（块级作用域）
for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i); // 输出 0, 1, 2
    }, 100);
}

function heavyProcess() {
    const largeData = new Array(1000000).fill('data');
    return function() {
        console.log(largeData.length);
    };
}
const leak = heavyProcess(); // largeData 被闭包引用，无法回收

leak = null; // 手动解除对闭包的引用

function createFunctions() {
    const result = [];
    for (var i = 0; i < 3; i++) {
        result.push(function() {
            console.log(i);
        });
    }
    return result;
}
const funcs = createFunctions();
funcs[0](); // 输出 3
funcs[1](); // 输出 3
funcs[2](); // 输出 3

console.log('1'); // 同步任务
setTimeout(() => {
    console.log('2'); // 宏任务
}, 0);
Promise.resolve().then(() => {
    console.log('3'); // 微任务
});
console.log('4'); // 同步任务
// 输出顺序：1 → 4 → 3 → 2

.left {
    float: left;
    width: 200px;
}
.right {
    overflow: hidden; /* 触发 BFC */
}

.box {
    display: inline-block; /* 触发 BFC */
}

.parent {
    overflow: hidden; /* 触发 BFC */
}

<div class="left">左侧栏</div>
<div class="right">右侧栏</div>
<style>
.left {
    float: left;
    width: 200px;
    background: #ccc;
}
.right {
    overflow: hidden; /* 触发 BFC */
    background: #f0f0f0;
}
</style>

<div class="box" style="margin: 20px;">元素 1</div>
<div class="box" style="margin: 20px;">元素 2</div>
<style>
.box {
    display: inline-block; /* 触发 BFC */
    width: 100%;
}
</style>

<div class="parent">
    <div class="child" style="float: left;">浮动元素</div>
</div>
<style>
.parent {
    overflow: hidden; /* 触发 BFC */
    border: 1px solid #000;
}
</style>

let cache = new Map();
function setCache(key, value) {
    cache.set(key, value);
}
// 未清理 cache，内存泄漏

let elements = {
    button: document.getElementById('button'),
};
document.body.removeChild(elements.button); // DOM 已移除，但引用仍在

function createClosure() {
    let largeData = new Array(1000000).fill('data');
    return () => console.log(largeData); // largeData 一直被引用
}
const closure = createClosure();

let data = fetchData();
setInterval(() => {
    process(data); // data 一直被引用，无法回收
}, 1000);

function leak() {
    globalVar = '这是一个全局变量'; // 未使用 var/let/const
}

let cache = new Map();
function setCache(key, value, ttl) {
    cache.set(key, value);
    setTimeout(() => cache.delete(key), ttl); // 设置缓存失效时间
}

function createClosure() {
    let largeData = new Array(1000000).fill('data');
    return () => {
        console.log('Closure executed'); // 不引用 largeData
    };
}

let weakMap = new WeakMap();
let key = {};
weakMap.set(key, 'data'); // key 被回收时，数据也会被回收

let timer = setInterval(() => {}, 1000);
clearInterval(timer); // 清除定时器

const vnode = {
    tag: 'div',
    attrs: { id: 'app' },
    children: [
        { tag: 'p', attrs: {}, children: ['Hello, Vue!'] }
    ]
};

const data = { name: 'Vue2' };
Object.defineProperty(data, 'name', {
    get() {
        console.log('获取 name');
        return this._name;
    },
    set(newValue) {
        console.log('更新 name');
        this._name = newValue;
    }
});

const data = { name: 'Vue3' };
const proxy = new Proxy(data, {
    get(target, key) {
        console.log('获取', key);
        return target[key];
    },
    set(target, key, newValue) {
        console.log('更新', key);
        target[key] = newValue;
        return true;
    }
});

特性	Vue2（Object.defineProperty）	Vue3（Proxy）
数据劫持方式	劫持对象的属性	代理整个对象
新增/删除属性	不支持	支持
数组响应式	需重写数组方法	直接拦截数组操作
性能	较低	较高
代码复杂度	较高	较低

const data = { name: 'Vue3' };
const proxy = new Proxy(data, {
    get(target, key) {
        console.log('获取', key);
        return target[key];
    },
    set(target, key, newValue) {
        console.log('更新', key);
        target[key] = newValue;
        return true;
    }
});

const data = { name: 'Vue2' };
Object.defineProperty(data, 'name', {
    get() {
        console.log('获取 name');
        return this._name;
    },
    set(newValue) {
        console.log('更新 name');
        this._name = newValue;
    }
});

数组的浅拷贝方法

slice、concat：

const arr = [1, 2, { a: 3 }];
const shallowCopy = arr.slice();

Object.assign

const obj = { a: 1, b: { c: 2 } };
const shallowCopy = Object.assign({}, obj);

扩展运算符（...）

const obj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...obj };

function deepClone(obj, map = new Map()) {
    if (typeof obj !== 'object' || obj === null) return obj;
    if (map.has(obj)) return map.get(obj); // 处理循环引用
    const clone = Array.isArray(obj) ? [] : {};
    map.set(obj, clone);
    for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
            clone[key] = deepClone(obj[key], map);
        }
    }
    return clone;
}

const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));

特性	浅拷贝	深拷贝
拷贝层级	仅第一层	所有层级
引用类型属性	共享引用地址	完全独立
性能	较快	较慢（递归或序列化开销）
适用场景	简单对象，无需深层复制	复杂对象，需完全独立副本

const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.b.c = 3;
console.log(obj.b.c); // 输出：2（完全独立）

const obj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...obj };
shallowCopy.b.c = 3;
console.log(obj.b.c); // 输出：3（共享引用）

定义
- 仅在开发环境中使用的依赖包，例如构建工具、测试框架、代码格式化工具等。
- 这些依赖不会随项目发布到生产环境。
安装方式

使用 --save-dev 或 -D 选项将包安装为开发依赖：
```
npm install <package> --save-dev
```
或
```
npm install <package> -D
```
常见开发依赖
- 测试工具：jest、mocha、chai
- 构建工具：webpack、vite、babel
- 代码格式化：eslint、prettier
- 类型检查：typescript

{
    "devDependencies": {
        "eslint": "^8.0.0",
        "webpack": "^5.0.0",
        "jest": "^27.0.0"
    }
}

定义
- 项目运行所必需的依赖包，例如框架、库、工具等。
- 这些依赖会随项目发布到生产环境。
安装方式

如果省略选项，默认安装为生产依赖：
```
npm install <package>
```
使用 --save 或 -S 选项将包安装为生产依赖：
```
npm install <package> --save
```
或
```
npm install <package> -S
```
常见生产依赖
- 框架：express、koa、nestjs
- UI 库：react、vue、angular
- 工具库：lodash、axios、moment

{
    "dependencies": {
        "express": "^4.0.0",
        "lodash": "^4.0.0",
        "react": "^18.0.0"
    }
}

特性	开发依赖（`devDependencies`）	生产依赖（`dependencies`）
使用环境	仅用于开发环境	用于生产环境
是否发布到生产	否	是
安装命令	`npm install <package> --save-dev`	`npm install <package> --save`
示例工具	`eslint`、`webpack`、`jest`	`express`、`react`、`lodash`

特性	`^`（兼容版本）	`~`（修订版本）
更新范围	主版本不变，次版本和修订版本可更新	主版本和次版本不变，仅修订版本可更新
示例	`^1.2.3` 允许更新到 `1.3.0`	`~1.2.3` 允许更新到 `1.2.4`
适用场景	希望自动获取新功能，但避免破坏性变更	仅希望修复问题，不引入新功能

{
    "dependencies": {
        "lodash": "4.17.21"
    }
}

{
    "dependencies": {
        "lodash": "~4.17.21"
    }
}

{
    "dependencies": {
        "lodash": "^4.17.21"
    }
}

{
    "bundledDependencies": ["lodash", "express"],
    "optionalDependencies": {"fsevents": "^2.3.2"},
    "peerDependencies": {"react": ">=16.8.0"},
    "devDependencies": {"eslint": "^7.32.0", "webpack": "5.51.1"},
    "dependencies": {"lodash": "^4.17.21", "express": "4.17.1"}
}

// module.js
export const name = 'ES6';
export default function greet() {
    console.log('Hello, ES6!');
}

// module.js
const name = 'ES6';
export default name;

// module.js
export const name = 'ES6';
export function greet() {
    console.log('Hello, ES6!');
}

// app.js
import('./module.js').then(module => {
    console.log(module.name); // 输出：ES6
});

// app.js
import * as module from './module.js';
console.log(module.name); // 输出：ES6
module.greet(); // 输出：Hello, ES6!

// app.js
import myModule from './module.js';
console.log(myModule); // 输出：ES6

// app.js
import { name, greet } from './module.js';
console.log(name); // 输出：ES6
greet(); // 输出：Hello, ES6!

<script type="module" src="app.js"></script>

<template>
    <div v-if="show" key="a">内容 A</div>
    <div v-else key="b">内容 B</div>
</template>

<template>
    <component :is="currentComponent" :key="currentComponent"></component>
</template>

<template>
    <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
</template>

<template>
    <ul>
        <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
</template>

<template>
    <ul>
        <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
</template>

div {
    color: black;
}
::before {
    content: ' ';
}

.myClass {
    color: green;
}
[type="text"] {
    color: yellow;
}
a:hover {
    color: purple;
}

#myId {
    color: blue;
}

<div style="color: red;">Hello</div>

div {
    color: red !important;
}

#myId .myClass div {
    color: red; /* 权重：100 + 10 + 1 = 111 */
}
.myClass div {
    color: blue; /* 权重：10 + 1 = 11 */
}
div {
    color: green; /* 权重：1 */
}

<div style="color: red;">Hello</div>

div {
    color: green; /* 权重：1 */
}

<div class="myClass">Hello</div>

.myClass {
    color: green; /* 权重：10 */
}
div {
    color: red; /* 权重：1 */
}

<div id="myId" class="myClass">Hello</div>

#myId {
    color: blue; /* 权重：100 */
}
.myClass {
    color: green; /* 权重：10 */
}
div {
    color: red; /* 权重：1 */
}

for (let i = 0; i < 1000000000; i++) {}
// 长时间运行的循环
console.log('执行完毕'); // 被阻塞

function animate() {
    // 执行动画逻辑
    requestAnimationFrame(animate);
}
animate();

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    fragment.appendChild(div);
}
document.body.appendChild(fragment);

function processChunk(start, end) {
    for (let i = start; i < end; i++) {
        // 处理任务
    }
    if (end < 1000000) {
        setTimeout(() => processChunk(end, end + 1000), 0);
    }
}
processChunk(0, 1000);

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('开始任务');
worker.onmessage = (event) => {
    console.log('收到消息:', event.data);
};

// worker.js
self.onmessage = (event) => {
    console.log('收到消息:', event.data);
    self.postMessage('任务完成');
};

console.log('开始');
setTimeout(() => {
    console.log('异步任务');
}, 0);
console.log('结束'); // 输出顺序：开始 → 结束 → 异步任务

console.log('开始');
setTimeout(() => {
    for (let i = 0; i < 1000000000; i++) {}
    // 长时间运行的循环
    console.log('异步任务');
}, 0);
console.log('结束'); // 页面不卡顿，用户操作可响应

console.log('开始');
for (let i = 0; i < 1000000000; i++) {}
// 长时间运行的循环
console.log('结束'); // 页面卡顿，用户操作无响应

promise
    .then((result) => console.log('成功:', result))
    .catch((error) => console.log('失败:', error))
    .finally(() => console.log('操作完成'));

promise
    .then((result) => {
        console.log('第一步:', result);
        return '第二步';
    })
    .then((result) => {
        console.log('第二步:', result);
    })
    .catch((error) => {
        console.log('失败:', error);
    });

promise
    .then((result) => {
        console.log('成功:', result);
    })
    .catch((error) => {
        console.log('失败:', error);
    });

const promise = new Promise((resolve, reject) => {
    // 异步操作
    if (/* 操作成功 */) {
        resolve('成功结果');
    } else {
        reject('失败原因');
    }
});

const promises = [
    Promise.resolve('任务 1'),
    Promise.reject('任务 2 失败'),
];
Promise.allSettled(promises).then((results) => console.log('所有结果:', results));

const promises = [
    new Promise((resolve) => setTimeout(() => resolve('任务 1'), 1000)),
    new Promise((resolve) => setTimeout(() => resolve('任务 2'), 500)),
];
Promise.race(promises).then((result) => console.log('第一个完成:', result));

const promises = [
    Promise.resolve('任务 1'),
    Promise.resolve('任务 2'),
];
Promise.all(promises)
    .then((results) => console.log('全部成功:', results))
    .catch((error) => console.log('失败:', error));

const rejectedPromise = Promise.reject('失败');
rejectedPromise.catch((error) => console.log(error)); // 输出：失败

const resolvedPromise = Promise.resolve('成功');
resolvedPromise.then((result) => console.log(result)); // 输出：成功

function step1() {
    return Promise.resolve('第一步');
}
function step2(data) {
    return Promise.resolve(data + ' → 第二步');
}
step1()
    .then(step2)
    .then((result) => console.log(result));

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('数据加载完成');
        }, 1000);
    });
}
fetchData()
    .then((result) => console.log(result))
    .catch((error) => console.log(error));

window.addEventListener('scroll', () => {
    if (window.scrollY + window.innerHeight >= document.body.offsetHeight) {
        loadMoreData();
    }
});

function loadData(page, pageSize) {
    const start = (page - 1) * pageSize;
    const end = start + pageSize;
    return data.slice(start, end);
}
const pageData = loadData(1, 100); // 加载第一页的 100 条数据

function processInBatches(data, batchSize, processFn) {
    let index = 0;
    function nextBatch() {
        const batch = data.slice(index, index + batchSize);
        processFn(batch);
        index += batchSize;
        if (index < data.length) {
            setTimeout(nextBatch, 0); // 下一批次
        }
    }
    nextBatch();
}
processInBatches(data, 1000, (batch) => {
    console.log('处理批次:', batch);
});

// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (event) => {
    console.log('处理结果:', event.data);
};

// worker.js
self.onmessage = (event) => {
    const result = processData(event.data); // 处理数据
    self.postMessage(result);
};

const request = indexedDB.open('myDatabase', 1);
request.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction('myStore', 'readwrite');
    const store = transaction.objectStore('myStore');
    store.add(data, 'key');
};

const compressedData = JSON.stringify(data);
const decompressedData = JSON.parse(compressedData);

const buffer = new ArrayBuffer(1024); // 1KB 缓冲区
const intArray = new Int32Array(buffer); // 32 位整数数组

const fragment = document.createDocumentFragment();
data.forEach((item) => {
    const div = document.createElement('div');
    div.textContent = item;
    fragment.appendChild(div);
});
container.appendChild(fragment);

function render() {
    // 渲染逻辑
    requestAnimationFrame(render);
}
render();

function renderVirtualList(data, container, itemHeight) {
    const visibleCount = Math.ceil(container.clientHeight / itemHeight);
    const start = Math.floor(container.scrollTop / itemHeight);
    const end = start + visibleCount;
    const visibleData = data.slice(start, end);
    renderItems(visibleData);
}
window.addEventListener('scroll', () => {
    renderVirtualList(data, container, 50);
});

<!--[if IE]>
<link rel="stylesheet" href="ie.css">
<![endif]-->

// .babelrc
{
    "presets": ["@babel/preset-env"]
}

// package.json
{
    "browserslist": ["last 2 versions", "> 1%", "not dead"]
}

// 示例：使用 core-js 提供 Promise 的 Polyfill
import 'core-js/features/promise';

<meta name="viewport" content="width=device-width, initial-scale=1.0">

.container {
    display: flex;
    justify-content: space-between;
}

@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

body {
    font-family: Arial, Helvetica, sans-serif;
}

<img data-src="image.jpg" alt="Lazy Loaded Image" class="lazyload">

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Fallback Image">
</picture>

.ellipse {
    width: 200px;
    height: 100px;
    background-color: #ff6347;
    border-radius: 50%;
    transform: rotate(45deg);
}

.ellipse {
    width: 100px;
    height: 200px;
    background-color: #ff6347;
    border-radius: 50%;
}

.ellipse {
    width: 200px;
    height: 100px;
    background-color: #ff6347;
    border-radius: 50%;
}

.ellipse {
    width: 200px;
    height: 100px;
    background-color: #ff6347;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

.ellipse {
    width: 200px;
    height: 100px;
    background-color: #ff6347;
    clip-path: ellipse(50% 50% at 50% 50%);
}

<svg width="200" height="100">
    <ellipse cx="100" cy="50" rx="100" ry="50" fill="#ff6347"/>
</svg>

特性	`setTimeout`	`setInterval`
功能	在指定延迟后执行一次回调函数。	每隔指定时间重复执行回调函数。
语法	`setTimeout(callback, delay)`	`setInterval(callback, delay)`
停止方法	`clearTimeout(timeoutId)`	`clearInterval(intervalId)`
适用场景	延迟执行、单次任务。	重复执行、轮询任务。

console.log('开始');
setTimeout(() => {
    console.log('setTimeout');
}, 0);
console.log('结束'); // 输出顺序：开始 → 结束 → setTimeout

function repeat() {
    console.log('重复执行');
    setTimeout(repeat, 1000);
}
repeat();

import whyDidYouRender from '@welldone-software/why-did-you-render';
whyDidYouRender(React);

const start = performance.now();
myFunction(); // 需要测试的函数
const end = performance.now();
console.log(`耗时：${end - start} 毫秒`);

console.time('myFunction');
myFunction(); // 需要测试的函数
console.timeEnd('myFunction');

console.time('myFunction');
myFunction(); // 需要测试的函数
console.timeEnd('myFunction');

const start = performance.now();
myFunction(); // 需要测试的函数
const end = performance.now();
console.log(`耗时：${end - start} 毫秒`);

import whyDidYouRender from '@welldone-software/why-did-you-render';
whyDidYouRender(React);

npm install @welldone-software/why-did-you-render --save-dev

class PerformanceTracker {
    constructor() {
        this.metrics = {};
    }
    start(name) {
        this.metrics[name] = performance.now();
    }
    end(name) {
        const duration = performance.now() - this.metrics[name];
        console.log(`${name} 耗时：${duration} 毫秒`);
    }
}
const tracker = new PerformanceTracker();
tracker.start('myFunction');
myFunction(); // 需要测试的函数
tracker.end('myFunction');

function add(a, b) {
    return a + b;
}

const add = (a, b) => a + b;

const obj = {
    value: 42,
    getValue: function() {
        console.log(this.value); // 输出：42
    }
};
obj.getValue();

const obj = {
    value: 42,
    getValue: () => {
        console.log(this.value); // 输出：undefined
    }
};
obj.getValue();

function showArgs() {
    console.log(arguments);
}
showArgs(1, 2, 3); // 输出：{ 0: 1, 1: 2, 2: 3 }

const showArgs = (...args) => {
    console.log(args);
};
showArgs(1, 2, 3); // 输出：[1, 2, 3]

function Foo() {}
const foo = new Foo(); // 正常执行

const Foo = () => {};
const foo = new Foo(); // 报错：Foo is not a constructor

function Foo() {}
console.log(Foo.prototype); // 输出：{ constructor: Foo }

const Foo = () => {};
console.log(Foo.prototype); // 输出：undefined

function Person(name) {
    this.name = name;
}
const person = new Person('Alice');

const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);

特性	箭头函数	普通函数
语法	简洁，适合单行函数	使用 `function` 关键字定义
`this` 指向	继承自外层作用域	指向调用函数的对象
`arguments` 对象	无，需使用剩余参数	有 `arguments` 对象
构造函数	不能作为构造函数	可以作为构造函数
原型链	无 `prototype` 属性	有 `prototype` 属性

function debounce(func, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

function throttle(func, delay) {
    let lastTime = 0;
    return function (...args) {
        const now = Date.now();
        if (now - lastTime >= delay) {
            func.apply(this, args);
            lastTime = now;
        }
    };
}

特性	防抖（Debounce）	节流（Throttle）
执行时机	事件停止触发后执行	每隔一段时间执行一次
触发频率	高频触发时只执行最后一次	高频触发时按固定频率执行
实现原理	使用 `setTimeout` 延迟执行	使用时间戳或 `setTimeout` 控制频率
应用场景	搜索框输入、窗口调整大小	滚动事件、按钮点击

const throttledScroll = throttle(() => {
    console.log('滚动事件处理');
}, 500);
// 用户滚动时触发
window.addEventListener('scroll', throttledScroll);

const debouncedSearch = debounce(() => {
    console.log('搜索请求已发送');
}, 500);
// 用户输入时触发
input.addEventListener('input', debouncedSearch);

console.log('开始');
setTimeout(() => {
    console.log('setTimeout');
}, 0);
Promise.resolve().then(() => {
    console.log('Promise');
});
console.log('结束');

特性	宏任务（Macro Task）	微任务（Micro Task）
任务类型	`setTimeout`、`setInterval`、I/O 操作	`Promise.then`、`MutationObserver`
执行顺序	在微任务之后执行	在宏任务之后、渲染之前执行
优先级	低	高
任务粒度	较大	较小

// 发送消息
window.postMessage('Hello', 'https://www.example.com');

// 接收消息
window.addEventListener('message', (event) => {
    if (event.origin !== 'https://www.example.com') return;
    console.log(event.data);
});

server {
    location /api {
        proxy_pass https://api.example.com;
    }
}

const socket = new WebSocket('wss://api.example.com');
socket.onmessage = (event) => {
    console.log(event.data);
};

<script>
function handleResponse(data) {
    console.log(data);
}
</script>
<script src="https://api.example.com/data?callback=handleResponse"></script>

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Fallback Image">
</picture>

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

npm install terser-webpack-plugin --save-dev

.icon {
    background-image: url('sprite.png');
    background-position: -10px -20px;
}

<img data-src="image.jpg" alt="Lazy Loaded Image" class="lazyload">

import { func1 } from 'module';
func1();

import('./module').then(module => {
    module.default();
});

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('v1').then((cache) => {
            return cache.addAll(['/', '/styles.css', '/app.js']);
        })
    );
});

location /static {
    expires 1y;
    add_header Cache-Control "public";
}

<style>
/* 关键 CSS */
</style>

function animate() {
    // 动画逻辑
    requestAnimationFrame(animate);
}
animate();

.element {
    transform: translateX(100px);
    opacity: 0.5;
}

// 页签 A：设置数据
localStorage.setItem('message', 'Hello from Tab A');

// 页签 B：监听 storage 事件
window.addEventListener('storage', (event) => {
    if (event.key === 'message') {
        console.log('收到消息:', event.newValue);
    }
});

// 页签 A：发送消息
const channel = new BroadcastChannel('myChannel');
channel.postMessage('Hello from Tab A');

// 页签 B：接收消息
const channel = new BroadcastChannel('myChannel');
channel.onmessage = (event) => {
    console.log('收到消息:', event.data);
};

// sharedWorker.js
const connections = [];
self.onconnect = (event) => {
    const port = event.ports;
    connections.push(port);
    port.onmessage = (event) => {
        connections.forEach((conn) => {
            if (conn !== port) conn.postMessage(event.data);
        });
    };
};

// 页签 A：发送消息
const worker = new SharedWorker('sharedWorker.js');
worker.port.postMessage('Hello from Tab A');

// 页签 B：接收消息
const worker = new SharedWorker('sharedWorker.js');
worker.port.onmessage = (event) => {
    console.log('收到消息:', event.data);
};

// 页签 A：打开页签 B 并发送消息
const tabB = window.open('tabB.html');
setTimeout(() => {
    tabB.postMessage('Hello from Tab A', '*');
}, 1000);

// 页签 B：接收消息
window.addEventListener('message', (event) => {
    console.log('收到消息:', event.data);
});

方法	优点	缺点	适用场景
`localStorage`	简单易用，无需额外 API	只能在同一源页签之间通信	简单数据共享
`BroadcastChannel`	支持消息通道，通信更灵活	只能在同一源页签之间通信	需要频繁通信的场景
`SharedWorker`	支持后台线程通信，性能更好	需要额外的 JavaScript 文件	复杂数据共享和通信
`window.open` + `postMessage`	支持跨域通信，灵活性强	需要手动管理页签引用	跨域页签通信

.container {
    height: 100px;
    line-height: 100px;
}

.container {
    text-align: center;
}

.container {
    display: table;
    margin: 0 auto;
}

.element {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.container {
    display: grid;
    place-items: center;
}

.container {
    display: flex;
    justify-content: center;
}

.element {
    width: 200px;
    margin: 0 auto;
}

.container {
    display: flex;
    justify-content: center;
}

.container {
    text-align: center;
}
.element {
    display: inline-block;
}

.element {
    float: left;
    width: 200px;
    margin: 0 auto;
}
.container::after {
    content: '';
    display: table;
    clear: both;
}

方法	适用场景	示例代码
`text-align: center`	行内元素、行内块级元素	`.container { text-align: center; }`
`line-height`	单行文本元素	`.container { line-height: 100px; }`
`margin: 0 auto`	固定宽度的块级元素	`.element { margin: 0 auto; }`
Flexbox	任意宽度的块级元素	`.container { display: flex; justify-content: center; }`
Grid	任意宽度的块级元素	`.container { display: grid; place-items: center; }`
绝对定位 + `transform`	未知宽度的块级元素	`.element { position: absolute; left: 50%; transform: translateX(-50%); }`
表格布局	需要兼容旧浏览器的场景	`.container { display: table; margin: 0 auto; }`

if (true) {
    var a = 1;
    let b = 2;
    const c = 3;
}
console.log(a); // 输出：1
console.log(b); // 报错：b is not defined
console.log(c); // 报错：c is not defined

console.log(b); // 报错：Cannot access 'b' before initialization
let b = 2;

console.log(a); // 输出：undefined
var a = 1;

let b = 1;
let b = 2; // 报错：Identifier 'b' has already been declared

var a = 1;
var a = 2;
console.log(a); // 输出：2

const c = 5;
c = 6; // 报错：Assignment to constant variable
const obj = { key: 'value' };
obj.key = 'newValue'; // 允许修改属性

var a = 1;
a = 2;
let b = 3;
b = 4;

特性	`var`	`let`	`const`
作用域	函数作用域	块级作用域	块级作用域
变量提升	提升（赋值不提升）	提升（存在 TDZ）	提升（存在 TDZ）
重复声明	允许	不允许	不允许
值的修改	允许	允许	不允许（对象属性可修改）

// 全局作用域
const globalVar = 'Global';

function myFunction() {
    // 函数作用域
    const functionVar = 'Function';
    console.log(globalVar); // 输出：Global
}

if (true) {
    // 块级作用域
    const blockVar = 'Block';
    console.log(globalVar); // 输出：Global
}

console.log(blockVar); // 报错：blockVar is not defined

const globalVar = 'Global';

function outerFunction() {
    const outerVar = 'Outer';
    function innerFunction() {
        const innerVar = 'Inner';
        console.log(globalVar); // 输出：Global
        console.log(outerVar); // 输出：Outer
        console.log(innerVar); // 输出：Inner
    }
    innerFunction();
}

outerFunction();

function outerFunction() {
    const outerVar = 'Outer';
    function innerFunction() {
        console.log(outerVar); // 输出：Outer
    }
    return innerFunction;
}

const closure = outerFunction();
closure();

function Parent() {
    this.name = 'Parent';
}
Parent.prototype.sayHello = function() {
    console.log('Hello from ' + this.name);
};

function Child() {}
Child.prototype = new Parent();

const child = new Child();
child.sayHello(); // 输出：Hello from Parent

function Parent(name) {
    this.name = name;
}

function Child(name) {
    Parent.call(this, name);
}

const child = new Child('Child');
console.log(child.name); // 输出：Child

function Parent(name) {
    this.name = name;
}
Parent.prototype.sayHello = function() {
    console.log('Hello from ' + this.name);
};

function Child(name) {
    Parent.call(this, name);
}
Child.prototype = new Parent();

const child = new Child('Child');
child.sayHello(); // 输出：Hello from Child

const parent = {
    name: 'Parent',
    sayHello: function() {
        console.log('Hello from ' + this.name);
    }
};

const child = Object.create(parent);
child.name = 'Child';
child.sayHello(); // 输出：Hello from Child

function createChild(parent) {
    const child = Object.create(parent);
    child.sayHi = function() {
        console.log('Hi from ' + this.name);
    };
    return child;
}

const parent = { name: 'Parent' };
const child = createChild(parent);
child.sayHi(); // 输出：Hi from Parent

function inheritPrototype(Child, Parent) {
    const prototype = Object.create(Parent.prototype);
    prototype.constructor = Child;
    Child.prototype = prototype;
}

function Parent(name) {
    this.name = name;
}
Parent.prototype.sayHello = function() {
    console.log('Hello from ' + this.name);
};

function Child(name) {
    Parent.call(this, name);
}
inheritPrototype(Child, Parent);

const child = new Child('Child');
child.sayHello(); // 输出：Hello from Child

class Parent {
    constructor(name) {
        this.name = name;
    }
    sayHello() {
        console.log('Hello from ' + this.name);
    }
}

class Child extends Parent {
    constructor(name) {
        super(name);
    }
}

const child = new Child('Child');
child.sayHello(); // 输出：Hello from Child

继承方式	优点	缺点
原型链继承	简单易用	引用类型属性共享，无法传参
构造函数继承	解决引用类型属性共享，支持传参	无法继承父类原型上的方法
组合继承	结合原型链和构造函数继承	父类构造函数被调用两次
原型式继承	简单易用，适合基于已有对象创建新对象	引用类型属性共享
寄生式继承	增强对象功能	引用类型属性共享
寄生组合式继承	解决组合继承的性能问题	实现复杂
ES6 类继承	语法简洁，解决传统继承方式的缺点	需要支持 ES6 的浏览器或环境

const request = indexedDB.open('myDatabase', 1);
request.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction('myStore', 'readwrite');
    const store = transaction.objectStore('myStore');
    store.add({ id: 1, name: 'John' });
};

sessionStorage.setItem('key', 'value');
console.log(sessionStorage.getItem('key')); // 输出：value

localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key')); // 输出：value

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('v1').then((cache) => {
            return cache.addAll(['/', '/styles.css', '/app.js']);
        })
    );
});

ETag: "abc123"
Last-Modified: Wed, 01 Jan 2020 00:00:00 GMT

Cache-Control: max-age=3600
Expires: Wed, 01 Jan 2025 00:00:00 GMT

const file = new Blob(['Hello, world!'], { type: 'text/plain' });
const reader = new FileReader();
reader.onload = (event) => {
    console.log(event.target.result); // 输出：Hello, world!
};
reader.readAsText(file);

document.cookie = 'username=John; expires=Wed, 01 Jan 2025 00:00:00 GMT; path=/';
console.log(document.cookie); // 输出：username=John

const request = indexedDB.open('myDatabase', 1);
request.onsuccess = (event) => {
    const db = event.target.result;
    const transaction = db.transaction('myStore', 'readwrite');
    const store = transaction.objectStore('myStore');
    store.add({ id: 1, name: 'John' });
};

sessionStorage.setItem('token', 'abc123');
console.log(sessionStorage.getItem('token')); // 输出：abc123

localStorage.setItem('user', JSON.stringify({ name: 'Alice' }));
const user = JSON.parse(localStorage.getItem('user'));
console.log(user); // 输出：{ name: 'Alice' }

import fs from 'fs';
const data = fs.readFileSync('file.txt', 'utf8');

import module from 'module-name';

const fs = require('fs');
const data = fs.readFileSync('file.txt', 'utf8');

const module = require('module-name');

// module.js
export const foo = 'bar';

// app.js
import { foo } from './module';
console.log(foo); // 输出：bar

// module.js
module.exports = { foo: 'bar' };

// app.js
const module = require('./module');
console.log(module.foo); // 输出：bar

特性	`require`（CommonJS）	`import`（ES6 Modules）
语法	`const module = require('module')`	`import module from 'module'`
加载方式	同步加载，运行时加载	异步加载，编译时加载
模块导出	`module.exports` 或 `exports`	`export` 或 `export default`
适用场景	Node.js 环境，动态加载	现代浏览器，模块化开发
兼容性	Node.js 原生支持	现代浏览器支持，Node.js 需配置

.element {
    width: 100px;
    height: 50px;
}

.parent {
    font-size: 16px;
}
.child {
    font-size: 1.5em; /* 16px * 1.5 = 24px */
    padding: 1em; /* 24px */
}

html {
    font-size: 16px;
}
.element {
    font-size: 1.5rem; /* 16px * 1.5 = 24px */
    padding: 1rem; /* 16px */
}

特性	`px`	`em`	`rem`
定义	绝对单位，表示像素	相对单位，基于当前元素的 `font-size`	相对单位，基于根元素的 `font-size`
特点	固定大小，不受其他元素影响	受当前元素和父元素的 `font-size` 影响	仅受根元素的 `font-size` 影响
适用场景	需要精确控制尺寸的场景	需要根据字体大小调整布局的场景	全局统一的布局调整

html {
    font-size: 16px;
}
.container {
    width: 100%;
    padding: 1rem; /* 16px */
}
.title {
    font-size: 2rem; /* 32px */
    margin-bottom: 1em; /* 32px */
}
.button {
    font-size: 1.25em; /* 继承父元素的字体大小 */
    padding: 0.5em 1em; /* 根据字体大小调整 */
}

.container {
    display: grid;
}
@supports not (display: grid) {
    .container {
        display: flex;
    }
}

.container {
    display: flex;
}

* {
    box-sizing: border-box;
}

npm install whatwg-fetch --save

import 'whatwg-fetch';
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log(data));

npm install @babel/core @babel/preset-env --save-dev

// .babelrc
{
    "presets": ["@babel/preset-env"]
}

<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Fallback Image">
</picture>

body {
    font-family: Arial, sans-serif;
}

问题类型	常见问题	解决方案
CSS 兼容性	盒模型差异、Flexbox、CSS Grid	使用 `box-sizing`、`autoprefixer`、`@supports`
JavaScript 兼容性	ES6+ 语法、现代 API	使用 Babel、Polyfill
HTML 兼容性	HTML5 标签、表单控件	使用 `html5shiv`、Polyfill
其他兼容性	字体、图片	使用 Web 安全字体、`<picture>` 标签

/* 标准盒模型 */
.element {
    box-sizing: content-box;
}

/* IE 盒模型 */
.element {
    box-sizing: border-box;
}

.element {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
    box-sizing: border-box;
}

.element {
    width: 200px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
    box-sizing: content-box;
}

* {
    box-sizing: border-box;
}

.element {
    border: 2px solid red;
    border-radius: 10px;
}

.container {
    padding: 20px;
}
.item {
    margin: 10px;
}

let x = 10;
const y = 20;

const add = (a, b) => a + b;

const name = 'Alice';
const message = `Hello, ${name}!`;

const { name, age } = { name: 'Alice', age: 25 };
console.log(name); // 输出：Alice

const [a, b] = [1, 2];
console.log(a); // 输出：1

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}
greet(); // 输出：Hello, Guest!

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出：{ a: 1, b: 2, c: 3 }

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];
console.log(arr2); // 输出：[1, 2, 3, 4]

class Person {
    constructor(name) {
        this.name = name;
    }
    greet() {
        console.log(`Hello, ${this.name}!`);
    }
}

const person = new Person('Alice');
person.greet(); // 输出：Hello, Alice!

// app.js
import { add } from './module';
console.log(add(1, 2)); // 输出：3

// module.js
export const add = (a, b) => a + b;

const promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Success'), 1000);
});
promise.then(result => console.log(result)); // 输出：Success

const id = Symbol('id');
const obj = { [id]: 123 };
console.log(obj[id]); // 输出：123

function* generator() {
    yield 1;
    yield 2;
}
const gen = generator();
console.log(gen.next().value); // 输出：1

const iterable = {
    [Symbol.iterator]() {
        let count = 0;
        return {
            next() {
                return {
                    value: count++,
                    done: count > 3
                };
            }
        };
    }
};
for (const value of iterable) {
    console.log(value); // 输出：0, 1, 2
}

const map = new Map();
map.set('name', 'Alice');
console.log(map.get('name')); // 输出：Alice

const set = new Set([1, 2, 3]);
set.add(4);
console.log(set.has(2)); // 输出：true

Cache-Control: max-age=3600
Expires: Wed, 01 Jan 2025 00:00:00 GMT

Expires: Wed, 01 Jan 2025 00:00:00 GMT

Cache-Control: max-age=3600

Last-Modified: Wed, 01 Jan 2020 00:00:00 GMT
ETag: "abc123"

ETag: "abc123"
If-None-Match: "abc123"

Last-Modified: Wed, 01 Jan 2020 00:00:00 GMT
If-Modified-Since: Wed, 01 Jan 2020 00:00:00 GMT

特性	强缓存	协商缓存
是否发送请求	否	是
缓存判断方式	浏览器直接判断	服务器判断
实现机制	`Cache-Control`、`Expires`	`Last-Modified`、`ETag`
适用场景	静态资源	动态资源

const router = new VueRouter({
    mode: 'hash',
    routes: [
        { path: '/home', component: Home },
        { path: '/about', component: About }
    ]
});

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
</IfModule>

location / {
    try_files $uri $uri/ /index.html;
}

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/home', component: Home },
        { path: '/about', component: About }
    ]
});

特性	Hash 模式	History 模式
URL 示例	`http://example.com/#/home`	`http://example.com/home`
是否需要服务器配置	否	是
兼容性	兼容所有浏览器	需要 HTML5 支持
SEO 支持	不支持	支持
适用场景	静态站点	动态站点

let x = 10;
x = 'Hello'; // 类型改变，可能导致错误

缺点	问题描述	解决方案
单线程模型	长时间任务阻塞主线程	使用异步编程、Web Workers
弱类型语言	变量类型动态改变，容易引发运行时错误	使用 TypeScript、ESLint
浏览器兼容性	不同浏览器支持不一致	使用 Babel、Polyfill
安全问题	容易被恶意用户篡改或攻击	验证用户输入、使用 HTTPS
性能问题	执行速度慢，复杂 DOM 操作影响性能	使用虚拟 DOM、优化动画
调试困难	错误提示不明确，异步代码调试复杂	使用开发者工具、`console.log`
生态系统碎片化	工具和库选择过多，学习成本高	根据需求选择工具，关注主流技术趋势

function Person(name) {
    this.name = name;
}
Person.prototype.greet = function() {
    console.log(`Hello, ${this.name}!`);
};

const person = new Person('Alice');
person.greet(); // 输出：Hello, Alice!

function Person() {}
console.log(Person.prototype); // 输出：Person {}

const obj = {};
console.log(obj.__proto__); // 输出：Object.prototype

const obj = {};
console.log(obj.toString()); // 输出：[object Object]

const parent = {
    name: 'Parent',
    sayHello: function() {
        console.log(`Hello, ${this.name}!`);
    }
};

const child = Object.create(parent);
child.name = 'Child';
child.sayHello(); // 输出：Hello, Child!

function Parent() {
    this.name = 'Parent';
}
Parent.prototype.sayHello = function() {
    console.log(`Hello, ${this.name}!`);
};

function Child() {}
Child.prototype = new Parent();

const child = new Child();
child.sayHello(); // 输出：Hello, Parent!

Content-Security-Policy: default-src 'self'
Set-Cookie: sessionId=123; HttpOnly; Secure

function escapeHTML(str) {
    return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}

Set-Cookie: sessionId=123; SameSite=Strict; Secure

<form action="/transfer" method="POST">
    <input type="hidden" name="_csrf" value="csrf_token">
    <button type="submit">Submit</button>
</form>

if (req.headers.referer !== 'https://example.com') {
    return res.status(403).send('Forbidden');
}

攻击类型	定义	防御措施
XSS	攻击者在网页中注入恶意脚本	输入过滤、输出编码、设置 HTTP 头
CSRF	攻击者诱导用户执行非预期的操作	验证请求来源、使用 CSRF Token、设置 SameSite Cookie

Content-Type: text/html
Content-Length: 1234

HTTP/1.1 200 OK

Host: example.com
User-Agent: Mozilla/5.0

GET /index.html HTTP/1.1

DELETE /delete HTTP/1.1

PUT /update HTTP/1.1
Content-Type: application/json
{"name": "Bob"}

POST /submit HTTP/1.1
Content-Type: application/json
{"name": "Alice"}

GET /index.html HTTP/1.1

function chunkArray(array, size) {
    const chunks = [];
    for (let i = 0; i < array.length; i += size) {
        chunks.push(array.slice(i, i + size));
    }
    return chunks;
}

const data = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const chunks = chunkArray(data, 3);
console.log(chunks); // 输出：[[1, 2, 3], [4, 5, 6], [7, 8, 9]]

function chunkFile(file, size) {
    const chunks = [];
    let start = 0;
    while (start < file.size) {
        chunks.push(file.slice(start, start + size));
        start += size;
    }
    return chunks;
}

const file = new File(['a'.repeat(1024 * 1024)], 'example.txt');
const chunks = chunkFile(file, 1024 * 100); // 每片 100KB
console.log(chunks); // 输出：[Blob, Blob, ...]

function chunkTask(task, data, size, callback) {
    let index = 0;
    function run() {
        for (let i = 0; i < size && index < data.length; i++) {
            task(data[index]);
            index++;
        }
        if (index < data.length) {
            setTimeout(run, 0); // 分批执行
        } else {
            callback();
        }
    }
    run();
}

const data = new Array(1000).fill(0).map((_, i) => i);
chunkTask((item) => console.log(item), data, 100, () => console.log('任务完成'));

async function chunkStream(stream, size) {
    const reader = stream.getReader();
    const chunks = [];
    let result;
    while (!(result = await reader.read()).done) {
        chunks.push(result.value.slice(0, size));
    }
    return chunks;
}

const stream = new ReadableStream({
    start(controller) {
        for (let i = 0; i < 10; i++) {
            controller.enqueue(new Uint8Array([i]));
        }
        controller.close();
    }
});

chunkStream(stream, 2).then(chunks => console.log(chunks));

// main.js
const worker = new Worker('worker.js');
const data = new Array(1000).fill(0).map((_, i) => i);
const chunkSize = 100;
for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    worker.postMessage(chunk);
}
worker.onmessage = (event) => {
    console.log('处理结果:', event.data);
};

// worker.js
self.onmessage = (event) => {
    const result = event.data.map(item => item * 2);
    self.postMessage(result);
};

分片类型	适用场景	实现方法
数组分片	处理大数据集	使用 `slice` 分割数组
文件分片	大文件上传或处理	使用 `File.slice` 分割文件
任务分片	避免阻塞主线程	使用 `setTimeout` 或 `requestAnimationFrame`
数据流分片	渐进式加载或处理数据流	使用 `ReadableStream` 分割数据流
Web Workers	并行处理任务	使用 Web Workers 分片任务

<img data-src="image.jpg" alt="Lazy Loaded Image" class="lazyload">

document.addEventListener('DOMContentLoaded', () => {
    const images = document.querySelectorAll('.lazyload');
    const lazyLoad = () => {
        images.forEach(img => {
            if (img.getBoundingClientRect().top < window.innerHeight && !img.src) {
                img.src = img.dataset.src;
            }
        });
    };
    window.addEventListener('scroll', lazyLoad);
    window.addEventListener('resize', lazyLoad);
    lazyLoad();
});

<video data-src="video.mp4" controls class="lazyload"></video>

document.addEventListener('DOMContentLoaded', () => {
    const videos = document.querySelectorAll('.lazyload');
    const lazyLoad = () => {
        videos.forEach(video => {
            if (video.getBoundingClientRect().top < window.innerHeight && !video.src) {
                video.src = video.dataset.src;
                video.load();
            }
        });
    };
    window.addEventListener('scroll', lazyLoad);
    window.addEventListener('resize', lazyLoad);
    lazyLoad();
});

document.addEventListener('DOMContentLoaded', () => {
    const images = document.querySelectorAll('.lazyload');
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;
                observer.unobserve(img);
            }
        });
    });
    images.forEach(img => observer.observe(img));
});

.element {
    position: absolute;
    top: 10px;
    left: 10px;
}

.element {
    position: fixed;
    top: 10px;
    left: 10px;
}

.element {
    float: left;
}

.element {
    display: none;
}

.element {
    visibility: hidden;
}

方法	特点	示例
`position: absolute`	相对于最近的非 `static` 祖先元素定位	`position: absolute; top: 10px;`
`position: fixed`	相对于浏览器窗口定位	`position: fixed; top: 10px;`
`float`	脱离文档流，内容环绕其周围	`float: left;`
`display: none`	脱离文档流，不占据空间	`display: none;`
`visibility: hidden`	脱离文档流，占据空间	`visibility: hidden;`

let a = 10; // 基本类型，存储在栈中
function foo() {
    let b = 20; // 局部变量，存储在栈中
}
foo();

let obj = { name: 'Alice' }; // 引用类型，存储在堆中
let arr = [1, 2, 3]; // 引用类型，存储在堆中

let a = 10; // 基本类型，存储在栈中
let b = a; // 复制值，b 也存储在栈中
b = 20; // 修改 b，不影响 a

let obj1 = { name: 'Alice' }; // 引用类型，堆中存储对象，栈中存储地址
let obj2 = obj1; // 复制地址，obj2 和 obj1 指向同一对象
obj2.name = 'Bob'; // 修改 obj2，obj1 也会被修改

特性	栈（Stack）	堆（Heap）
存储内容	基本类型、函数调用栈	引用类型
内存管理	系统自动管理	开发者或垃圾回收机制管理
访问速度	快	慢
存储空间	有限	较大
生命周期	短（函数执行完毕后自动释放）	长（需要手动释放或由垃圾回收机制回收）

<input v-model="message" />

<input :value="message" @input="message = $event.target.value" />

function model(el, dir, _warn) {
    const value = dir.value;
    const modifiers = dir.modifiers;
    const tag = el.tag;
    const type = el.attrsMap.type;
    if (tag === 'input' && type === 'checkbox') {
        // 处理复选框
    } else if (tag === 'input' && type === 'radio') {
        // 处理单选框
    } else if (tag === 'input' || tag === 'textarea') {
        // 处理输入框和文本域
        genDefaultModel(el, value, modifiers);
    } else if (tag === 'select') {
        // 处理下拉框
    } else {
        // 其他情况
    }
}

export default {
    model: {
        prop: 'checked',
        event: 'change'
    },
    props: ['checked'],
    template: `<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" />`
};

// 子组件
export default {
    model: {
        prop: 'value',
        event: 'input'
    },
    props: ['value']
};

// 父组件
<Child v-model="message" />

// 子组件
this.$emit('update', newValue);

// 父组件
<Child @update="handleUpdate" />

// 父组件
<Child :message="message" />

// 子组件
export default {
    props: ['message']
};

// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 组件 A
EventBus.$emit('update', newValue);

// 组件 B
EventBus.$on('update', value => {
    console.log(value);
});

// 父组件
<ChildA @update="handleUpdate" />
<ChildB :message="message" />

// store.js
export default new Vuex.Store({
    state: {
        message: 'Hello'
    },
    mutations: {
        updateMessage(state, newValue) {
            state.message = newValue;
        }
    }
});

// 组件 A
this.$store.commit('updateMessage', newValue);

// 组件 B
this.$store.state.message;

// 祖先组件
export default {
    provide() {
        return {
            message: this.message
        };
    }
};

// 后代组件
export default {
    inject: ['message']
};

this.$parent.methodName();
this.$children.methodName();

// 父组件
<Child ref="child" />
this.$refs.child.methodName();

通信方式	适用场景	示例
`props` 和 `$emit`	父子组件通信	`<Child :message="message" @update="handleUpdate" />`
`v-model`	父子组件双向绑定	`<Child v-model="message" />`
Event Bus	兄弟组件或任意组件通信	`EventBus.$emit('update', newValue)`
`provide` 和 `inject`	跨层级组件通信	`provide: { message }, inject: ['message']`
Vuex	全局状态管理	`this.$store.commit('updateMessage', newValue)`
`$refs`	直接访问子组件	`this.$refs.child.methodName()`
`$parent` 和 `$children`	访问父组件或子组件	`this.$parent.methodName()`

const oldChildren = [
    { key: 'a', value: 'A' },
    { key: 'b', value: 'B' },
    { key: 'c', value: 'C' }
];
const newChildren = [
    { key: 'c', value: 'C' },
    { key: 'a', value: 'A' },
    { key: 'd', value: 'D' }
];
// 使用 key 对比，更新节点

function patchVnode(oldVnode, vnode) {
    if (oldVnode === vnode) return;
    const elm = vnode.elm = oldVnode.elm;
    const oldCh = oldVnode.children;
    const ch = vnode.children;
    if (vnode.data) {
        updateAttrs(oldVnode, vnode);
    }
    if (isUndef(vnode.text)) {
        if (isDef(oldCh) && isDef(ch)) {
            if (oldCh !== ch) updateChildren(elm, oldCh, ch);
        } else if (isDef(ch)) {
            addVnodes(elm, null, ch, 0, ch.length - 1);
        } else if (isDef(oldCh)) {
            removeVnodes(elm, oldCh, 0, oldCh.length - 1);
        }
    } else if (oldVnode.text !== vnode.text) {
        setTextContent(elm, vnode.text);
    }
}

npm install webpack webpack-cli --save-dev

const path = require('path');
module.exports = {
    mode: 'development', // 打包模式
    entry: './src/index.js', // 入口文件
    output: {
        filename: 'bundle.js', // 输出文件名
        path: path.resolve(__dirname, 'dist') // 输出路径
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 匹配 CSS 文件
                use: ['style-loader', 'css-loader'] // 使用加载器
            },
            {
                test: /\.(png|jpg|gif)$/, // 匹配图片文件
                use: ['file-loader'] // 使用加载器
            }
        ]
    },
    plugins: [] // 插件配置
};

module.exports = {
    entry: {
        app: './src/app.js',
        admin: './src/admin.js'
    },
    output: {
        filename: '[name].bundle.js', // 使用 [name] 占位符
        path: path.resolve(__dirname, 'dist')
    }
};

npm install file-loader --save-dev

module.exports = {
    module: {
        rules: [
            {
                test: /\.(png|jpg|gif)$/,
                use: ['file-loader']
            }
        ]
    }
};

npm install babel-loader @babel/core @babel/preset-env --save-dev

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

npm install style-loader css-loader --save-dev

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
    optimization: {
        minimizer: [new TerserPlugin()]
    }
};

npm install html-webpack-plugin --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html' // 指定模板文件
        })
    ]
};

npm install webpack-dev-server --save-dev

module.exports = {
    devServer: {
        contentBase: './dist', // 服务器根目录
        port: 8080, // 端口号
        hot: true // 启用热更新
    }
};

步骤	描述
URL 解析	解析协议、域名、端口和路径，检查缓存
DNS 解析	查询 DNS 缓存，递归查询域名对应的 IP 地址
建立 TCP 连接	通过三次握手建立连接，HTTPS 进行 TLS 握手
发送 HTTP 请求	构造并发送 HTTP 请求到服务器
服务器处理请求	解析请求，处理请求，生成 HTTP 响应
接收 HTTP 响应	接收并检查服务器返回的 HTTP 响应
解析和渲染页面	构建 DOM 树、CSSOM 树、渲染树，布局和绘制
执行 JavaScript	解析和执行 JavaScript，触发页面事件

self.addEventListener('install', (event) => {
    event.waitUntil(
        caches.open('v1').then((cache) => {
            return cache.addAll(['/', '/styles.css', '/app.js']);
        })
    );
});

Cache-Control: max-age=31536000

<link rel="preload" href="styles.css" as="style">

<script src="app.js" async></script>

<img data-src="image.jpg" alt="Lazy Loaded Image" class="lazyload">

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Fallback Image">
</picture>

function animate() {
    // 动画逻辑
    requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

<script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Article Title"
}
</script>

<meta name="description" content="Page description">

优化方法	描述
减少 HTTP 请求	合并文件、使用雪碧图、内联资源
使用缓存	浏览器缓存、Service Worker 缓存
优化资源加载	延迟加载、异步加载脚本、预加载关键资源
优化代码	压缩代码、移除未使用的代码、优化 CSS
优化图片	使用合适的格式、压缩图片、响应式图片
优化渲染性能	减少重绘和重排、使用 `requestAnimationFrame`、虚拟 DOM
优化 SEO	语义化 HTML、优化 `meta` 标签、结构化数据

前端面试题精选：闭包、事件循环与 Vue 核心原理

前端面试题

闭包

1. 定义

2. 闭包的核心原理

3. 闭包的常见用途

3.1 私有变量封装

3.2 函数柯里化（Currying）

3.3 事件处理与回调

4. 闭包的陷阱与解决方案

4.1 循环中的闭包问题

4.2 内存泄漏

5. 闭包面试题示例

事件循环（Event Loop）

定义

核心概念

事件循环的执行流程

事件循环示例

应用场景

注意事项

总结

BFC（块级格式化上下文）

定义

触发条件

特性

应用场景

代码示例

注意事项

总结

内存泄漏

定义

内存管理机制

常见的内存泄漏场景

内存泄漏的检测与排查

避免内存泄漏的最佳实践

总结

Vue 的虚拟 DOM

定义

工作原理

优点

实现细节

应用场景

局限性

MVVM

定义

核心概念

工作流程

优点

缺点

应用场景

Vue2 与 Vue3 响应式原理

Vue2 的响应式原理

Vue3 的响应式原理

Vue2 与 Vue3 响应式原理的对比

Vue3 的其他响应式优化

代码示例对比

深拷贝与浅拷贝

拷贝的定义

浅拷贝的实现方式

深拷贝的实现方式

浅拷贝与深拷贝的对比

代码示例

深拷贝的注意事项

总结

npm 开发依赖与生产依赖

开发依赖（devDependencies）

生产依赖（dependencies）

开发依赖与生产依赖的区别

如何选择依赖类型

最佳实践

package.json 中 ^ 和 ~ 的区别

版本号格式

^ 的含义

~ 的含义

^ 和 ~ 的区别

如何选择

示例

package.json 中的各种 dependencies

主要依赖类型

ES6 模块化

开发依赖（`devDependencies`）

生产依赖（`dependencies`）

`package.json` 中 `^` 和 `~` 的区别

`^` 的含义

`~` 的含义

`^` 和 `~` 的区别

`package.json` 中的各种 `dependencies`

模块的导出（`export`）

模块的导入（`import`）

Vue 中 `key` 的作用及为什么不能用 `index` 作为 `key` 详解

`key` 的作用

`key` 的使用场景

为什么不能用 `index` 作为 `key`

正确的 `key` 使用方式

使用 `border-radius` 绘制椭圆

使用 `border-radius` 的四个值绘制椭圆

使用 `clip-path` 绘制椭圆

`setTimeout` 和 `setInterval`

`setTimeout` 和 `setInterval` 的区别

`setTimeout` 设置为 `0` 的行为

为什么会有 `setTimeout` 和 `setInterval` 这两个 API

一、使用 `console.time` 和 `console.timeEnd`

二、使用 `performance.now()`

五、使用 `why-did-you-render`（React 项目）