- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端劝退师
前端黑科技：美团网页首帧优化实践
本文介绍了如何使用构建时预渲染技术，对移动端首帧白屏问题进行优化。 导读 ? 自JavaScript诞生以来，前端技术发展非常迅速。 移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。 在美团支付的前端技术体系里，通过预渲染提升网页首帧优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。 在前端渲染领域，主要有以下几种方式可供选择： ? 然而，作为以用户体验为首要目标的我们发现了一个体验问题：首屏白屏问题。 既然网站太“慢”会造成如此重要的影响，那要如何优化呢？ 优化思路 在User-centric Performance Metrics一文中，共提到了4个页面渲染的关键指标： ?
1.4K70发布于 2019-08-19 - 来自专栏开发者技术前线
融云 WebRTC 首帧显示优化策略到底有多强？
融云 WebRTC 高级工程师 苏道 音视频实时通话首帧的显示是一项重要的用户体验标准。本文主要通过对接收端的分析来了解和优化视频首帧的显示时间。 success) { LOG_AND_RETURN_ERROR(RTCErrorType::INVALID_PARAMETER, error); } } ... } 其他影响首帧显示的问题 从而会触发观看端的关键帧请求给服务器。这里要求服务器必须转发接收端发来的关键帧请求给发送端。若服务器没有转发关键帧给发送端，接收端就会长时间没有可以渲染的图像，从而出现黑屏问题。 Ending 本文通过分析 WebRTC 音视频接收端的处理逻辑，列举了一些可以优化首帧显示的点，比如通过调整 local SDP 和 remote SDP 中与影响接收端处理的相关部分，从而避免 Audio 这些点都提高了融云 SDK 视频首帧的显示时间，改善了用户体验。 END
1.8K61发布于 2020-11-23 - 来自专栏鸿蒙开发笔记
鸿蒙（HarmonyOS）性能优化实战-减少首帧绘制时的冗余操作
加载绘制首页不仅是应用冷启动的四个阶段之一，还是首帧绘制最重要的阶段。而它可以分为三个阶段：加载页面、测量和布局、渲染。本文从这三个阶段入手，分成下面三个场景进行案例优化。 按需加载按需加载可以避免一次性初始化和加载所有元素，从而使首帧绘制时加载页面阶段的创建列表元素时间大大减少，从而提升性能表现。 fontSize(20) .margin({ left: 10 }) } }, (item: string) => item.toString()) } }}优化 通过减少不合理的容器组件，可以使布局深度降低，布局时间减少，优化布局性能，提升用户体验。 条件渲染通过条件渲染替代显隐控制，首帧绘制时的渲染时间明显降低，从而提升性能表现。另外，即使组件处于隐藏状态，在页面刷新时仍存在重新创建过程，因此当对性能有严格要求时建议使用条件渲染代替。
46320编辑于 2024-10-23 - 来自专栏Android开发实战
Android 掉帧优化
掉帧现象又是如何产生的？ 而如果在16ms内没有计算完毕的话，该帧就无法展示，屏幕进入下一个刷新周期，就产生了所谓的掉帧现象。 1. 当然CPU Profile不仅仅用于掉帧优化，有优化的地方就有它的身影，例如启动优化等。 2. 掉帧优化措施 ① 正确使用缓存 关于mCachedViews： mCachedViews针对ItemView的position进行缓存。 ③ 布局优化 布局优化一个比较典型的优化项就是优化过度绘制，打开"开发者选项"中的"调试GPU过度绘制"，就能看到屏幕上每个像素点在屏幕上绘制了多少次。
2.3K40编辑于 2021-12-13 - 来自专栏即时通讯技术
融云技术分享：基于WebRTC的实时音视频首帧显示时间优化实践
1、引言 在一个典型的IM应用里，使用实时音视频聊天功能时，视频首帧的显示，是一项很重要的用户体验指标。 本文主要通过对WebRTC接收端的音视频处理过程分析，来了解和优化视频首帧的显示时间，并进行了总结和分享。 2、什么是WebRTC？ success) { LOG_AND_RETURN_ERROR(RTCErrorType::INVALID_PARAMETER, error); } } ... } 5、其他影响首帧显示的问题 6、本文小结 本文通过分析 WebRTC 音视频接收端的处理逻辑，列举了一些可以优化首帧显示的点，比如通过调整 local SDP 和 remote SDP 中与影响接收端处理的相关部分，从而避免 Audio 这些点都提高了融云 SDK 视频首帧的显示时间，改善了用户体验。 因个人水平有限，文章内容或许存在一定的局限性，欢迎回复进行讨论。 本文已同步发布于“即时通讯技术圈”公众号。
1.6K00发布于 2020-09-28 - 来自专栏即时通讯技术
融云技术分享：基于WebRTC的实时音视频首帧显示时间优化实践
1、引言 在一个典型的IM应用里，使用实时音视频聊天功能时，视频首帧的显示，是一项很重要的用户体验指标。 本文主要通过对WebRTC接收端的音视频处理过程分析，来了解和优化视频首帧的显示时间，并进行了总结和分享。 LOG_AND_RETURN_ERROR(RTCErrorType::INVALID_PARAMETER, error); } } ... } 5、其他影响首帧显示的问题 6、本文小结 本文通过分析 WebRTC 音视频接收端的处理逻辑，列举了一些可以优化首帧显示的点，比如通过调整 local SDP 和 remote SDP 中与影响接收端处理的相关部分，从而避免 Audio 这些点都提高了融云 SDK 视频首帧的显示时间，改善了用户体验。 因个人水平有限，文章内容或许存在一定的局限性，欢迎回复进行讨论。
2.1K10发布于 2020-10-09 - 来自专栏蜉蝣禅修之道
Android开发之逐帧动画优化
Android上如果使用逐帧动画的话，可以很方便地使用AnimationDrawable，无论是先声明xml还是直接代码里设置，都是几分钟的事，但使用AnimationDrawable有一个致命的弱点， 那就是需要一次性加载所有图片到内存，万一帧数多了或者每张图片都比较大，很容易就报out of memory的异常了，所以有必要进行优化。 这里我们利用View.postDelayed方法延时替换图片，这样就能做到逐帧动画的效果了，然后在替换图片之前，强制回收ImageView当前bitmap就可以减少内存消耗了，废话少说，上代码。 ; // 指定绑定的ImageView和图片资源数组以及每张图片的延时 waitAnim.playConstant(); // 循环播放 waitAnim.stopPlay(); // 停止播放 逐帧动画优化到这里结束了 ，后期我们或许可以继续优化，就是防止一个图片帧太大，加载时间过长，我们可以缓存多张，而不是现在的只缓存一张。
1.8K20发布于 2018-05-24 - 来自专栏性能与架构
腾讯前端首屏优化案例
下面是对腾讯前端团队优化手Q一个页面案例的总结 优化目标页面：手Q群成员分布的页面 左面是首屏，右面是下拉后到底部 这个页面中，可以划分成四个部份：活跃群成员、男女比例、省市分布、年龄 将前三个部份归入首屏渲染时间 ，为主要优化目标 优化过程 （1）活跃群成员头像的懒加载，初始状态使用默认头像快速显示 （2）使用内联js 之前，js都放入外部文件，为了避免阻塞，放到页面底部加载 js之中有获取核心数据的逻辑 这种方式下，需要等待js文件加载完成，然后再发起请求获取数据 优化后，把获取核心数据的代码提取出来，放入head部分中，这样就可以提前执行获取数据的动作，减少了一个JS加载的往返时间 （3）使用内联 css 与内联js的思路相同 之前，也是使用css外部文件 优化后，把首屏需要的css内联到head内 注意：html+内联js css 时要注意整体的大小，最好不要超过14K，这样可以最优网络传输 （4）次屏逻辑延后处理，减少阻塞 这个优化思路简洁 实用 有效，性能提升20%左右
1.3K100发布于 2018-04-03 - 来自专栏Article
博客首屏性能优化探索
这次结合腾讯云的 RUM 工具来优化。 问题： main.js 没有压缩，虽然加上注释也就只有 42 行代码，体积 1.3K jquery 压缩后的代码体积 86K lightbox.js 9.3K，首屏也是加载的 文章图片没有懒加载 原始静态资源大小 优化方案 main.js 压缩后 281B 首屏 JQ 会用到，可以引用公共CDN的路径，这样的好处是首次访问的用户有概率可以命中该版本的 JQ ，从而走本地缓存，同时也可以降低我的服务器带宽压力 鉴于博客的群体访问采用的浏览器版本不低 结果 隔了一天再看统计数据，发现首屏访问速度并没有多少提升，从资源统计数据上来看，依旧存在静态资源访问耗时较长的问题。 这里没有使用 CDN 直接优化，因为这是外物，不能因为优化而优化，在没有找到优化点之前去一顿操作非明智之举。
51520编辑于 2022-06-27 - 来自专栏腾讯大讲堂的专栏
Hippy首屏渲染优化小结
作者：boxizeng，腾讯高级工程师 |导语 近期在做Hippy首屏节点提前渲染的优化，实现过程中查阅了SDK中相关的源码，对底层实现的理解更深了一步，编写此文小结一番。 与native的通信耗时达到降低首帧耗时的目的，但实际上在用户侧呈现出来最终画面在时间点上并没有提前，这里我们在想是否还有更优的方式。 Hippy模块名 js版本号 js版本加载总次数 首帧平均耗时ms 1000ms打开率(%) 加载js耗时ms 创建view耗时ms 引擎初始化耗时ms vMission 1.20883.1 33,930 ，这里可能会出现首屏节点创建完了但页面实际并未完全渲染完毕，这就会导致闪屏的现象，这里的优化方式(TODO)可以是通过检测回调的触发次数来判断页面节点发生变化的程度，以此作为移除首屏节点的时机标注。 04 更多优化 节点数据优化 以VIP个人主页为例，提前跑出的节点数据占了1.5W，这里的数据量着实大，如果是在前端传给客户端生成的话，这里通讯消耗就不小，由于预渲染是一次性插入所有提前跑出的节点，这里其实可以从下面两方面做一些优化
2.1K30发布于 2020-12-10 - 来自专栏权限管理
COS上传视频获自动触发获取视频首帧图配置
COS上传视频获自动触发获取视频首帧图配置 一、 操作前准备： 1、先创建好两个COS储存桶，分别作为源储存桶与目标储存桶 Ps: 1) 源储存桶：作为原视频上传使用； 2) 目标储存桶：作为获取首帧图片使用 ； 2、创建好的源目标存储桶在数据万象控制台找到并开启媒体处理功能 image.png image.png image.png 3、在数据万象控制台找到源储存桶创建视频截帧模板及创建工作流 任务->新创建任务 4\ COS控制台->源COS储存桶->使用以上COS配置好的视频目录->上传视频 image.png image.png 上传完后，在目标COS存储桶上会看到已经生成了视频首帧的截图信息 image.png 另外相应的整个执行过程，可在数据万象->源cos储存桶->媒体处理->找到已创建的工作流->找到对应上传的视频截帧是否正常触发成功 image.png image.png 5\ 获取的首帧图片效果 视频第1s图片 image.png 上传COS后通过工作流处理，获取的视频首帧图片： image.png 详细配置可参考文档：https://cloud.tencent.com
7K40发布于 2020-07-30 - 来自专栏鸿蒙开发笔记
HarmonyOS 开发实践 —— 冷启动首帧完成时延问题分析
冷启动首帧完成时延：指的是应用冷启动时，从点击离手开始到应用进程首帧送显上屏显示的这一段时间，称为冷启动首帧完成时延。 性能参考起止点介绍冷启动首帧完成时延的性能衡量的起点为用户点击应用图标离手点时间，止点为应用首帧送显的时间。注意：如果应用启动时存在广告，需要减去广告时间，即冷启动首帧完成时延计算要去除广告时间。 冷启动首帧完成时延止点确认：冷启动首帧完成时延的终点是应用进程启动后的第一帧。 优化方案应用侧排查Ability生命周期函数onCreate是否存在耗时操作，是否可优化。 优化方案首页尽量不要引入过多无用组件或非必要组件，对于非常用页面及引入耗时长so的页面可以采用动态加载的方式进行优化。
57610编辑于 2024-12-02 - 来自专栏code秘密花园
Vue CLI 首屏优化技巧
首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了，没有用户能忍受 9s的白屏而不关闭页面的 过程中，我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3，所以接下来还会介绍一些它们在优化上的异同 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能，在 vue.config.js中设置 参考官网的做法： ? 设置完毕后，首屏就只会加载当前页面路由的组件了 element-ui按需加载 ? webpack中， CommonsChunkPlugin被自由度更高，更高级的 SplitChunksPlugin代替 这也是为什么我要把项目迁移到 vuecli 3（使用 webpack4） 默认就做了优化 ，具体项目具体分析吧 总结 性能优化是一个非常令人愉悦的过程，同时也是个深坑，有着太多东西，本篇文章开了个头，希望能对大家有所帮助
92210发布于 2019-12-02 - 来自专栏Czy‘s Blog
Vue首屏性能优化组件
Vue首屏性能优化组件 简单实现一个Vue首屏性能优化组件，现代化浏览器提供了很多新接口，在不考虑IE兼容性的情况下，这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情，当然为了考虑 IE我们也可以在封装组件的时候为其兜底，本文的首屏性能优化组件主要是使用IntersectionObserver以及requestIdleCallback两个接口。 描述 先考虑首屏场景，当做一个主要为展示用的首屏时，通常会加载较多的资源例如图片等，如果我们不想在用户打开时就加载所有资源，而是希望用户滚动到相关位置时再加载组件，此时就可以选择IntersectionObserver 使用npm run dev运行之后可以在Console中看到这四个懒加载组件created创建的顺序，其中A的observer懒加载是需要等其加载页面渲染完成之后，判断在可视区，才进行加载，首屏使能够直接看到的
1.2K20发布于 2021-11-11 - 来自专栏前端迷
vue-cli首屏优化技巧
首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了，没有用户能忍受 9s的白屏而不关闭页面的 过程中，我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3，所以接下来还会介绍一些它们在优化上的异同 在首屏会把这十几个路由文件，都一口气下载了 所以我们要关闭这个功能，在 vue.config.js中设置 参考官网的做法： ? 设置完毕后，首屏就只会加载当前页面路由的组件了 element-ui按需加载 ? ，具体项目具体分析吧 总结 性能优化是一个非常令人愉悦的过程，同时也是个深坑，有着太多东西，本篇文章开了个头，希望能对大家有所帮助 参考文章 Vue打包优化之code spliting https:// *zN Webpack 打包优化之体积篇 https://www.jeffjade.com/2017...
1.1K10发布于 2019-11-14 - 来自专栏韩伟的专栏
格斗类帧同步游戏的优化
由于现在4g手机网络越来越普及，绝大多数用户的时延都可以在150ms以内，所以一些快节奏的帧同步网络游戏开始大行其道，现在最火的帧同步游戏无疑是某农药了。 帧同步技术除了可以用来做MOBA类游戏，同样可以用来做需要大量快速操作的格斗类游戏，本文就是尝试提出一些解决帧同步方案下格斗游戏的优化措施。 [1510297241073_8858_1510297285746.jpg] 总结 使用预渲染技术的最重要策略，还是坚持帧同步的原则：相同的输入，得到相同的输出。 而预渲染的方案，是把那些严格同步的游戏逻辑、与其表现区分开来，这样可以专门的去让画面看起来更流畅，同时不影响帧同步游戏的“一致性”。
4.4K00发布于 2017-11-13 - 来自专栏前端|
【腾讯云前端性能优化大赛】前端首屏性能优化
这次，就以我的个人博客为例子，从最开始的荒芜状态，向业界网站性能标准“秒开”做一次系统性的性能优化。 以下为初始数据，数据来源使用腾讯云RUM性能监控。 } 3 、异步加载，按需引入 对于我们的网站来说，用户刚进来看到的页面，往往是不需要加载全部资源的，当用户浏览其它页面的时候，才会用到那些资源，自然这些资源我们就可以把他们的加载往后放一放，优先加载首屏需要的资源 [image-20211227144006470.png] 5、离线缓存（Service Worker） 5.1、简介 除了上述说的手段，减小资源体积，提高资源传输速度之外，我们还可以有一些优化方式，那就是缓存 6、结尾 经过好几天的优化，在没有上终极首屏优化方案（SSR）之前，网站已经达到了一个还不错的速度： [image-20211223153335103.png] 这里的数据都只是取得首页的数据，不同页面打开的速度可能会有些差别 后续还可以使用SSR方案进行进一步的优化，不过这个方案需要项目整体重构，一时半会儿搞不出来。
2.2K41编辑于 2021-12-27 - 来自专栏机器之心
每帧都是AI实时生成的，全球首款AI游戏问世了！
昨天，两家初创公司 Etched、 Decart AI 联手，带来了世界上首个实时生成的 AI 游戏 Oasis，你在其中体验到的每一帧都来自扩散模型的实时预测，游戏画面持续以 20 帧每秒的速度实时渲染 与 Sora 这样的双向模型不同，Oasis 是自回归地生成帧的，它能够根据游戏输入调节每一帧，这构成了 AI 生成的游戏实时与世界互动的基础。 借助 Decart 推理堆栈的优化设置，开发者大幅提升了 GPU 的运行、互联效率，让该模型最终能以可播放的帧速率运行，首次解锁了实时交互性。 Oasis 针对 Etched 构建的 Transformer ASIC Sohu 进行了优化。Sohu 可以扩展到 4K 分辨率的 100B+ 大规模下一代模型。 今年 7 月，Etched 发布了首款 AI 芯片 Sohu，宣称：「就 Transformer 而言，Sohu 是有史以来最快的芯片，没有任何芯片能与之匹敌。」
46900编辑于 2025-02-14 - 来自专栏小前端看世界
Q 前端首屏加载优化记录
结论：html解析过程中，存在非首屏需要的资源进行加载，并形成阻塞，导致关键渲染路径过长，从而影响页面的加载性能 优化方案 导致页面加载慢的问题基本上已经定位出来，那么接下来需要针对用户的部署环境，做针对性的优化 还是想再优化一下。经过思考和复盘，一期的优化总体来说属于比较通用的优化，但是感觉还是能继续优化一下的。那么我们改变一下思路，是不是可以采用分段式渲染的方式，将首屏的打开速度再提升一个档次。 既然如此，我们能不能进一步减少首屏的代码体积，将依赖后端数据渲染的内容进行懒加载，这样就能既减少首屏所需要的代码量，也可以让懒加载的代码和数据请求同时进行。进一步优化首屏速度呢。 而且整个首页高度依赖后端进行渲染，在无法提供SSR服务的前提下，而且也需要依赖js运行时获取接口数据才能正常渲染，首页中的首屏加载代码携带这些内容组件的代码将毫无意义，所以决定将红框中的组件代码全部进行懒加载处理 二期优化方案主要是对于首屏所需要的代码优先加载，对于页面中与接口数据高度依赖的模块，统一采用懒加载的方式，可以让用户更快的看到页面的呈现。
1.2K20编辑于 2022-09-26 - 来自专栏乱码李
Web 性能优化-首屏和白屏时间
什么是首屏和白屏时间？ 白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。 首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。 关于首屏时间是否包含图片加载网上有不同的说法，个人认为，只要首屏中的图片加载完成，即是首屏完成，不在首屏中的图片可以不考虑。 计算首屏时间常用的方法有： (1) 首屏模块标签标记法 由于浏览器解析 HTML 是按照顺序解析的，当解析到某个元素的时候，你觉得首屏完成了，就在此元素后面加入 script 计算首屏完成时间。 <! -- 首屏不可见内容 -->
</body> </html> (2) 统计首屏内加载最慢的图片/iframe 通常首屏内容中加载最慢的就是图片或者 iframe return setTimeout(arguments.callee, 20) } fn() } } } 参考资料 前端优化3.5K22发布于 2021-11-26
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号