哎呀，说到这个客户端渲染，真的是让人又爱又恨啊！

说实话，做前端优化这行当，简直就是一场没有硝烟的战争。我们每天都在跟浏览器斗智斗勇，跟网络速度较劲。你想想看，当用户打开你的网站，后来啊在那儿干瞪眼等着屏幕亮起来那种心情， 拯救一下。 简直比等外卖还着急！所以啊，如何优化网站实现客户端渲染的最佳技术方案，这不仅仅是个技术问题，这简直是个哲学问题！我们得让页面飞起来得让用户感觉不到延迟，这得多难啊！

先说说 我们得明白一个事儿，客户端渲染: 获取 HTML 文件,根据需要下载 JavaScript 文件,运行文件,生成 DOM,再渲染。能够在实验室中改进 TBT 的优化也应该能为您的用户改进 FID。 别犹豫... 考虑使用原子化class方案. 这听起来是不是很绕？其实就是说浏览器得先下载骨架，然后下载肌肉，再说说才能动起来。这个过程要是慢了用户就跑了。

别让资源堵在路上！预加载是个好东西，但别乱用！

网站可以直接使用 预加载对首屏至关重要的字体、 CSS或是JS，有利于避免瀑布流的阻塞和拥挤，较大程度了加快了页面访问的速度，这也是很常见的优化方法，而且风险很低，但是不要预加载图片，主要原因是可能会拖慢网速。哎呀，这里我要特别强调一下千万别贪心！我见过太多人，恨不得把所有东西都塞进preload里后来啊呢？带宽被占满了关键资源反而下不下来这就叫捡了芝麻丢了西瓜，ICU你。！

还有啊， 巧妙正确的使用这可以提前建立与服务器、CDN的连接，有利于加快页面的响应速度，如果网站需要多级或是外部的链接，那么还可以使用提前做DNS解析，如：图片域名、资源链接。 挺好。 这就像是提前给服务器打个招呼，“嘿，我马上要来了你准备好接客啊！”这样就能省去好多握手的时间，这时间省下来用户可能就多看了一眼你的广告，多了一次点击的机会啊！

缓存策略，那是必须要玩明白的！

踩个点。 网站可以设置静态资源强缓存， 如：JS/CSS和字体文件 ，甚至可以设置长久的 Cache-Control缓存，但是更新之后要能自然失效，避免缓存问题导致搜索引擎和生成引擎抓取到不一致的资源，从而导致判断异常，如果JS文件需要功能性的更新，那就用版本符合进行缓存。这个版本号真的很重要， 我就吃过亏，明明代码改了后来啊用户浏览器里还是旧的缓存，然后bug满天飞，客服 为了让大家更清楚， 我随便列个表格看看这些缓存策略的区别，虽然看起来有点乱，但大概就是这么个意思： 缓存类型 适用资源 过期时间建议 风险等级 强缓存 JS, CSS, 字体, 图片 一年甚至更久 高 协商缓存 HTML文件 即时 低 不缓存 敏感接口数据 0 无 代码压缩与传输，能省一点是一点！ 什么鬼？ 可以针对网站的前端代码进行压缩， 比如使用Webpack/Vite等构建工具开启JS/CSS压缩，移除空格和注释，而且有些建站程序自带Gizp压缩功能，也可以服务端开启Gzip或是Brotli，设置还可以启用HTTP层的传输压缩效率。现在的代码，动不动就几兆，如果不压缩，那传输起来就像是在用吸管喝水，急死个人！把空格、注释都删掉，虽然代码看起来丑了但是机器读起来开心啊，速度就快了啊！ 为了了解如何优化网页加载速度,我们需要了解浏览器的渲染过程。所以我们需要综合考虑,并找到最有效的优化方案。接下来,浏览器需要根据DOM... 这过程太复杂了 有时候我都觉得浏览器太不容易了要解析那么多乱七八糟的代码，在理。。 图片懒加载，这绝对是神器！ 如果网站或是页面有较多的图片， 那么可以使用loading="lazy" 属性让图片进入视口前不加载网络请求，避开了图片抢占优先加载主要资源的网络请求，从而加快整个页面的加载及访问的速度，这个优化措施是很利于大图和多图的网站，并且也不影响图片的正常显示。你想啊，用户只看第一屏，你把第十屏的图片都加载了干嘛？浪费流量不说还拖慢速度！懒加载，就是让图片“按需上岗”，这才是聪明的做法，踩个点。。 混合渲染，这可能是未来的趋势？ 在每个新的 React 项目开始时,一个问题不可避免地浮出水面——我们应该使用客户端渲染 、 服务器端渲染 还是生成静态站点 .话虽这么说,静态网站仍然是一个很好的工具.相反,最好利用 SSR,主要原因是它能够提供动态的、非陈旧的、搜索引擎优化的 HTML 文件,并且可以轻松地根据每个请求反映更新。这选择困难症都要犯了，他破防了。！ 一些网站已经成功采用混合渲染技术,Netflix服务器渲染相对于静态的落地页面,一边为交互繁重的页面预拉去JS,为这些重客户端页面提供更快的加载能力,许多现代框架,库,架构使得在客户端和服务器上渲染....可以避免向客户端发送大量Javascript,也有助于实现快速的可交互时间TTI,这方法之所以运行的通,是主要原因是服务器渲染的本质只是向用户浏览器发送文本和链接,可以看出... 看看人家Netflix， 多聪明，该服务端渲染的就服务端渲染，该客户端渲染的就客户端渲染，混合双打，效果拔群！ 针对会场的性能,除了基础的大家都知道的前端优化手段之外,还结合客户端能力做过很多优化方案,比较具有代表性的有两个:.我们的 CSR 渲染体系依赖前端+客户端的能力,从工作机制上已经很难再有比较大的提升.简介:今年我们在不改变现有架构,不改变业务的前提下,在会场上使用了 SSR 技术,将秒开率提高到了新的高度;也观察到在用户体验得到优化的一边,业务指标... 82.6%啊！这数字多漂亮，秒开率提升了老板开心了用户也开心了大家都开心。 React项目里的那些事儿 又爱又恨。 项目遵循了标准的React应用结构,但进行了特定的调整以优化客户端渲染性能.比方说,通过配置rspack来实现动态导入,提升首屏加载速度,并利用缓存机制来改善用户体验.它负责启动整个客户端应用生命周期,通常包含ReactDOM.render调用来将React元素渲染到真实的DOM节点上。React虽然好用，但是如果不优化，那也是个大胖子。动态导入一定要用，别把所有代码都打到一个包里那样浏览器加载起来累死了。 这里有个关于前端构建工具的小对比， 大家看看，选个趁手的： 工具名称 主要特点 适用场景 热度指数 Webpack 老牌强大，插件丰富 大型复杂项目 高 Vite 开发极快，ESM原生支持 现代浏览器项目 极高 Rspack 兼容Webpack配置，Rust编写速度快 寻求性能提升的迁移项目 上升中 Turbopack Next.js团队开发，增量构建 Next.js生态 高 SEO与AI，我们到底在为谁优化？ 就是当我们的客户端浏览器访问我们页面的时候,我们就直接将我们的网页返回给客户端让它去渲染,而当搜索引擎爬取我们的网站时,我们就将渲染好的html返回给它,这样就解决了SEO优化的问题了.但是怎么让我们的网站的排名更加的靠前,就是我们需要做的事. 我们在搜索引擎爬... 这真的是个头疼的问题， 爬虫越来越聪明了但是AI抓取也是个新课题。 我们给网站做SEO和AEO/GEO的时候， 先说说要优化前端及客户端的访问速度，这直接会影响性能的指标水平，从而影响AI及搜索引擎的认可度，但是优化客户端的重点在于渲染层面所以会涉及到加载、读性、响应等事项。现在的AI搜索引擎，它们也喜欢快的网站，谁愿意等一个慢吞吞的网站呢？AI也是要效率的，不靠谱。！ 大多数网站应该优先加载CSS文件， 然后是JS文件，这是为了先说说完整的读取页面的渲染效果，避免AI搜索引擎出现解析失败，如果JS文件放置CSS前面那就有可能主要原因是JS代码及函数导致堵塞CSS的渲染，甚至会影响整体的响应速度，所以要注意资源的加载优先性。这个顺序千万别搞反了CSS是衣服，得先穿上，JS是动作，衣服穿好了再动，不然就尴尬了！ HarmonyOS NEXT 的新花样？ 比方说在HarmonyOS NEXT中,通过Stage模型实现的分布式软总线技术,可以将渲染任务智能分配到不同设备..在鸿蒙生态开发中,特别是使用arkUI框架时,开发者需要特别注意渲染流程的优化.根据HTTP Archive的2023年统计,Top 10%的移动网站CRP时间分布为:. 哎哟， 这鸿蒙系统搞得挺花哨啊，渲染任务还能分配到不同设备，这是要把手机、平板、电视都连起来干活吗？这技术要是普及了前端优化又要多学一堆东西了真是学无止境啊，换个赛道。！ 性能分析与工具，别瞎忙活！ 工具进行性能分析;针对csr的短板,可结合ssr或ssg实现首屏快速展示与seo优化,形成混合渲染方案;总的来说,csr以客户端为核心完成页面构建,虽存在加载 拭目以待。 与索引问题,但凭借流畅交互体验和现代框架支持,在复杂单页应用....优化客户端渲染的性能,说实话,这是个永无止境的课题,但有一些核心策略确实能带来显著提升。. 尽管 SSR 有一些优势,但这些框架一直强调它们的速度有多快,这意味着客户端渲染速度很慢.有很多关于这种延迟功能如何损害 UX 的示例,比方说某些网站仅在 JS 加载后才显示导航栏的方式.最重要的是——我们主要通过修改 2 个文件和使用预渲染服务来实现这一切,所以呢每个现有的 CSR 应用程序都应该能够快速轻松地实现这些修改并从中受益.. 看到没， 连导航栏都要等JS加载完才显示，这用户体验能好吗？简直是灾难！ 网站可以把非关键的初始化逻辑用requestIdleCallback推迟到浏览器空闲时施行， 避免过大的DOM操作和长时间的同步循环，用Web Worker处理纯数据运算，对频繁触发的事件使用防抖/节流，甚至也可以使用缓存值，但是要注意不能报错。这个requestIdleCallback真的是个好东西， 就像是在浏览器打盹的时候给它派点活儿，不耽误正事儿。Web Worker也是别让主线程累着，算数的活儿丢给后台线程去干。 差点意思。 再说说 给大家推荐几个常用的性能分析工具，别光顾着写代码，不知道慢在哪儿： 工具名称 核心功能 是否免费 学习难度 Lighthouse 综合性能、SEO、可访问性审计 是 简单 WebPageTest 多地点详细瀑布流、视频分析 是 中等 Chrome DevTools 实时调试、Performance面板分析 是 困难 GTmetrix 基于Lighthouse的在线报告 部分免费 简单 总之啊，优化客户端渲染这事儿，真的是说起来容易做起来难。你要考虑预加载， 要考虑缓存，要考虑代码压缩，要考虑懒加载，还要考虑混合渲染，甚至还要考虑HarmonyOS这种新生态。这哪是写代码啊，这简直是在绣花！但是没办法，为了用户体验，为了SEO排名，为了老板的笑脸，我们只能硬着头皮上。希望这些乱七八糟的经验能帮到你，哪怕一点点也好。别灰心，优化是个漫长的过程，慢慢来吧！