前端与性能
共 20 篇 · 按时间倒序，可连读
11-10
两万行表格滚动像幻灯片：虚拟列表、白条与 key 的三个坑
产品要求一屏看完两万行订单，v-for 直接铺满，滚动只剩 8 帧。换成虚拟列表后，滚动白条、勾选串行、动态行高三个问题接连冒出来，最后用固定档位行高收场。
11-09
线上报错只剩一行 Script error.：sourcemap 与错误采集的三个断点
三成错误只留一句话，剩下的堆栈指向压缩文件的第 48 万列。修好 crossorigin 只是第一步，sourcemap 的三个断点、Vue3 的单独一层和上报去重都得补齐。
11-08
后台开两天堆到 1.8 GB：Vue3 SPA 内存泄漏定位
用久了变卡、重开就好，是内存泄漏的典型特征。Memory 快照差集里一万两千个 Detached DOM，引用链指向 37 个没 dispose 的 ECharts 实例和无上限的…
11-07
发版后 30% 用户白屏：Cache-Control 与资源指纹的配合
白屏报 ChunkLoadError，强刷一下就好，因为 index.html 被缓存了七天而旧 chunk 已被删除。入口用 no-cache、带哈希的资源用 immutable…
11-05
Vue 3 响应式的六个坑：解构、ref、watch 与性能
从 Proxy 的 get/set 拦截原理出发，推导出解构丢响应性、ref 少写 .value、watch 浅监听等六个高频问题的成因与修复方式。
11-05
Vite 构建优化：90 秒到 18 秒，产物 4.2 MB 到 420 KB
用 visualizer 定位到五个「全量引入」的第三方库，按需引入加分包把首屏砍掉 90%，构建时间靠关 sourcemap 和缓存降到 18 秒。
11-05
Core Web Vitals 实战：首页从 59 MB 到 2.27 MB
LCP、INP、CLS 三个指标对应三种完全不同的病理。用本站真实数据说明：30 张没压缩的照片，比任何代码优化都致命。
11-20
ES6
变量在什么范围内可用，类似Java的全局变量和局部变量的概念，全局变量，全局都可用，局部变量只在范围内可用。ES5之前的var是没有块级作用域的概念，使用var声明的变量就是全局的…
11-19
Javascript继承实现方式
1、构造继承 2、原型继承 3、实例继承 4、拷贝继承 原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。
09-10
Javascript作用链域
全局函数无法查看局部函数的内部细节，但局部函数可以查看其上层的函数细节，直至全局细节。 当需要从局部函数查找某一属性或方法时，如果当前作用域没有找到，就会上溯到上层作用域查找，直至…
08-22
JavaScript值类型、附内存图
两种类型的区别是：存储位置不同； 原始数据类型直接存储在栈(stack)中的简单数据段，占据空间小、大小固定，属于被频繁使用数据，所以放入栈中存储； 引用数据类型存储在堆(heap…
08-13
javaScript-This对象
07-23
Javascript-eval的作用
它的功能是把对应的字符串解析成JS代码并运行； 应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。 由JSON字符串转换为JSON对象的时候可以用ev…
03-07
null，undefined 的区别
null 表示一个对象被定义了，值为“空值”； undefined 表示不存在这个值。
02-06
JavaScript-写一个通用的事件侦听器函数
02-03
Javascript创建对象的几种方式
javascript创建对象简单的说,无非就是使用内置对象或各种自定义对象，当然还可以用JSON；但写法有很多种，也能混合使用。
07-25
["1", "2", "3"].map﴾parseInt﴿ 答案是多少？
[1, NaN, NaN] 因为 parseInt 需要两个参数 (val, radix)， 其中 radix 表示解析时用的基数。 map 传了 3 个 (element, in…
07-07
IE与火狐的事件机制区别,如何阻止冒泡？
06-29
JavaScript的基本规范
1.不要在同一行声明多个变量。 2.请使用 ===/!==来比较true/false或者数值 3.使用对象字面量替代new Array这种形式 4.不要使用全局函数。 5.Swit…
06-08
JavaScript的原型及原型链
每个对象都会在其内部初始化一个属性，就是prototype(原型)，当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么他就会去prototype里找这个属性，这个pr…