贸易公司如何做英文网站wordpress查看数据库文件

贸易公司如何做英文网站,wordpress查看数据库文件,设计制作小车的基本步骤,荷塘网站建设浏览器内存模型 - 由JS引擎管理 在浏览器环境下就是 V8引擎 栈内存#xff1a;存放原始类型值#xff0c;生命周期短#xff0c;不由GC回收而是由引擎自动弹栈 堆内存#xff1a;存放引用数据类型#xff0c;由GC进行回收 垃圾回收机制 JS 是自动垃圾回收语言#xff0c;…浏览器内存模型 - 由JS引擎管理在浏览器环境下就是 V8引擎栈内存存放原始类型值生命周期短不由GC回收而是由引擎自动弹栈堆内存存放引用数据类型由GC进行回收垃圾回收机制JS 是自动垃圾回收语言不用显式地 free()JS 的 GC 主要依赖可达性当一个对象从根对象不可达时就会判定为垃圾根对象包括全局对象 window / globalThis当前执行栈闭包引用的变量DOM树现代 V8 引擎主要用两种 GC 算法标记清除从根对象开始扫描对所有可达对象打上标签如果没有标记的就进行清除分代垃圾回收V8会把堆分为两部分新生代对象存活时间短、GC频繁、速度快例如局部变量老生代存活时间久的如大型对象、闭包、全局缓存新生代用复制算法将内存分为From空间和To空间每次垃圾回收时把From里仍存活的对象复制到To中再交换两个空间角色那么没有复制的自然久变成了垃圾老生代用标记压缩算法标记、清除、如果有必要再压缩如果分配一个大对象时由于内存没有连续的空间会导致GC频繁触发所以就必须压缩整理碎片前端常见的内存泄漏本质是 GC Rootwindow / 定时器 / 事件系统 / 缓存持有了生命周期本应结束的对象引用一. 长期存活对象持有了不该持有的引用GC Root → 长生命周期对象 → 业务对象1. 定时器 / 异步任务未清理setInterval(() { doSomething(this.bigData) }, 1000)定时器由浏览器调度系统长期持有我们传入的回调函数中闭包隐式引用了外部对象那么就会导致如果一直没有 clearInterval 的话外部对象就一直无法 GC类似于 安卓开发中 Hanlder postDelay 导致的泄漏2. 事件监听器未移除window.addEventListener(scroll, handler)像 window / document 是天然的 GC Roothandler 闭包引用组件的实例即使组件卸载监听仍然存在正确的清理方式是通过在 useEffect 中返回卸载函数useEffect(() { window.addEventListener(scroll, handler) return () window.removeEventListener(scroll, handler) }, [])3. 闭包捕获大对象function bad() { const bigData new Array(10000) return () bigData }返回函数持有 bigData闭包生命周期 预期导致数据无法释放类似于 Java 中非静态内部类隐式引用了外部类的对象4. 缓存结构使用不当const map new Map() map.set(obj, value)Map 对 key 是强引用如果缓存没有淘汰的话就永久存活应该优先使用 weakMapconst wm new WeakMap() wm.set(obj, value)二. 全局作用域污染 - 隐式GC Root5. 意外创建全局对象function fn() { leak oops }没有进行 var / const / let导致对象被挂到全局对象上那么就跟着全局对象的生命周期( var 挂到的是当前作用域的顶层对象只要不是在全局作用域中就不会挂到全局对象上本质就是被静态量引用导致在程序进程结束后才会清除三. DOM 和 JS 引用生命周期不一致6. DOM 已经移除但是 JS 仍然持有引用const el document.getElementById(box) document.body.removeChild(el) // el 仍然被 JS 引用DOM 树已经断开但是JS强引用仍在导致节点无法 GC四. 外部资源泄漏像 C 有析构函数能在一个对象清除的时候顺带将与其关联的外部资源倾销7. Object URLconst url URL.createObjectURL(file) img.src url浏览器内部维护一块 Blob → 内存/磁盘映射url 是一个资源句柄式的引用不手动 revoke 的话会导致内存不会释放URL.revokeObjectURL(url)8. 文件/IO数据流虽然 Node.js 不是前端但是也顺带提一嘴const fs require(fs) fs.open(a.txt, r, (err, fd) { // 忘记 fs.close(fd) })9. 浏览器 File System Access APIconst handle await window.showOpenFilePicker() const fileHandle handle[0] const writable await fileHandle.createWritable() // ... // 忘记 writable.close()进行排查通过 开发者工具中的性能 查看 Memory profiling 和堆快照找一直没有清除的甚至一直增长的内存空间设置过期策略1. TTL时间过期看 Date.now() 是否大于 cached.expire 设置的过期时间如果超过了就 delete一般包装在 localStorage 中因为 localStorage 没有自动过期机制const cache new Map(); function setCache(key, value, ttl 5000) { cache.set(key, { value, expire: Date.now() ttl, }); } function getCache(key) { const cached cache.get(key); if (!cached) return null; if (Date.now() cached.expire) { cache.delete(key); return null; } return cached.value; }2. LRU 缓存数量有限、最近使用的每次 set 和 get 的时候就更新优先级JS 的 Map 是自动有序的class LRUCache { constructor(limit 100) { this.limit limit; this.map new Map(); } get(key) { if (!this.map.has(key)) return null; const value this.map.get(key); // 每次访问移动到结尾最新使用 this.map.delete(key); this.map.set(key, value); return value; } set(key, value) { if (this.map.has(key)) this.map.delete(key); else if (this.map.size this.limit) { // 删除最久未使用的值Map 的第一个值 const oldestKey this.map.keys().next().value; this.map.delete(oldestKey); } this.map.set(key, value); } }3. LFU根据访问次数进行淘汰4. 内存占用的清除管理一个队列let currentSize 0; const MAX_SIZE 5 * 1024 * 1024; // 5MB const cache []; function addToCache(obj) { const size JSON.stringify(obj).length; while (currentSize size MAX_SIZE) { const removed cache.shift(); // 移除一个最旧的 currentSize - JSON.stringify(removed).length; } cache.push(obj); currentSize size; }5. 利用 WeakMap 不是强引用让GC自动清除