宝鸡市网站建设_网站建设公司_测试工程师_seo优化

第一部分：JavaScript 核心概念深度解析

一、原型链与继承系统

1.1 JavaScript 的原型系统

原型链的基本概念

JavaScript 是一门基于原型的语言，每个对象都有一个指向其原型的内部链接。这个原型对象也有自己的原型，如此层层递进，形成原型链。

javascript

// 原型链示例 function Person(name) { this.name = name; } let p = new Person('Tom'); // 完整的原型链 console.log(p.__proto__ === Person.prototype); // true console.log(Person.prototype.__proto__ === Object.prototype); // true console.log(Object.prototype.__proto__); // null

原型系统的核心机制

1. __proto__与prototype的区别

   • __proto__：每个对象都有的属性，指向该对象的原型

   • prototype：只有函数才有的属性，用于实现基于原型的继承

2. 构造函数、原型、实例的关系

javascript

function Animal(name) { this.name = name; } // 1. 每个函数都有一个prototype属性 console.log(Animal.prototype); // {constructor: ƒ} // 2. 通过new创建实例 let cat = new Animal('Cat'); // 3. 实例的__proto__指向构造函数的prototype console.log(cat.__proto__ === Animal.prototype); // true // 4. 构造函数的prototype的constructor指向构造函数本身 console.log(Animal.prototype.constructor === Animal); // true

1.2 继承的多种实现方式

ES5 继承方式

1. 原型链继承

javascript

function Parent() { this.name = 'parent'; this.colors = ['red', 'blue']; } function Child() { this.type = 'child'; } Child.prototype = new Parent(); // 原型链继承 let child1 = new Child(); let child2 = new Child(); child1.colors.push('green'); console.log(child2.colors); // ['red', 'blue', 'green'] 共享引用属性

1. 构造函数继承（经典继承）

javascript

function Parent(name) { this.name = name; this.colors = ['red', 'blue']; } function Child(name) { Parent.call(this, name); // 调用父类构造函数 } let child1 = new Child('child1'); let child2 = new Child('child2'); child1.colors.push('green'); console.log(child2.colors); // ['red', 'blue'] 不共享

1. 组合继承（最常用）

javascript

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); // 继承实例属性 this.age = age; } // 继承原型方法 Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Child; Child.prototype.sayAge = function() { console.log(this.age); };

1. 寄生组合式继承（最优解）

javascript

function inheritPrototype(child, parent) { // 创建父类原型副本 let prototype = Object.create(parent.prototype); prototype.constructor = child; child.prototype = prototype; } function Parent(name) { this.name = name; } Parent.prototype.sayName = function() { console.log(this.name); }; function Child(name, age) { Parent.call(this, name); this.age = age; } inheritPrototype(Child, Parent);

ES6 Class 继承

javascript

class Parent { constructor(name) { this.name = name; this.colors = ['red', 'blue']; } sayName() { console.log(this.name); } static staticMethod() { console.log('父类静态方法'); } } class Child extends Parent { constructor(name, age) { super(name); // 必须调用super this.age = age; } sayAge() { console.log(this.age); } // 重写父类方法 sayName() { super.sayName(); // 调用父类方法 console.log('重写后的方法'); } }

二、作用域与闭包深度解析

2.1 作用域链与执行上下文

执行上下文的创建过程

javascript

// 全局执行上下文 console.log(a); // undefined var a = 1; function foo() { console.log(b); // undefined var b = 2; function bar() { console.log(c); // undefined var c = 3; } bar(); } foo(); // 执行上下文栈的变化 // 1. 创建全局执行上下文，压入栈 // 2. 调用foo，创建foo执行上下文，压入栈 // 3. 调用bar，创建bar执行上下文，压入栈 // 4. bar执行完毕，弹出栈 // 5. foo执行完毕，弹出栈

词法作用域与动态作用域

javascript

// 词法作用域示例 var value = 1; function foo() { console.log(value); } function bar() { var value = 2; foo(); } bar(); // 1，因为foo在定义时确定了作用域链 // this的动态性（类似于动态作用域） var obj = { value: 2, foo: function() { console.log(this.value); } }; obj.foo(); // 2 var foo = obj.foo; foo(); // undefined（严格模式下是undefined，非严格模式下是window）

2.2 闭包的原理与应用

闭包的形成机制

javascript

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 console.log(counter.getCount()); // 2 // 内存泄漏风险 function createLeak() { let largeArray = new Array(1000000).fill('*'); return function() { console.log(largeArray.length); // largeArray 不会被释放 }; }

闭包的经典应用

javascript

// 1. 模块模式 const Module = (function() { let privateVar = '私有变量'; function privateMethod() { console.log('私有方法'); } return { publicMethod: function() { console.log(privateVar); privateMethod(); } }; })(); // 2. 柯里化 function curry(fn) { return function curried(...args) { if (args.length >= fn.length) { return fn.apply(this, args); } else { return function(...args2) { return curried.apply(this, args.concat(args2)); }; } }; } function add(a, b, c) { return a + b + c; } const curriedAdd = curry(add); console.log(curriedAdd(1)(2)(3)); // 6 // 3. 防抖与节流 function debounce(fn, delay) { let timer = null; return function(...args) { const context = this; clearTimeout(timer); timer = setTimeout(() => { fn.apply(context, args); }, delay); }; } function throttle(fn, delay) { let lastTime = 0; return function(...args) { const now = Date.now(); const context = this; if (now - lastTime >= delay) { fn.apply(context, args); lastTime = now; } }; }

三、异步编程与事件循环

3.1 Promise 深度解析

Promise 的实现原理

javascript

class MyPromise { constructor(executor) { this.state = 'pending'; this.value = undefined; this.reason = undefined; this.onFulfilledCallbacks = []; this.onRejectedCallbacks = []; const resolve = (value) => { if (this.state === 'pending') { this.state = 'fulfilled'; this.value = value; this.onFulfilledCallbacks.forEach(fn => fn()); } }; const reject = (reason) => { if (this.state === 'pending') { this.state = 'rejected'; this.reason = reason; this.onRejectedCallbacks.forEach(fn => fn()); } }; try { executor(resolve, reject); } catch (error) { reject(error); } } then(onFulfilled, onRejected) { onFulfilled = typeof onFulfilled === 'function' ? onFulfilled : value => value; onRejected = typeof onRejected === 'function' ? onRejected : reason => { throw reason }; const promise2 = new MyPromise((resolve, reject) => { const handleFulfilled = () => { setTimeout(() => { try { const x = onFulfilled(this.value); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); }; const handleRejected = () => { setTimeout(() => { try { const x = onRejected(this.reason); this.resolvePromise(promise2, x, resolve, reject); } catch (error) { reject(error); } }); }; if (this.state === 'fulfilled') { handleFulfilled(); } else if (this.state === 'rejected') { handleRejected(); } else { this.onFulfilledCallbacks.push(handleFulfilled); this.onRejectedCallbacks.push(handleRejected); } }); return promise2; } resolvePromise(promise2, x, resolve, reject) { if (promise2 === x) { return reject(new TypeError('Chaining cycle detected')); } let called = false; if (x !== null && (typeof x === 'object' || typeof x === 'function')) { try { const then = x.then; if (typeof then === 'function') { then.call( x, y => { if (called) return; called = true; this.resolvePromise(promise2, y, resolve, reject); }, r => { if (called) return; called = true; reject(r); } ); } else { resolve(x); } } catch (error) { if (called) return; called = true; reject(error); } } else { resolve(x); } } }

Promise 的进阶用法

javascript

// 1. Promise.all Promise.all = function(promises) { return new Promise((resolve, reject) => { const results = []; let count = 0; promises.forEach((promise, index) => { Promise.resolve(promise).then( value => { results[index] = value; count++; if (count === promises.length) { resolve(results); } }, reject ); }); }); }; // 2. Promise.race Promise.race = function(promises) { return new Promise((resolve, reject) => { promises.forEach(promise => { Promise.resolve(promise).then(resolve, reject); }); }); }; // 3. Promise.finally Promise.prototype.finally = function(callback) { return this.then( value => Promise.resolve(callback()).then(() => value), reason => Promise.resolve(callback()).then(() => { throw reason }) ); };

3.2 Generator 与 Async/Await

Generator 原理

javascript

function* generatorFunction() { console.log('开始'); const a = yield 1; console.log('a:', a); const b = yield 2; console.log('b:', b); return 3; } const gen = generatorFunction(); console.log(gen.next()); // { value: 1, done: false } console.log(gen.next('A')); // { value: 2, done: false } console.log(gen.next('B')); // { value: 3, done: true } // 手动实现co函数（async/await的前身） function co(generator) { const gen = generator(); return new Promise((resolve, reject) => { function next(ret) { if (ret.done) return resolve(ret.value); Promise.resolve(ret.value).then( value => { try { next(gen.next(value)); } catch (error) { reject(error); } }, error => { try { next(gen.throw(error)); } catch (err) { reject(err); } } ); } try { next(gen.next()); } catch (error) { reject(error); } }); }

Async/Await 编译原理

javascript

// async 函数会被编译成 Generator + Promise async function asyncFunction() { const result1 = await promise1(); const result2 = await promise2(); return result1 + result2; } // 等价于 function asyncFunction() { return spawn(function* () { const result1 = yield promise1(); const result2 = yield promise2(); return result1 + result2; }); } function spawn(genF) { return new Promise((resolve, reject) => { const gen = genF(); function step(nextF) { let next; try { next = nextF(); } catch (error) { return reject(error); } if (next.done) { return resolve(next.value); } Promise.resolve(next.value).then( value => { step(() => gen.next(value)); }, error => { step(() => gen.throw(error)); } ); } step(() => gen.next(undefined)); }); }

3.3 事件循环详细机制

浏览器事件循环

javascript

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

Node.js 事件循环

javascript

// Node.js 事件循环阶段 // 1. timers: 执行setTimeout和setInterval回调 // 2. pending callbacks: 执行I/O回调 // 3. idle, prepare: Node内部使用 // 4. poll: 检索新的I/O事件 // 5. check: 执行setImmediate回调 // 6. close callbacks: 执行关闭事件回调 setTimeout(() => { console.log('timeout'); }, 0); setImmediate(() => { console.log('immediate'); }); // 输出顺序不确定，取决于事件循环的启动时间

第二部分：前端工程化与性能优化

四、模块化发展历程

4.1 模块化演进

javascript

// 1. 函数模块（早期） var Module = (function() { var privateVar = 'private'; function privateFunc() { console.log(privateVar); } return { publicFunc: function() { privateFunc(); } }; })(); // 2. CommonJS（Node.js） // math.js function add(a, b) { return a + b; } module.exports = { add }; // app.js const math = require('./math.js'); console.log(math.add(1, 2)); // 3. AMD（Require.js） define(['dependency'], function(dependency) { return { method: function() { dependency.doSomething(); } }; }); // 4. ES6 Module // math.js export const add = (a, b) => a + b; export const PI = 3.14159; // app.js import { add, PI } from './math.js';

4.2 Webpack 打包原理

javascript

// 简化版Webpack实现 class Compiler { constructor(options) { this.options = options; this.modules = []; } buildModule(absolutePath) { // 1. 读取文件内容 const source = fs.readFileSync(absolutePath, 'utf-8'); // 2. AST解析 const ast = parser.parse(source, { sourceType: 'module' }); // 3. 收集依赖 const dependencies = []; traverse(ast, { ImportDeclaration: ({ node }) => { dependencies.push(node.source.value); } }); // 4. 转换代码 const { code } = transformFromAstSync(ast, null, { presets: ['@babel/preset-env'] }); return { absolutePath, dependencies, code }; } }

五、性能优化策略

5.1 网络层面优化

javascript

// 1. 资源合并与压缩 // Webpack配置示例 module.exports = { optimization: { splitChunks: { chunks: 'all', cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } }, plugins: [ new CompressionPlugin({ algorithm: 'gzip', threshold: 10240, minRatio: 0.8 }) ] }; // 2. 图片优化 // 响应式图片 <picture> <source media="(min-width: 1200px)" srcset="large.jpg"> <source media="(min-width: 768px)" srcset="medium.jpg"> <img src="small.jpg" alt="响应式图片"> </picture> // 3. 缓存策略 const cacheStrategy = { // 强缓存 cacheControl: 'max-age=31536000', expires: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toUTCString(), // 协商缓存 lastModified: true, etag: true };

5.2 渲染性能优化

javascript

// 1. 防抖与节流应用 const handleScroll = throttle(() => { const scrollTop = window.pageYOffset; // 处理滚动逻辑 }, 16); // 60fps // 2. 虚拟列表 class VirtualList { constructor(container, options) { this.container = container; this.itemHeight = options.itemHeight; this.visibleCount = Math.ceil(container.clientHeight / this.itemHeight); this.buffer = Math.floor(this.visibleCount / 2); this.render(); } render() { const start = Math.floor(this.container.scrollTop / this.itemHeight); const end = start + this.visibleCount + this.buffer; // 只渲染可见区域和缓冲区 this.renderItems(start, end); } } // 3. 使用IntersectionObserver实现懒加载 const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; observer.unobserve(img); } }); }, { rootMargin: '50px' }); document.querySelectorAll('img[data-src]').forEach(img => { observer.observe(img); });

5.3 内存管理与垃圾回收

javascript

// 1. 内存泄漏检测 class MemoryMonitor { static checkMemory() { if (performance.memory) { const used = performance.memory.usedJSHeapSize; const total = performance.memory.totalJSHeapSize; console.log(`内存使用率: ${(used / total * 100).toFixed(2)}%`); } } } // 2. 避免常见内存泄漏 // 错误示例 function createLeak() { const element = document.getElementById('element'); const largeObject = new Array(1000000).fill('*'); element.addEventListener('click', () => { console.log(largeObject.length); }); // element被移除后，largeObject仍被引用 } // 正确示例 function avoidLeak() { const element = document.getElementById('element'); const largeObject = new Array(1000000).fill('*'); function handleClick() { console.log(largeObject.length); } element.addEventListener('click', handleClick); // 清理 return () => { element.removeEventListener('click', handleClick); element.remove(); largeObject.length = 0; // 帮助GC }; }

第三部分：React 深度解析

六、React 核心原理

6.1 Virtual DOM 与 Diff 算法

javascript

// 简化版Virtual DOM实现 class Element { constructor(type, props, children) { this.type = type; this.props = props; this.children = children; } } function createElement(type, props, ...children) { return new Element(type, props, children); } function render(element, container) { const dom = element.type === 'TEXT_ELEMENT' ? document.createTextNode('') : document.createElement(element.type); // 设置属性 Object.keys(element.props) .filter(key => key !== 'children') .forEach(name => { dom[name] = element.props[name]; }); // 递归渲染子元素 element.children.forEach(child => { render(child, dom); }); container.appendChild(dom); return dom; } // Diff算法核心 function diff(oldTree, newTree) { const patches = {}; let index = 0; walk(oldTree, newTree, index, patches); return patches; } function walk(oldNode, newNode, index, patches) { const currentPatches = []; if (!newNode) { // 节点被删除 currentPatches.push({ type: 'REMOVE', index }); } else if (typeof oldNode === 'string' && typeof newNode === 'string') { // 文本节点更新 if (oldNode !== newNode) { currentPatches.push({ type: 'TEXT', content: newNode }); } } else if (oldNode.type === newNode.type) { // 相同类型节点，比较属性 const attrPatches = diffProps(oldNode.props, newNode.props); if (Object.keys(attrPatches).length > 0) { currentPatches.push({ type: 'ATTR', attrs: attrPatches }); } // 递归比较子节点 diffChildren(oldNode.children, newNode.children, index, patches); } else { // 节点类型不同，直接替换 currentPatches.push({ type: 'REPLACE', newNode }); } if (currentPatches.length > 0) { patches[index] = currentPatches; } }

6.2 Fiber 架构详解

javascript

// Fiber节点结构 class FiberNode { constructor(type, props) { this.type = type; this.props = props; this.key = props.key; // Fiber链表结构 this.return = null; // 父节点 this.child = null; // 第一个子节点 this.sibling = null; // 兄弟节点 // 副作用标记 this.effectTag = null; this.firstEffect = null; this.lastEffect = null; this.nextEffect = null; // 状态 this.stateNode = null; // 对应的真实DOM this.alternate = null; // workInProgress和current的对应关系 this.pendingProps = props; this.memoizedProps = null; this.memoizedState = null; this.updateQueue = null; } } // Fiber调度器 class ReactScheduler { constructor() { this.nextUnitOfWork = null; this.pendingCommit = null; this.currentRoot = null; } workLoop(deadline) { let shouldYield = false; while (this.nextUnitOfWork && !shouldYield) { this.nextUnitOfWork = this.performUnitOfWork( this.nextUnitOfWork ); shouldYield = deadline.timeRemaining() < 1; } if (!this.nextUnitOfWork && this.pendingCommit) { this.commitAllWork(this.pendingCommit); } requestIdleCallback(this.workLoop.bind(this)); } performUnitOfWork(fiber) { // 1. 创建DOM if (!fiber.dom) { fiber.dom = this.createDom(fiber); } // 2. 创建子元素的Fiber节点 const elements = fiber.props.children; this.reconcileChildren(fiber, elements); // 3. 返回下一个工作单元 if (fiber.child) { return fiber.child; } let nextFiber = fiber; while (nextFiber) { if (nextFiber.sibling) { return nextFiber.sibling; } nextFiber = nextFiber.return; } } }

6.3 Hooks 实现原理

javascript

// useState实现 let hookIndex = 0; let hookState = []; function useState(initialValue) { const currentIndex = hookIndex; // 初始化 if (hookState[currentIndex] === undefined) { hookState[currentIndex] = initialValue; } const setState = (newValue) => { hookState[currentIndex] = newValue; // 触发重新渲染 scheduleUpdate(); }; hookIndex++; return [hookState[currentIndex], setState]; } // useEffect实现 let effectIndex = 0; let effectState = []; function useEffect(callback, deps) { const currentIndex = effectIndex; const hasNoDeps = !deps; const oldDeps = effectState[currentIndex]; const hasChangedDeps = oldDeps ? !deps.every((dep, i) => dep === oldDeps[i]) : true; if (hasNoDeps || hasChangedDeps) { // 清理上一次的effect if (effectState[currentIndex] && effectState[currentIndex].cleanup) { effectState[currentIndex].cleanup(); } // 执行新的effect const cleanup = callback(); effectState[currentIndex] = { deps, cleanup }; } effectIndex++; } // useMemo实现 function useMemo(factory, deps) { const currentIndex = hookIndex; const hasNoDeps = !deps; const oldDeps = hookState[currentIndex] ? hookState[currentIndex].deps : undefined; const hasChangedDeps = oldDeps ? !deps.every((dep, i) => dep === oldDeps[i]) : true; if (hasNoDeps || hasChangedDeps) { const newValue = factory(); hookState[currentIndex] = { value: newValue, deps }; } hookIndex++; return hookState[currentIndex].value; }

七、React 性能优化

7.1 渲染优化策略

javascript

// 1. React.memo const MemoComponent = React.memo(function MyComponent(props) { // 只有props改变时才会重新渲染 return <div>{props.value}</div>; }, (prevProps, nextProps) => { // 自定义比较函数 return prevProps.value === nextProps.value; }); // 2. useCallback function ParentComponent() { const [count, setCount] = useState(0); // 使用useCallback缓存函数 const handleClick = useCallback(() => { console.log('Clicked:', count); }, [count]); // 依赖项 return <ChildComponent onClick={handleClick} />; } // 3. useMemo function ExpensiveComponent({ list }) { // 使用useMemo缓存计算结果 const sortedList = useMemo(() => { return list.sort((a, b) => a.value - b.value); }, [list]); // 只有list变化时才重新计算 return <div>{sortedList.map(item => item.name)}</div>; }

7.2 代码分割与懒加载

javascript

// 1. React.lazy const LazyComponent = React.lazy(() => import('./LazyComponent')); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <LazyComponent /> </Suspense> ); } // 2. 路由懒加载 const routes = [ { path: '/home', component: React.lazy(() => import('./Home')) }, { path: '/about', component: React.lazy(() => import('./About')) } ]; // 3. 预加载 const LazyComponent = React.lazy(() => import(/* webpackPrefetch: true */ './LazyComponent') );

第四部分：计算机网络与安全

八、HTTP/HTTPS 深度解析

8.1 HTTP/2 与 HTTP/3

javascript

// HTTP/2 多路复用示例 // 客户端请求头帧 const requestHeaders = { ':method': 'GET', ':path': '/index.html', ':authority': 'example.com', ':scheme': 'https' }; // HTTP/2 服务器推送 const http2 = require('http2'); const server = http2.createSecureServer(); server.on('stream', (stream, headers) => { // 主资源 stream.respond({ 'content-type': 'text/html', ':status': 200 }); stream.end('<html><body>Hello</body></html>'); // 推送相关资源 stream.pushStream({ ':path': '/style.css' }, (pushStream) => { pushStream.respond({ ':status': 200 }); pushStream.end('body { color: red; }'); }); }); // HTTP/3 QUIC协议特点 const quicAdvantages = { connectionEstablishment: '0-RTT握手', multiplexing: '无队头阻塞的多路复用', encryption: '默认加密', connectionMigration: '连接迁移' };

8.2 WebSocket 与实时通信

javascript

// WebSocket实现 class WebSocketClient { constructor(url) { this.ws = new WebSocket(url); this.setupEventListeners(); } setupEventListeners() { this.ws.onopen = () => { console.log('WebSocket连接已建立'); this.heartbeat(); }; this.ws.onmessage = (event) => { const data = JSON.parse(event.data); this.handleMessage(data); }; this.ws.onclose = () => { console.log('WebSocket连接已关闭'); this.reconnect(); }; } heartbeat() { // 心跳检测 setInterval(() => { if (this.ws.readyState === WebSocket.OPEN) { this.ws.send(JSON.stringify({ type: 'ping' })); } }, 30000); } reconnect() { // 指数退避重连 let delay = 1000; const tryReconnect = () => { setTimeout(() => { this.ws = new WebSocket(this.url); this.setupEventListeners(); delay = Math.min(delay * 1.5, 30000); }, delay); }; tryReconnect(); } } // WebRTC示例 const peerConnection = new RTCPeerConnection({ iceServers: [ { urls: 'stun:stun.l.google.com:19302' } ] }); // 信令服务器 const signalingServer = new WebSocket('wss://signaling.example.com'); // 交换SDP和ICE候选 peerConnection.onicecandidate = (event) => { if (event.candidate) { signalingServer.send(JSON.stringify({ type: 'candidate', candidate: event.candidate })); } }; peerConnection.ontrack = (event) => { // 处理远程流 remoteVideo.srcObject = event.streams[0]; };

九、安全防护策略

9.1 常见攻击与防御

javascript

// 1. XSS防护 class XSSProtection { static escapeHTML(str) { const div = document.createElement('div'); div.textContent = str; return div.innerHTML; } static validateInput(input) { // 白名单验证 const allowedPattern = /^[a-zA-Z0-9\s]*$/; return allowedPattern.test(input); } static setSecurityHeaders() { // CSP头 return { 'Content-Security-Policy': ` default-src 'self'; script-src 'self' 'unsafe-inline' https://trusted.cdn.com; style-src 'self' 'unsafe-inline'; img-src 'self' data: https:; connect-src 'self' https://api.example.com; `.replace(/\s+/g, ' ').trim() }; } } // 2. CSRF防护 class CSRFProtection { constructor() { this.token = this.generateToken(); } generateToken() { return crypto.randomBytes(32).toString('hex'); } setCSRFToken() { // 设置cookie和表单token document.cookie = `csrf_token=${this.token}; Secure; HttpOnly; SameSite=Strict`; // 为所有表单添加隐藏字段 const forms = document.querySelectorAll('form'); forms.forEach(form => { const input = document.createElement('input'); input.type = 'hidden'; input.name = 'csrf_token'; input.value = this.token; form.appendChild(input); }); } validateRequest(req) { const cookieToken = req.cookies.csrf_token; const bodyToken = req.body.csrf_token; return cookieToken && bodyToken && cookieToken === bodyToken; } } // 3. 密码安全 class PasswordSecurity { static async hashPassword(password) { const salt = crypto.randomBytes(16).toString('hex'); const hash = await crypto.subtle.digest( 'SHA-256', new TextEncoder().encode(password + salt) ); return { hash: Array.from(new Uint8Array(hash)) .map(b => b.toString(16).padStart(2, '0')) .join(''), salt }; } static async verifyPassword(password, storedHash, salt) { const hash = await crypto.subtle.digest( 'SHA-256', new TextEncoder().encode(password + salt) ); const hashHex = Array.from(new Uint8Array(hash)) .map(b => b.toString(16).padStart(2, '0')) .join(''); return hashHex === storedHash; } }

总结与展望

十、前端发展趋势

10.1 现代前端技术栈

javascript

// 微前端架构 class MicroFrontend { constructor() { this.apps = new Map(); this.currentApp = null; } registerApp(name, config) { this.apps.set(name, { ...config, loaded: false }); } async loadApp(name) { const app = this.apps.get(name); if (!app.loaded) { // 动态加载应用 const script = document.createElement('script'); script.src = app.url; script.onload = () => { app.loaded = true; this.mountApp(name); }; document.head.appendChild(script); } else { this.mountApp(name); } } mountApp(name) { // 卸载当前应用 if (this.currentApp) { this.currentApp.unmount(); } // 挂载新应用 const app = this.apps.get(name); app.mount(); this.currentApp = app; } } // Serverless函数 exports.handler = async (event) => { const { name } = event.queryStringParameters; return { statusCode: 200, headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ message: `Hello ${name || 'World'}!` }) }; }; // WebAssembly集成 async function loadWasm() { const importObject = { env: { memory: new WebAssembly.Memory({ initial: 256 }), table: new WebAssembly.Table({ initial: 0, element: 'anyfunc' }) } }; const response = await fetch('module.wasm'); const buffer = await response.arrayBuffer(); const module = await WebAssembly.instantiate(buffer, importObject); return module.instance.exports; }

10.2 性能监控与异常追踪

javascript

class PerformanceMonitor { constructor() { this.metrics = new Map(); this.observers = []; } startMonitoring() { // 监控核心Web指标 this.monitorCLS(); // 累积布局偏移 this.monitorLCP(); // 最大内容绘制 this.monitorFID(); // 首次输入延迟 // 错误监控 window.addEventListener('error', this.handleError.bind(this)); window.addEventListener('unhandledrejection', this.handlePromiseError.bind(this)); } monitorCLS() { let clsValue = 0; let clsEntries = []; const observer = new PerformanceObserver((list) => { for (const entry of list.getEntries()) { if (!entry.hadRecentInput) { clsValue += entry.value; clsEntries.push(entry); } } }); observer.observe({ type: 'layout-shift', buffered: true }); // 页面隐藏时报告 document.addEventListener('visibilitychange', () => { if (document.visibilityState === 'hidden') { this.reportMetric('CLS', clsValue); } }); } handleError(error) { const errorData = { message: error.message, stack: error.stack, filename: error.filename, lineno: error.lineno, colno: error.colno, timestamp: Date.now(), userAgent: navigator.userAgent, url: window.location.href }; this.sendToServer('error', errorData); } sendToServer(type, data) { // 使用Navigator.sendBeacon确保可靠发送 const blob = new Blob([JSON.stringify(data)], { type: 'application/json' }); navigator.sendBeacon('/api/analytics', blob); } }