打开浏览器控制台，切到 Network 面板，刷新页面，你会看到一串瀑布图。
哪些文件耗时最长？ 把最右侧的 Waterfall 按 Time 排序，排在最上面的就是“罪魁祸首”。
常见卡点有哪些？
问： *** 、CSS 压缩后真的快吗？
答：实测一个 1.2 MB 的未压缩 bundle，经过 Gzip 后只剩 320 KB，首屏时间从 4.8 秒降到 2.1 秒。
操作步骤：
gzip on; gzip_types text/css application/javascript;问：WebP 兼容性够用了吗？
答：全球 95% 浏览器已支持，剩下 5% 用 <picture> 回退到 JPEG。
推荐做法：
?width=800&quality=75问：首屏需要懒加载吗？
答：首屏关键资源必须立即加载，其他图片、视频、评论区用 IntersectionObserver 延迟加载。
const io = new IntersectionObserver(entries => {
entries.forEach(e => {
if (e.isIntersecting) {
const img = e.target;
img.src = img.dataset.src;
io.unobserve(img);
}
});
});
document.querySelectorAll('img[data-src]').forEach(io.observe);问：强缓存和协商缓存怎么选？
答：静态资源文件名带 hash，直接强缓存一年；HTML 文件用协商缓存，保证更新及时。
Nginx 配置示例：
location ~* \.(js|css|png)$ {
add_header Cache-Control "public, max-age=31536000, immutable";
}
location / {
add_header Cache-Control "no-cache";
}问：http→https 的 301 能省吗？
答：不能省，但确保只有一次。把老域名、旧路径全部批量 301 到最终地址，避免链式跳转。
问：国内站点用海外 CDN 会不会更慢？
答：会。选就近节点，例如华北用户走北京节点，华南走广州节点，延迟可再降 50 ms。
开启后，浏览器并行下载不再受域名连接数限制，雪碧图可以退休了。
把核心 *** 、CSS、字体预缓存到本地，断网也能秒开。
用 critical 工具提取首屏样式，直接塞进 <head>，减少一次往返。
Q：测速工具结果不一致，以哪个为准？
A：以真实用户监控（RUM）为准，实验室数据只能做基准。
Q：用了 CDN 还是慢？
A：检查回源链路，源站带宽不足或 TLS 握手慢都会拖后腿。
Q：移动端和桌面端要分开优化吗？
A：要。移动端优先使用 3G 节流测试，桌面端关注 4K 大图。
async 或 defer
发表评论
暂时没有评论，来抢沙发吧~