浏览器在解析 HTML 时会先停下来等待所有位于 head 中且未标记为 async/defer 的 CSS 下载完毕。把首屏所需样式直接写入或内联进去，Ke以让页面在首屏渲染前完成关键绘制。

过于深层的选择器（如 .wrapper .content ul li a:hover) 每一次匹配dou要遍历大量 DOM，耗时不菲。改用geng具指向性的类名或 ID，既Neng保持语义，又Neng省去不必要的遍历。

/* 只在视口宽度>= 768px 时加载 */
@media  {
    .sidebar {display:block;}
}

这样Ke以让移动端先拿到Zui小化 CSS，等到需要时再补齐，大幅降低首屏阻塞时间。

搜索框敲字、窗口拖拽等场景下我们希望只在用户停止操作一定时间后才真正执行请求或计算。下面这段代码展示了典型实现：

function debounce {
    let timer;
    return function  {
        clearTimeout;
        const context = this;
        timer = setTimeout => fn.apply, wait);
    };
}

闭包保存计时器 ID：每次调用返回的新函数dou共享同一个 timer, 因此Neng够随时清除旧计时。

上下文保留：.apply 确保函数内部的 this 指向正确，而不是意外变成全局对象。

滚动监听或窗口大小变化往往触发频率极高。使用节流Ke以保证即便用户一直操作，也只会在固定间隔执行一次回调，从而避免帧率骤降。

function throttle {
    let lastTime = 0;
    let timer;
    return function  {
        const now = Date.now;
        const remaining = interval - ;
        const context = this;
        if  {
            clearTimeout;
            lastTime = now;
            fn.apply;
        } else if  {
            timer = setTimeout => {
                lastTime = Date.now;
                timer = null;
                fn.apply;
            }, remaining);
        }
    };
}

时间戳判断： 用来检测是否Yi跨过间隔阈值。

混合策略：在冷却期结束前仍有触发，则通过延迟定时器保证Zui后一次操作不会被遗漏。

document.querySelectorAll.forEach(img => {
    const observer = new IntersectionObserver => {
        entries.forEach(entry => {
            if  {
                img.src = img.dataset.src;
                obs.unobserve;
            }
        });
    });
    observer.observe;
});

当图片进入视口才开始下载，可显著降低首次渲染体积，让用户感受到geng快的响应速度。

Squoosh 或 ImageMagick 等工具Ke以把 PNG/JPG 转为 WebP/AVIF，这两种格式在同等画质下体积可下降 30%~60%。记得配合 CDN 的自动格式协商，以兼容老旧浏览器。

AES 加密、大幅度图像滤镜甚至小模型推理，dou属于 CPU 密集型任务。Ru果全部放在主线程里执行，页面必然出现“一卡到底”。下面演示如何将一个简单求和任务搬到 Worker 中：

// main.js
const worker = new Worker;
worker.postMessage;
worker.onmessage = e => console.log;
// sumWorker.js
self.onmessage = e => {
   const {start,end} = e.data;
   let sum=0;
   for sum+=i;
   self.postMessage;
};

Thead 切换完成后UI 渲染依旧保持流畅，因为计算Yi经脱离了主线程。这种方式尤其适合实时编辑器或数据可视化的大规模运算场景。

Lighthouse / PageSpeed Insights：定期跑分，把首次内容绘制、交互准备时间等关键指标记录下来对比改动前后的波动。

User Timing API：自定义标记点，如.mark/.measure, Neng帮助定位哪段业务代码消耗Zui多时间。

Sentry / LogRocket：线上异常捕获结合性Neng日志，让你在真实用户环境里第一时间发现潜在卡顿点。

Poor performance is not a bug – it’s a UX flaw.

当我们把上述七个方向逐项落实后即使面对千级并发请求，也Neng保持页面丝滑如水。Zui重要的是这些技巧并非孤立存在而是相互叠加：合理的 CSS 再配上防抖/节流，再加上资源懒加载和后台计算，你会惊讶于整体速度提升带来的业务增长。

*本文约 字，欢迎复制分享；若想获取完整代码仓库，请访问我的 GitHub 项目页。