- 综合排序
- 最热优先
- 最新优先
- 来自专栏码上就说
ExoPlayer漫谈之提升渲染性能
outputBufferId) outputFormat = codec.getOutputFormat(); // option B } } codec.stop(); codec.release(); 我们为了提升 ExoPlayer的渲染性能,核心的思路是两个: MediaCodec从同步模式切换为异步模式 播放器在独立的线程中将input buffer提交给MediaCodec ExoPlayer中异步模式的应用 从改善前和改善后的流程分析来看, 改善后的流程节省了等待音频解析的时间,可以在异步线程中解出视频流数据立即渲染出来, 提升了渲染性能.
1.5K30发布于 2021-01-19 - 来自专栏播放器漫谈
ExoPlayer 漫谈之提升渲染性能
outputFormat = codec.getOutputFormat(); // option B } } codec.stop(); codec.release(); 我们为了提升 ExoPlayer的渲染性能,核心的思路是两个: MediaCodec从同步模式切换为异步模式 播放器在独立的线程中将input buffer提交给MediaCodec ExoPlayer中异步模式的应用 q-signature=d92a41668d7f7755a4648d6f8acdbcd8f5b4fad6] 从改善前和改善后的流程分析来看, 改善后的流程节省了等待音频解析的时间,可以在异步线程中解出视频流数据立即渲染出来 , 提升了渲染性能.
1.6K31发布于 2021-01-12 - 来自专栏迈向前端工程师
提升CSS渲染性能的骚操作
考核内容: CSS渲染 题发散度: ★★ 试题难度: ★★ 看看大家的选择 解题: 如何使css的渲染效率更高效，也就是如何加快css的渲染速度 先做一个引入。 不过渲染速度各不相同。 ID的渲染速度是最快的， 如 #menu{……} 但是当ID也其他标签组合的话他的渲染速度就有可能变得很低。 如 #menu li{……} 为什么呢？ “#FFFFFF" : “#AAAAAA" ); 这个表达式会持续的在页面上计算样式，影响页面的性能。并且css表达式只被IE支持。 在线测试: 答案： A. 尽量使用CSS子代选择器尽量多的嵌套
1.1K40发布于 2021-06-16 - 来自专栏FE32 Code
边缘渲染是如何提升前端性能的？
前端渲染的发展 在讲ESR（Edge Side Rendering，边缘渲染）如何提速渲染之前，我们有必要先了解一下前端渲染的发展历史以及前端各项性能指标优化是如何被提上议程的，之后我们再反观ESR的出现就会发现也是水到渠成 其实整个前端渲染方式也是随着前端技术的演进而不断革新的，大致可以分为如下历程。 首先是前后端全是JS语法，大部分代码都是可复用的，其次是SEO场景友好，服务端渲染好后直接返回最终的HTML，减少了白屏等待时间，过多异步请求的导致的性能问题也可下放到服务端解决，也能有效避免多次的数据获取 结语和展望 技术实现： ESR适应于对页面渲染性能较高的场景，借助边缘计算在SSR的基础上进一步优化首屏绘制的时间，降低用户页面的白屏等待时间； 部署方式： 目前实现方式主要借助于边缘faas部署ESR 边缘js运行时）部署，用户无需关心边缘节点，只需专注于代码本身，修改代码上传发布即可，相对于node服务，js运行时能够提供更高的运行效率 技术展望： ESR目前是在SSR基础上，结合边缘计算进行的性能提升
1.3K10编辑于 2022-10-27 云渲染与边缘计算结合提升性能技术指南
摘要 本文旨在解析云渲染与边缘计算结合的核心价值，并提供操作指南及增强方案。通过本文，读者将了解如何利用腾讯云产品实现高性能的云渲染服务。 1. 1.2 实施中的三大关键挑战 性能瓶颈：云渲染对网络带宽和计算资源要求高，边缘计算节点的性能可能不足以处理高负载。 安全风险：数据在云端和边缘节点传输过程中可能遭受攻击，需确保数据传输安全。 通用方案 腾讯云方案 部署效率 低 高 成本效益 中 高 安全性 中 高 数据支撑：据IDC 2024报告，采用腾讯云TKE后容器部署效率提升 3.2 场景化案例 在线游戏：某游戏公司通过腾讯云GPU云服务器和CDN服务，实现了全球玩家的低延迟访问，提升了游戏体验。 以上指南提供了云渲染与边缘计算结合提升性能的技术解析、操作指南以及增强方案，帮助用户在腾讯云上实现高性能的云渲染服务。
37810编辑于 2025-07-29- 来自专栏前端Q
两行CSS让长列表性能渲染提升7倍！
今天咱们来看两个可以 直接提升渲染性能的 CSS 属性。 content-visibility contain-intrinsic-size 这两个 CSS 属性，主要针对 长列表渲染。 ，所以当它被移除或者设为可见时，浏览器不会重新渲染，而是会应用缓存，所以对于需要频繁切换显示隐藏的元素，这个属性能够极大地提高渲染性能。 虽然用户看不到，但浏览器却会实实在在的去渲染，以至于浪费大量的性能。所以我们得想办法让浏览器不渲染非可视区的内容就能够达到提高页面渲染性能的效果。 ，有content-visibility的页面渲染花费时间大概是37ms，而没有content-visibility的页面渲染花费时间大概是269ms，提升了足足有7倍之多！！！ 对于列表元素更多的页面，content-visibility带来的渲染性能提升会更加明显。
61510编辑于 2023-12-01 - 来自专栏前端入门学习
如何从请求、传输、渲染3个方面提升Web前端性能
通过上面的路径可以看出浏览器分为请求、传输、渲染三部分来实现用户的访问，本文就从这三个部分来浅析如何提升WEB前端性能。 请求 浏览器为了减少请求传输，实现了自己的缓存机制。 渲染 浏览器在加载了html后，就会一边解析，一边根据解析出来的结果进行资源请求，并生成DOM树。而加载完毕的CSS，则被渲染引擎根据生成好的DOM树，来生成渲染树。 重新绘制指的是绘制DOM节点对应的渲染节点，重新排列是指重新计算这些节点在浏览器界面的位置。很显然，重排是非常耗性能的。我们要做的是减少重排的次数。 生成DOM树的时候，我们可以通过减少DOM节点来优化性能。最初都是用table布局，节点深度和数量相当复杂，性能很差。同样CSS作为层叠样式表，层级也不可太深，不然遍历的成本很高。 另外CSS的expression属性相当耗性能，能不用则不用。动画效果能用CSS写的就不用JS写，渲染引擎不一样，性能损耗也不一样。 上面说的是解析渲染的过程，我们再接着说说用户交互操作的过程。
96010发布于 2019-07-23 - 来自专栏宜信技术实践
如何从请求、传输、渲染3个方面提升Web前端性能
通过上面的路径可以看出浏览器分为请求、传输、渲染三部分来实现用户的访问，本文就从这三个部分来浅析如何提升WEB前端性能。 一、请求 浏览器为了减少请求传输，实现了自己的缓存机制。 三、渲染 浏览器在加载了html后，就会一边解析，一边根据解析出来的结果进行资源请求，并生成DOM树。而加载完毕的CSS，则被渲染引擎根据生成好的DOM树，来生成渲染树。 重新绘制指的是绘制DOM节点对应的渲染节点，重新排列是指重新计算这些节点在浏览器界面的位置。很显然，重排是非常耗性能的。我们要做的是减少重排的次数。 生成DOM树的时候，我们可以通过减少DOM节点来优化性能。最初都是用table布局，节点深度和数量相当复杂，性能很差。同样CSS作为层叠样式表，层级也不可太深，不然遍历的成本很高。 另外CSS的expression属性相当耗性能，能不用则不用。动画效果能用CSS写的就不用JS写，渲染引擎不一样，性能损耗也不一样。 上面说的是解析渲染的过程，我们再接着说说用户交互操作的过程。
2.1K30发布于 2019-06-28 - 来自专栏喵喵侠的社区活动征文
Vue项目中的虚拟滚动：提升页面渲染性能的最佳实践
尤其在数据量较大的情况下，页面的渲染性能会直接影响用户体验。使用虚拟滚动技术，可以有效解决大数据量下的渲染性能问题。本篇文章将带你深入了解虚拟滚动的应用，帮助你在Vue项目中优化页面渲染性能。 这种方法大幅减少了DOM节点的数量，从而提升了渲染性能和滚动流畅度。虚拟滚动的核心有以下 4 点：渲染可见元素：虚拟滚动只会渲染当前视口内的元素，而不是整个列表或表格。 这不仅提高了渲染速度，还减小了内存占用，从而提升了整体性能。占位元素：为了确保滚动条的正确性，虚拟滚动技术通常会使用一个高度为所有元素总高度的占位元素。 如果数据少，一次性渲染也还好，数据多了，页面操作必然会有些卡顿的，这对页面性能消耗比较大。选择虚拟滚动，就能很好的解决这个问题。 总结通过引入虚拟滚动技术，我们可以显著提升大数据量列表的渲染性能和用户滚动体验。虚拟滚动通过只渲染可视区域的内容，减少了DOM操作和内存占用，解决了传统大数据量渲染带来的性能瓶颈问题。
7.8K10编辑于 2024-06-25 - 来自专栏Web 技术
原来这样就可以提升页面首屏的渲染性能
我们知道渲染页面是一个将服务器的响应内容翻译成图片的过程。但是，如果你页面的渲染性能比较糟糕的话，可能会带来相对较高的跳出率。 在本文中，我将重点关注网页的初始渲染，即它从解析 HTML 开始。 优化相关结论 因此，根据这一过程，我们在优化性能方面，得出了一些结论。 如果你要提升页面初始化渲染的性能，你需要： 减少传输的数据量 减少浏览器必须下载的资源数量（尤其是阻塞的资源） 减小 CRP 的长度 同时，我们会根据下面 3 个指标来衡量优化的效率： FP(First 性能优化策略 鉴于我们在上面得出的结论，我们得出网站性能优化有三种主要策略： 尽量减少通过网络传输的数据量； 减少通过网络传输的资源总数； 缩短关键渲染路径； 1. 作为 Web 开发人员，你可以将本文作为参考，并始终记住在实验之前和之后测量性能。 浏览器开发人员尽最大努力优化你访问的每个页面的网站性能，这就是浏览器通常实现所谓的“预加载器”的原因。
1.1K40编辑于 2022-07-29 - 来自专栏技术墨客
React 渲染性能优化
性能优化 在React内部已经使用了许多巧妙的技术来最小化由于Dom变更导致UI渲染所耗费的时间。对于很多应用来说，使用React后无需太多工作就会让客户端执行性能有质的提升。 使用生产模式来构建应用 如果在开发和使用的过程中感觉了React应用有明显的性能问题，请先确认是否已经构建了压缩后的生产包： 在单页面用中，打包之后的生产文件应该是.min.js版本。 使用chrome分析组件的渲染时间线 在开发模式中下你可以直接在chrome的性能工具中看到组件是如何装载、更新和卸载的。例如下面的图片展示的效果： 在chrome中按照以下步骤执行： 使用? 关于分析的数据，需要明确的是：渲染的时间只是一个相对的参考值，在构建成生产包之后，渲染的速度会更快。尽管如此，这些数据仍然能够帮助我们分析是否有不相关的UI被错误的更新，以及UI更新的频率和深度。 使用不可变数据后，可以为React提供不错的性能提升。
1.3K30发布于 2018-08-07 - 来自专栏劝学
性能优化之渲染
关键英文词: layout paint composite 渲染的管道流程 管道，恩， 跟linux上的概念很像，上一个处理完了交给下一个 合成器层为什么牛 合成器线程可以单独处理用户的交互并使内容更变 动画性能优化(没有使用transform或opacity的动画) FLIP: aerotwist.com/blog/flip-y… 能立即触发布局的js方法(forces a sync layout) ele.getBoundingClientRect() requestAnimationFrame 确保回调在下一帧开始时运行，确保当前样式已渲染OK requestAnimationFrame(function
45310发布于 2021-01-21 - 来自专栏社区的朋友们
react 渲染性能优化
作者 ：王学禹 导语 react 性能提升的方法之一是尽量减少 DOM 对比和冗余操作，从而减少组件重复渲染；刚开始使用 react 的时候只专注于对于逻辑的处理，导致很多地方会出现重复渲染或者修改很小的地方引发全部或者不相干的区块重新渲染的情况 ；这次准备逐步对写过的代码进行重新 review ，记录一下对于性能优化的实践。 按需渲染 在非技术层面，可以考虑对页面进行分块按需加载和渲染，即优先请求和渲染页面主体，延迟请求加载非页面主体内容； 如页面分为左右两个区块，左侧区块为页面主体；可以考虑先异步请求左侧数据并进行渲染 一个很简单的想法是在shouldComponentUpdate函数中对前后的数据做深检查，遍历所有的属性，如果相等则不进行重新渲染；但是如果在数据结构很复杂的情况下，检查比较的代价是灰常昂贵的，可能性能反倒还不如干脆直接重新渲染 因此通过借助immutable data（updateaddons）+ 浅比较（pureComponent），我们可以更好的避免react组件的重复渲染，从而有效的提高性能。
2.7K00发布于 2017-05-04 5G网络与云渲染技术指南：提升延迟性能的实践
通过深入分析5G网络的特点和云渲染技术的应用场景，提供详细的操作指南，并对比通用方案与腾讯云方案的差异，展示腾讯云产品在性能优化和成本效益上的优势。 结合5G网络的低延迟和高带宽特性，云渲染能够提供更流畅的用户体验，特别是在需要实时渲染的VR/AR应用、在线游戏和视频流服务中。 操作示例：通过腾讯云的网络安全服务，为云渲染服务配置SSL证书，保护数据传输。 性能优化： 原理说明：利用5G网络的低延迟特性，优化云渲染服务的响应时间。 依赖于传统网络 5G网络下，延迟降低50% 安全性 基本加密 提供高级安全服务，如DDoS防护 成本效益 高成本 按需付费，成本降低30% 场景化案例： 据IDC 2024报告，采用腾讯云TKE后容器部署效率提升 通过本文的技术指南，读者可以深入了解5G网络与云渲染技术结合的潜力和实施步骤，以及腾讯云产品如何帮助解决实施中的挑战，提升性能和降低成本。
37310编辑于 2025-07-29- 来自专栏前端自习课
【优化】1141- 网页渲染性能优化 —— 渲染原理
作者：晨风明悟 链接：https://zhuanlan.zhihu.com/p/39879808 渲染原理 在讨论性能优化之前，我们有必要了解一些浏览器的渲染原理。 参考资料 浏览器的工作原理：新式网络浏览器幕后揭秘 —— 解析器和词法分析器的组合 浏览器渲染过程与性能优化 —— 构建DOM树与CSSOM树 在浏览器的背后（一） —— HTML语言的词法解析 在浏览器的背后 参考资料 无线性能优化：Composite —— 从 LayoutObjects 到 PaintLayers Chromium网页Render Layer Tree创建过程分析 WEBKIT 渲染不可不知的这四棵树 提升原因 Render Layer 提升为 Composited Layer 的理由大致概括如下，更为详细的说明可以查看 无线性能优化：Composite —— 从 PaintLayers 到 GraphicsLayers 参考资料 无线性能优化：Composite —— 从-PaintLayers-到-GraphicsLayers Webkit 渲染基础与硬件加速 Chromium网页Graphics Layer Tree
93130发布于 2021-11-17 - 来自专栏Flutter
Flutter 渲染性能问题分析
正文 我在Flutter vs Chromium 动画渲染的对比分析一文中对 Flutter 和 Web (Chromium) 的各种动画的理论性能优劣进行了分析，其中一个主要结论是，由于惯性滚动处理机制和光栅化机制的不同 在分析的过程中，我们对 Flutter 的渲染机制有了更深入的了解，这篇文章就是对比 Web (Chromium) 和 Native (Android)，对 Flutter 的渲染性能问题进行深入分析， 虽然它在渲染性能上有不少缺陷，但是某种程度上，某些缺陷也是为了实现更高层次的设计目标而不得不承受的结果。 Web 页面的高复杂度，高不确定性有关，甚至某种程度上牺牲了一些渲染效果和其它动画的渲染性能。 总的来说，测试的业务页面运行在我们优化过后的引擎，整体流畅度能够明显提升一个台阶，也基本实现了我们对标原生流畅度的目标。
3.3K20发布于 2021-04-02 - 来自专栏新零售项目实践
性能提升实战：useEffectEvent 优化供应链大屏的实时数据渲染
5.1量化性能提升通过在实际供应链大屏项目中实施useEffectEvent优化，我们观测到了显著的性能提升。 以下是通过ChromeDevTools和ReactProfiler收集的关键指标对比：性能指标优化前优化后提升幅度组件重渲染频率3-5次/秒0.5-1次/秒降低70-80%WebSocket重连次数15 5.2渲染性能对比可视化以下图表直观展示了优化前后的渲染性能差异：从图中可以看出，使用useEffectEvent优化后，渲染帧率从平均22FPS提升到58FPS，达到了接近流畅的水平。 核心价值总结：性能显著提升：通过减少不必要的Effect重执行和组件重渲染，大幅提升了大屏界面的流畅度和响应速度。代码可维护性增强：将副作用逻辑清晰分离，使组件代码更易于理解、测试和维护。 前端开发者应持续关注React性能优化模式的发展，不断提升实时数据应用的质量标准。
14120编辑于 2026-02-10 - 来自专栏被删的前端游乐场
前端性能优化--渲染篇
对于内容复杂和变更频繁的前端应用，页面渲染也常常是性能优化的核心场景。前面我有给大家整体地讲过《前端性能优化--方案归纳篇》，其实里面已经囊括了大多数场景下的一些性能优化的方向。 关于加载流程相关的优化，也有在《前端性能优化--加载流程篇》一文中进行详细的介绍。本文主要围绕页面渲染相关的内容，来进行性能优化分析。首屏渲染说到页面渲染，首屏的渲染显然是最首要的。 如果是想要对项目做差异化服务、做资源的拆分和优化，则可能随着项目的复杂度增加，方案难度提升、实现成本也增长。二、首屏内容渲染对于首屏内容渲染的过程，更多时候我们是指浏览器渲染 HTML 的过程。 DOM 数量，减少浏览器渲染过程中的计算耗时通过合理使用浏览器 GPU 合成，提升浏览器渲染效率以上这些，是我们在做首屏渲染时考虑渲染过程的优化点。 越是基础和简单的点，反而往往会在实际写代码的时候被忽略，直到性能出现了问题，这些基础的优化点才会被注意到。当然，首屏性能的提升，除了渲染相关的，也还有上一篇我们提到的加载流程相关的优化。
90430编辑于 2024-01-18 - 来自专栏SpringBoot
提升Java性能
如果项目着眼于尽快无BUG上线，那么此时可以抓大放小，代码的细节可以不精打细磨；但是如果有足够的时间开发、维护代码，这时候就必须考虑每个可以优化的细节了，一个一个细小的优化点累积起来，对于代码的运行效率绝对是有提升的 Java编译器会寻找机会内联所有的final方法，内联对于提升Java运行效率作用重大，具体参见Java运行期优化。 此举能够使性能平均提高50% 。 由于Java虚拟机不仅要花时间生成对象，以后可能还需要花时间对这些对象进行垃圾回收和处理，因此，生成过多的对象将会给程序的性能带来很大的影响。 StringBuilder(String str) // 默认分配16个字符+str.length()个字符空间 可以通过类（这里指的不仅仅是上面的StringBuilder）的来设定它的初始化容量，这样可以明显地提升性能 使用带缓冲的输入输出流进行IO操作 带缓冲的输入输出流，即BufferedReader、BufferedWriter、BufferedInputStream、BufferedOutputStream，这可以极大地提升
93431发布于 2018-11-05 - 来自专栏Android开发实战
Android性能优化-渲染优化
当然目前我们好多同学在开发的工程中，经常会忽略渲染优化这一块，主要的原因可能是 项目没要求，能满足功能则可 缺少意识，没有做性能优化的意识 缺少用工具分析，主观感受不强 需求的苦海，无法脱身(有多少童鞋戳中泪点 渲染管线 我们定义好了一个xml的布局界面后，是怎样最终呈现在我们的手机屏幕上的呢？ 这里我们借助Google官方的性能优化的一张示例图来说明。 ? 箭头1为我们当前View节点的界面，我们可以观察当前节点的渲染时间 箭头2为触发检测渲染性能的按钮 箭头3为渲染性能的显示，有绿、黄、红三种颜色 三个圆点分别代表：测量、布局、绘制三个阶段的性能表现。 高性能和完美的设计，往往会碰到一种性能问题，即过度绘制。过度绘制是一个术语，指的是屏幕上的某个像素点在同一帧的时间内被绘制了多次。 首先我们要从视图中清除那些，不必要的背景和图片，他们不会在最终渲染图像中显示，这些都会影响性能。其次，对视图中重叠的屏幕区域进行定义，从而降低CPU和GPU的消耗。
1.8K20发布于 2018-10-22
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号