前端性能优化实战:从加载到渲染的全链路提升

news2024/12/15 18:59:38

"这个页面怎么这么慢啊?" 产品经理小李站在我的工位旁,指着屏幕上的数据大屏抱怨道。我打开 Chrome DevTools 看了一眼,首屏加载时间确实有点吓人 - 足足用了 8 秒。作为一个追求极致体验的前端开发者,这个数字让我坐不住了。

回想起上周的性能检测会议,我们发现不少用户,特别是在移动端访问时,经常会遇到白屏、卡顿的问题。经过一周的深入优化,我们把首屏时间压缩到了 2 秒以内。今天就来分享这个优化过程中的实战经验。

问题分析

首先,我们需要建立一个完整的性能指标体系。通过 Chrome DevTools 和 Lighthouse,我们收集了关键的性能数据:

  • 首次内容绘制(FCP): 3.8s
  • 最大内容绘制(LCP): 8.2s
  • 首次输入延迟(FID): 280ms
  • 累积布局偏移(CLS): 0.28

这些数据都远远超出了 Google 推荐的标准。通过性能瀑布图,我们发现了几个主要问题:

  • 资源加载过重
  • 渲染阻塞严重
  • 代码执行效率低
  • 缓存策略不合理

优化策略

就像给汽车做全面保养一样,我们的优化工作也要从多个环节入手。

资源加载优化

首先是资源的瘦身和加载优化。就像整理行李箱一样,我们要决定什么东西是必须首屏带上的,什么可以延后再加载:

// 路由级别的代码分割
const routes = [
  {
    path: '/',
    component: () => import('./pages/Home'),
    loading: LoadingSpinner
  },
  {
    path: '/dashboard',
    component: () => import('./pages/Dashboard'),
    loading: LoadingSpinner
  }
]

// 组件级别的按需加载
const Chart = lazy(() => import('./components/Chart'))

// 图片资源的优化
function OptimizedImage({ src, alt }) {
  return (
    <picture>
      <source srcSet={`${src}?w=400 400w, ${src}?w=800 800w`} sizes='(max-width: 600px) 400px, 800px' type='image/webp' />
      <img src={`${src}?w=800`} alt={alt} loading='lazy' decoding='async' />
    </picture>
  )
}

渲染性能优化

然后是渲染性能的优化。就像装修房子要讲究顺序一样,我们也要优化渲染的流程:

// 虚拟列表优化长列表渲染
function VirtualList({ items, rowHeight, visibleRows }) {
  const [scrollTop, setScrollTop] = useState(0)
  const containerRef = useRef(null)

  const startIndex = Math.floor(scrollTop / rowHeight)
  const endIndex = Math.min(startIndex + visibleRows, items.length)
  const visibleItems = items.slice(startIndex, endIndex)

  const totalHeight = items.length * rowHeight
  const offsetY = startIndex * rowHeight

  return (
    <div ref={containerRef} style={{ height: visibleRows * rowHeight, overflow: 'auto' }} onScroll={e => setScrollTop(e.target.scrollTop)}>
      <div style={{ height: totalHeight, position: 'relative' }}>
        <div style={{ transform: `translateY(${offsetY}px)` }}>
          {visibleItems.map(item => (
            <div key={item.id} style={{ height: rowHeight }}>
              {item.content}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

缓存策略优化

接着是缓存策略的优化。就像超市的商品摆放一样,常用的东西要放在容易取到的地方:

// 服务端缓存配置
app.use(
  express.static('public', {
    maxAge: '1y',
    etag: true,
    lastModified: true
  })
)

// 浏览器缓存策略
const cacheConfig = {
  // HTML - 不缓存
  '/': 'no-cache',
  // 静态资源 - 长期缓存
  '/static/': 'public, max-age=31536000, immutable',
  // API 响应 - 短期缓存
  '/api/': 'public, max-age=300, stale-while-revalidate=60'
}

// 前端数据缓存
function useDataCache(key, fetcher) {
  const cache = useRef(new Map())
  const [data, setData] = useState(null)

  useEffect(() => {
    if (cache.current.has(key)) {
      setData(cache.current.get(key))
      return
    }

    fetcher().then(newData => {
      cache.current.set(key, newData)
      setData(newData)
    })
  }, [key])

  return data
}

代码执行优化

最后是代码执行效率的优化。就像优化生产流水线一样,我们要让代码运行更高效:

// 使用 Web Worker 处理复杂计算
const worker = new Worker('./calculator.js')

function processData(data) {
  return new Promise((resolve, reject) => {
    worker.postMessage(data)
    worker.onmessage = e => resolve(e.data)
    worker.onerror = reject
  })
}

// 使用 requestAnimationFrame 优化动画
function smoothScroll(target) {
  const start = window.pageYOffset
  const distance = target - start
  const duration = 500
  let startTime = null

  function animation(currentTime) {
    if (!startTime) startTime = currentTime
    const timeElapsed = currentTime - startTime
    const progress = Math.min(timeElapsed / duration, 1)

    window.scrollTo(0, start + distance * easeInOut(progress))

    if (timeElapsed < duration) {
      requestAnimationFrame(animation)
    }
  }

  requestAnimationFrame(animation)
}

效果验证

优化完成后,我们重新进行了性能测试:

  • 首次内容绘制(FCP): 1.2s
  • 最大内容绘制(LCP): 2.1s
  • 首次输入延迟(FID): 80ms
  • 累积布局偏移(CLS): 0.05

所有指标都达到了 Google 推荐的标准。最让我印象深刻的是用户的反馈:"现在打开页面的感觉,就像在用本地应用一样流畅。"

经验总结

性能优化就像是一场精细的手术,需要我们:

仔细诊断 - 通过各种工具找出性能瓶颈精准施治 - 针对具体问题选择合适的优化方案持续监控 - 建立性能监控体系,及时发现问题

写在最后

前端性能优化是一个永无止境的过程,就像园丁修剪花园一样,需要持续的维护和优化。正如那句老话说的:"慢一点,才能快一点。"我们要在开发过程中就注意性能问题,而不是等到问题出现才去解决。

有什么问题欢迎在评论区讨论,让我们一起探讨性能优化的最佳实践!

如果觉得有帮助,别忘了点赞关注,我会继续分享更多实战经验~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2260088.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Oracle plsqldev1106 安装及TNS配置

Oracle plsqldev1106 安装及TNS配置 下载好安装包&#xff0c;直接双击安装 点击 I Agree 默认是C盘的&#xff0c;我改了D盘&#xff0c;根据自己实际情况修改 这里用默认的for current user 也可以&#xff0c;我选了for all user 点Finish&#xff0c;等待安装完成即可 …

【卷积神经网络】AlexNet实践

构建模型 模版搭建 # 定义一个AlexNet模型类def __init__(self):# 调用父类的构造函数&#xff08;如果继承自nn.Module的话&#xff09;super(AlexNet, self).__init__()# ReLU激活函数self.ReLU nn.ReLU()# 卷积层1&#xff1a;输入1个通道&#xff08;灰度图&#xff09;&a…

Linux驱动开发(13):输入子系统–按键输入实验

计算机的输入设备繁多&#xff0c;有按键、鼠标、键盘、触摸屏、游戏手柄等等&#xff0c;Linux内核为了能够将所有的输入设备进行统一的管理&#xff0c; 设计了输入子系统。为上层应用提供了统一的抽象层&#xff0c;各个输入设备的驱动程序只需上报产生的输入事件即可。 下…

计算机毕设-基于springboot的某学院兼职平台的设计与实现(附源码+lw+ppt+开题报告)

博主介绍&#xff1a;✌多个项目实战经验、多个大型网购商城开发经验、在某机构指导学员上千名、专注于本行业领域✌ 技术范围&#xff1a;Java实战项目、Python实战项目、微信小程序/安卓实战项目、爬虫大数据实战项目、Nodejs实战项目、PHP实战项目、.NET实战项目、Golang实战…

Unity3D仿星露谷物语开发3之动画系统初探

1、目标 我们希望使用已有的资源建一个动画demo&#xff0c;以此熟悉基于已有Animator/Animation资源的使用方法。 以Tree的动画系统为例&#xff0c;资源位于&#xff1a; 2、创建流程 &#xff08;1&#xff09;创建tree空对象 上面两个都是空对象。 &#xff08;2&#…

怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev

本文引用怎么禁用 vscode 中点击 go 包名时自动打开浏览器跳转到 pkg.go.dev 在 vscode 设置项中配置 gopls 的 ui.navigation.importShortcut 为 Definition 即可。 "gopls": {"ui.navigation.importShortcut": "Definition" }ui.navigation.i…

Java:183 基于SSM的高校食堂系统

项目介绍 基于SSM的食堂点餐系统 角色:管理员、用户、食堂 前台用户可以实现商品浏览&#xff0c;加入购物车&#xff0c;加入收藏&#xff0c;预定&#xff0c;选座&#xff0c;个人信息管理&#xff0c;收货信息管理&#xff0c;收藏管理&#xff0c;评论功能&#xff0c;…

[COLM 2024] V-STaR: Training Verifiers for Self-Taught Reasoners

本文是对 STaR 的改进方法&#xff0c;COLM 是 Conference On Language Models&#xff0c;大模型领域新出的会议&#xff0c;在国际上很知名&#xff0c;不过目前还没有被列入 ccf list&#xff08;新会议一般不会列入&#xff09;&#xff1b;作者来自高校、微软研究院和 Goo…

端点鉴别、安全电子邮件、TLS

文章目录 端点鉴别鉴别协议ap 1.0——发送者直接发送一个报文表明身份鉴别协议ap 2.0——ap1.0 的基础上&#xff0c;接收者对报文的来源IP地址进行鉴别鉴别协议ap 3.0——使用秘密口令&#xff0c;口令为鉴别者和被鉴别者之间共享的秘密鉴别协议ap 3.1——对秘密口令进行加密&…

电脑文件夹打不开了,能打开但是会闪退,提示“找不到iUtils.dll”是什么原因?

电脑运行时常见问题解析&#xff1a;文件夹打不开、闪退及“找不到iUtils.dll”报错 在使用电脑的过程中&#xff0c;我们可能会遇到文件夹打不开、软件闪退或系统报错等问题&#xff0c;特别是提示“找不到iUtils.dll”的报错&#xff0c;更是让人困惑不已。今天我将为大家详…

MATLAB图卷积神经网络GCN处理分子数据集节点分类研究

全文链接&#xff1a;https://tecdat.cn/?p38570 本文主要探讨了如何利用图卷积网络&#xff08;GCN&#xff09;对图中的节点进行分类。介绍了相关的数据处理、模型构建、训练及测试等环节&#xff0c;通过对分子数据集的操作实践&#xff0c;展示了完整的节点分类流程&#…

计算机网络-传输层 UDP协议

学习一个网络协议&#xff0c;主要就是学习“数据格式/报文格式” UDP的特点 UDP传输的过程类似于寄信. ⽆连接: 知道对端的IP和端⼝号就直接进⾏传输, 不需要建⽴连接; 不可靠: 没有确认机制, 没有重传机制; 如果因为⽹络故障该段⽆法发到对⽅, UDP协议层也不会给应 ⽤层返回任…

[OpenGL] Transform feedback 介绍以及使用示例

一、简介 本文介绍了 OpenGL 中 Transform Feedback 方法的基本概念和代码示例。 二、Transform Feedback 介绍 1. Transform Feedback 简介 根据 OpenGL-wiki&#xff0c;Transform Feedback 是捕获由顶点处理步骤&#xff08;vertex shader 和 geometry shader&#xff0…

拆解大语言模型RLHF中的PPO

** 拆解大语言模型RLHF中的PPO ** 参考链接&#xff1a;https://zhuanlan.zhihu.com/p/645225982 为什么大多数介绍RLHF的文章&#xff0c;一讲到PPO算法的细节就戛然而止了呢&#xff1f;要么直接略过&#xff0c;要么就只扔出一个PPO的链接。然而LLM PPO跟传统的PPO还是有…

arcGIS使用笔记(无人机tif合并、导出、去除黑边、重采样)

无人机航拍建图之后&#xff0c;通过大疆智图软件可以对所飞行的区域的进行拼图&#xff0c;但是如果需要对拼好的图再次合并&#xff0c;则需要利用到arcGIS软件。下面介绍arcGIS软件在这个过程中常用的操作。 1.导入tif文件并显示的方法&#xff1a;点击“”图标进行导入操作…

利用代理IP爬取Zillow房产数据用于数据分析

引言 最近数据分析的热度在编程社区不断攀升&#xff0c;有很多小伙伴都开始学习或从事数据采集相关的工作。然而&#xff0c;网站数据已经成为网站的核心资产&#xff0c;许多网站都会设置一系列很复杂的防范措施&#xff0c;阻止外部人员随意采集其数据。为了解决这个问题&a…

免费送源码:Java+B/S+MySQL 多元化智能选课系统的设计与实现 计算机毕业设计原创定制

摘 要 多元化智能选课系统使用Java语言的Springboot框架&#xff0c;采用MVVM模式进行开发&#xff0c;数据方面主要采用的是微软的Mysql关系型数据库来作为数据存储媒介&#xff0c;配合前台技术完成系统的开发。 论文主要论述了如何使用JAVA语言开发一个多元化智能选课系统&…

(九)机器学习 - 多项式回归

多项式回归&#xff08;Polynomial Regression&#xff09;是一种回归分析方法&#xff0c;它将自变量 xx 和因变量 yy 之间的关系建模为 nn 次多项式。多项式回归的目的是找到一个 nn 次多项式函数&#xff0c;使得这个函数能够最好地拟合给定的数据点。 多项式回归的数学表达…

XX服务器上的npm不知道咋突然坏了

收到同事的V&#xff0c;说是&#xff1a;182上的npm不知道咋突然坏了&#xff0c;查到这里了&#xff0c;不敢动了。 咱一定要抓重点&#xff1a;突然坏了。这里的突然肯定不是瞬间&#xff08;大概率是上次可用&#xff0c;这次不可用&#xff0c;中间间隔了多长时间&#x…

Vizcom:AI驱动的草图到3D设计革命

Vizcom是一家领先的AI技术公司,专注于为工业设计师提供工具,将手绘草图快速转化为可制造的3D模型,从而加速产品迭代和创新。 公司背景与愿景 成立于2021年的Vizcom由前Nvidia工业设计师Jordan Taylor创立。Taylor凭借其深厚的创意设计背景和技术敏锐度,看到了生成对抗网络…