多彩编程 多彩编程MZPH · CODE BLOG
ARTICLE DETAIL

文章详情

深耕前端与后端开发技术的一线实战笔记与踩坑复盘。

Lighthouse卷了三年,AI一来我重想性能价值

Lighthouse卷了三年,AI一来我重想性能价值 我是做前端性能优化的干了五年。Lighthouse分数我卷了三年从黄到绿连0.3分的波动都盯着看上线前分数没到90我都不好意思发周报。结果今年上半年我们组要接大模型做AI问答入口。我第一反应是这玩意儿首屏得慢死我那分数怎么办但干着干着我发现真正慌的不是加载慢是我卷了三年的那些指标好像突然没人问了。一、我卷了三年的到底是什么说白了就是LCP、CLS、TBT那几个数。为了它们我拆包、做缓存、图片懒加载、把第三方脚本往后挪连字体都换成了自托管brotli压缩开着HTTP2多路复用也调了。CDN回源、强缓存和协商缓存的边界我也门儿清那几年光看缓存命中率就能看半天。Vite配了又配prefetch、preload、IntersectionObserver轮着上React.memo和useDeferredValue也用上了。每次分数从92跳到95我心里踏实周报也好写。记得有回为一个活动页我把首屏JS从380K压到210K折腾了一周。上线后转化率没动老板问的也是页面怎么还是有点慢没人提那个分数。那一刻我有点空。但我得承认一件事大部分优化用户根本没感觉。页面快0.4秒没人会夸你。我卷的其实是一份对得起自己的执念——不是说它没用是它离用户真实感受隔着一层。有时候我甚至为了那一个数去压一个用户根本不看的模块回过头想有点本末倒置。二、AI入口把我原来的那套冲乱了大模型问答一上来就是流式输出长连接挂着后台边生成边吐字。传统的那套骨架屏先上、数据再补的逻辑被直接打穿了。更别提CLS字是一段段蹦出来的布局一直在抖分数想高都难。我习惯先把首屏资源压到最小结果AI一接进来光是上下文、历史对话、提示词模板那一长串东西就够我喝一壶。更麻烦的是流式吐字要是直接进主线程渲染长文本能把页面卡得一顿一顿的我后来把它塞进Web Worker用requestIdleCallback慢慢刷上去才顺过来。React 18的useTransition我也用上了把高频token更新和界面交互拆开不互相抢。我还试过用Service Worker缓存流式结果下次进同一会话能秒出历史结果命中率算错用户看到的是上次的半截话。这种坑是接了AI才有的以前纯静态页遇不到。那阵子Lighthouse分数掉了一截我盯着面板发了两天呆。后来我去看真实用户的行为录屏。有意思的是没人在乎那个分数。他们点一下看到第一个字蹦出来就觉得这东西是活的。我盯了三年的首屏秒开在用户眼里不如立刻有反应来得实在。三、我重新想了性能优化的价值在哪不是那个分数本身是别让人干等。流式输出帮我把等待变成了已经在路上。过去我花大量精力压的那零点几秒和现在让用户点下去立刻看到第一个字比后者才是用户真能感知到的快。所以我现在的活法变了从追一个分数变成管一段体验。具体怎么管首屏只加载对话框架模型相关的重资源用dynamic import懒加载历史消息上虚拟列表流式渲染和骨架屏怎么过渡才不闪——这些还是性能优化的老本行AI帮不上得我自己来。举个眼前的例子之前我纠结首屏JS包大小现在我先保证用户点下去半秒内能看到第一个字包大一点再用后台预取补。优先级整个颠倒了。我们组做数据的老周原先笑我卷分数现在反而跑来问我“流式那个卡顿你咋调的”四、说点真心话我不觉得AI把我过去那套废了。打包、缓存、首屏这些基本功现在反而更值钱因为页面比以前重太多了模型一接进来资源开销成倍涨不抠细节更扛不住。只是我不再把Lighthouse当唯一标准。分数好看是一种安全感但用户要的是用着不卡、点着有回应。这两件事不全是一回事。顺带一句分数我可以不要满分但白屏、交互卡死这种硬伤我比以前更较真——模型一进来页面更沉老问题反而更容易爆。基本功没过时只是考卷变了。说到底卷了三年教会我的不是怎么追一个数是怎么对用户的时间较真。这一点AI没让我丢反而更清楚了。我现在还在卷性能只是换了个问法不是分能不能再高而是用户等得是不是更短了。你们组要是也在接AI性能这块是怎么取舍的评论区聊聊我也想看看别人怎么处理这个矛盾。想入门 AI 大模型却找不到清晰方向备考大厂 AI 岗还在四处搜集零散资料别再浪费时间啦2026 年AI 大模型全套学习资料已整理完毕从学习路线到面试真题从工具教程到行业报告一站式覆盖你的所有需求现在全部免费分享扫码免费领取全部内容​一、学习必备100本大模型电子书26 份行业报告 600 套技术PPT帮你看透 AI 趋势想了解大模型的行业动态、商业落地案例大模型电子书这份资料帮你站在 “行业高度” 学 AI1. 100本大模型方向电子书2. 26 份行业研究报告覆盖多领域实践与趋势报告包含阿里、DeepSeek 等权威机构发布的核心内容涵盖职业趋势《AI 职业趋势报告》《中国 AI 人才粮仓模型解析》商业落地《生成式 AI 商业落地白皮书》《AI Agent 应用落地技术白皮书》领域细分《AGI 在金融领域的应用报告》《AI GC 实践案例集》行业监测《2024 年中国大模型季度监测报告》《2025 年中国技术市场发展趋势》。3. 600套技术大会 PPT听行业大咖讲实战PPT 整理自 2024-2025 年热门技术大会包含百度、腾讯、字节等企业的一线实践安全方向《端侧大模型的安全建设》《大模型驱动安全升级腾讯代码安全实践》产品与创新《大模型产品如何创新与创收》《AI 时代的新范式构建 AI 产品》多模态与 Agent《Step-Video 开源模型视频生成进展》《Agentic RAG 的现在与未来》工程落地《从原型到生产AgentOps 加速字节 AI 应用落地》《智能代码助手 CodeFuse 的架构设计》。二、求职必看大厂 AI 岗面试 “弹药库”300 真题 107 道面经直接抱走想冲字节、腾讯、阿里、蔚来等大厂 AI 岗这份面试资料帮你提前 “押题”拒绝临场慌1. 107 道大厂面经覆盖 Prompt、RAG、大模型应用工程师等热门岗位面经整理自 2021-2025 年真实面试场景包含 TPlink、字节、腾讯、蔚来、虾皮、中兴、科大讯飞、京东等企业的高频考题每道题都附带思路解析2. 102 道 AI 大模型真题直击大模型核心考点针对大模型专属考题从概念到实践全面覆盖帮你理清底层逻辑3. 97 道 LLMs 真题聚焦大型语言模型高频问题专门拆解 LLMs 的核心痛点与解决方案比如让很多人头疼的 “复读机问题”三、路线必明 AI 大模型学习路线图1 张图理清核心内容刚接触 AI 大模型不知道该从哪学起这份「AI大模型 学习路线图」直接帮你划重点不用再盲目摸索路线图涵盖 5 大核心板块从基础到进阶层层递进一步步带你从入门到进阶从理论到实战。L1阶段:启航篇丨极速破界AI新时代L1阶段了解大模型的基础知识以及大模型在各个行业的应用和分析学习理解大模型的核心原理、关键技术以及大模型应用场景。L2阶段攻坚篇丨RAG开发实战工坊L2阶段AI大模型RAG应用开发工程主要学习RAG检索增强生成包括Naive RAG、Advanced-RAG以及RAG性能评估还有GraphRAG在内的多个RAG热门项目的分析。L3阶段跃迁篇丨Agent智能体架构设计L3阶段大模型Agent应用架构进阶实现主要学习LangChain、 LIamaIndex框架也会学习到AutoGPT、 MetaGPT等多Agent系统打造Agent智能体。L4阶段精进篇丨模型微调与私有化部署L4阶段大模型的微调和私有化部署更加深入的探讨Transformer架构学习大模型的微调技术利用DeepSpeed、Lamam Factory等工具快速进行模型微调并通过Ollama、vLLM等推理部署框架实现模型的快速部署。L5阶段专题集丨特训篇 【录播课】四、资料领取全套内容免费抱走学 AI 不用再找第二份不管你是 0 基础想入门 AI 大模型还是有基础想冲刺大厂、了解行业趋势这份资料都能满足你现在只需按照提示操作就能免费领取扫码免费领取全部内容​2026 年想抓住 AI 大模型的风口别犹豫这份免费资料就是你的 “起跑线”
返回列表