- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端劝退师
前端黑科技：美团网页首帧优化实践
本文介绍了如何使用构建时预渲染技术，对移动端首帧白屏问题进行优化。 导读 ? 自JavaScript诞生以来，前端技术发展非常迅速。 移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。 在美团支付的前端技术体系里，通过预渲染提升网页首帧优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。 在前端渲染领域，主要有以下几种方式可供选择： ? 然而，作为以用户体验为首要目标的我们发现了一个体验问题：首屏白屏问题。 既然网站太“慢”会造成如此重要的影响，那要如何优化呢？ 优化思路 在User-centric Performance Metrics一文中，共提到了4个页面渲染的关键指标： ?
1.4K70发布于 2019-08-19 - 来自专栏开发者技术前线
融云 WebRTC 首帧显示优化策略到底有多强？
融云 WebRTC 高级工程师 苏道 音视频实时通话首帧的显示是一项重要的用户体验标准。本文主要通过对接收端的分析来了解和优化视频首帧的显示时间。 接收端接收 RTP 包，取出 RTP payload，完成组帧的操作。之后音视频解码器解码帧数据，生成视频图像或音频 PCM 数据。 本文参数调整谈论的部分位于上图中的第 4 步。 success) { LOG_AND_RETURN_ERROR(RTCErrorType::INVALID_PARAMETER, error); } } ... } 其他影响首帧显示的问题 Ending 本文通过分析 WebRTC 音视频接收端的处理逻辑，列举了一些可以优化首帧显示的点，比如通过调整 local SDP 和 remote SDP 中与影响接收端处理的相关部分，从而避免 Audio 这些点都提高了融云 SDK 视频首帧的显示时间，改善了用户体验。 END
1.8K61发布于 2020-11-23 - 来自专栏鸿蒙开发笔记
鸿蒙（HarmonyOS）性能优化实战-减少首帧绘制时的冗余操作
加载绘制首页不仅是应用冷启动的四个阶段之一，还是首帧绘制最重要的阶段。而它可以分为三个阶段：加载页面、测量和布局、渲染。本文从这三个阶段入手，分成下面三个场景进行案例优化。 按需加载按需加载可以避免一次性初始化和加载所有元素，从而使首帧绘制时加载页面阶段的创建列表元素时间大大减少，从而提升性能表现。 ForEach(this.arr, (item: string) => { ListItem() { Image($r('app.media.4k 通过减少不合理的容器组件，可以使布局深度降低，布局时间减少，优化布局性能，提升用户体验。 条件渲染通过条件渲染替代显隐控制，首帧绘制时的渲染时间明显降低，从而提升性能表现。另外，即使组件处于隐藏状态，在页面刷新时仍存在重新创建过程，因此当对性能有严格要求时建议使用条件渲染代替。
49920编辑于 2024-10-23 - 来自专栏Android开发实战
Android 掉帧优化
掉帧现象又是如何产生的？ 当然CPU Profile不仅仅用于掉帧优化，有优化的地方就有它的身影，例如启动优化等。 2. 掉帧优化措施 ① 正确使用缓存 关于mCachedViews： mCachedViews针对ItemView的position进行缓存。 ③ 布局优化 布局优化一个比较典型的优化项就是优化过度绘制，打开"开发者选项"中的"调试GPU过度绘制"，就能看到屏幕上每个像素点在屏幕上绘制了多少次。 } 当Adapter调用onItemRangeChanged(), onItemRangeInserted(), onItemRangeRemoved(), onItemRangeMoved()这4个方法时会调用
2.4K40编辑于 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 - 来自专栏txp玩Linux
音视频基础知识(4):I帧、P帧、B帧、GOP
一、H264帧类型定义： 在H264的编码中，通常以三种不同类型的帧来表示传输的画面，分别是I帧、P帧、B帧。 P帧：P帧指的是前向参考帧，它需要参考前一帧的图片才能够正确把数据解码出来。 B帧：B帧指的是双向参考帧，它需要参考前一帧数据和后一帧数据才能够正常把数据解码出来。 但是它也有自身的缺点，那就是I帧的体积比较大，假设在传输视频中全部采用I帧去传输，那整个网络链路都承受着巨大的压力。所以，I帧就要配合P帧、B帧等进行数据的传输。 P帧：P帧又称之为前向参考帧，此帧的特点是需要参考前一帧的图像信息才可以正确把图像解码出来。P帧指的是这一帧和前一帧的差别，并通过将图像序列中已经编码后的冗余信息充分去除来压缩传输数据量的编码图像。 B帧：B帧也称之为双向参考帧，B帧的特点是以前面的帧(I帧或者P帧)或者后面的帧(也是I帧、P帧)作为参考帧找出B帧的预测值，并且取预测差值和预测矢量进行传送。
8.9K32编辑于 2022-11-28 - 来自专栏VNF
MPEG4视频中，I帧、p帧、B帧的判定（转载） By HKL,
mpeg4的每一帧开头是固定的：00 00 01 b6，那么我们如何判断当前帧属于什么帧呢？在接下来的2bit，将会告诉我们答案。 注意：是2bit，不是byte，下面是各类型帧与2bit的对应关系： 00: I Frame 01: P Frame 10: B Frame 为了更好地说明，我们举几个例子，以下是16 进制显示的视频编码： 00 00 01 b6 10 34 78 97 09 87 06 57 87 …… I帧 00 00 01 b6 98 …… B帧 下面我们来分析一下为什么他们分别是I、P、B帧 0x10 = 0001 0000 0x50 = 0101 0000 0x96 = 1001 0100 大家看红色的2bit，再对照开头说的帧与2bit的对应关系，是不是符合了呢？
2K10发布于 2020-07-22 - 来自专栏蜉蝣禅修之道
Android开发之逐帧动画优化
Android上如果使用逐帧动画的话，可以很方便地使用AnimationDrawable，无论是先声明xml还是直接代码里设置，都是几分钟的事，但使用AnimationDrawable有一个致命的弱点， 那就是需要一次性加载所有图片到内存，万一帧数多了或者每张图片都比较大，很容易就报out of memory的异常了，所以有必要进行优化。 这里我们利用View.postDelayed方法延时替换图片，这样就能做到逐帧动画的效果了，然后在替换图片之前，强制回收ImageView当前bitmap就可以减少内存消耗了，废话少说，上代码。 ; // 指定绑定的ImageView和图片资源数组以及每张图片的延时 waitAnim.playConstant(); // 循环播放 waitAnim.stopPlay(); // 停止播放 逐帧动画优化到这里结束了 ，后期我们或许可以继续优化，就是防止一个图片帧太大，加载时间过长，我们可以缓存多张，而不是现在的只缓存一张。
1.8K20发布于 2018-05-24 - 来自专栏Article
博客首屏性能优化探索
优化方案 main.js 压缩后 281B 首屏 JQ 会用到，可以引用公共CDN的路径，这样的好处是首次访问的用户有概率可以命中该版本的 JQ ，从而走本地缓存，同时也可以降低我的服务器带宽压力 鉴于博客的群体访问采用的浏览器版本不低 结果 隔了一天再看统计数据，发现首屏访问速度并没有多少提升，从资源统计数据上来看，依旧存在静态资源访问耗时较长的问题。 这里没有使用 CDN 直接优化，因为这是外物，不能因为优化而优化，在没有找到优化点之前去一顿操作非明智之举。 :SSL:1m; ssl_session_timeout 60m; #ssl_buffer_size 4k; ssl_session_tickets on; ssl_stapling RC4"; add_header Strict-Transport-Security "max-age=31536000;includeSubDomains;preload"; add_header
52320编辑于 2022-06-27 - 来自专栏性能与架构
腾讯前端首屏优化案例
下面是对腾讯前端团队优化手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 - 来自专栏腾讯大讲堂的专栏
Hippy首屏渲染优化小结
作者：boxizeng，腾讯高级工程师 |导语 近期在做Hippy首屏节点提前渲染的优化，实现过程中查阅了SDK中相关的源码，对底层实现的理解更深了一步，编写此文小结一番。 作为 JS 引擎，而 iOS 则为 JSCore，以 v8 为例，其加载js的流程大体上分成： Step1: context 初始化 Step2: 源代码字符串加载 Step3: 代码编译 Step4: 与native的通信耗时达到降低首帧耗时的目的，但实际上在用户侧呈现出来最终画面在时间点上并没有提前，这里我们在想是否还有更优的方式。 Hippy模块名 js版本号 js版本加载总次数 首帧平均耗时ms 1000ms打开率(%) 加载js耗时ms 创建view耗时ms 引擎初始化耗时ms vMission 1.20883.1 33,930 ，这里可能会出现首屏节点创建完了但页面实际并未完全渲染完毕，这就会导致闪屏的现象，这里的优化方式(TODO)可以是通过检测回调的触发次数来判断页面节点发生变化的程度，以此作为移除首屏节点的时机标注。
2.1K30发布于 2020-12-10 - 来自专栏权限管理
COS上传视频获自动触发获取视频首帧图配置
COS上传视频获自动触发获取视频首帧图配置 一、 操作前准备： 1、先创建好两个COS储存桶，分别作为源储存桶与目标储存桶 Ps: 1) 源储存桶：作为原视频上传使用； 2) 目标储存桶：作为获取首帧图片使用 image.png 3\ 数据万象源COS->媒体处理->任务->新创建任务 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/document/product/460/43472#.E5.88.9B.E5.BB.BA.E5.B7.A5.E4.BD.9C.E6.B5.81
7K40发布于 2020-07-30 - 来自专栏鸿蒙开发笔记
HarmonyOS 开发实践 —— 冷启动首帧完成时延问题分析
冷启动首帧完成时延：指的是应用冷启动时，从点击离手开始到应用进程首帧送显上屏显示的这一段时间，称为冷启动首帧完成时延。 性能参考起止点介绍冷启动首帧完成时延的性能衡量的起点为用户点击应用图标离手点时间，止点为应用首帧送显的时间。注意：如果应用启动时存在广告，需要减去广告时间，即冷启动首帧完成时延计算要去除广告时间。 冷启动首帧完成时延止点确认：冷启动首帧完成时延的终点是应用进程启动后的第一帧。 优化方案应用侧排查Ability生命周期函数onCreate是否存在耗时操作，是否可优化。 优化方案首页尽量不要引入过多无用组件或非必要组件，对于非常用页面及引入耗时长so的页面可以采用动态加载的方式进行优化。
59410编辑于 2024-12-02 - 来自专栏code秘密花园
Vue CLI 首屏优化技巧
首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了，没有用户能忍受 9s的白屏而不关闭页面的 过程中，我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3，所以接下来还会介绍一些它们在优化上的异同 设置完毕后，首屏就只会加载当前页面路由的组件了 element-ui按需加载 ? 但在新版 webpack中， CommonsChunkPlugin被自由度更高，更高级的 SplitChunksPlugin代替 这也是为什么我要把项目迁移到 vuecli 3（使用 webpack4） 每一个模块的 css文件都会分离出来，整整13个 css文件，而我们的首页就请求了4个，花费了不少的资源请求时间 我们可以在 vue.config.js中关闭它 css: { // 是否使用 ，具体项目具体分析吧 总结 性能优化是一个非常令人愉悦的过程，同时也是个深坑，有着太多东西，本篇文章开了个头，希望能对大家有所帮助
92710发布于 2019-12-02 - 来自专栏Czy‘s Blog
Vue首屏性能优化组件
Vue首屏性能优化组件 简单实现一个Vue首屏性能优化组件，现代化浏览器提供了很多新接口，在不考虑IE兼容性的情况下，这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情，当然为了考虑 IE我们也可以在封装组件的时候为其兜底，本文的首屏性能优化组件主要是使用IntersectionObserver以及requestIdleCallback两个接口。 描述 先考虑首屏场景，当做一个主要为展示用的首屏时，通常会加载较多的资源例如图片等，如果我们不想在用户打开时就加载所有资源，而是希望用户滚动到相关位置时再加载组件，此时就可以选择IntersectionObserver 使用npm run dev运行之后可以在Console中看到这四个懒加载组件created创建的顺序，其中A的observer懒加载是需要等其加载页面渲染完成之后，判断在可视区，才进行加载，首屏使能够直接看到的 }" ></lazy-load>
4<1.2K20发布于 2021-11-11来自专栏前端迷vue-cli首屏优化技巧
首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了，没有用户能忍受 9s的白屏而不关闭页面的 过程中，我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3，所以接下来还会介绍一些它们在优化上的异同 设置完毕后，首屏就只会加载当前页面路由的组件了 element-ui按需加载 ? 但在新版 webpack中， CommonsChunkPlugin被自由度更高，更高级的 SplitChunksPlugin代替 这也是为什么我要把项目迁移到 vuecli 3（使用 webpack4） 每一个模块的 css文件都会分离出来，整整13个 css文件，而我们的首页就请求了4个，花费了不少的资源请求时间 我们可以在 vue.config.js中关闭它 css: { // 是否使用 ，具体项目具体分析吧 总结 性能优化是一个非常令人愉悦的过程，同时也是个深坑，有着太多东西，本篇文章开了个头，希望能对大家有所帮助 参考文章 Vue打包优化之code spliting https://
1.1K10发布于 2019-11-14来自专栏韩伟的专栏格斗类帧同步游戏的优化
由于现在4g手机网络越来越普及，绝大多数用户的时延都可以在150ms以内，所以一些快节奏的帧同步网络游戏开始大行其道，现在最火的帧同步游戏无疑是某农药了。 帧同步技术除了可以用来做MOBA类游戏，同样可以用来做需要大量快速操作的格斗类游戏，本文就是尝试提出一些解决帧同步方案下格斗游戏的优化措施。 同时负责向同步服务器发出操作 “逻辑角色”动画由同步服务器收包得到的数据驱动 Update()事件每秒60个调用，而从同步服务器收包操作，一般每秒15-30个调用，所以，每次“逻辑角色”动画或位置更新，都要以x4 [1510297241073_8858_1510297285746.jpg] 总结 使用预渲染技术的最重要策略，还是坚持帧同步的原则：相同的输入，得到相同的输出。 而预渲染的方案，是把那些严格同步的游戏逻辑、与其表现区分开来，这样可以专门的去让画面看起来更流畅，同时不影响帧同步游戏的“一致性”。
4.4K00发布于 2017-11-13来自专栏关键帧KeyframeMP4 格式：最少加载多少数据就能渲染出视频首帧？优化短视频播放体验必须先了解它丨音视频基础
在现在互联网使用的视频中，MP4 是最常见的格式之一，尤其是短视频。如果我们要对短视频的播放体验做优化，了解 MP4 的格式是非常必要的。 MP4 视频的预加载：最少加载多少数据可以渲染出 MP4 视频首帧。 1、MP4 格式概览 MP4 文件的数据都是封装在一个又一个名为 Box 的单元中。 在 MP4 文件中，Chunk 是最小的基本单位，而不是 Sample。一个 Chunk 里可以包含单个或多个 Sample。这里是为了优化数据的 I/O 读取效率。 结合这个特性，如果我们能够预加载一定的数据量保证 AVPlayer 刚好能把视频首帧渲染出来，这样就能确保视频能迅速开播，并且用户一打开视频就能看到画面，实现了无黑屏。 I 帧的 pkt_pos 和 pkt_size，二者相加就是从文件开始位置取得第一帧视频 I 帧所需要的字节数。
2.6K20编辑于 2022-06-13来自专栏前端|【腾讯云前端性能优化大赛】前端首屏性能优化
这次，就以我的个人博客为例子，从最开始的荒芜状态，向业界网站性能标准“秒开”做一次系统性的性能优化。 以下为初始数据，数据来源使用腾讯云RUM性能监控。 } 3 、异步加载，按需引入 对于我们的网站来说，用户刚进来看到的页面，往往是不需要加载全部资源的，当用户浏览其它页面的时候，才会用到那些资源，自然这些资源我们就可以把他们的加载往后放一放，优先加载首屏需要的资源 4、CDN加速 我们的网站资源都需要从服务器上加载，通常我们都把所有的资源放在自己的服务器上，包括HTML和HTML引用的CSS，JS还有图片等。 6、结尾 经过好几天的优化，在没有上终极首屏优化方案（SSR）之前，网站已经达到了一个还不错的速度： [image-20211223153335103.png] 这里的数据都只是取得首页的数据，不同页面打开的速度可能会有些差别 后续还可以使用SSR方案进行进一步的优化，不过这个方案需要项目整体重构，一时半会儿搞不出来。
2.2K41编辑于 2021-12-27
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号