前言：

做开发的同行都清楚，会前端性能优化，不管是在面试中，还是在开发项目中，都是神来之笔，那性能优化有哪些呢？

正文

1. 懒加载
2. 性能工具
3. 节流防抖
4. 回流重绘
5. 虚拟列表
6. 本地缓存
7. CDN缓存
8. 浏览器缓存
9. DOM优化
10. 服务端渲染

懒加载

前端懒加载（Lazy Loading）是一种延迟加载技术，通过按需加载资源（如图片、组件等），仅在用户需要访问时触发资源请求。这种技术能显著减少初始加载时间，提升页面响应速度和用户体验，尤其适用于资源密集型的单页应用或长页面‌
必要性体现‌：
‌1. 性能优化‌：减少首屏加载资源量，缩短页面白屏时间；
‌2. 节省流量‌：避免加载用户未浏览区域的资源；
‌3. 降低服务器压力‌：分散资源请求，减少瞬时并发压力‌

1. 实现方式：滚动事件监听，通过计算元素位置判断是否进入可视区域

//html
<img data-src="real-image.jpg" src="placeholder.jpg" class="lazy-img">

function lazyLoad() {
  const imgs = document.querySelectorAll('img[data-src]');
  const viewHeight = window.innerHeight;
  imgs.forEach(img => {
    const rect = img.getBoundingClientRect();
    if (rect.top < viewHeight && rect.bottom >= 0) { // 判断是否进入视口
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}
// 触发时机：页面加载、滚动、缩放时
window.addEventListener('scroll', lazyLoad);
window.addEventListener('resize', lazyLoad);
lazyLoad(); // 初始化加载首屏内容
//适用兼容性要求比较高的旧项目

2. 基于原生HTML5 loading="lazy" 属性
   原理：通过设置 <img> 或 <iframe> 的 loading 属性为 lazy，浏览器自动实现懒加载。
   特点：开发成本低、浏览器自动管理加载时机，支持渐进式加载优化、现代浏览器普遍支持

截流防抖（已经在博客中写过，需要的宝子可以在博客中找）

防抖：事件触发延迟执行回调函数，若在延迟期间再次触发事件，则重新计时，最终仅执行最后一次触发的操作（场景：搜索输入，窗口调整）
节流：在指定时间间隔内仅允许一次回调执行，无论事件触发频率多高（场景：滚动事件、鼠标移动）

回流重绘

回流：当DOM结构或元素几何（尺寸，位置）发生变化时，浏览器需要重新计算布局并更新渲染数的过程
重绘：元素样式（颜色，背景）变化但不影响布局时，浏览器仅重绘受影响区域的过程

虚拟列表

虚拟列表（Virtual List）是优化长列表渲染性能的技术，通过‌仅渲染可视区域内的元素‌，避免一次性加载全部数据，大幅减少DOM节点数量和内存占用‌
核心原理：
1、可视区域计算‌：根据滚动位置动态计算需渲染的起始索引（startIndex）和结束索引( endIndex )
2、占位容器‌：通过绝对定位元素模拟完整列表高度，生成真实滚动条‌
3、动态渲染‌：滚动时更新可视区域数据并调整元素偏移量（startOffset）‌

性能工具

WebPageTest：多地点，多网络环境模拟测试，提供瀑布图分析及视频录制加载过程
Chrome DevTools：内置工具，很好用

本地缓存

cookies: 存储小于4K的数据，支持设置过期时间，可以和服务器关联，同源窗口共享数据
localStorage:持久化存储，（5M+），需要手动清除，同源窗口共享数据
sessionStorage:临时存储5M+数据，适用于表单暂存场景

CDN缓存

过期时间（TTL）‌：通过Cache-Control头或CDN控制台设置，静态资源建议设置长期缓存（如max-age=31536000）‌
‌缓存键优化‌：忽略非必要查询参数（如?v=1.0），避免相同资源重复缓存‌

浏览器缓存

强缓存：通过Cache-Control（优先级高）和Expires（已逐渐废弃）控制，直接读取本地缓存不发起请求，HTTP状态码为200‌

Cache-Control: max-age=3600, public  // 公共资源缓存1小时
Cache-Control: no-store              // 禁止缓存动态敏感数据

协商缓存：强缓存失效后，携带If-Modified-Since（基于时间）或If-None-Match（基于内容哈希）向服务器验证‌，通过‌HTTP状态码304‌实现缓存复用，减少数据传输量‌
304 Not Modified：复用本地缓存
200 OK：返回新资源并更新缓存

DOM优化

优化原则：减少DOM操作次数：避免在循环中直接操作DOM，应在内存中完成计算后一次性更新‌
优化DOM的访问方式：优先使用querySelector替代getElementBy系列方法，利用选择器引擎优化性能‌
css优化配合DOM操作：使用transform和opacity实现动画，触发GPU加速减少重排‌；对频繁变动的元素设置position: absolute/fixed脱离文档流，限制回流范围‌

服务端渲染

服务端渲染（SSR）指在服务器端完成页面结构组装和数据填充，直接向客户端返回完整的HTML文档，浏览器无需等待JS执行即可展示内容，对比客户端渲染（CSR），SSR首屏加载时间缩短30%-50%
优势：
1.首屏性能提升‌：用户首次访问时直接获取可交互的HTML，白屏时间降低至1秒内‌
2.SEO友好‌：搜索引擎可完整抓取预渲染内容，提升搜索排名‌
3.低端设备优化‌：减少客户端JavaScript执行压力，提升老旧设备访问体验‌