20 道高频前端 JavaScript 面试题，涵盖 Proxy 深度监听、解构赋值、作用域链与闭包、事件冒泡机制、async/await 原理、script 标签位置、Portal 事件传播、Promise 应用、DOM/BOM 区别、网络请求流程、new 操作符、低代码概念、Map/Set 用法、最大子序和算法、HTTPS 握手过程、二叉树实现、防抖节流、类型转换机制、移动端适配及请求取消等核心知识点。每个问题均提供代码示例与原理分析，适合前端开发者复习与面试准备。
// 基础示例：Proxy 只能监听第一层属性
const obj = {a: 1, b: {c: 2}};
const proxy = new Proxy(obj, {
get(target, key) {
console.log(`get ${key}`);
return target[key];
},
set(target, key, value) {
console.log(`set ${key} = ${value}`);
target[key] = value;
return true;
}
});
proxy.a = 3; // 会触发 set a = 3
proxy.b.c = 4; // 不会触发任何监听，因为访问的是 b.c，不是 b 的 set
// 方法一：递归代理
function deepProxy(obj, handler) {
if (typeof obj !== 'object' || obj === null) return obj;
for (let key in obj) {
if (typeof obj[key] === 'object' && obj[key] !== null) {
obj[key] = deepProxy(obj[key], handler);
}
}
return new Proxy(obj, handler);
}
const obj = {a: 1, b: {c: 2, d: {e: 3}}};
const proxy = deepProxy(obj, {
get(target, key) {
console.log(`get ${key}`);
return target[key];
},
set(target, key, value) {
console.log(`set ${key} = ${JSON.stringify(value)}`);
target[key] = value;
return true;
}
});
proxy.b.c = 4; // 触发 set b = {"c":4,"d":{"e":3}}
proxy.b.d.e = 5; // 触发 set b = {"c":4,"d":{"e":5}}
// Vue 3 的 reactive 就是递归 Proxy 的实现
import { reactive } from 'vue';
const state = reactive({
user: {
name: '张三',
address: { city: '北京', detail: '朝阳区' }
}
});
// 修改嵌套属性也会触发响应式更新
state.user.address.city = '上海'; // 会触发更新
// 对象解构赋值，变量名必须与属性名相同
var {a, b} = {a: 1, b: 2};
console.log(a); // 1
console.log(b); // 2
// 如果变量名不同，需要使用别名
var {a: x, b: y} = {a: 1, b: 2};
console.log(x); // 1
console.log(y); // 2
// 带默认值的解构
var {a = 0, b = 0, c = 0} = {a: 1, b: 2};
console.log(a, b, c); // 1 2 0
// 嵌套解构
var {a: {x, y}, b} = {a: {x: 1, y: 2}, b: 3};
console.log(x, y, b); // 1 2 3
// 错误写法
var [a, b] = {a: 1, b: 2};
// 错误原因：数组解构语法用于对象
// 正确应该是 var {a, b} = {a: 1, b: 2};
// 或者如果是数组解构（但对象不符合数组结构）
var [a, b] = [1, 2];
// 函数参数解构
function getUserInfo({name, age, city = '未知'}) {
console.log(`${name}, ${age}岁，来自${city}`);
}
getUserInfo({name: '张三', age: 25});
// 从函数返回多个值
function getCoordinates() {
return {x: 100, y: 200};
}
var {x, y} = getCoordinates();
// 交换变量值
var a = 1, b = 2;
[a, b] = [b, a]; // 数组解构才能这样交换
console.log(a, b); // 2 1
作用域链是 JavaScript 查找变量的一套规则，决定了代码区块中变量和其他资源的访问权限。
// 示例：作用域链查找
var globalVar = 'global';
function outer() {
var outerVar = 'outer';
function inner() {
var innerVar = 'inner';
console.log(innerVar); // inner，当前作用域
console.log(outerVar); // outer，父级作用域
console.log(globalVar); // global，全局作用域
console.log(nonExist); // ReferenceError，无法找到
}
inner();
}
outer();
// 1. 全局作用域链
// 全局上下文：VO(global) -> null
// 2. 函数调用时的作用域链
function foo() {
var a = 1;
function bar() {
var b = 2;
console.log(a + b); // 3
}
bar();
}
foo();
// 闭包：函数记住并访问其词法作用域
function createCounter() {
let count = 0; // 被内部函数引用，形成闭包
return {
increment: function() {
count++;
return count;
},
decrement: function() {
count--;
return count;
},
getCount: function() {
return count;
}
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
// count 变量通过闭包保持存活
// let/const 的块级作用域
{ var a = 1; let b = 2; const c = 3; }
console.log(a); // 1，var 是函数作用域或全局作用域
// console.log(b) // ReferenceError，let 是块级作用域
// console.log(c) // ReferenceError，const 是块级作用域
// 作用域链在循环中的表现
for (var i = 0; i < 3; i++) {
setTimeout(() => {
console.log(i); // 输出 3 次 3
}, 100);
}
for (let j = 0; j < 3; j++) {
setTimeout(() => {
console.log(j); // 输出 0,1,2
}, 100);
}
// 1. focus 和 blur（但 focusin 和 focusout 会冒泡）
element.addEventListener('focus', (e) => {
console.log('focus 不会冒泡');
}, false);
// false 表示冒泡阶段，但 focus 仍然不会冒泡
// 2. mouseenter 和 mouseleave（但 mouseover 和 mouseout 会冒泡）
element.addEventListener('mouseenter', (e) => {
console.log('mouseenter 不会冒泡');
});
// 3. load、unload、abort、error
img.addEventListener('load', (e) => {
console.log('load 不会冒泡');
});
// 4. resize
window.addEventListener('resize', (e) => {
console.log('resize 不会冒泡');
});
// 5. scroll（在某些浏览器中可能不会冒泡）
element.addEventListener('scroll', (e) => {
console.log('scroll 不会冒泡');
});
<div id="parent">
<button id="child">点击我</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
// 会冒泡的事件示例（click）
parent.addEventListener('click', () => {
console.log('父元素点击事件 - 会冒泡');
});
child.addEventListener('click', (e) => {
console.log('子元素点击事件');
// e.stopPropagation() // 可以阻止冒泡
});
// 不会冒泡的事件示例（focus）
parent.addEventListener('focus', () => {
console.log('父元素 focus 事件 - 不会触发，因为不会冒泡');
}, true); // 使用捕获阶段可以监听到
child.addEventListener('focus', () => {
console.log('子元素获得焦点');
});
</script>
// 监听不会冒泡的事件的技巧
// 方法 1：使用捕获阶段
document.addEventListener('focus', (e) => {
console.log('捕获阶段监听到 focus:', e.target);
}, true);
// 方法 2：直接在目标元素上监听
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
input.addEventListener('focus', handleFocus);
});
// 方法 3：使用会冒泡的替代事件
// 用 focusin 代替 focus（focusin 会冒泡）
element.addEventListener('focusin', (e) => {
console.log('focusin 会冒泡');
});
// 用 mouseover 代替 mouseenter（mouseover 会冒泡）
element.addEventListener('mouseover', (e) => {
console.log('mouseover 会冒泡');
});
async/await 是 Generator 函数的语法糖，基于 Promise 实现。
// async 函数示例
async function foo() {
const result = await someAsyncFunction();
return result;
}
// 等价于下面的 Generator 函数
function* fooGenerator() {
const result = yield someAsyncFunction();
return result;
}
// 1. Generator 函数
function* myGenerator() {
const a = yield Promise.resolve(1);
const b = yield Promise.resolve(2);
return a + b;
}
// 2. 手动执行 Generator
const gen = myGenerator();
gen.next().value.then(val1 => {
gen.next(val1).value.then(val2 => {
const result = gen.next(val2);
console.log(result.value); // 3
});
});
// 3. 自动执行器（简化版）
function asyncToGenerator(generatorFunc) {
return function(...args) {
const gen = generatorFunc.apply(this, args);
return new Promise((resolve, reject) => {
function step(key, arg) {
let result;
try {
result = gen[key](arg);
} catch (error) {
return reject(error);
}
const { value, done } = result;
if (done) {
return resolve(value);
} else {
// value 可能不是 Promise，用 Promise.resolve 包装
return Promise.resolve(value).then(val => step('next', val), err => step('throw', err));
}
}
step('next');
});
};
}
// 使用自动执行器
const myAsyncFunc = asyncToGenerator(myGenerator);
myAsyncFunc().then(result => console.log(result)); // 3
// 编译前的 async 函数
async function test() {
const a = await 1;
const b = await Promise.resolve(2);
return a + b;
}
// Babel 编译后（简化版）
function _asyncToGenerator(fn) {
return function() {
var self = this,
args = arguments;
return new Promise(function(resolve, reject) {
var gen = fn.apply(self, args);
function _next(value) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
}
function _throw(err) {
asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
}
_next(undefined);
});
};
}
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
try {
var info = gen[key](arg);
var value = info.value;
} catch (error) {
reject(error);
return;
}
if (info.done) {
resolve(value);
} else {
Promise.resolve(value).then(_next, _throw);
}
}
var test = _asyncToGenerator(function* () {
const a = yield 1;
const b = yield Promise.resolve(2);
return a + b;
});
// async/await 的错误处理
async function fetchData() {
try {
const response = await fetch('/api/data');
const data = await response.json();
return data;
} catch (error) {
console.error('请求失败:', error);
throw error; // 重新抛出错误
}
}
// 等价于 Promise 的 catch
function fetchDataPromise() {
return fetch('/api/data').then(response => response.json()).catch(error => {
console.error('请求失败:', error);
throw error;
});
}
// 多个 await 的错误处理
async function multiFetch() {
// 方式 1：分别 try-catch
try {
const user = await fetchUser();
} catch (error) {
console.error('获取用户失败');
}
try {
const posts = await fetchPosts();
} catch (error) {
console.error('获取帖子失败');
}
// 方式 2：Promise.all + 统一处理
try {
const [user, posts] = await Promise.all([fetchUser(), fetchPosts()]);
} catch (error) {
console.error('某个请求失败');
}
}
<!-- 放在 header 中 -->
<!DOCTYPE html>
<html>
<head>
<script src="header-script.js"></script>
</head>
<body>
<div>页面内容</div>
</body>
</html>
<!-- 放在 body 底部 -->
<!DOCTYPE html>
<html>
<head>
<!-- 没有阻塞的 script -->
</head>
<body>
<div>页面内容</div>
<script src="body-script.js"></script>
</body>
</html>
// 测试脚本
console.log('脚本开始执行');
const start = performance.now();
while (performance.now() - start < 2000) { // 模拟 2 秒的脚本执行时间
}
console.log('脚本执行完成');
// 性能指标对比：
/* 放在 header 中：
* 1. HTML 解析被阻塞
* 2. 页面白屏时间长
* 3. DOMContentLoaded 事件延迟
* 4. 用户看到内容慢
* 放在 body 底部：
* 1. HTML 解析不被阻塞
* 2. 页面快速呈现
* 3. 用户尽早看到内容
* 4. 脚本最后执行
*/
<!DOCTYPE html>
<html>
<head>
<!-- 1. 必要的、不阻塞的脚本使用 async/defer -->
<script src="analytics.js" async></script>
<!-- 2. 关键 CSS 内联，非关键 CSS 异步加载 -->
<style>
/* 关键 CSS */
.above-the-fold { styles }
</style>
<link rel="stylesheet" href="non-critical.css" media="print" onload="this.media='all'">
<!-- 3. 预加载重要资源 -->
<link rel="preload" href="critical-script.js" as="script">
</head>
<body>
<!-- 页面内容 -->
<!-- 4. 非关键脚本放在底部 -->
<script src="non-critical-script.js"></script>
<!-- 5. 关键脚本优先执行 -->
<script src="critical-script.js"></script>
</body>
</html>
<!-- 1. async：异步加载，不阻塞 HTML 解析，加载完后立即执行 -->
<!-- 执行顺序不确定，先加载完的先执行 -->
<script src="async-script.js" async></script>
<!-- 2. defer：异步加载，不阻塞 HTML 解析，在 DOMContentLoaded 前按顺序执行 -->
<script src="defer-script1.js" defer></script>
<script src="defer-script2.js" defer></script>
<!-- 执行顺序确定：1 -> 2 -->
<!-- 3. module：ES6 模块，默认 defer 行为 -->
<script type="module" src="module.js"></script>
<!-- 4. 动态加载 -->
<script>
// 动态创建 script 标签
const script = document.createElement('script');
script.src = 'dynamic.js';
script.async = true;
document.body.appendChild(script);
</script>
// React Portal 示例
import React from 'react';
import ReactDOM from 'react-dom';
// Portal 组件
function PortalComponent({ children }) {
const portalRoot = document.getElementById('portal-root');
return ReactDOM.createPortal(children, portalRoot);
}
// 父组件
function ParentComponent() {
const handleClick = (e) => {
console.log('父组件收到点击事件');
console.log('事件目标:', e.target);
console.log('当前目标:', e.currentTarget);
};
return (
<div onClick={handleClick}>
<h3>父组件区域</h3>
{/* 普通子组件 */}
<div className="normal-child"> 普通子组件（点击会冒泡） </div>
{/* Portal 子组件 */}
<PortalComponent>
<div className="portal-child"> Portal 子组件（点击也会冒泡到 React 树中的父组件） </div>
</PortalComponent>
</div>
);
}
// 渲染
ReactDOM.render(<ParentComponent />, document.getElementById('root'));
// 1. React 合成事件的冒泡（沿着 React 组件树）
// Portal 中的事件会冒泡到 React 父组件
// 2. 原生 DOM 事件的冒泡（沿着 DOM 树）
// Portal 中的事件不会冒泡到 DOM 父节点，因为不在同一 DOM 层级
// 示例验证
class EventTest extends React.Component {
componentDidMount() {
// 监听原生 DOM 事件
document.getElementById('portal-root').addEventListener('click', (e) => {
console.log('portal-root 原生事件');
});
document.querySelector('.normal-child').addEventListener('click', (e) => {
console.log('普通子组件原生事件');
});
}
handleReactClick = (e) => {
console.log('React 合成事件触发');
console.log('e.nativeEvent:', e.nativeEvent); // 原生事件
}
render() {
return (
<div onClick={this.handleReactClick}>
<div className="normal-child">普通子组件</div>
{ReactDOM.createPortal(
<div className="portal-child">Portal 子组件</div>,
document.getElementById('portal-root')
)}
</div>
);
}
}
// 场景 1：Modal 对话框
function Modal({ isOpen, onClose, children }) {
if (!isOpen) return null;
return ReactDOM.createPortal(
<div className="modal-overlay" onClick={onClose}>
<div className="modal-content" onClick={e => e.stopPropagation()}>
{children}
<button onClick={onClose}>关闭</button>
</div>
</div>,
document.body
);
}
// 使用 Modal
function App() {
const [isModalOpen, setModalOpen] = useState(false);
const handleButtonClick = () => setModalOpen(true);
const handleModalClose = () => setModalOpen(false);
return (
<div>
<button onClick={handleButtonClick}>打开 Modal</button>
<Modal isOpen={isModalOpen} onClose={handleModalClose}>
<h2>Modal 标题</h2>
<p>Modal 内容...</p>
</Modal>
</div>
);
}
// 场景 2：Tooltip 提示框
function Tooltip({ children, content }) {
const [isVisible, setIsVisible] = useState(false);
const tooltipRef = useRef();
useEffect(() => {
if (isVisible && tooltipRef.current) {
// 计算位置等逻辑
}
}, [isVisible]);
return (
<>
<span onMouseEnter={() => setIsVisible(true)} onMouseLeave={() => setIsVisible(false)}>{children}</span>
{isVisible && ReactDOM.createPortal(
<div ref={tooltipRef} className="tooltip">{content}</div>,
document.body
)}
</>
);
}
// 方案 1：使用 Promise 链
function trafficLight() {
function light(color, duration) {
return new Promise(resolve => {
console.log(`${color}灯亮`);
setTimeout(() => {
console.log(`${color}灯灭`);
resolve();
}, duration * 1000);
});
}
// 执行一次循环
function runCycle() {
return light('红', 3)
.then(() => light('黄', 1))
.then(() => light('绿', 2));
}
// 无限循环
function infiniteLoop() {
return runCycle().then(infiniteLoop);
}
// 开始
infiniteLoop().catch(err => {
console.error('红绿灯出错:', err);
});
}
// 方案 2：使用 async/await
async function trafficLightAsync() {
async function light(color, duration) {
console.log(`${color}灯亮`);
await new Promise(resolve => setTimeout(resolve, duration * 1000));
console.log(`${color}灯灭`);
}
try {
while (true) {
await light('红', 3);
await light('黄', 1);
await light('绿', 2);
}
} catch (error) {
console.error('红绿灯出错:', error);
}
}
// 方案 3：带控制功能的红绿灯
class TrafficLight {
constructor() {
this.isRunning = false;
this.cycleCount = 0;
this.lights = [
{ color: '红', duration: 3 },
{ color: '黄', duration: 1 },
{ color: '绿', duration: 2 }
];
}
async lightOn(color, duration) {
console.log(`🚦 ${color}灯亮 - 持续${duration}秒`);
await new Promise(resolve => setTimeout(resolve, duration * 1000));
console.log(`🚦 ${color}灯灭`);
}
async start() {
if (this.isRunning) return;
this.isRunning = true;
console.log('红绿灯开始运行');
try {
while (this.isRunning) {
for (const light of this.lights) {
if (!this.isRunning) break;
await this.lightOn(light.color, light.duration);
}
this.cycleCount++;
console.log(`已完成 ${this.cycleCount} 个循环`);
}
} catch (error) {
console.error('红绿灯异常:', error);
this.stop();
}
}
stop() {
this.isRunning = false;
console.log('红绿灯停止');
}
// 控制特定灯
async manualControl(color, duration) {
this.stop();
await this.lightOn(color, duration);
this.start();
}
}
// 使用
const trafficLight = new TrafficLight();
trafficLight.start();
// 10 秒后停止
setTimeout(() => {
trafficLight.stop();
}, 10000);
// 方案 4：可视化红绿灯
function visualTrafficLight() {
const colors = {
red: '#ff0000',
yellow: '#ffff00',
green: '#00ff00',
off: '#333333'
};
const lightElement = document.getElementById('traffic-light');
const redLight = lightElement.querySelector('.red');
const yellowLight = lightElement.querySelector('.yellow');
const greenLight = lightElement.querySelector('.green');
function setLight(element, color) {
element.style.backgroundColor = color;
}
async function changeLight(color, duration) {
// 先关掉所有灯
setLight(redLight, colors.off);
setLight(yellowLight, colors.off);
setLight(greenLight, colors.off);
// 点亮指定颜色的灯
switch (color) {
case '红': setLight(redLight, colors.red); break;
case '黄': setLight(yellowLight, colors.yellow); break;
case '绿': setLight(greenLight, colors.green); break;
}
console.log(`${color}灯亮`);
await new Promise(resolve => setTimeout(resolve, duration * 1000));
console.log(`${color}灯灭`);
}
// 运行
async function run() {
while (true) {
await changeLight('红', 3);
await changeLight('绿', 2);
await changeLight('黄', 1);
}
}
return { run };
}
// DOM 示例：操作 HTML 文档
const element = document.getElementById('myId');
element.innerHTML = '新内容';
element.style.color = 'red';
// DOM 树结构
/*
document
├── html
│ ├── head
│ │ ├── title
│ │ └── meta
│ └── body
│ ├── div
│ │ ├── h1
│ │ └── p
│ └── script
*/
// BOM 主要对象
// 1. window 对象（全局对象）
console.log(window.innerWidth); // 视口宽度
console.log(window.location); // 地址信息
console.log(window.navigator); // 浏览器信息
console.log(window.history); // 历史记录
console.log(window.screen); // 屏幕信息
console.log(window.localStorage); // 本地存储
// 2. location 对象
console.log(location.href); // 完整 URL
console.log(location.protocol); // 协议
console.log(location.host); // 主机
console.log(location.pathname); // 路径
console.log(location.search); // 查询参数
// 3. history 对象
history.back(); // 后退
history.forward(); // 前进
history.go(-2); // 后退 2 页
history.pushState({}, '', '/new-url'); // 添加历史记录
// 4. navigator 对象
console.log(navigator.userAgent); // 用户代理
console.log(navigator.platform); // 平台
console.log(navigator.language); // 语言
console.log(navigator.onLine); // 是否在线
// 5. screen 对象
console.log(screen.width); // 屏幕宽度
console.log(screen.height); // 屏幕高度
console.log(screen.availWidth); // 可用宽度
// 6. 弹窗相关
const result = confirm('确定要删除吗？');
const name = prompt('请输入姓名', '张三');
alert('操作成功！');
/* DOM vs BOM 对比表
┌─────────────┬─────────────────────────┬─────────────────────────┐
│ 特性 │ DOM │ BOM │
├─────────────┼─────────────────────────┼─────────────────────────┤
│ 标准 │ W3C 标准 │ 没有统一标准 │
│ 用途 │ 操作文档内容 │ 操作浏览器窗口 │
│ 核心对象 │ document │ window │
│ 包含内容 │ 元素、属性、文本节点 │ 窗口、历史、地址栏等 │
│ 操作 │ 增删改查 HTML 元素 │ 控制浏览器行为 │
│ 事件 │ click、change 等 │ load、resize 等 │
└─────────────┴─────────────────────────┴─────────────────────────┘
*/
// 实际应用中的结合使用
function initPage() {
// BOM：获取浏览器信息
const isMobile = /Mobi|Android/i.test(navigator.userAgent);
// DOM：根据设备类型设置样式
if (isMobile) {
document.body.classList.add('mobile');
}
// BOM：监听窗口变化
window.addEventListener('resize', () => {
// DOM：调整布局
const container = document.getElementById('container');
if (window.innerWidth < 768) {
container.classList.add('collapsed');
} else {
container.classList.remove('collapsed');
}
});
// BOM：使用 localStorage
const theme = localStorage.getItem('theme') || 'light';
// DOM：应用主题
document.body.setAttribute('data-theme', theme);
}
1. 输入 URL 并回车
2. 浏览器解析 URL
3. DNS 解析（域名 -> IP 地址）
4. 建立 TCP 连接（三次握手）
5. 发送 HTTP 请求
6. 服务器处理请求
7. 服务器返回 HTTP 响应
8. 浏览器接收响应
9. 浏览器解析 HTML，构建 DOM 树
10. 解析 CSS，构建 CSSOM 树
11. 合并 DOM 和 CSSOM，构建渲染树
12. 布局（计算元素位置和大小）
13. 绘制（将像素绘制到屏幕）
14. 合成（层合并，GPU 加速）
// 步骤 1：URL 解析
const url = new URL('https://www.example.com:443/path?query=1#section');
console.log(url.protocol); // https:
console.log(url.hostname); // www.example.com
console.log(url.port); // 443
console.log(url.pathname); // /path
console.log(url.search); // ?query=1
console.log(url.hash); // #section
// 步骤 2：DNS 解析过程
/*
1. 浏览器缓存
2. 操作系统缓存（hosts 文件）
3. 路由器缓存
4. ISP DNS 缓存
5. 递归查询（根域名服务器 -> 顶级域 -> 权威域名服务器）
*/
// 步骤 3：TCP 连接（三次握手）
/*
客户端 -> SYN -> 服务器
客户端 <- SYN+ACK <- 服务器
客户端 -> ACK -> 服务器
连接建立！
*/
// 步骤 4：HTTPS 的 TLS 握手（如果需要）
/*
1. ClientHello
2. ServerHello + Certificate
3. Client Key Exchange
4. Change Cipher Spec
5. Finished
*/
// 步骤 5：HTTP 请求
const request = `GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html
Connection: keep-alive`;
// 步骤 6-7：服务器处理并响应
const response = `HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 1234
Cache-Control: max-age=3600
<!DOCTYPE html>
<html>...</html>`;
// 步骤 8-14：浏览器渲染过程
async function browserRender(html, css, js) {
// 解析 HTML，构建 DOM 树
const parser = new DOMParser();
const dom = parser.parseFromString(html, 'text/html');
// 解析 CSS，构建 CSSOM 树
const stylesheet = new CSSStyleSheet();
stylesheet.replaceSync(css);
// 构建渲染树（排除 display:none 的元素）
const renderTree = buildRenderTree(dom, stylesheet);
// 布局（重排）
const layout = calculateLayout(renderTree);
// 绘制
const paintLayers = paint(layout);
// 合成
compositeLayers(paintLayers);
// 执行 JavaScript（可能引起重排重绘）
eval(js);
// DOMContentLoaded 事件（DOM 解析完成）
document.addEventListener('DOMContentLoaded', () => {
console.log('DOM 准备就绪');
});
// load 事件（所有资源加载完成）
window.addEventListener('load', () => {
console.log('页面完全加载');
});
}
// 关键性能指标
const performanceMetrics = {
dnsLookup: performance.timing.domainLookupEnd - performance.timing.domainLookupStart,
tcpConnect: performance.timing.connectEnd - performance.timing.connectStart,
sslConnect: performance.timing.connectEnd - performance.timing.secureConnectionStart,
requestResponse: performance.timing.responseEnd - performance.timing.requestStart,
domParse: performance.timing.domInteractive - performance.timing.responseEnd,
domReady: performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart,
pageLoad: performance.timing.loadEventEnd - performance.timing.navigationStart
};
// 优化建议
const optimizations = {
dns: '使用 DNS 预连接：<link rel="dns-prefetch" href="//cdn.example.com">',
tcp: '使用 HTTP/2，支持多路复用',
ssl: '使用 TLS 1.3，会话恢复',
request: '减少 HTTP 请求，使用资源合并',
render: {
css: '将 CSS 放在头部，避免阻塞渲染',
js: '将非关键 JS 放在底部或使用 defer/async',
image: '使用懒加载和响应式图片'
},
cache: '合理使用缓存策略',
cdn: '使用 CDN 加速静态资源'
};
// 模拟 new 操作符的实现
function myNew(constructor, ...args) {
// 1. 创建一个空对象，将其原型指向构造函数的 prototype
const obj = Object.create(constructor.prototype);
// 2. 执行构造函数，将 this 绑定到新创建的对象
const result = constructor.apply(obj, args);
// 3. 判断构造函数返回的是否是对象
// 如果是对象，则返回该对象；否则返回新创建的对象
return result instanceof Object ? result : obj;
}
// 使用示例
function Person(name, age) {
this.name = name;
this.age = age;
// 如果构造函数返回一个对象，new 表达式会返回该对象
// return { custom: 'object' } // 如果取消注释，new Person() 会返回这个对象
}
const person1 = new Person('张三', 25);
const person2 = myNew(Person, '李四', 30);
console.log(person1); // Person { name: '张三', age: 25 }
console.log(person2); // Person { name: '李四', age: 30 }
// 步骤 1：创建新对象并设置原型
function step1(constructor) {
// 创建一个新对象
const obj = {};
// 将新对象的__proto__指向构造函数的 prototype
// 这样新对象就可以访问构造函数原型上的属性和方法
Object.setPrototypeOf(obj, constructor.prototype);
// 或者 obj.__proto__ = constructor.prototype（不推荐直接使用__proto__）
return obj;
}
// 步骤 2：执行构造函数
function step2(constructor, obj, args) {
// 调用构造函数，将 this 绑定到新对象
const result = constructor.apply(obj, args);
return result;
}
// 步骤 3：处理返回值
function step3(result, obj) {
// 如果构造函数返回了一个对象，则返回该对象
if (result && (typeof result === 'object' || typeof result === 'function')) {
return result;
}
// 否则返回新创建的对象
return obj;
}
// 完整实现
function createInstance(constructor, ...args) {
const obj = Object.create(constructor.prototype);
const result = constructor.apply(obj, args);
return result instanceof Object ? result : obj;
}
// 情况 1：构造函数返回基本类型
function Foo() {
this.name = 'Foo';
return 123; // 返回基本类型，会被忽略
}
const foo = new Foo();
console.log(foo); // Foo { name: 'Foo' }
// 情况 2：构造函数返回对象
function Bar() {
this.name = 'Bar';
return { custom: 'object' }; // 返回对象，取代新创建的对象
}
const bar = new Bar();
console.log(bar); // { custom: 'object' }
// 情况 3：箭头函数不能作为构造函数
const ArrowFunc = () => {
this.value = 1;
};
try {
const instance = new ArrowFunc(); // TypeError: ArrowFunc is not a constructor
} catch (error) {
console.error(error.message);
}
// 情况 4：class 中的 new
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a sound`);
}
}
const dog = new Animal('Dog');
dog.speak(); // Dog makes a sound
// 应用 1：实现继承
function Parent(name) {
this.name = name;
this.colors = ['red', 'blue'];
}
Parent.prototype.sayName = function() {
console.log(this.name);
};
function Child(name, age) {
// 调用父类构造函数
Parent.call(this, name); // 相当于 super(name)
this.age = age;
}
// 继承父类原型
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;
Child.prototype.sayAge = function() {
console.log(this.age);
};
const child = new Child('小明', 10);
child.sayName(); // 小明
child.sayAge(); // 10
// 应用 2：单例模式
function Singleton() {
if (Singleton.instance) {
return Singleton.instance;
}
this.createdAt = new Date();
Singleton.instance = this;
}
const s1 = new Singleton();
const s2 = new Singleton();
console.log(s1 === s2); // true
// 应用 3：工厂函数替代 new
function createUser(role) {
const user = Object.create(userMethods);
if (role === 'admin') {
user.permissions = ['read', 'write', 'delete'];
} else {
user.permissions = ['read'];
}
return user;
}
const userMethods = {
hasPermission(perm) {
return this.permissions.includes(perm);
}
};
const admin = createUser('admin');
console.log(admin.hasPermission('delete')); // true
// 低代码平台的典型架构
const lowCodePlatform = {
// 1. 可视化设计器
designer: {
dragAndDrop: true, // 拖拽式界面构建
wysiwyg: true, // 所见即所得
componentPalette: ['Button', 'Form', 'Table', 'Chart'] // 组件库
},
// 2. 模型驱动开发
modelDriven: {
dataModel: '可视化定义数据结构',
businessLogic: '配置式业务规则',
workflow: '可视化流程设计'
},
// 3. 代码生成
codeGeneration: {
frontend: 'Vue/React 代码',
backend: 'Java/Node.js 代码',
database: 'SQL 脚本'
},
// 4. 集成能力
integration: {
apiConnector: 'API 连接器',
databaseConnector: '数据库连接',
thirdParty: '第三方服务集成'
}
};
const lowCodeAnalysis = {
advantages: [
{ name: '开发效率', description: '减少 70%-80% 的编码工作量', example: '一个 CRUD 页面传统开发需要 1-2 天，低代码可能只需要 30 分钟' },
{ name: '降低门槛', description: '业务人员也能参与应用开发', example: '通过拖拽和配置即可完成简单应用' },
{ name: '标准化', description: '统一的技术栈和开发规范', example: '生成的代码遵循最佳实践' },
{ name: '维护成本', description: '可视化修改，无需深入代码', example: '业务规则变更可直接在界面调整' }
],
disadvantages: [
{ name: '灵活性限制', description: '复杂定制化需求难以实现', example: '特殊动画效果或复杂业务逻辑' },
{ name: '性能问题', description: '生成的代码可能不够优化', example: '大型数据表性能可能不如手写代码' },
{ name: '厂商锁定', description: '迁移到其他平台成本高', example: '特定平台的配置无法直接迁移' },
{ name: '学习曲线', description: '需要学习平台特定的概念和操作', example: '平台的工作流引擎、数据模型等' }
]
};
// 应用场景 1：企业内部管理系统
const internalSystems = ['OA 办公自动化', 'CRM 客户关系管理', 'ERP 企业资源计划', 'HRM 人力资源系统', '项目管理工具'];
// 应用场景 2：数据可视化报表
const dataVisualization = {
components: [
{ type: 'Chart', config: { chartType: 'line|bar|pie', dataSource: 'API 或数据库', filters: ['时间范围', '部门筛选'] } },
{ type: 'Dashboard', config: { layout: '可拖拽栅格', widgets: ['指标卡', '趋势图', '排行榜'] } }
]
};
// 应用场景 3：移动端应用
const mobileAppBuilder = {
features: ['表单采集', '信息展示', '流程审批', '数据同步', '消息推送'],
deployment: ['生成 iOS/Android 原生应用', '生成微信小程序', '生成 H5 页面']
};
const platforms = {
outSystems: { type: '专业级低代码', target: '企业级复杂应用', features: ['全栈开发', '高性能', 'AI 辅助'], pricing: '较高' },
mendix: { type: '模型驱动低代码', target: '企业数字化', features: ['微流', '领域模型', '协作开发'], pricing: '企业级' },
powerApps: { type: '微软生态低代码', target: 'Office 365 用户', features: ['Excel 集成', 'Power Automate', 'Teams 集成'], pricing: '按用户订阅' },
amis: { type: '前端低代码', target: '前端开发者', features: ['JSON 配置', '开源', 'Vue/React 支持'], pricing: '免费开源' },
h5Dooring: { type: 'H5 页面搭建', target: '营销页面', features: ['拖拽生成', '多模板', '数据统计'], pricing: '开源版本免费' }
};
// 创建 Map
const map = new Map();
// 基本操作
map.set('name', '张三'); // 添加键值对
map.set('age', 25);
map.set({id: 1}, '对象作为键'); // 对象也可以作为键
console.log(map.get('name')); // 张三
console.log(map.has('age')); // true
console.log(map.size); // 3
// 遍历 Map
map.forEach((value, key) => {
console.log(`${key}: ${value}`);
});
for (let [key, value] of map) {
console.log(key, value);
}
// 获取键、值、条目
console.log([...map.keys()]); // ['name', 'age', {id: 1}]
console.log([...map.values()]); // ['张三', 25, '对象作为键']
console.log([...map.entries()]); // 键值对数组
// 删除操作
map.delete('age'); // 删除指定键
map.clear(); // 清空 Map
// 创建 Set
const set = new Set();
// 基本操作
set.add(1); // 添加值
set.add(2);
set.add(2); // 重复值会被忽略
set.add('hello');
set.add({name: 'obj'}); // 对象可以添加，但每个对象都是唯一的
console.log(set.has(1)); // true
console.log(set.size); // 4
// 遍历 Set
set.forEach(value => {
console.log(value);
});
for (let value of set) {
console.log(value);
}
// 集合操作
const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
// 并集
const union = new Set([...set1, ...set2]);
console.log([...union]); // [1, 2, 3, 4]
// 交集
const intersection = new Set([...set1].filter(x => set2.has(x)));
console.log([...intersection]); // [2, 3]
// 差集
const difference = new Set([...set1].filter(x => !set2.has(x)));
console.log([...difference]); // [1]
// 删除操作
set.delete(1); // 删除指定值
set.clear(); // 清空 Set
const comparison = {
// 数据结构对比
dataStructure: {
Map: '键值对集合，键可以是任意类型',
Set: '值集合，值唯一'
},
// 初始化方式对比
initialization: {
Map: 'new Map([["key1", "value1"], ["key2", "value2"]])',
Set: 'new Set([1, 2, 3, 3]) // 重复值会被去重'
},
// 常用方法对比
methods: {
Map: ['set(key, value)', 'get(key)', 'has(key)', 'delete(key)', 'clear()'],
Set: ['add(value)', 'has(value)', 'delete(value)', 'clear()']
},
// 遍历方式对比
iteration: {
Map: 'map.forEach((value, key) => {})',
Set: 'set.forEach(value => {})'
},
// 性能特点对比
performance: {
Map: '键的查找是 O(1)，适合做字典、缓存',
Set: '值的查找是 O(1)，适合去重、集合运算'
},
// 应用场景对比
useCases: {
Map: ['对象映射', '数据缓存', '需要键不是字符串的场景', '需要保持插入顺序的场景'],
Set: ['数组去重', '集合运算', '存储唯一值', '标签系统']
}
};
// 应用 1：使用 Map 实现 LRU 缓存
class LRUCache {
constructor(capacity) {
this.capacity = capacity;
this.cache = new Map(); // 使用 Map 保持插入顺序
}
get(key) {
if (!this.cache.has(key)) return -1;
const value = this.cache.get(key);
// 更新访问顺序：先删除，再重新插入
this.cache.delete(key);
this.cache.set(key, value);
return value;
}
put(key, value) {
if (this.cache.has(key)) {
this.cache.delete(key);
} else if (this.cache.size >= this.capacity) {
// 删除最久未使用的（Map 的第一个键）
const firstKey = this.cache.keys().next().value;
this.cache.delete(firstKey);
}
this.cache.set(key, value);
}
}
// 应用 2：使用 Set 进行数组去重和集合运算
function arrayOperations() {
// 数组去重
const arr = [1, 2, 2, 3, 4, 4, 5];
const uniqueArr = [...new Set(arr)];
console.log(uniqueArr); // [1, 2, 3, 4, 5]
// 求多个数组的交集
function intersection(...arrays) {
if (arrays.length === 0) return [];
let result = new Set(arrays[0]);
for (let i = 1; i < arrays.length; i++) {
result = new Set([...result].filter(x => arrays[i].includes(x)));
}
return [...result];
}
console.log(intersection([1, 2, 3], [2, 3, 4], [3, 4, 5])); // [3]
// 检查数组是否有重复值
function hasDuplicates(array) {
return new Set(array).size !== array.length;
}
console.log(hasDuplicates([1, 2, 3, 2])); // true
}
// 应用 3：使用 Map 存储对象元数据
function objectMetadata() {
const users = [
{ id: 1, name: 'Alice' },
{ id: 2, name: 'Bob' },
{ id: 3, name: 'Charlie' }
];
// 创建用户 ID 到用户对象的映射
const userMap = new Map(users.map(user => [user.id, user]));
// 快速查找
console.log(userMap.get(2)); // { id: 2, name: 'Bob' }
// 添加额外元数据
userMap.forEach((user, id) => {
userMap.set(id, {...user, lastLogin: new Date(), loginCount: 0});
});
return userMap;
}
给定一个整数数组 nums，找到一个具有最大和的连续子数组（子数组最少包含一个元素），返回其最大和。
// 示例 输入：[-2,1,-3,4,-1,2,1,-5,4] 输出：6 解释：连续子数组 [4,-1,2,1] 的和最大，为 6
function maxSubArray(nums) {
if (!nums || nums.length === 0) return 0;
let maxSum = nums[0]; // 全局最大和
let currentSum = nums[0]; // 当前子数组的和
for (let i = 1; i < nums.length; i++) {
// 如果当前元素加上之前的和比当前元素还小，就从当前元素重新开始
currentSum = Math.max(nums[i], currentSum + nums[i]);
// 更新全局最大和
maxSum = Math.max(maxSum, currentSum);
}
return maxSum;
}
// 测试
console.log(maxSubArray([-2, 1, -3, 4, -1, 2, 1, -5, 4])); // 6
console.log(maxSubArray([1])); // 1
console.log(maxSubArray([5, 4, -1, 7, 8])); // 23
function maxSubArrayDivide(nums) {
return divide(nums, 0, nums.length - 1);
function divide(nums, left, right) {
if (left === right) return nums[left];
const mid = Math.floor((left + right) / 2);
// 递归计算左右两边的最大子序和
const leftMax = divide(nums, left, mid);
const rightMax = divide(nums, mid + 1, right);
// 计算跨越中间的最大子序和
const crossMax = maxCrossing(nums, left, mid, right);
// 返回三者中的最大值
return Math.max(leftMax, rightMax, crossMax);
}
function maxCrossing(nums, left, mid, right) {
// 计算左半部分的最大后缀和
let leftSum = -Infinity;
let sum = 0;
for (let i = mid; i >= left; i--) {
sum += nums[i];
leftSum = Math.max(leftSum, sum);
}
// 计算右半部分的最大前缀和
let rightSum = -Infinity;
sum = 0;
for (let i = mid + 1; i <= right; i++) {
sum += nums[i];
rightSum = Math.max(rightSum, sum);
}
return leftSum + rightSum;
}
}
// 测试
console.log(maxSubArrayDivide([-2, 1, -3, 4, -1, 2, 1, -5, 4])); // 6
function maxSubArrayWithIndices(nums) {
if (!nums || nums.length === 0) return { sum: 0, subarray: [] };
let maxSum = nums[0];
let currentSum = nums[0];
let maxStart = 0, maxEnd = 0;
let currentStart = 0;
for (let i = 1; i < nums.length; i++) {
if (nums[i] > currentSum + nums[i]) {
// 从当前元素重新开始
currentSum = nums[i];
currentStart = i;
} else {
// 继续累加
currentSum += nums[i];
}
// 更新最大和及其位置
if (currentSum > maxSum) {
maxSum = currentSum;
maxStart = currentStart;
maxEnd = i;
}
}
return {
sum: maxSum,
subarray: nums.slice(maxStart, maxEnd + 1),
start: maxStart,
end: maxEnd
};
}
// 测试
const result = maxSubArrayWithIndices([-2, 1, -3, 4, -1, 2, 1, -5, 4]);
console.log(result.sum); // 6
console.log(result.subarray); // [4, -1, 2, 1]
console.log(result.start); // 3
console.log(result.end); // 6
function maxSubArrayEnhanced(nums) {
if (!nums || nums.length === 0) return 0;
// 处理全负数的情况
let allNegative = true;
let maxElement = -Infinity;
for (let num of nums) {
if (num >= 0) allNegative = false;
if (num > maxElement) maxElement = num;
}
if (allNegative) return maxElement;
// 正常情况使用 Kadane 算法
let maxSum = nums[0];
let currentSum = nums[0];
for (let i = 1; i < nums.length; i++) {
currentSum = Math.max(nums[i], currentSum + nums[i]);
maxSum = Math.max(maxSum, currentSum);
}
return maxSum;
}
// 测试
console.log(maxSubArrayEnhanced([-1, -2, -3, -4])); // -1
console.log(maxSubArrayEnhanced([-2, 1, -3, 4, -1, 2, 1, -5, 4])); // 6
const testCases = [
{ name: '小数组', arr: [1, 2, 3, 4, 5] },
{ name: '混合数组', arr: [-2, 1, -3, 4, -1, 2, 1, -5, 4] },
{ name: '全负数', arr: [-5, -4, -3, -2, -1] },
{ name: '大数组', arr: Array.from({ length: 10000 }, (_, i) => Math.floor(Math.random() * 2000) - 1000) }
];
function benchmark() {
testCases.forEach(({ name, arr }) => {
console.time(`动态规划-${name}`);
maxSubArray(arr);
console.timeEnd(`动态规划-${name}`);
console.time(`分治法-${name}`);
maxSubArrayDivide(arr);
console.timeEnd(`分治法-${name}`);
console.log('---');
});
}
// 动态规划：时间复杂度 O(n)，空间复杂度 O(1)
// 分治法：时间复杂度 O(n log n)，空间复杂度 O(log n)（递归栈）
// HTTPS = HTTP + TLS/SSL
const httpsHandshake = {
// 第 1 步：Client Hello
clientHello: {
protocol: 'TLS 1.2 或 TLS 1.3',
random: '客户端随机数',
cipherSuites: '支持的加密套件列表',
compressionMethods: '压缩方法',
extensions: ['服务器名称指示（SNI）', '支持的椭圆曲线', '签名算法']
},
// 第 2 步：Server Hello
serverHello: {
protocol: '选择的 TLS 版本',
random: '服务器随机数',
cipherSuite: '选择的加密套件',
compressionMethod: '选择的压缩方法',
extensions: '服务器扩展'
},
// 第 3 步：服务器证书
serverCertificate: {
certificate: '服务器证书链',
certificateRequest: '可选，要求客户端提供证书'
},
// 第 4 步：Server Key Exchange（如果需要）
serverKeyExchange: {
// 用于密钥交换的参数
// 在 RSA 密钥交换中不需要此步骤
},
// 第 5 步：Server Hello Done
serverHelloDone: '表示服务器部分完成',
// 第 6 步：Client Key Exchange
clientKeyExchange: {
// 客户端生成预主密钥，用服务器公钥加密后发送
encryptedPreMasterSecret: '加密的预主密钥'
},
// 第 7 步：Change Cipher Spec
changeCipherSpec: '通知对方开始使用加密通信',
// 第 8 步：Finished
finished: {
message: '加密的 Finished 消息，包含所有握手消息的校验和'
}
};
// TLS 1.2 完整握手（RSA 密钥交换）
function tls12HandshakeRSA() {
console.log('=== TLS 1.2 握手过程（RSA）===');
// 1. TCP 三次握手建立连接
// 2. TLS 握手开始
// 客户端 -> 服务器：Client Hello
const clientHello = {
version: 'TLS 1.2',
random: 'client_random',
cipherSuites: ['TLS_RSA_WITH_AES_128_GCM_SHA256', 'TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256'],
extensions: { server_name: 'example.com' }
};
// 服务器 -> 客户端：Server Hello
const serverHello = {
version: 'TLS 1.2',
random: 'server_random',
cipherSuite: 'TLS_RSA_WITH_AES_128_GCM_SHA256'
};
// 服务器 -> 客户端：Certificate（服务器证书）
const serverCertificate = 'certificate_chain';
// 服务器 -> 客户端：Server Hello Done
console.log('Server Hello Done');
// 客户端验证证书，生成预主密钥
const preMasterSecret = 'pre_master_secret';
// 用服务器公钥加密
const encryptedPreMasterSecret = encrypt(preMasterSecret, serverPublicKey);
// 客户端 -> 服务器：Client Key Exchange
const clientKeyExchange = {
encryptedPreMasterSecret: encryptedPreMasterSecret
};
// 双方计算主密钥
// master_secret = PRF(pre_master_secret, "master secret", ClientHello.random + ServerHello.random)
const masterSecret = 'master_secret';
// 客户端 -> 服务器：Change Cipher Spec
console.log('Change Cipher Spec');
// 客户端 -> 服务器：Finished
const clientFinished = 'encrypted_finished_message';
// 服务器 -> 客户端：Change Cipher Spec
console.log('Server Change Cipher Spec');
// 服务器 -> 客户端：Finished
const serverFinished = 'encrypted_finished_message';
// 3. 握手完成，开始加密通信
console.log('握手完成，开始加密通信');
return {
masterSecret,
clientRandom: clientHello.random,
serverRandom: serverHello.random
};
}
// TLS 1.3 握手（1-RTT 模式）
function tls13Handshake() {
console.log('=== TLS 1.3 握手过程 ===');
// TLS 1.3 删除了不安全的加密套件和特性
// 只支持前向安全的密钥交换算法（如 ECDHE）
// 客户端 -> 服务器：Client Hello
const clientHello = {
version: 'TLS 1.3',
random: 'client_random',
cipherSuites: ['TLS_AES_128_GCM_SHA256', 'TLS_CHACHA20_POLY1305_SHA256'],
extensions: {
supported_versions: 'TLS 1.3',
key_share: '客户端的密钥交换参数',
signature_algorithms: '支持的签名算法'
}
};
// 服务器 -> 客户端：Server Hello
const serverHello = {
version: 'TLS 1.3',
random: 'server_random',
cipherSuite: 'TLS_AES_128_GCM_SHA256',
extensions: {
key_share: '服务器的密钥交换参数'
}
};
// 服务器 -> 客户端：Encrypted Extensions
// 服务器 -> 客户端：Certificate（可选）
// 服务器 -> 客户端：Certificate Verify（可选）
// 服务器 -> 客户端：Finished
// 客户端 -> 服务器：Finished
console.log('TLS 1.3 握手完成（1 个 RTT）');
return {
version: 'TLS 1.3',
cipher: 'AES-128-GCM',
forwardSecrecy: true
};
}
const httpsConcepts = {
// 1. 证书验证
certificateVerification: {
purpose: '验证服务器身份',
process: ['验证证书链完整性', '检查证书是否在有效期内', '检查域名是否匹配', '检查是否被吊销（CRL/OCSP）']
},
// 2. 密钥交换算法
keyExchange: {
RSA: {
description: '服务器证书的公钥加密预主密钥',
drawback: '不支持前向保密'
},
DiffieHellman: {
description: '双方交换参数生成共享密钥',
advantage: '支持前向保密'
},
ECDHE: {
description: '椭圆曲线版本的 DH',
advantage: '更安全，性能更好'
}
},
// 3. 对称加密算法
symmetricCiphers: {
AES: {
modes: ['GCM', 'CBC', 'CTR'],
keyLength: [128, 256]
},
ChaCha20: 'Google 开发的流密码，移动设备性能好'
},
// 4. 哈希算法
hashAlgorithms: {
SHA256: '目前最常用',
SHA384: '更高安全性',
SHA512: '最高安全性'
},
// 5. 前向保密
forwardSecrecy: {
definition: '即使服务器私钥泄露，过去的通信也无法被解密',
implementation: '使用 DHE 或 ECDHE 密钥交换'
}
};
// 使用 Node.js 模拟 HTTPS 连接
const https = require('https');
const tls = require('tls');
// 创建 HTTPS 服务器
const options = {
key: '服务器私钥',
cert: '服务器证书',
ciphers: ['ECDHE-RSA-AES128-GCM-SHA256', 'ECDHE-ECDSA-AES128-GCM-SHA256'].join(':'),
honorCipherOrder: true
};
// 客户端连接
function connectToHttpsServer() {
const req = https.request({
hostname: 'example.com',
port: 443,
path: '/',
method: 'GET',
// TLS 选项
secureProtocol: 'TLSv1_2_method',
ciphers: 'ECDHE-RSA-AES128-GCM-SHA256',
rejectUnauthorized: true // 验证服务器证书
}, (res) => {
console.log('状态码:', res.statusCode);
console.log('TLS 版本:', res.socket.getProtocol());
console.log('加密套件:', res.socket.getCipher());
});
req.on('error', (err) => {
console.error('HTTPS 请求失败:', err.message);
});
req.end();
}
// 获取证书信息
function getCertificateInfo(hostname) {
const socket = tls.connect(443, hostname, {
servername: hostname
}, () => {
const cert = socket.getPeerCertificate();
console.log('颁发者:', cert.issuer);
console.log('有效期:', cert.valid_from, '至', cert.valid_to);
console.log('签名算法:', cert.signatureAlgorithm);
socket.destroy();
});
}
class TreeNode {
constructor(value) {
this.value = value;
this.left = null; // 左子树
this.right = null; // 右子树
this.parent = null; // 父节点（可选）
}
}
class BinaryTree {
constructor() {
this.root = null; // 根节点
this.size = 0; // 节点数量
}
// 插入节点
insert(value) {
const newNode = new TreeNode(value);
if (this.root === null) {
this.root = newNode;
this.size = 1;
return newNode;
}
// 使用队列进行层级插入（创建完全二叉树）
const queue = [this.root];
while (queue.length > 0) {
const currentNode = queue.shift();
if (currentNode.left === null) {
currentNode.left = newNode;
newNode.parent = currentNode;
break;
} else if (currentNode.right === null) {
currentNode.right = newNode;
newNode.parent = currentNode;
break;
} else {
queue.push(currentNode.left, currentNode.right);
}
}
this.size++;
return newNode;
}
// 二叉搜索树插入
insertBST(value) {
const newNode = new TreeNode(value);
if (this.root === null) {
this.root = newNode;
this.size = 1;
return newNode;
}
let currentNode = this.root;
let parent = null;
while (currentNode !== null) {
parent = currentNode;
if (value < currentNode.value) {
currentNode = currentNode.left;
} else if (value > currentNode.value) {
currentNode = currentNode.right;
} else {
// 值已存在，根据需求处理
console.log('值已存在:', value);
return currentNode;
}
}
newNode.parent = parent;
if (value < parent.value) {
parent.left = newNode;
} else {
parent.right = newNode;
}
this.size++;
return newNode;
}
// 查找节点
find(value) {
return this._findNode(this.root, value);
}
_findNode(node, value) {
if (node === null) return null;
if (node.value === value) return node;
const leftResult = this._findNode(node.left, value);
if (leftResult) return leftResult;
return this._findNode(node.right, value);
}
// 删除节点
remove(value) {
const node = this.find(value);
if (!node) return false;
// 情况 1：叶子节点
if (node.left === null && node.right === null) {
this._replaceNode(node, null);
}
// 情况 2：只有一个子节点
else if (node.left === null) {
this._replaceNode(node, node.right);
} else if (node.right === null) {
this._replaceNode(node, node.left);
}
// 情况 3：有两个子节点
else {
// 找到右子树的最小节点
const successor = this._findMin(node.right);
node.value = successor.value;
this._replaceNode(successor, successor.right);
}
this.size--;
return true;
}
_replaceNode(oldNode, newNode) {
if (oldNode.parent === null) {
this.root = newNode;
} else if (oldNode.parent.left === oldNode) {
oldNode.parent.left = newNode;
} else {
oldNode.parent.right = newNode;
}
if (newNode !== null) {
newNode.parent = oldNode.parent;
}
}
_findMin(node) {
while (node.left !== null) {
node = node.left;
}
return node;
}
}
class BinaryTreeTraversal extends BinaryTree {
// 前序遍历：根 -> 左 -> 右
preorder() {
const result = [];
this._preorderRecursive(this.root, result);
return result;
}
_preorderRecursive(node, result) {
if (node === null) return;
result.push(node.value); // 访问根节点
this._preorderRecursive(node.left, result); // 遍历左子树
this._preorderRecursive(node.right, result); // 遍历右子树
}
// 前序遍历（迭代）
preorderIterative() {
if (this.root === null) return [];
const result = [];
const stack = [this.root];
while (stack.length > 0) {
const node = stack.pop();
result.push(node.value); // 先右后左，保证左子树先被访问
if (node.right !== null) stack.push(node.right);
if (node.left !== null) stack.push(node.left);
}
return result;
}
// 中序遍历：左 -> 根 -> 右
inorder() {
const result = [];
this._inorderRecursive(this.root, result);
return result;
}
_inorderRecursive(node, result) {
if (node === null) return;
this._inorderRecursive(node.left, result); // 遍历左子树
result.push(node.value); // 访问根节点
this._inorderRecursive(node.right, result); // 遍历右子树
}
// 中序遍历（迭代）
inorderIterative() {
const result = [];
const stack = [];
let currentNode = this.root;
while (currentNode !== null || stack.length > 0) {
// 遍历到最左边的节点
while (currentNode !== null) {
stack.push(currentNode);
currentNode = currentNode.left;
}
currentNode = stack.pop();
result.push(currentNode.value);
currentNode = currentNode.right;
}
return result;
}
// 后序遍历：左 -> 右 -> 根
postorder() {
const result = [];
this._postorderRecursive(this.root, result);
return result;
}
_postorderRecursive(node, result) {
if (node === null) return;
this._postorderRecursive(node.left, result); // 遍历左子树
this._postorderRecursive(node.right, result); // 遍历右子树
result.push(node.value); // 访问根节点
}
// 后序遍历（迭代）
postorderIterative() {
if (this.root === null) return [];
const result = [];
const stack1 = [this.root];
const stack2 = [];
while (stack1.length > 0) {
const node = stack1.pop();
stack2.push(node);
if (node.left !== null) stack1.push(node.left);
if (node.right !== null) stack1.push(node.right);
}
while (stack2.length > 0) {
result.push(stack2.pop().value);
}
return result;
}
// 层序遍历（广度优先）
levelOrder() {
if (this.root === null) return [];
const result = [];
const queue = [this.root];
while (queue.length > 0) {
const levelSize = queue.length;
const currentLevel = [];
for (let i = 0; i < levelSize; i++) {
const node = queue.shift();
currentLevel.push(node.value);
if (node.left !== null) queue.push(node.left);
if (node.right !== null) queue.push(node.right);
}
result.push(currentLevel);
}
return result;
}
}
class BinaryTreeUtils extends BinaryTreeTraversal {
// 获取树的高度
getHeight() {
return this._calculateHeight(this.root);
}
_calculateHeight(node) {
if (node === null) return 0;
const leftHeight = this._calculateHeight(node.left);
const rightHeight = this._calculateHeight(node.right);
return Math.max(leftHeight, rightHeight) + 1;
}
// 判断是否是完全二叉树
isComplete() {
if (this.root === null) return true;
const queue = [this.root];
let hasNullChild = false;
while (queue.length > 0) {
const node = queue.shift();
if (node.left !== null) {
if (hasNullChild) return false;
queue.push(node.left);
} else {
hasNullChild = true;
}
if (node.right !== null) {
if (hasNullChild) return false;
queue.push(node.right);
} else {
hasNullChild = true;
}
}
return true;
}
// 判断是否是二叉搜索树
isBST() {
return this._isBSTRecursive(this.root, -Infinity, Infinity);
}
_isBSTRecursive(node, min, max) {
if (node === null) return true;
if (node.value <= min || node.value >= max) return false;
return this._isBSTRecursive(node.left, min, node.value) && this._isBSTRecursive(node.right, node.value, max);
}
// 查找最低公共祖先
findLCA(value1, value2) {
const node1 = this.find(value1);
const node2 = this.find(value2);
if (!node1 || !node2) return null;
return this._findLCARecursive(this.root, node1, node2);
}
_findLCARecursive(root, p, q) {
if (root === null || root === p || root === q) return root;
const left = this._findLCARecursive(root.left, p, q);
const right = this._findLCARecursive(root.right, p, q);
if (left !== null && right !== null) return root;
return left !== null ? left : right;
}
// 序列化和反序列化
serialize() {
return this._serializeRecursive(this.root);
}
_serializeRecursive(node) {
if (node === null) return 'null';
const left = this._serializeRecursive(node.left);
const right = this._serializeRecursive(node.right);
return `${node.value},${left},${right}`;
}
deserialize(data) {
const values = data.split(',');
let index = 0;
this.root = this._deserializeRecursive(values);
return this;
}
_deserializeRecursive(values) {
if (index >= values.length || values[index] === 'null') {
index++;
return null;
}
const node = new TreeNode(parseInt(values[index++]));
node.left = this._deserializeRecursive(values);
node.right = this._deserializeRecursive(values);
return node;
}
}
// 创建二叉树
const tree = new BinaryTreeUtils();
// 插入节点
tree.insertBST(5);
tree.insertBST(3);
tree.insertBST(7);
tree.insertBST(2);
tree.insertBST(4);
tree.insertBST(6);
tree.insertBST(8);
console.log('前序遍历:', tree.preorder()); // [5, 3, 2, 4, 7, 6, 8]
console.log('中序遍历:', tree.inorder()); // [2, 3, 4, 5, 6, 7, 8]
console.log('后序遍历:', tree.postorder()); // [2, 4, 3, 6, 8, 7, 5]
console.log('层序遍历:', tree.levelOrder()); // [[5], [3, 7], [2, 4, 6, 8]]
console.log('树的高度:', tree.getHeight()); // 3
console.log('是否是 BST:', tree.isBST()); // true
console.log('是否完全二叉树:', tree.isComplete()); // true
// 序列化
const serialized = tree.serialize();
console.log('序列化:', serialized);
// 反序列化
const newTree = new BinaryTreeUtils();
newTree.deserialize(serialized);
console.log('反序列化后的中序遍历:', newTree.inorder());
// 防抖函数：在事件被触发 n 秒后再执行，如果在这 n 秒内又被触发，则重新计时
function debounce(func, wait, immediate = false) {
let timeout = null;
let result;
return function(...args) {
const context = this;
// 如果已经设置了定时器，清除它
if (timeout) clearTimeout(timeout);
if (immediate) {
// 立即执行版本
const callNow = !timeout;
timeout = setTimeout(() => {
timeout = null;
}, wait);
if (callNow) result = func.apply(context, args);
} else {
// 延迟执行版本
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
}
return result;
};
}
// 使用示例
const handleSubmit = debounce(function(formData) {
console.log('提交数据:', formData); // 实际提交逻辑
return fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(formData)
});
}, 1000); // 1 秒内多次点击只执行一次
// 按钮点击事件
document.getElementById('submitBtn').addEventListener('click', () => {
const formData = collectFormData();
handleSubmit(formData);
});
// 节流函数：在一定时间内只执行一次
function throttle(func, wait, options = {}) {
let timeout = null;
let previous = 0;
const { leading = true, trailing = true } = options;
return function(...args) {
const context = this;
const now = Date.now();
if (!previous && !leading) previous = now;
const remaining = wait - (now - previous);
if (remaining <= 0 || remaining > wait) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
previous = now;
func.apply(context, args);
} else if (!timeout && trailing) {
timeout = setTimeout(() => {
previous = leading ? Date.now() : 0;
timeout = null;
func.apply(context, args);
}, remaining);
}
};
}
// 使用示例：滚动加载更多
const handleScroll = throttle(function() {
if (isNearBottom()) {
loadMoreData();
}
}, 200); // 每 200 毫秒最多执行一次
window.addEventListener('scroll', handleScroll);
// 方案 1：简单禁用
function simpleDisableButton(button, duration = 2000) {
button.disabled = true;
button.textContent = '提交中...';
setTimeout(() => {
button.disabled = false;
button.textContent = '提交';
}, duration);
}
// 方案 2：Promise 感知的禁用
async function submitWithDisable(button, submitFunction) {
const originalText = button.textContent;
try {
button.disabled = true;
button.textContent = '提交中...';
await submitFunction();
button.textContent = '提交成功';
setTimeout(() => {
button.textContent = originalText;
button.disabled = false;
}, 1500);
} catch (error) {
button.textContent = '提交失败，重试';
button.disabled = false;
throw error;
}
}
// 使用
document.getElementById('submitBtn').addEventListener('click', async () => {
await submitWithDisable(this, async () => {
await fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(formData)
});
});
});
// 方案 1：请求 ID 标识
class RequestManager {
constructor() {
this.pendingRequests = new Map();
}
async execute(key, requestFunction) {
// 如果已经有相同的请求在处理中，直接返回它的 Promise
if (this.pendingRequests.has(key)) {
console.log('检测到重复请求，使用缓存结果');
return this.pendingRequests.get(key);
}
try {
const promise = requestFunction();
this.pendingRequests.set(key, promise);
const result = await promise;
return result;
} finally {
this.pendingRequests.delete(key);
}
}
cancel(key) {
if (this.pendingRequests.has(key)) {
// 这里可以实际取消请求（如使用 AbortController）
this.pendingRequests.delete(key);
}
}
}
// 使用
const requestManager = new RequestManager();
async function submitForm(formData) {
const requestKey = `submit_${JSON.stringify(formData)}`;
return requestManager.execute(requestKey, async () => {
const response = await fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(formData)
});
return response.json();
});
}
// 方案 2：AbortController 取消重复请求
class RequestCanceler {
constructor() {
this.controllers = new Map();
}
async fetchWithCancel(key, url, options = {}) {
// 取消之前的相同请求
if (this.controllers.has(key)) {
this.controllers.get(key).abort();
}
const controller = new AbortController();
this.controllers.set(key, controller);
try {
const response = await fetch(url, { ...options, signal: controller.signal });
return response;
} finally {
this.controllers.delete(key);
}
}
}
// 完整的防重复提交方案
class AntiResubmit {
constructor(options = {}) {
this.options = {
debounceTime: 1000, // 防抖时间
disableTime: 2000, // 禁用时间
storageKey: 'submit_lock', // 本地存储 key
...options
};
this.submitLock = false;
}
// 方法 1：防抖 + 按钮禁用
debounceSubmit(button, submitFunc) {
let timer = null;
return async (...args) => {
if (this.submitLock) {
console.log('提交锁定中，请稍候');
return;
}
// 清除之前的定时器
if (timer) clearTimeout(timer);
// 设置防抖
timer = setTimeout(async () => {
try {
this.submitLock = true;
this.disableButton(button, true);
await submitFunc(...args);
// 成功后的禁用时间
setTimeout(() => {
this.submitLock = false;
this.disableButton(button, false);
}, this.options.disableTime);
} catch (error) {
this.submitLock = false;
this.disableButton(button, false);
throw error;
}
}, this.options.debounceTime);
};
}
disableButton(button, disabled) {
button.disabled = disabled;
button.style.opacity = disabled ? 0.6 : 1;
if (disabled) {
const originalText = button.textContent;
button.textContent = '提交中...';
button.setAttribute('data-original-text', originalText);
} else {
const originalText = button.getAttribute('data-original-text');
if (originalText) {
button.textContent = originalText;
}
}
}
// 方法 2：本地存储锁（防止刷新后重复提交）
withStorageLock(key, func) {
return async (...args) => {
const lockKey = `${this.options.storageKey}_${key}`;
const lockTime = localStorage.getItem(lockKey);
if (lockTime && Date.now() - parseInt(lockTime) < this.options.disableTime) {
throw new Error('操作太频繁，请稍后再试');
}
try {
localStorage.setItem(lockKey, Date.now().toString());
const result = await func(...args);
return result;
} finally {
setTimeout(() => {
localStorage.removeItem(lockKey);
}, this.options.disableTime);
}
};
}
// 方法 3：请求令牌（token）
async withRequestToken(submitFunc) {
const token = this.generateToken();
this.currentToken = token;
try {
const result = await submitFunc(token);
// 验证 token 是否仍然有效
if (this.currentToken === token) {
return result;
} else {
throw new Error('请求已过期');
}
} finally {
this.currentToken = null;
}
}
generateToken() {
return Date.now().toString(36) + Math.random().toString(36).substr(2);
}
}
// 使用示例
const antiResubmit = new AntiResubmit({ debounceTime: 1000, disableTime: 3000 });
const submitButton = document.getElementById('submitBtn');
const handleRealSubmit = async (formData) => {
const response = await fetch('/api/submit', {
method: 'POST',
body: JSON.stringify(formData)
});
return response.json();
};
// 绑定防重复提交处理
submitButton.addEventListener('click', antiResubmit.debounceSubmit(submitButton, handleRealSubmit));
// == 的转换规则优先级
/*
1. 如果类型相同，直接比较值
2. null == undefined 返回 true
3. 字符串和数字比较：将字符串转为数字
4. 布尔值和其他类型比较：将布尔值转为数字（true->1, false->0）
5. 对象和原始值比较：调用对象的 valueOf() 或 toString() 方法，将对象转为原始值
6. 如果转换后类型仍然不同，按上述规则继续转换
*/
// 示例 1：类型相同，直接比较
console.log(1 == 1); // true
console.log('a' == 'a'); // true
console.log(true == true); // true
console.log(null == null); // true
console.log(undefined == undefined); // true
// 示例 2：null 和 undefined 的特殊情况
console.log(null == undefined); // true
console.log(null == null); // true
console.log(undefined == undefined); // true
console.log(null == 0); // false
console.log(undefined == 0); // false
// 示例 3：字符串和数字比较
console.log('123' == 123); // true，字符串转数字
console.log('' == 0); // true，空字符串转数字 0
console.log(' ' == 0); // true，空白字符串转数字 0
console.log('abc' == 0); // false，'abc'转数字是 NaN
// 示例 4：布尔值和其他类型比较
console.log(true == 1); // true，true 转数字 1
console.log(false == 0); // true，false 转数字 0
console.log(true == '1'); // true，布尔转数字，字符串转数字
console.log(false == ''); // true，false 转 0，空字符串转 0
console.log(true == 'true'); // false，true 转 1，'true'转数字是 NaN
// 示例 5：对象和原始值比较
console.log([] == 0); // true，[]转字符串''，''转数字 0
console.log([1] == 1); // true，[1]转字符串'1'，'1'转数字 1
console.log([1, 2] == '1,2'); // true，[1,2]转字符串'1,2'
console.log({} == '[object Object]'); // true，{}转字符串'[object Object]'
const obj = {
valueOf() { return 42; },
toString() { return '99'; }
};
console.log(obj == 42); // true，优先调用 valueOf()
// 模拟 == 的实现逻辑
function abstractEqualityComparison(x, y) {
// 1. 如果类型相同
if (typeof x === typeof y) {
// 特殊情况：NaN
if (Number.isNaN(x) && Number.isNaN(y)) return false;
// 正常比较
return x === y;
}
// 2. null 和 undefined 比较
if (x == null && y == null) return true;
if ((x === null && y === undefined) || (x === undefined && y === null)) {
return true;
}
// 3. 字符串和数字比较
if (typeof x === 'string' && typeof y === 'number') {
return stringToNumber(x) === y;
}
if (typeof x === 'number' && typeof y === 'string') {
return x === stringToNumber(y);
}
// 4. 布尔值比较
if (typeof x === 'boolean') {
return abstractEqualityComparison(booleanToNumber(x), y);
}
if (typeof y === 'boolean') {
return abstractEqualityComparison(x, booleanToNumber(y));
}
// 5. 对象和原始值比较
if ((typeof x === 'object' || typeof x === 'function') && (typeof y === 'string' || typeof y === 'number' || typeof y === 'symbol')) {
const primitive = toPrimitive(x);
return abstractEqualityComparison(primitive, y);
}
if ((typeof y === 'object' || typeof y === 'function') && (typeof x === 'string' || typeof x === 'number' || typeof x === 'symbol')) {
const primitive = toPrimitive(y);
return abstractEqualityComparison(x, primitive);
}
return false;
}
// 辅助函数
function stringToNumber(str) {
const num = Number(str);
return Number.isNaN(num) ? NaN : num;
}
function booleanToNumber(bool) {
return bool ? 1 : 0;
}
function toPrimitive(obj) {
// 先尝试 valueOf，再尝试 toString
if (typeof obj.valueOf === 'function') {
const value = obj.valueOf();
if (value !== obj) return value;
}
if (typeof obj.toString === 'function') {
const value = obj.toString();
if (value !== obj) return value;
}
throw new TypeError('Cannot convert object to primitive value');
}
// 陷阱 1：数组的奇怪比较
console.log([] == ![]); // true
// 解析：![] 先转布尔值，[] 是 truthy，![] 是 false
// false 转数字 0，[] 转字符串''，''转数字 0
// 所以 0 == 0 为 true
console.log([] == []); // false
// 对象比较的是引用，不是值
// 陷阱 2：对象的 valueOf 和 toString
const trickyObj = {
valueOf: () => 1,
toString: () => '2'
};
console.log(trickyObj == 1); // true，优先使用 valueOf
console.log(trickyObj == '2'); // false，不是直接调用 toString
// 陷阱 3：Symbol 的特殊性
const sym = Symbol('foo');
console.log(sym == sym); // true，相同 Symbol
console.log(sym == 'foo'); // false，Symbol 不能隐式转换
console.log(Symbol('foo') == Symbol('foo')); // false，每个 Symbol 都唯一
// 陷阱 4：大数字的精度问题
console.log(0.1 + 0.2 == 0.3); // false，浮点数精度问题
console.log(0.1 + 0.2); // 0.30000000000000004
// 建议 1：大多数情况下使用 ===
// === 严格相等，不进行类型转换
const bestPractices = {
alwaysUseTripleEquals: [
'比较值和类型是否完全相同',
'避免隐式类型转换的意外',
'代码意图更清晰'
],
exceptions: [
{ case: '判断变量是否为 null 或 undefined', example: 'if (value == null) { /* value 是 null 或 undefined */ }' },
{ case: '与 0 比较，但允许空字符串和 false', example: 'if (count == 0) { /* count 可能是 0、false 或空字符串 */ }' }
],
safeComparisons: `
// 安全的方式
if (value === null || value === undefined) { ... }
if (count === 0 || count === false || count === "") { ... }
// 类型明确的比较
const num = Number(input);
if (num === 42) { ... }
// 布尔值明确转换
const bool = Boolean(value);
if (bool === true) { ... }
`
};
<!DOCTYPE html>
<html>
<head>
<!-- 关键：视口设置 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<!-- 防止电话号码自动识别为链接 -->
<meta name="format-detection" content="telephone=no">
<!-- 防止邮箱自动识别 -->
<meta name="format-detection" content="email=no">
<!-- iOS Safari 全屏模式 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- iOS 状态栏样式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
/* 方案 1：媒体查询（Media Queries） */
/* 移动端优先的媒体查询 */
/* 超小屏幕（手机，小于 576px） */
.container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
/* 小屏幕（平板，576px 以上） */
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
/* 中等屏幕（平板横屏，768px 以上） */
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
/* 大屏幕（桌面，992px 以上） */
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
/* 超大屏幕（大桌面，1200px 以上） */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/* 方案 2：Flexbox 弹性布局 */
.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
/* 移动端：一行一个 */
flex: 0 0 100%;
margin-bottom: 20px;
}
/* 平板：一行两个 */
@media (min-width: 768px) {
.flex-item {
flex: 0 0 calc(50% - 10px);
}
}
/* 桌面：一行四个 */
@media (min-width: 992px) {
.flex-item {
flex: 0 0 calc(25% - 15px);
}
}
/* 方案 3：Grid 网格布局 */
.grid-container {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 768px) {
.grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.grid-container {
grid-template-columns: repeat(4, 1fr);
}
}
/* 相对单位适配方案 */
/* 1. rem 适配（推荐） */
html {
/* 设置根元素字体大小 */
font-size: 16px; /* 默认 */
}
@media (max-width: 375px) {
html {
font-size: 14px; /* iPhone 6/7/8 */
}
}
@media (max-width: 320px) {
html {
font-size: 12px; /* iPhone 5 */
}
}
/* 使用 rem */
.container {
width: 20rem; /* 20 * 根字体大小 */
padding: 1rem;
margin: 0 auto;
}
/* 2. vw/vh 适配（视口单位） */
/* 基于视口宽度 */
.box {
width: 50vw; /* 视口宽度的 50% */
height: 50vh; /* 视口高度的 50% */
font-size: 4vw; /* 字体大小随视口变化 */
}
/* 3. 百分比布局 */
.parent {
width: 100%;
}
.child {
width: 50%; /* 父元素宽度的 50% */
padding: 5%; /* 父元素宽度的 5% */
}
/* 4. 组合使用 */
.responsive-box {
/* 最小 200px，最大父元素的 80%，随视口变化 */
width: max(200px, min(80%, 400px)); /* 使用 clamp 函数 */
font-size: clamp(14px, 2vw, 20px); /* 最小 14px，最大 20px，随视口变化 */
}
/* 1. 1 像素边框问题 */
.border-1px {
position: relative;
}
.border-1px::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: #e0e0e0;
transform: scaleY(0.5);
transform-origin: 0 0;
}
/* 2. 防止点击高亮 */
.no-tap-highlight {
-webkit-tap-highlight-color: transparent;
}
/* 3. 优化滚动体验 */
.scroll-container {
-webkit-overflow-scrolling: touch; /* iOS 惯性滚动 */
overflow-scrolling: touch;
}
/* 4. 禁止文本选择 */
.no-select {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* 5. 点击区域扩大 */
.touch-area {
padding: 12px; /* 扩大点击区域 */
min-height: 44px; /* iOS 推荐的最小点击高度 */
}
/* 6. 防止图片被拖动 */
.no-drag {
-webkit-user-drag: none;
user-drag: none;
}
// 动态设置 rem 基准值
(function() {
const baseSize = 16; // 基准字体大小
const designWidth = 375; // 设计稿宽度（iPhone 6/7/8）
function setRem() {
const scale = document.documentElement.clientWidth / designWidth;
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
setRem();
// 窗口大小变化时重新设置
window.addEventListener('resize', setRem);
window.addEventListener('pageshow', function(e) {
if (e.persisted) {
setRem();
}
});
})();
// 或者在 CSS 中使用 vw
html {
font-size: calc(100vw / 375 * 16); /* 基于 375px 设计稿 */
}
// 使用 Sass 的混合宏
@mixin respond-to($breakpoint) {
@if $breakpoint == 'phone' {
@media (max-width: 599px) {
@content;
}
} @else if $breakpoint == 'tablet' {
@media (min-width: 600px) and (max-width: 899px) {
@content;
}
} @else if $breakpoint == 'desktop' {
@media (min-width: 900px) {
@content;
}
}
}
// 使用
.box {
width: 100%;
@include respond-to('tablet') {
width: 50%;
}
@include respond-to('desktop') {
width: 33.33%;
}
}
// 工具类：显示/隐藏
.hide-on-mobile {
display: none;
@media (min-width: 768px) {
display: block;
}
}
.show-on-mobile {
display: block;
@media (min-width: 768px) {
display: none;
}
}
/* 综合最佳实践 */
/* 1. 使用 CSS 变量定义设计系统 */
:root {
/* 间距系统 */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
/* 字体大小 */
--text-xs: 12px;
--text-sm: 14px;
--text-md: 16px;
--text-lg: 18px;
--text-xl: 20px;
/* 断点 */
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
}
/* 2. 容器组件 */
.container {
width: 100%;
padding-left: var(--space-md);
padding-right: var(--space-md);
margin-left: auto;
margin-right: auto;
@media (min-width: 768px) {
max-width: 720px;
padding-left: 0;
padding-right: 0;
}
@media (min-width: 992px) {
max-width: 960px;
}
@media (min-width: 1200px) {
max-width: 1140px;
}
}
/* 3. 响应式图片 */
.responsive-image {
max-width: 100%;
height: auto;
display: block;
}
/* 4. 触摸友好的交互 */
.touch-button {
padding: var(--space-md) var(--space-lg);
min-height: 44px; /* iOS 推荐的最小触摸高度 */
font-size: var(--text-md);
border-radius: 8px;
background: #007aff;
color: white;
border: none;
cursor: pointer;
/* 禁用状态 */
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* 激活状态 */
&:active {
transform: scale(0.98);
}
}
// 传统 XMLHttpRequest 取消
function makeXHRRequest() {
const xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('请求成功:', xhr.responseText);
} else {
console.log('请求失败:', xhr.status);
}
}
};
xhr.send();
// 返回取消函数
return function cancel() {
if (xhr.readyState !== 4) {
xhr.abort();
console.log('请求已取消');
}
};
}
// 使用
const cancelXHR = makeXHRRequest();
// 5 秒后取消请求
setTimeout(() => {
cancelXHR();
}, 5000);
// 使用 AbortController 取消 fetch 请求
async function makeFetchRequest() {
// 创建 AbortController 实例
const controller = new AbortController();
const signal = controller.signal;
try {
// 将 signal 传递给 fetch
const response = await fetch('/api/data', {
method: 'GET',
signal: signal // 关键：传入 signal
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data = await response.json();
console.log('请求成功:', data);
return data;
} catch (error) {
// 检查是否是取消导致的错误
if (error.name === 'AbortError') {
console.log('请求被取消');
} else {
console.error('请求失败:', error);
}
throw error;
}
}
// 创建请求并获取取消函数
function createCancellableFetch() {
const controller = new AbortController();
const request = fetch('/api/data', {
signal: controller.signal
}).then(response => response.json()).catch(error => {
if (error.name === 'AbortError') {
console.log('请求已取消');
}
throw error;
});
return {
promise: request,
cancel: () => controller.abort()
};
}
// 使用
const { promise, cancel } = createCancellableFetch();
promise.then(data => {
console.log('数据:', data);
}).catch(error => {
if (error.name !== 'AbortError') {
console.error('错误:', error);
}
});
// 3 秒后取消
setTimeout(() => {
cancel();
}, 3000);
// Axios 取消请求的两种方式
// 方式 1：使用 CancelToken（旧版，但仍然可用）
function makeAxiosRequestWithCancelToken() {
// 创建取消令牌源
const source = axios.CancelToken.source();
axios.get('/api/data', {
cancelToken: source.token
}).then(response => {
console.log('请求成功:', response.data);
}).catch(error => {
if (axios.isCancel(error)) {
console.log('请求取消:', error.message);
} else {
console.error('请求失败:', error);
}
});
// 返回取消函数
return function cancel(message = '请求取消') {
source.cancel(message);
};
}
// 方式 2：使用 AbortController（新版推荐）
function makeAxiosRequestWithAbortController() {
const controller = new AbortController();
axios.get('/api/data', {
signal: controller.signal
}).then(response => {
console.log('请求成功:', response.data);
}).catch(error => {
if (axios.isCancel(error)) {
console.log('请求取消');
} else {
console.error('请求失败:', error);
}
});
return function cancel() {
controller.abort();
};
}
// 使用示例
const cancelAxios = makeAxiosRequestWithCancelToken();
// 用户点击取消按钮
document.getElementById('cancelBtn').addEventListener('click', () => {
cancelAxios('用户手动取消');
});
class RequestManager {
constructor() {
this.pendingRequests = new Map();
}
// 添加请求
addRequest(key, requestFunction, options = {}) {
// 如果已存在相同 key 的请求，先取消
if (this.pendingRequests.has(key)) {
this.cancelRequest(key, '取消重复请求');
}
const controller = new AbortController();
// 包装请求
const request = requestFunction(controller.signal).then(response => {
this.pendingRequests.delete(key);
return response;
}).catch(error => {
this.pendingRequests.delete(key);
throw error;
});
// 存储控制器和请求
this.pendingRequests.set(key, {
controller,
request,
timestamp: Date.now()
});
// 设置超时自动取消
if (options.timeout) {
setTimeout(() => {
if (this.pendingRequests.has(key)) {
this.cancelRequest(key, '请求超时');
}
}, options.timeout);
}
return request;
}
// 取消单个请求
cancelRequest(key, reason = '请求取消') {
const item = this.pendingRequests.get(key);
if (item) {
item.controller.abort();
this.pendingRequests.delete(key);
console.log(`${key}: ${reason}`);
}
}
// 取消所有请求
cancelAll(reason = '取消所有请求') {
for (const [key, item] of this.pendingRequests) {
item.controller.abort();
console.log(`${key}: ${reason}`);
}
this.pendingRequests.clear();
}
// 获取正在进行的请求数量
getPendingCount() {
return this.pendingRequests.size;
}
// 清理过期的请求（可选）
cleanup(expireTime = 30000) {
const now = Date.now();
for (const [key, item] of this.pendingRequests) {
if (now - item.timestamp > expireTime) {
this.cancelRequest(key, '请求过期');
}
}
}
}
// 使用示例
const requestManager = new RequestManager();
// 创建可取消的 fetch 函数
function createFetch(signal) {
return fetch('/api/data', { signal }).then(response => response.json());
}
// 发起请求
const request1 = requestManager.addRequest('user_data', (signal) => createFetch(signal), { timeout: 10000 });
request1.then(data => {
console.log('获取到用户数据:', data);
}).catch(error => {
if (error.name !== 'AbortError') {
console.error('获取失败:', error);
}
});
// 取消请求
// requestManager.cancelRequest('user_data')
// requestManager.cancelAll()
// React 示例：在组件卸载时取消请求
import React, { useEffect, useState } from 'react';
import axios from 'axios';
function DataComponent() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const source = axios.CancelToken.source();
const fetchData = async () => {
try {
setLoading(true);
const response = await axios.get('/api/data', {
cancelToken: source.token
});
setData(response.data);
} catch (error) {
if (!axios.isCancel(error)) {
console.error('获取数据失败:', error);
}
} finally {
setLoading(false);
}
};
fetchData();
// 清理函数：组件卸载时取消请求
return () => {
source.cancel('组件卸载，取消请求');
};
}, []); // 空依赖数组，只运行一次
if (loading) return <div>加载中...</div>;
if (!data) return <div>暂无数据</div>;
return (<div>{/* 渲染数据 */}</div>);
}
// Vue 3 示例
import { ref, onUnmounted } from 'vue';
import axios from 'axios';
export function useFetchData() {
const data = ref(null);
const loading = ref(true);
const error = ref(null);
const controller = new AbortController();
const fetchData = async () => {
try {
loading.value = true;
const response = await axios.get('/api/data', {
signal: controller.signal
});
data.value = response.data;
} catch (err) {
if (err.name !== 'CanceledError') {
error.value = err;
}
} finally {
loading.value = false;
}
};
fetchData();
// 组件卸载时取消
onUnmounted(() => {
controller.abort();
});
return { data, loading, error };
}
// 处理竞态条件（Race Condition）
async function fetchWithRaceProtection(url, signal) {
// 创建一个唯一的请求 ID
const requestId = Symbol('request');
// 存储当前活跃的请求
let currentRequest = null;
return async function makeRequest() {
// 如果已经有请求在进行，取消它
if (currentRequest) {
currentRequest.controller.abort();
}
// 创建新的控制器
const controller = new AbortController();
const combinedSignal = (() => {
// 合并多个 AbortSignal
const signals = [controller.signal];
if (signal) signals.push(signal);
if (signals.length === 1) return signals[0];
const abortController = new AbortController();
for (const s of signals) {
s.addEventListener('abort', () => {
abortController.abort();
});
}
return abortController.signal;
})();
currentRequest = { controller, requestId };
try {
const response = await fetch(url, { signal: combinedSignal });
// 检查是否是当前最新的请求
if (currentRequest.requestId === requestId) {
return response.json();
}
// 如果不是最新请求，抛出取消错误
throw new DOMException('请求被新的请求取代', 'AbortError');
} catch (error) {
// 清理当前请求
if (currentRequest.requestId === requestId) {
currentRequest = null;
}
if (error.name === 'AbortError') {
console.log('请求被取消（可能是新的请求启动了）');
}
throw error;
}
};
}
// 使用
const protectedFetch = fetchWithRaceProtection('/api/data');
const makeRequest = protectedFetch();
// 快速连续调用多次
makeRequest(); // 第一次请求
setTimeout(makeRequest, 100); // 第二次请求会取消第一次
setTimeout(makeRequest, 200); // 第三次请求会取消第二次
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
使用加密算法（如AES、TripleDES、Rabbit或RC4）加密和解密文本明文。 在线工具，加密/解密文本在线工具，online
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online