- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端劝退师
前端黑科技：美团网页首帧优化实践
本文介绍了如何使用构建时预渲染技术，对移动端首帧白屏问题进行优化。 导读 ? 自JavaScript诞生以来，前端技术发展非常迅速。 移动端白屏优化是前端界面体验的一个重要优化方向，Web 前端诞生了 SSR 、CSR、预渲染等技术。 在美团支付的前端技术体系里，通过预渲染提升网页首帧优化，从而优化了白屏问题，提升用户体验，并形成了最佳实践。 在前端渲染领域，主要有以下几种方式可供选择： ? 然而，作为以用户体验为首要目标的我们发现了一个体验问题：首屏白屏问题。 57%的用户更在乎网页在3秒内是否完成加载。 52%的在线用户认为网页打开速度影响到他们对网站的忠实度。 每慢1秒造成页面 PV 降低11%，用户满意度也随之降低降低16%。
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）性能优化实战-减少首帧绘制时的冗余操作
加载绘制首页不仅是应用冷启动的四个阶段之一，还是首帧绘制最重要的阶段。而它可以分为三个阶段：加载页面、测量和布局、渲染。本文从这三个阶段入手，分成下面三个场景进行案例优化。 按需加载按需加载可以避免一次性初始化和加载所有元素，从而使首帧绘制时加载页面阶段的创建列表元素时间大大减少，从而提升性能表现。 通过减少不合理的容器组件，可以使布局深度降低，布局时间减少，优化布局性能，提升用户体验。 案例：通过Grid网格容器一次性加载1000个网格，并且额外使用3层Flex容器模拟不合理的深嵌套场景使布局时间增加。 条件渲染通过条件渲染替代显隐控制，首帧绘制时的渲染时间明显降低，从而提升性能表现。另外，即使组件处于隐藏状态，在页面刷新时仍存在重新创建过程，因此当对性能有严格要求时建议使用条件渲染代替。
49920编辑于 2024-10-23 - 来自专栏Android开发实战
Android 掉帧优化
掉帧现象又是如何产生的？ 而如果在16ms内没有计算完毕的话，该帧就无法展示，屏幕进入下一个刷新周期，就产生了所谓的掉帧现象。 1. 当然CPU Profile不仅仅用于掉帧优化，有优化的地方就有它的身影，例如启动优化等。 2. 掉帧优化措施 ① 正确使用缓存 关于mCachedViews： mCachedViews针对ItemView的position进行缓存。 ③ 布局优化 布局优化一个比较典型的优化项就是优化过度绘制，打开"开发者选项"中的"调试GPU过度绘制"，就能看到屏幕上每个像素点在屏幕上绘制了多少次。
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 前端性能优化实战：首屏加载从 3s 优化到 800ms
前端性能优化实战：首屏加载从 3s 优化到 800ms 背景与目标 初始指标（移动 4G，冷启动）：TTFB≈300ms，FCP≈2.2s，LCP≈3.0s，JS 传输≈450KB，图片≈1.1MB 优化目标 ：首屏（LCP）≤800ms，FCP≤600ms，JS 首屏传输≤150KB，图片首屏≤200KB，INP≤200ms 方法论：度量→定位→分层优化（传输层/资源层/渲染层/数据层）→回归与监控 基线度量与瓶颈 ） Hero 图像体积大且未按需加载 字体/第三方脚本阻塞渲染 服务器压缩未启用 & 缓存策略缺失 优化策略总览 传输层：HTTP/2/3、Brotli/Gzip 压缩、CDN 与缓存控制 资源层：代码分包与懒加载 、图片与字体优化、资源提示（preload/prefetch） 渲染层：关键 CSS 内联、骨架屏与占位、SSR/SSG/Streaming（按项目选型） 数据层：首屏数据聚合与缓存、降级策略与超时 传输层优化 ：首屏图像使用 preload+响应式；非首屏 loading=lazy 分包后共享依赖重复：检查 rollup chunk 与依赖版本统一 总结 首屏优化是多层协同的工程实践：传输/资源/渲染/数据共同作用
48510编辑于 2025-12-15- 来自专栏蜉蝣禅修之道
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 没有压缩，虽然加上注释也就只有 42 行代码，体积 1.3K jquery 压缩后的代码体积 86K lightbox.js 9.3K，首屏也是加载的 文章图片没有懒加载 原始静态资源大小 优化方案 main.js 压缩后 281B 首屏 JQ 会用到，可以引用公共CDN的路径，这样的好处是首次访问的用户有概率可以命中该版本的 JQ ，从而走本地缓存，同时也可以降低我的服务器带宽压力 鉴于博客的群体访问采用的浏览器版本不低 结果 隔了一天再看统计数据，发现首屏访问速度并没有多少提升，从资源统计数据上来看，依旧存在静态资源访问耗时较长的问题。 这里没有使用 CDN 直接优化，因为这是外物，不能因为优化而优化，在没有找到优化点之前去一顿操作非明智之举。 -SHA:DES-CBC3-SHA:HIGH:!
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 - 来自专栏前端壹栈
umi应用首屏加载速度提高3倍+（通用性能优化）
[hash].js占据的内存是3.5M,响应速度超过了6s,这只是单纯的一个js文件更何况是一个spa首屏加载的文件本身来说就很多。 我打开了百度对, 比了下百度的响应 Response Headers Accept - Encoding: gzip, deflate server: JSP3/2.0.14 Request Headers 配置完成以后,记得重启nginx,当我们在回过头再来看整个network请求,之前占据最大内存的umi[hash].js等在size里面大小缩小了近4倍,整体响应的速度快了3倍+,这个数字真的已经可以说基本上算很快的响应速度 总结 对于前端来说,客户端的性能优化是前端一直追求的目标，那种秒开得到的喜悦。 关于性能优化，个人感慨要有针对性的性能优化，比如首屏速度/压缩文件/整合资源，要学会观察请求响应 - 分析 - 解决问题。
1.2K20发布于 2021-12-01 - 来自专栏腾讯大讲堂的专栏
Hippy首屏渲染优化小结
作者：boxizeng，腾讯高级工程师 |导语 近期在做Hippy首屏节点提前渲染的优化，实现过程中查阅了SDK中相关的源码，对底层实现的理解更深了一步，编写此文小结一番。 android使用 v8 作为 JS 引擎，而 iOS 则为 JSCore，以 v8 为例，其加载js的流程大体上分成： Step1: context 初始化 Step2: 源代码字符串加载 Step3: 与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) 目标储存桶：作为获取首帧图片使用 ； 2、创建好的源目标存储桶在数据万象控制台找到并开启媒体处理功能 image.png image.png image.png 3、在数据万象控制台找到源储存桶创建视频截帧模板及创建工作流 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 详细配置可参考文档
7K40发布于 2020-07-30 - 来自专栏鸿蒙开发笔记
HarmonyOS 开发实践 —— 冷启动首帧完成时延问题分析
冷启动首帧完成时延：指的是应用冷启动时，从点击离手开始到应用进程首帧送显上屏显示的这一段时间，称为冷启动首帧完成时延。 性能参考起止点介绍冷启动首帧完成时延的性能衡量的起点为用户点击应用图标离手点时间，止点为应用首帧送显的时间。注意：如果应用启动时存在广告，需要减去广告时间，即冷启动首帧完成时延计算要去除广告时间。 冷启动首帧完成时延止点确认：冷启动首帧完成时延的终点是应用进程启动后的第一帧。 优化方案应用侧排查Ability生命周期函数onCreate是否存在耗时操作，是否可优化。 3.首页so加载耗时较长导致应用冷启动首帧完成时延不达标问题根因分析H:PageRouterManager::LoadPage下的H:JSPandaFileExecutor::ExecuteFromFile
59410编辑于 2024-12-02 - 来自专栏python3
H3C 帧中断
这里只给出了RT2，也就是做帧中断交换机的设备的配置: <H3C>sy [H3C]fr switching [H3C]int s0/2/0 [H3C-Serial0/2/0]link-protocol fr [H3C-Serial0/2/0]fr interface-type dce [H3C-Serial0/2/0]fr lmi type q933a [H3C-Serial0/2/0]baudrate 103 interface s0/2/2 dlci 301 [H3C-Serial0/2/0]un shut [H3C-Serial0/2/0]quit [H3C]int s0/2/1 [H3C-Serial0 H3C-Serial0/2/1]baudrate 64000 [H3C-Serial0/2/1]fr dlci-switch 201 interface s0/2/0 dlci 102 [H3C-Serial0 /2/1]un shut [H3C-Serial0/2/1]quit [H3C]int s0/2/2 [H3C-Serial0/2/2]link-protocol fr [H3C-Serial0
59020发布于 2020-01-15 - 来自专栏code秘密花园
Vue CLI 首屏优化技巧
首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了，没有用户能忍受 9s的白屏而不关闭页面的 过程中，我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3，所以接下来还会介绍一些它们在优化上的异同 首屏需要加载的文件变成了橙色的部分，被小弟们分流出去了 300k 如果是在 vuecli 3中，我们还需要多做一步工作 因为 vuecli 3默认开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 设置完毕后，首屏就只会加载当前页面路由的组件了 element-ui按需加载 ? 首屏加载资源198k，加载时间1s，相比原来速度提升了90% 后记：css是否要拆分 vuecli 3和 vuecli2.x还有一个区别是 vuecli 3会默认开启一个 css分离插件 ExtractTextPlugin ，具体项目具体分析吧 总结 性能优化是一个非常令人愉悦的过程，同时也是个深坑，有着太多东西，本篇文章开了个头，希望能对大家有所帮助
92710发布于 2019-12-02 - 来自专栏Czy‘s Blog
Vue首屏性能优化组件
Vue首屏性能优化组件 简单实现一个Vue首屏性能优化组件，现代化浏览器提供了很多新接口，在不考虑IE兼容性的情况下，这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情，当然为了考虑 IE我们也可以在封装组件的时候为其兜底，本文的首屏性能优化组件主要是使用IntersectionObserver以及requestIdleCallback两个接口。 描述 先考虑首屏场景，当做一个主要为展示用的首屏时，通常会加载较多的资源例如图片等，如果我们不想在用户打开时就加载所有资源，而是希望用户滚动到相关位置时再加载组件，此时就可以选择IntersectionObserver }" ></lazy-load>
3< if (window.requestIdleCallback) { requestIdleCallback(this.loadComponent, { timeout: 31.2K20发布于 2021-11-11来自专栏前端迷vue-cli首屏优化技巧
首屏页面整整加载了 9s 光加载那个大文件就花了 8s 这必须得做个优化了，没有用户能忍受 9s的白屏而不关闭页面的 过程中，我还顺便把项目从 vuecli 2.x迁移到了 vuecli 3，所以接下来还会介绍一些它们在优化上的异同 首屏需要加载的文件变成了橙色的部分，被小弟们分流出去了 300k 如果是在 vuecli 3中，我们还需要多做一步工作 因为 vuecli 3默认开启 prefetch(预先加载模块)，提前获取用户未来可能会访问的内容 设置完毕后，首屏就只会加载当前页面路由的组件了 element-ui按需加载 ? 首屏加载资源198k，加载时间1s，相比原来速度提升了90% 后记：css是否要拆分 vuecli 3和 vuecli2.x还有一个区别是 vuecli 3会默认开启一个 css分离插件 ExtractTextPlugin ，具体项目具体分析吧 总结 性能优化是一个非常令人愉悦的过程，同时也是个深坑，有着太多东西，本篇文章开了个头，希望能对大家有所帮助 参考文章 Vue打包优化之code spliting https://
1.1K10发布于 2019-11-14来自专栏韩伟的专栏格斗类帧同步游戏的优化
由于现在4g手机网络越来越普及，绝大多数用户的时延都可以在150ms以内，所以一些快节奏的帧同步网络游戏开始大行其道，现在最火的帧同步游戏无疑是某农药了。 帧同步技术除了可以用来做MOBA类游戏，同样可以用来做需要大量快速操作的格斗类游戏，本文就是尝试提出一些解决帧同步方案下格斗游戏的优化措施。 [1510297241073_8858_1510297285746.jpg] 总结 使用预渲染技术的最重要策略，还是坚持帧同步的原则：相同的输入，得到相同的输出。 而预渲染的方案，是把那些严格同步的游戏逻辑、与其表现区分开来，这样可以专门的去让画面看起来更流畅，同时不影响帧同步游戏的“一致性”。
4.4K00发布于 2017-11-13来自专栏webTower彻底了解CSS3帧动画
CSS3 中有一个 animation 属性，用它可以创建出帧动画。 例如下面的代码： .box{ margin: 40px; height: 100px; width: 100px; /* 可以一次性指定多个帧动画，每个帧动画用逗号隔开 当值的个数不多于动画帧个数时，多出的动画以第一个值为准。 a1 和 a3 会有过渡效果。 backwards 动画将在应用于目标时立即应用第一个关键帧中定义的值，并在animation-delay 期间保留此值。第一个关键帧取决于 animation-direction的值。
1.2K20发布于 2020-06-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号