前端性能优化主要围绕减少资源加载时间和提升运行时效率展开。
重点难点:
- 关键渲染路径优化:CSS、JS 的加载和执行优化
- 资源懒加载:图片、组件、路由的懒加载实现
- 缓存策略:HTTP 缓存和浏览器缓存的最佳实践
// 图片懒加载实现constimageObserver=newIntersectionObserver((entries)=>{entries.forEach(entry=>{if(entry.isIntersecting){constimg=entry.target// 将>.src=img.dataset.src img.classList.add('loaded')imageObserver.unobserve(img)}})})// 组件懒加载constAsyncComponent=()=>import('@/components/HeavyComponent.vue')// 路由懒加载constroutes=[{path:'/heavy',component:()=>import('@/views/HeavyView.vue')}]// 防抖优化频繁操作functiondebounce(func,delay){lettimeoutIdreturnfunction(...args){clearTimeout(timeoutId)timeoutId=setTimeout(()=>func.apply(this,args),delay)}}