JavaScript大前端算法
前端核心知识点全解析：HTML、JS、框架与工程化
系统梳理前端面试核心知识，包括 HTML/CSS 语义化盒模型布局响应式设计、JavaScript 类型作用域原型异步事件循环深拷贝防抖节流、浏览器渲染原理回流重绘跨域 HTTP 缓存安全、Vue 框架生命周期虚拟 DOM 状态管理路由 SSR、工程化 Webpack Babel 模块化 Git CI/CD、性能优化加载渲染打包指标及数据结构算法设计模式。旨在帮助开发者深入理解原理，提升解决复杂问题能力。
系统梳理前端面试核心知识，包括 HTML/CSS 语义化盒模型布局响应式设计、JavaScript 类型作用域原型异步事件循环深拷贝防抖节流、浏览器渲染原理回流重绘跨域 HTTP 缓存安全、Vue 框架生命周期虚拟 DOM 状态管理路由 SSR、工程化 Webpack Babel 模块化 Git CI/CD、性能优化加载渲染打包指标及数据结构算法设计模式。旨在帮助开发者深入理解原理，提升解决复杂问题能力。
前端面试不仅考察知识点的记忆，更关注对原理的理解、工程化的思考以及解决复杂问题的能力。本文将从 HTML/CSS、JavaScript、浏览器与网络、框架、工程化、性能优化、算法与设计模式等多个维度，系统梳理前端面试中的核心知识点，并提供深入解析及案例。
讲解：语义化 HTML 是指使用具有明确含义的标签（如 <header>、<nav>、<article>、<section>）来描述网页结构，而不是单纯使用 <div> 和 <span>。
解析：
<header>、<footer>、<main>、<aside>、<article>、<section>、<nav>。案例：
<!-- 非语义化 -->
<div class="header">
<div class="logo">MySite</div>
<div class="nav">
<a href="/">首页</a>
<a href="/about">关于</a>
</div>
</div>
<!-- 语义化 -->
<header>
<h1 class="logo">MySite</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
面试题：<b> 和 <strong> 的区别？
解析：<b> 仅表示粗体样式，无语义；<strong> 表示强调内容，有语义，屏幕阅读器会以重音读出。
讲解：CSS 盒模型描述了一个元素所占空间的结构，包括内容（content）、内边距（padding）、边框（border）、外边距（margin）。
解析：
width/height 只包含内容区，不包含 padding 和 border。总宽度 = width + padding + border + margin。width/height 包含内容、padding 和 border。总宽度 = width + margin。box-sizing: content-box（默认）或 box-sizing: border-box 设置。box-sizing 设置为 border-box 更易于布局，避免频繁计算宽高。案例：
/* 标准盒模型 */
.box-standard {
box-sizing: content-box;
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 10px;
/* 实际占据宽度 = 100 + 10*2 + 5*2 = 130px */
}
/* IE 盒模型（常用） */
.box-border {
box-sizing: border-box;
width: 100px;
padding: 10px;
border: 5px solid black;
margin: 10px;
/* 实际占据宽度 = 100px（包含 padding 和 border） */
}
讲解：float 使元素脱离文档流，向左或向右浮动，常用于文字环绕图片或实现多列布局。
解析：
clear: both。overflow: hidden）。.clearfix::after { content: ""; display: table; clear: both; }。案例：
<div class="container clearfix">
<div class="float-left">浮动元素</div>
<div class="float-left">浮动元素</div>
</div>
<style>
.float-left {
float: left;
width: 100px;
height: 100px;
background: lightblue;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
讲解：position 属性控制元素的定位方式，包括 static、relative、absolute、fixed、sticky。
解析：
relative：相对自身原本位置偏移，仍占文档流空间。absolute：相对最近的非 static 祖先元素定位，脱离文档流。fixed：相对视口定位，脱离文档流。sticky：粘性定位，根据滚动阈值在 relative 和 fixed 之间切换。z-index 仅在非 static 定位元素上生效，且受层叠上下文影响。案例：
<div class="parent" style="position: relative;height: 200px;background: #eee;">
<div class="child" style="position: absolute;bottom: 10px;right: 10px;">绝对定位</div>
</div>
<div class="sticky" style="position: sticky;top: 0;">粘性头部</div>
讲解：Flex 是一维布局模型，提供强大的对齐和空间分配能力。
解析：
display: flex；flex-direction（主轴方向）；justify-content（主轴对齐）；align-items（交叉轴对齐）；flex-wrap（换行）。flex-grow（放大比例）、flex-shrink（缩小比例）、flex-basis（初始大小）；align-self（覆盖容器的 align-items）。justify-content: center; align-items: center）、圣杯布局、等分布局。案例：
.container {
display: flex;
justify-content: space-between;
align-items: center;
height: 200px;
}
.item {
flex: 1; /* 等分剩余空间 */
margin: 10px;
}
讲解：Grid 是二维布局模型，将容器划分为行和列，可精确控制元素位置。
解析：
display: grid；grid-template-rows/columns 定义行/列轨道；gap 间隙；justify/align-items 控制单元格内对齐。grid-row/column 指定项目占据的网格线；justify/align-self 控制项目自身对齐。案例：
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
gap: 10px;
}
.item {
background: lightcoral;
}
.item:first-child {
grid-column: 1 / 3; /* 跨两列 */
}
讲解：响应式设计使网站在不同设备（手机、平板、桌面）上都能良好显示。
解析：
<meta name="viewport" content="width=device-width, initial-scale=1"> 设置，确保页面宽度适配设备宽度。@media (max-width: 768px) { ... } 根据屏幕尺寸应用不同样式。em（相对于父元素字体）、rem（相对于根元素字体）、vw/vh（视口宽高百分比）、%。srcset 和 sizes 属性或 <picture> 元素，根据分辨率加载合适图片。案例：
<img srcset="small.jpg 300w, medium.jpg 600w, large.jpg 900w"
sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
src="large.jpg" alt="响应式图片">
<style>
.container {
width: 80%;
margin: 0 auto;
}
@media (max-width: 768px) {
.container {
width: 100%;
padding: 0 10px;
}
}
</style>
讲解：Sass、Less 等预处理器为 CSS 提供了变量、嵌套、混合、继承等编程特性。
解析：
$primary-color（Sass）或 @primary-color（Less），便于主题管理。@import 分割文件，最终编译为一个 CSS 文件。案例（Sass）：
$primary: #007bff;
$spacing: 1rem;
@mixin rounded($radius: 4px) {
border-radius: $radius;
}
.button {
background: $primary;
padding: $spacing/2 $spacing;
@include rounded(8px);
&:hover {
background: darken($primary, 10%);
}
}
讲解：BEM（Block Element Modifier）是一种 CSS 命名方法论，旨在提高代码可读性和可维护性。
解析：
.header、.menu。.header__logo、.menu__item。.header--fixed、.menu__item--active。案例：
<div class="card">
<div class="card__header">
<h2 class="card__title">标题</h2>
</div>
<div class="card__body">内容</div>
<div class="card__footer card__footer--highlighted">底部高亮</div>
</div>
<style>
.card__footer--highlighted {
background: yellow;
}
</style>
讲解：层叠上下文是 HTML 元素在 Z 轴上的层级概念，z-index 决定同一层叠上下文中元素的堆叠顺序。
解析：
position 非 static 且 z-index 值不为 auto、opacity 小于 1、transform 非 none、filter 非 none 等。z-index；不同上下文中，父级上下文决定层级。z-index 却无效，通常是因为元素不在同一个层叠上下文，或父级 z-index 限制。案例：
<div style="position: relative;z-index: 1;">
<div style="position: absolute;z-index: 999;">这个 999 受父级 1 限制</div>
</div>
<div style="position: relative;z-index: 2;">
<div style="position: absolute;z-index: 1;">这个 1 比上面的 999 大，因为父级 z-index=2 更高</div>
</div>
讲解：JavaScript 有 8 种数据类型：undefined、null、boolean、number、string、symbol（ES6）、bigint（ES11）、object。其中前 7 种为原始类型，object 为引用类型。
解析：
typeof：适合原始类型，但 typeof null === 'object'（历史遗留 bug），typeof function(){} === 'function'。instanceof：检查对象原型链，用于判断引用类型。Object.prototype.toString.call()：最准确，返回 [object Type]。+、== 等操作符会触发类型转换，需注意规则（如 [] == ![] 结果为 true）。案例：
console.log(typeof 42); // "number"
console.log(typeof 'hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (历史遗留)
console.log(typeof {}); // "object"
console.log(typeof function(){}); // "function"
console.log([] instanceof Array); // true
console.log({} instanceof Object); // true
console.log(Object.prototype.toString.call([])); // "[object Array]"
console.log(Object...());
讲解：作用域决定了变量的可访问范围。JavaScript 采用词法作用域（静态作用域），函数的作用域在定义时确定。闭包是指有权访问另一个函数作用域中变量的函数。
解析：
var 创建多个闭包（通常用 IIFE 或 let 解决）。案例：
// 闭包封装私有变量
function createCounter() {
let count = 0;
return {
increment: () => ++count,
decrement: () => --count,
getCount: () => count
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2
讲解：JavaScript 通过原型实现继承。每个对象都有一个 __proto__ 属性指向其构造函数的原型对象 prototype。原型链由多个对象的 __proto__ 链接而成。
解析：
prototype 属性。通过 new 调用构造函数创建实例，实例的 __proto__ 指向构造函数的 prototype。__proto__ 向上查找，直到 null。Object.prototype.__proto__ === null。Child.prototype = new Parent()。class 语法糖（本质仍是原型链）。instanceof 原理：检测右侧构造函数的 prototype 是否在左侧对象的原型链上。案例：
function Animal(name) {
this.name = name;
}
Animal.prototype.speak = function() {
console.log(`${this.name} makes a sound.`);
};
function Dog(name, breed) {
Animal.call(this, name); // 借用构造函数
this.breed = breed;
}
// 原型链继承
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
console.log(`${this.name} barks.`);
};
const d = new Dog('Rex', 'Husky');
d.speak(); // Rex makes a sound.
d.bark();
.(d );
.(d );
讲解：this 的值在函数调用时确定，取决于调用方式。
解析：
this 指向全局对象（浏览器中为 window），严格模式为 undefined。this 指向该对象。call、apply、bind 可以强制指定 this。
call(thisArg, arg1, arg2...)：立即执行，参数列表。apply(thisArg, [arg1, arg2...])：立即执行，参数数组。bind(thisArg, arg1, arg2...)：返回新函数，永久绑定 this。new 调用构造函数，this 指向新创建的对象。this，捕获外层作用域的 this（词法绑定）。new > 显式绑定 > 隐式绑定 > 默认绑定。案例：
function greet(greeting, punctuation) {
console.log(greeting + ', ' + this.name + punctuation);
}
const person = { name: 'Alice' };
greet.call(person, 'Hello', '!'); // Hello, Alice!
greet.apply(person, ['Hi', '?']); // Hi, Alice?
const bound = greet.bind(person, 'Hey');
bound('!!'); // Hey, Alice!!
讲解：将函数作为参数传入，在异步操作完成后调用。
解析：
案例：
function fetchData(callback) {
setTimeout(() => {
callback('data');
}, 1000);
}
fetchData((result) => {
console.log(result);
});
讲解：Promise 是异步编程的解决方案，代表一个最终完成或失败的操作。
解析：
pending（进行中）、fulfilled（已成功）、rejected（已失败）。状态一旦改变不可逆。then(onFulfilled, onRejected)：返回新 Promise，支持链式调用。catch(onRejected)：相当于 .then(null, onRejected)。finally(onFinally)：无论成功失败都会执行。Promise.all(iterable)：全部成功才成功，任一失败则立即失败。Promise.race(iterable)：首个状态变更的 Promise 决定结果。Promise.allSettled(iterable)：等待所有完成，返回每个结果（fulfilled/rejected）。Promise.any(iterable)：首个成功的结果，若全部失败则 AggregateError。catch 捕获错误，注意在 then 中抛出的错误也会被后续 catch 捕获。案例：
function asyncTask(shouldResolve) {
return new Promise((resolve, reject) => {
setTimeout(() => {
shouldResolve ? resolve('成功') : reject('失败');
}, 1000);
});
}
asyncTask(true).then(result => console.log(result)).catch(error => console.error(error));
Promise.all([asyncTask(true), asyncTask(true)]).then(results => console.log('全部成功', results)).catch(err => console.error('至少一个失败', err));
讲解：async/await 是 ES2017 引入的语法糖，基于 Promise，使异步代码像同步一样书写。
解析：
Promise.resolve() 包装。try/catch 捕获 await 中 Promise 的 reject。Promise.all 并发执行，避免串行等待。案例：
async function fetchData() {
try {
const result = await asyncTask(true);
console.log(result);
const data = await asyncTask(true);
console.log(data);
} catch (error) {
console.error('捕获错误:', error);
}
}
fetchData();
讲解：JavaScript 是单线程语言，通过事件循环机制处理异步任务。任务分为宏任务（macrotask）和微任务（microtask）。
解析：
setTimeout、setInterval、I/O、UI 渲染等。Promise.then/catch/finally、MutationObserver、queueMicrotask、process.nextTick（Node）。经典题目：
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');
// 输出顺序：1, 4, 3, 2
案例：
console.log('start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve().then(() => console.log('promise1'));
Promise.resolve().then(() => {
console.log('promise2');
setTimeout(() => console.log('timeout inside promise'), 0);
});
console.log('end');
// 输出：start, end, promise1, promise2, timeout, timeout inside promise
讲解：浅拷贝只复制对象的第一层属性，引用类型仍共享引用；深拷贝递归复制所有层级，生成独立对象。
解析：
Object.assign()、扩展运算符 {...obj}、Array.prototype.slice()。JSON.parse(JSON.stringify(obj))：缺点是无法处理函数、undefined、Symbol、循环引用。structuredClone()（现代浏览器支持）。_.cloneDeep。案例：
const original = { a: 1, b: { c: 2 } };
// 浅拷贝
const shallow = { ...original };
shallow.b.c = 3;
console.log(original.b.c); // 3 (相互影响)
// 深拷贝
const deep = JSON.parse(JSON.stringify(original));
deep.b.c = 4;
console.log(original.b.c); // 3 (独立)
讲解：防抖和节流是限制函数执行频率的优化手段。
解析：
节流（throttle）：规定一个单位时间内，只能触发一次函数。适用于滚动加载、频繁点击。
function throttle(fn, interval) {
let lastTime = 0;
return function (...args) {
const now = Date.now();
if (now - lastTime >= interval) {
fn.apply(this, args);
lastTime = now;
}
};
}
防抖（debounce）：在事件被触发 n 秒后执行回调，如果在这 n 秒内又被触发，则重新计时。适用于输入框搜索、窗口 resize。
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
案例：
<input id="search" type="text" placeholder="搜索">
<script>
const input = document.getElementById('search');
input.addEventListener('input', debounce(function(e) {
console.log('发送请求:', e.target.value);
}, 500));
</script>
讲解：掌握 ES5/ES6 中数组和对象的常用方法。
解析：
forEach、map、filter、reduce、some、every。indexOf、find、findIndex、includes。push/pop、shift/unshift、splice、concat、slice。sort、reverse。flat、flatMap。Object.keys()、Object.values()、Object.entries()。Object.assign()。Object.create()（指定原型）。Object.defineProperty()。案例：
// 数组
const arr = [1, 2, 3, 4];
const doubled = arr.map(x => x * 2); // [2, 4, 6, 8]
const evens = arr.filter(x => x % 2 === 0); // [2, 4]
const sum = arr.reduce((acc, cur) => acc + cur, 0); // 10
// 对象
const obj = { a: 1, b: 2 };
Object.keys(obj).forEach(key => console.log(key, obj[key]));
const merged = Object.assign({}, obj, { c: 3 }); // { a: 1, b: 2, c: 3 }
讲解：浏览器从获取 HTML 到渲染出页面的过程。
解析：
async 或 defer）。案例：
<!-- 模拟阻塞 -->
<script src="slow.js"></script> <!-- 会阻塞后续 DOM 解析 -->
<script async src="async.js"></script> <!-- 下载不阻塞，执行可能乱序 -->
<script defer src="defer.js"></script> <!-- 下载不阻塞，在 DOM 解析完后执行 -->
讲解：回流（Reflow）指元素的几何属性（尺寸、位置）发生变化，需要重新计算布局；重绘（Repaint）指元素样式改变但不影响布局（如颜色、背景）。
解析：
offsetWidth）时可能强制同步布局。class 或 cssText）。position: absolute）后再操作。requestAnimationFrame 读写 DOM。案例：
// 避免多次触发回流
const div = document.getElementById('box');
div.style.width = '100px'; // 回流
div.style.height = '100px'; // 再次回流
// 优化：合并修改
div.style.cssText = 'width: 100px; height: 100px;'; // 或使用 class
div.classList.add('big-box');
讲解：同源策略限制不同源（协议、域名、端口任一不同）的资源交互。跨域指突破此限制进行通信。
解析：
<script> 标签没有跨域限制，通过动态创建 script 加载带回调函数名的 URL。仅支持 GET。Access-Control-Allow-Origin 允许特定来源。支持所有 HTTP 方法。
案例：
// JSONP
function jsonp(url, callbackName) {
const script = document.createElement('script');
script.src = `${url}?callback=${callbackName}`;
window[callbackName] = (data) => {
console.log('接收数据:', data);
delete window[callbackName];
document.body.removeChild(script);
};
document.body.appendChild(script);
}
jsonp('http://api.example.com/data', 'handleData');
// CORS: 服务器设置响应头 Access-Control-Allow-Origin: *
讲解：HTTP 是 Web 基础协议，经历了多个版本演进。
解析：
案例：
// HTTP/2 服务器推送示例（需服务器支持）
// 在响应头中推送关键资源 Link:</styles.css>; rel=preload;as=style
讲解：浏览器缓存分为强缓存和协商缓存，减少网络请求，提高加载速度。
解析：
Expires：HTTP/1.0 头，绝对时间，依赖客户端时间。Cache-Control：HTTP/1.1 头，优先级高，常用值 max-age=秒。Last-Modified / If-Modified-Since：资源最后修改时间，可能不准确（如文件修改但内容未变）。ETag / If-None-Match：资源唯一标识（哈希），更精确。案例：
<!-- 通过 meta 禁用缓存（不推荐，用 HTTP 头） -->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<!-- 服务器设置强缓存：Cache-Control: max-age=31536000 -->
<!-- 资源通过哈希更新：main.a1b2c3.js -->
讲解：攻击者注入恶意脚本到可信网站，当用户浏览时执行。
解析：
textContent 而不是 innerHTML）。Content-Security-Policy（CSP）限制资源加载。案例：
// 防御：对用户输入进行转义
function escapeHTML(str) {
return str.replace(/[&<>"']/g, function(m) {
if (m === '&') return '&';
if (m === '<') return '<';
if (m === '>') return '>';
if (m === '"') return '"';
if (m === "'") return ''';
return m;
});
}
const userComment = '<script>alert(1)</script>';
document.getElementById('comment').textContent = escapeHTML(userComment);
讲解：攻击者诱导用户访问第三方网站，利用用户的登录态向目标网站发起恶意请求。
解析：
Strict 或 Lax，限制跨站发送 Cookie。案例：
// 设置 SameSite Cookie
document.cookie = "session=abc123; SameSite=Lax; Secure";
讲解：Vue 是一套用于构建用户界面的渐进式框架，采用组件化、声明式编程。
解析：
v-bind、v-if、v-for）和插值 {{ }}。Object.defineProperty，Vue 3 使用 Proxy。createApp 创建根实例。created、mounted、updated、unmounted。案例：
<template>
<div>
<p>{{ message }}</p>
<button @click="reverseMessage">反转消息</button>
</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello Vue!'
};
},
methods: {
reverseMessage() {
this.message = this.message.split('').reverse().join('');
}
}
};
</script>
讲解：Vue 组件有生命周期钩子，组合式 API（Composition API）提供了更灵活的代码组织方式。
解析：
beforeCreate、created（实例创建前后）beforeMount、mounted（挂载前后）beforeUpdate、updated（更新前后）beforeUnmount、unmounted（卸载前后）setup 函数是组合式 API 的入口，在 beforeCreate 之前执行。ref、reactive。onMounted、onUpdated、onUnmounted 等。computed。watch、watchEffect。案例（组合式 API）：
<template>
<div>
<p>计数：{{ count }}</p>
<button @click="increment">+1</button>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
onMounted(() => {
console.log('组件已挂载');
});
</script>
讲解：Vue 通过虚拟 DOM 描述真实 DOM 结构，在数据变化时生成新的虚拟 DOM，与旧虚拟 DOM 进行 Diff 比较，找出最小更新范围，然后批量更新真实 DOM。
解析：
key 优化列表渲染，识别节点移动、添加、删除。key 应稳定、唯一，避免使用索引。案例：
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
</template>
<script setup>
import { ref } from 'vue';
const items = ref([
{ id: 1, name: '苹果' },
{ id: 2, name: '香蕉' }
]);
</script>
讲解：随着应用规模增大，需要统一管理共享状态。Vue 官方推荐 Vuex（Vue 2）或 Pinia（Vue 3）。
解析：
state（状态）、getters（派生状态）、mutations（同步修改）、actions（异步操作）、modules（模块）。案例（Pinia）：
// stores/counter.js
import { defineStore } from 'pinia';
export const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
double: (state) => state.count * 2
},
actions: {
increment() {
this.count++;
}
}
});
// 组件中使用
<script setup>
import { useCounterStore } from './stores/counter';
const counter = useCounterStore();
</script>
<template>
<p>{{ counter.count }}*2={{ counter.double }}</p>
<button @click="counter.increment">增加</button>
</template>
讲解：前端路由根据 URL 变化渲染不同组件，无需刷新页面。Vue 官方路由库是 Vue Router。
解析：
window.location.hash 和 hashchange 事件。pushState、replaceState），监听 popstate 事件。需要服务端配合避免 404。<router-view> 显示匹配的组件。<router-link> 导航链接。案例：
// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;
// main.js 中使用 app.use(router);
讲解：SSR 在服务器端渲染 HTML 字符串，发送到客户端，提升首屏加载速度和 SEO。Vue 官方 SSR 方案是 Vue + Vue Router + Vue Server Renderer，或使用 Nuxt 框架。
解析：
案例（Nuxt 3 页面）：
<template>
<div>
<h1>{{ title }}</h1>
<p>服务端渲染示例</p>
</div>
</template>
<script setup>
// 在服务端和客户端都会执行
const { data: title } = await useFetch('/api/title');
</script>
讲解：Webpack 是一个模块打包工具，将项目中的模块（JS、CSS、图片等）打包成静态资源。
解析：
babel-loader（转译 ES6+）、css-loader（解析 CSS）、style-loader（注入 style 标签）、file-loader/url-loader（处理资源）。HtmlWebpackPlugin（生成 HTML）、MiniCssExtractPlugin（提取 CSS）、DefinePlugin（定义环境变量）、TerserPlugin（压缩 JS）。案例（webpack.config.js 简化）：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.[contenthash].js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.js$/,
use: 'babel-loader'
},
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, 'css-loader']
}
]
},
plugins: [
new HtmlWebpackPlugin({ template: './src/index.html' }),
new MiniCssExtractPlugin({ filename: 'styles.[contenthash].css' })
]
};
讲解：Babel 是一个 JavaScript 编译器，将 ES6+ 代码转换为向后兼容的版本。
解析：
@babel/preset-env 根据目标环境自动转换。@babel/plugin-transform-arrow-functions。案例（babel.config.js）：
module.exports = {
presets: [
['@babel/preset-env', { targets: '> 0.25%, not dead' }]
],
plugins: ['@babel/plugin-proposal-optional-chaining']
};
讲解：模块化解决命名冲突、依赖管理等问题。
解析：
module.exports / exports 导出，require 导入。同步加载。export / export default 导出，import 导入。静态分析，异步加载，支持 Tree Shaking。require.js 实现，浏览器端异步加载。案例：
// ES Module 导出
export const name = 'module';
export default function sayHi() {
console.log('Hi');
}
// 导入
import sayHi, { name } from './module.js';
讲解：Git 是分布式版本控制系统，团队协作需规范流程。
解析：
git clone、git add、git commit、git push/pull、git branch、git merge、git rebase。master（稳定）、develop（开发）、feature/*（功能）、release/*（发布）、hotfix/*（紧急修复）。master 始终可部署，从 master 拉取功能分支，完成后提 PR 合并。pre-production、production）结合合并请求。merge 保留历史分支，rebase 使历史线性，但需注意公共分支不要 rebase。案例：
# 创建功能分支
git checkout -b feature/new-button
# 开发后提交
git add .
git commit -m "add new button"
# 合并到主分支
git checkout main
git merge feature/new-button
讲解：持续集成/持续部署自动化构建、测试、部署流程。
解析：
案例（GitHub Actions 简化）：
name: CI/CD
on: [push]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- run: npm install
- run: npm test
- run: npm run build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{ secrets.GITHUB_TOKEN }}
publish_dir: ./dist
<link rel="preload"> 预加载关键资源，dns-prefetch、preconnect 提前解析 DNS 和建立连接。案例：
<!-- 预加载关键样式 -->
<link rel="preload" href="main.css" as="style">
<!-- 预连接第三方域名 -->
<link rel="preconnect" href="https://api.example.com">
<!-- 图片懒加载 -->
<img src="placeholder.jpg" data-src="real.jpg" loading="lazy" alt="...">
will-change：提示浏览器准备优化某个元素的变化。案例：
/* 使用 will-change */
.animated {
will-change: transform, opacity;
}
splitChunks 提取公共依赖，路由懒加载。lodash-es 或插件按需引入。TerserPlugin 压缩 JS，CssMinimizerPlugin 压缩 CSS。url-loader 将小图片转为 base64。案例：
// Vue 路由懒加载
const routes = [{
path: '/about',
component: () => import('./views/About.vue')
}];
// Webpack splitChunks
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name: 'vendors'
}
}
}
}
讲解：以用户为中心的性能指标，用于量化体验。
解析：
案例：
// 使用 Performance API 测量 FCP
new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('FCP:', entry.startTime);
}
}).observe({ type: 'paint', buffered: true });
案例：
// 栈应用：括号匹配
function isValid(s) {
const stack = [];
const map = { '(': ')', '[': ']', '{': '}' };
for (let c of s) {
if (map[c]) {
stack.push(c);
} else {
const top = stack.pop();
if (map[top] !== c) return false;
}
}
return stack.length === 0;
}
console.log(isValid('()[]{}')); // true
案例：
// 快速排序
function quickSort(arr) {
if (arr.length <= 1) return arr;
const pivot = arr[0];
const left = [], right = [];
for (let i = 1; i < arr.length; i++) {
arr[i] < pivot ? left.push(arr[i]) : right.push(arr[i]);
}
return [...quickSort(left), pivot, ...quickSort(right)];
}
console.log(quickSort([3, 6, 8, 10, 1, 2, 1])); // [1, 1, 2, 3, 6, 8, 10]
讲解：递归函数调用自身，需有终止条件；迭代通过循环实现。
解析：
案例：
// 递归求斐波那契（有大量重复计算，可优化）
function fib(n) {
if (n <= 1) return n;
return fib(n - 1) + fib(n - 2);
}
// 迭代优化
function fibIter(n) {
let a = 0, b = 1;
for (let i = 2; i <= n; i++) {
[a, b] = [b, a + b];
}
return n === 0 ? a : b;
}
flat(Infinity)、reduce + concat。案例：
// 数组扁平化
function flatten(arr) {
return arr.reduce((acc, val) => Array.isArray(val) ? acc.concat(flatten(val)) : acc.concat(val), []);
}
console.log(flatten([1, [2, [3, 4], 5]])); // [1, 2, 3, 4, 5]
// 函数柯里化
function curry(fn) {
return function curried(...args) {
if (args.length >= fn.length) {
return fn.apply(this, args);
} else {
return (...args2) => curried.apply(this, args.concat(args2));
}
};
}
const add = (a, b, c) => a + b + c;
const curriedAdd = curry(add);
console.log(curriedAdd(1)(2)(3)); // 6
createApp。案例（发布订阅）：
class EventBus {
constructor() {
this.events = {};
}
on(event, listener) {
(this.events[event] || (this.events[event] = [])).push(listener);
}
emit(event, data) {
(this.events[event] || []).forEach(listener => listener(data));
}
off(event, listener) {
if (!this.events[event]) return;
this.events[event] = this.events[event].filter(l => l !== listener);
}
}
const bus = new EventBus();
bus.on('login', (user) => console.log('登录:', user));
bus.emit('login', { name: 'Alice' });
案例：Vue 是 MVVM 的典型实现，ViewModel 对应组件实例，Model 对应 data，View 对应模板。
前端面试覆盖范围广、深度要求高。本文从基础到进阶，系统梳理了 HTML/CSS、JavaScript、浏览器网络、框架（以 Vue 为例）、工程化、性能优化、算法设计模式等核心知识点，并给出了深入解析及案例。希望你能结合这些内容，举一反三，在面试中不仅'知其然'，更能'知其所以然'，展现出作为一名高级前端开发工程师的技术底蕴和解决问题的能力。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online