开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何知道视图是否已绘制

在前端开发中，可以通过以下几种方式来判断视图是否已经绘制：

使用DOMContentLoaded事件：DOMContentLoaded事件在DOM树加载完成后触发，表示页面的HTML结构已经完全加载并解析，但是可能还有一些外部资源（如图片、样式表、脚本等）仍在加载中。可以通过监听DOMContentLoaded事件来执行需要在视图绘制后执行的操作。
使用window.onload事件：window.onload事件在整个页面及其所有外部资源（如图片、样式表、脚本等）都加载完成后触发，表示页面的所有内容都已经加载完毕，包括视图的绘制。可以通过监听window.onload事件来执行需要在视图绘制后执行的操作。
使用requestAnimationFrame方法：requestAnimationFrame是浏览器提供的一个动画渲染方法，它会在浏览器下一次重绘之前执行指定的回调函数。可以利用requestAnimationFrame方法来执行需要在视图绘制后执行的操作，确保操作在下一次重绘之前执行。
使用setTimeout方法：通过将需要在视图绘制后执行的操作放入一个延时执行的函数中，可以利用setTimeout方法来延迟执行这些操作。通常将延时时间设置为0，以确保操作在下一次事件循环中执行，即在视图绘制后执行。

以上方法可以根据具体需求选择使用，一般情况下可以先尝试使用DOMContentLoaded事件或window.onload事件来判断视图是否已经绘制。如果需要更精确的控制，可以考虑使用requestAnimationFrame方法或setTimeout方法。

腾讯云相关产品推荐：

云函数（Serverless）：https://cloud.tencent.com/product/scf
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云数据库 MySQL 版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab

相关搜索:如何知道CSV是否已下载？如何知道QTable是否已加载如何知道活动是否已创建？如何知道React组件是否已挂载？如何知道GRPC连接是否已丢失？如何知道集合视图大纲何时已展开？如何知道用户是否已支付订阅费用 WPF DataGrid:如何知道ValidationTemplate是否已启用 Outlook如何知道是否已发送邮件文件？App Store网站如何知道iTunes是否已安装？如何知道用户是否已手动输入其步骤如何知道Google PubSub订阅者是否已断线如何知道流是否已更改(添加了某些内容)MQTT知道客户端是否已订阅如何知道浏览器中的Javascript是否已关闭？如何在Outlook VBA中知道当前视图是否是搜索结果视图？如何知道canvas何时完成绘制？Android / OneSignal -知道点击的通知是否已分组 Flutter如何知道AudioService已停止？如何知道动态添加的脚本是否已解析/加载/执行？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

android之View绘制

Android系统的视图结构的设计也采用了组合模式，即View作为所有图形的基类，Viewgroup对View继承扩展为视图容器类，由此就得到了视图部分的基本结构--树形结构 View定义了绘图的基本

09

Android性能优化：过渡绘制解决方案

屏幕上某一像素点在一帧中被重复绘制多次，就是过渡绘制。下图中多个卡片跌在一起，但是只有第一个卡片是完全可见的。背后的卡片只有部分可见。但是Android系统在绘制时会将下层的卡片进行绘制，接着再将上层的卡片进行绘制。但其实，下层卡片不可见的部分是不需要进行绘制的，只有可见部分才需要进行绘制。

01

手把手教你读懂源码，View的绘制流程详细剖析

上一篇文章我们分析了View的加载流程，今天我们继续来深入学习View的绘制流程，接着上次的View绘制开始，同样使用的是Android 7.1源码。 1、回顾addView方法上篇文章从a

iOS学习——Quartz2D学习之UIKit绘制

在IOS中绘图技术主要包括：UIKit、Quartz 2D、Core Animation和OpenGL ES。其中Core Animation提供动画实现技术，OpenGL ES是OpenGL针对嵌入式设备的简化版本，用以绘制高性能的2D和3D图形。这里主要UIKit和Quartz 2D。

02

【Android从零单排系列四十五】《Android中自定义View的实现方法》

小伙伴们，在前面的几篇文章中，我们谈到了Android开发中的几种数据存储方式及数据持久化以及数据权限相关的内容，本文我们介绍下Android开发中的另一部分内容，自定义View。

02

突破自定义View性能瓶颈

在Android应用程序中，自定义View是一个非常常见的需求。自定义View可以帮助您创建独特的UI元素，以满足您的应用程序的特定需求。然而，自定义View也可能会导致性能问题，特别是在您的应用程序需要处理大量自定义View的情况下。

03

Android设计模式应用-桥接模式

桥接模式就是把事物和其具体实现分开，使他们可以各自独立的变化。桥接的用意是：将抽象化与实现化解耦，使得二者可以独立变化

02

APP性能测试—过度绘制

过度绘制就是在同一个区域中叠加了多个控件，也就是说一个像素点上会出现多个像素的叠加，实际上呈现在我们眼前的只是最上面的一个。

02

Android视图绘制流程完全解析，带你一步步深入了解View(二)

在上一篇文章中，我带着大家一起剖析了一下LayoutInflater的工作原理，可以算是对View进行深入了解的第一步吧。那么本篇文章中，我们将继续对View进行深入探究，看一看它的绘制流程到底是什么

08

View绘制流程

1. View 树的绘图流程当 Activity 接收到焦点的时候，它会被请求绘制布局,该请求由 Android framework 处理.绘制是从根节点开始，对布局树进行 measure 和 dr

05

翻译_iOS视图编程指南(View Programming Guide for iOS)之视图和窗口体系

前些日子，我发布一个苹果官方文档的翻译，之后就有不少同学朋友问我：翻译苹果官方文档能做什么，开发过程用到的时候很少,浪费时间，还又没什么用。今天，刚好有时间，就在此申明一下翻译苹果官方文档的实质作用：

04

Carson带你学Android：源码解析自定义View Draw过程

类似measure过程、layout过程，draw过程根据View的类型分为2种情况：

02

Android CompoundButton[通俗易懂]

android.widget.Button 　　　　　android.widget.CompoundButton

02

Android组件View绘制流程原理分析

如上图，Activity的window组成，Activity内部有个Window成员，它的实例为PhoneWindow，PhoneWindow有个内部类是DecorView，这个DecorView就是存放布局文件的，里面有TitleActionBar和我们setContentView传入进去的layout布局文件

04

Android界面性能优化必读

Android系统要求每一帧都要在 16ms 内绘制完成，平滑的完成一帧意味着任何特殊的帧需要执行所有的渲染代码（包括 framework 发送给 GPU 和 CPU 绘制到缓冲区的命令）都要在 16ms 内完成，保持流畅的体验。这个速度允许系统在动画和输入事件的过程中以约 60 帧每秒（ 1秒 / 0.016帧每秒 = 62.5帧/秒）的平滑帧率来渲染。

01

Widget，构建Flutter界面的基石

Widget是Flutter开发框架中最基本的概念。前端框架中常见的名词，比如视图（View）、视图控制器（View Controller）、应用（Application）、布局（Layout）等，在Flutter中都是Widget。

03

10w单元格滚动卡顿如何解决？腾讯文档的7个秘笈

导语 |腾讯文档 SmartSheet 视图是多种视图中的一种，该模式下 FPS 仅 20 几帧（普通 Sheet 视图下 58 帧），用户体验非常卡顿。腾讯文档团队针对该问题进行优化，通过禁用取色、多卡片离屏渲染等方式实现 FPS 接近 60 帧，提升两倍多。本文将详细介绍其挑战和解决方案，并输出通用的经验方法。希望本文对你有帮助。目录 1 前言 2 增量渲染 3 分析火焰图 4 禁用取色 5 减少搜索结果匹配 6 避免使用 clone 7 多卡片离屏渲染 7.1 多卡片 vs 整屏 7

05

IOS渲染流程之提交图层数据至RenderThread进程

UIView/CALayer---->CoreAnimation./Core Graphics/Core Image---->GPU Drive-->GPU

01

软件绘制 & 硬件加速绘制【DisplayList & RenderNode】

两者都是从SF获取一块内存，绘制都是在APP端，绘制好后都是通知SF去进行合成图层

05

Android 中文 API （29） —— CompoundButton[通俗易懂]

本章内容是android.widget.CompoundButton，翻译来自德罗德，再次感谢德罗德！期待你一起参与Android API 的中文翻译，联系我over140@gmail.com。

03

软件绘制 & 硬件加速绘制【DisplayList & RenderNode】

两者都是从SF获取一块内存，绘制都是在APP端，绘制好后都是通知SF去进行合成图层

02

自定义View必备知识-View绘制流程

View的绘制是从上往下一层层迭代下来的。DecorView-->ViewGroup（--->ViewGroup）-->View ，按照这个流程从上往下，依次measure(测量),layout(布局),draw(绘制)。

03

实验5 OpenGL模型视图变换

2、移动或者旋转它，当然了，如果它只是计算机里面的物体，我们还可以放大或缩小它（物体运动，让人看它的不同部分）。（模型变换）

03

iOS面试问题总结

（1）并发访问，数据拷贝例如：在列表删除一个cell数据，同时还有一个loadmore加载，那么就需要先记录删除的数据，在加载完成后再判断一次，删除已经删除的数据。（2）串行访问

02

iOS 优化界面流畅的技巧

对象的创建会分配内存、调整属性、甚至还有读取文件等操作，比较消耗 CPU 资源。尽量用轻量的对象代替重量的对象，可以对性能有所优化。比如 CALayer 比 UIView 要轻量许多，那么不需要响应触摸事件的控件，用 CALayer 显示会更加合适。如果对象不涉及 UI 操作，则尽量放到后台线程去创建，但可惜的是包含有 CALayer 的控件，都只能在主线程创建和操作。通过 Storyboard 创建视图对象时，其资源消耗会比直接通过代码创建对象要大非常多，在性能敏感的界面里，Storyboard 并不是一个好的技术选择。

01

Android 自定义View小结（重于理解，不作为教程）

大家都知道 SetContextView是给Activity设置布局的，但是内部还是用的LayoutInflater去实现的，关于LayoutInFlater的实例有两种方法获取得到。

01

setNeedsDisplay看我就懂！

前言： setNeedsDisplay异步执行的。它会自动调用drawRect方法，这样可以拿到 UIGraphicsGetCurrentContext，就可以绘制了。而setNeedsLayout会默认调用layoutSubViews，处理子视图中的一些数据。一、着手我定义了一个UIView的子类，用于演示使用setNeedsDisplay，这个CircleView子类会在draw(_ rect: CGRect)方法内简单绘制一个圆，它有一个颜色属性，这是我们将要设置用来改变圆的颜色。 imp

06

iOS界面渲染流程分析

前言本文阅读建议 1.一定要辩证的看待本文. 2.本文所表达观点并不是最终观点,还会更新,因为本人还在学习过程中,有什么遗漏或错误还望各位指出. 3.觉得哪里不妥请在评论留下建议~ 4.觉得还行的话

02

【基本功】Litho的使用及原理剖析

美美导读：【基本功】专栏又上新了，本期介绍一套高效构建Android UI的声明式框架——Litho。作者将带领大家深入剖析它的原理和用法。

01

自定义View Draw过程- 最易懂的自定义View原理系列（4）

类似measure过程、layout过程，draw过程根据View的类型分为2种情况：

05

OpenGLES（一）- GLKit以及常见API

GLkit是苹果对OpenGL/openGl ES的一次封装，目的是为了简化苹果开发者使用成本,它的出现加快了开发者的开发速度。类似在OPenGL中出现的固定着色器的概念。但是只要是固定的就会有限制，无法进行自定义编程（顶点着色器，片元着色器）

03

CompoundButton

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/133707.html原文链接：https://javaforall.cn

02

自定义View(九)-View的工作原理- View的layout()和draw()

上一节我们将View的测量流程理的差不多了，这篇我们来看下View的剩下的2大流程layout(布局)和draw(绘制)。相对测量来说，布局与绘制就简单了许多，所以我们将这的两大流程放在一起讲解。

02

iOS动画-CALayer基础知识

核心动画Core Animation，其实是由Layer Kit这样一个名字演变而来。它实际上是一个复合引擎，可以将存储在图层树体系中的不同独立图层，尽可能快地组合成不同的可视内容呈现于屏幕上；所以做动画只是Core Animation的特性之一；

05

[UIVIew]谈谈对drawRect的理解

写在前面 UIView对于iOS开发来讲，再熟悉不过了。也正是因为这一点，我们可能会忽略UIView一些特有方法的理解和使用。今天，笔者主要整理一下对drawRect方法的理解和使用。默认情况下，该方法在视图加载过程中不做任何人处理。当子类使用Core Graphics和UIKit绘制视图内容时就需要在该方法中添加绘制的代码。 drawRect简介 drawRect方法在UIView的使用上起着十分关键的作用。不知道大家注意过没有，每一次创建UIView子类文件时候，会有自动带有已注释的drawRec

02

Android开发笔记（十三）视图绘制的几个方法

在自定义视图中，有三个函数可以重写用于界面绘制，在视图创建过程中，三个函数的执行顺序依次是：onLayout、onDraw、dispatchDraw。 1、onLayout(boolean changed, int left, int top, int right, int bottom) : onLayout用于定位该视图在上级视图中的位置，从其参数中就可以看出来。由于该函数没有画布，因此只适合绘制现成的视图控件。 2、onDraw(Canvas canvas) : 自定义控件一般是重写onDraw方法，在画布中绘制各种图形。 3、dispatchDraw(Canvas canvas) : dispatchDraw与onDraw的区别在于：onDraw在绘制下级视图之前，而dispatchDraw在绘制下级视图之后，所以如果不想自己的绘图被下级视图覆盖的话，就要在dispatchDraw中进行绘制操作。为方便记忆，只要是从ViewGroup衍生出的视图，都用dispatchDraw，其他小控件都用onDraw。

03

Flutter里的Widget 到底是什么

Widget 是 Flutter 功能的抽象描述，是视图的配置信息，同样也是数据的映射，是 Flutter 开发框架中最基本的概念。前端框架中常见的名词，比如视图（View）、视图控制器（View Controller）、活动（Activity）、应用（Application）、布局（Layout）等，在 Flutter 中都是 Widget。

01

用两张图告诉你，为什么你的App会卡顿?

知道setContentView()之后发生了什么？知道Android究竟是如何在屏幕上显示我们期望的画面的？对Android的视图架构有整体把握。学会从根源处分析画面卡顿的原因。掌握如何编写一个流畅的App的技巧。从源码中学习Android的细想。收获两张自制图，帮助你理解Android的视图架构。

03

用两张图告诉你，为什么你的App会卡顿?

有什么料？从这篇文章中你能获得这些料：知道setContentView()之后发生了什么？知道Android究竟是如何在屏幕上显示我们期望的画面的？对Android的视图架构有整体把握。学会从根源处分析画面卡顿的原因。掌握如何编写一个流畅的App的技巧。从源码中学习Android的细想。收获两张自制图，帮助你理解Android的视图架构。从setContentView()说起 public class AnalyzeViewFrameworkActivity extends Act

09

Gizmos菜单_gi clamp

在现场查看和游戏视图都有一个小玩意儿菜单。点击小玩意儿场景视图或游戏视图访问工具栏中的按钮，小玩意儿菜单。

01

iOS 页面渲染 - UIView & CALayer

今天我们来聊一聊 UIView 与 CALayer 的相关知识以及它们之间的关系，其实这部分内容要是引申出来会比较多，今天我们先收敛一下，先讲一些基本的东西，后面还会有系列文章对其进行扩展。关于iOS的UI渲染部分，还是建议大家看看Apple的官方文档核心动画编程指南[1]以及WWDC2011的sessionUnderstanding UIKit Rendering[2]。

02

你不知道的Mac屏幕显示图像

首先从过去的 CRT 显示器原理说起。CRT 的电子枪按照上面方式，从上到下一行行扫描，扫描完成后显示器就呈现一帧画面，随后电子枪回到初始位置继续下一次扫描。为了把显示器的显示过程和系统的视频控制器进行同步，显示器（或者其他硬件）会用硬件时钟产生一系列的定时信号。当电子枪换到新的一行，准备进行扫描时，显示器会发出一个水平同步信号（horizonal synchronization），简称 HSync；而当一帧画面绘制完成后，电子枪回复到原位，准备画下一帧前，显示器会发出一个垂直同步信号（vertical synchronization），简称 VSync。显示器通常以固定频率进行刷新，这个刷新率就是 VSync 信号产生的频率。尽管现在的设备大都是液晶显示屏了，但原理仍然没有变。

07

035android初级篇之[转]android的ViewGroup与View

Android中的View包含了用户交互和显示，类似于Windows操作系统中的window。

03

竟如此简单，一文看懂DecorView的一生

DecorView是Android应用程序中所有视图的根视图。它是框架用来管理和显示应用程序界面的核心组件之一。理解DecorView的创建流程对于理解Android视图系统的运作方式至关重要。

01

android SurfaceView绘制实现原理解析

在Android系统中，有一种特殊的视图，称为SurfaceView，它拥有独立的绘图表面，即它不与其宿主窗口共享同一个绘图表面。由于拥有独立的绘图表面，因此SurfaceView的UI就可以在一个独立的线程中进行绘制。又由于不会占用主线程资源，SurfaceView一方面可以实现复杂而高效的UI，另一方面又不会导致用户输入得不到及时响应。在本文中，我们就详细分析SurfaceView的实现原理。在前面Android控件TextView的实现原理分析一文中提到，普通的Android控件

Android中View绘制流程详细介绍

Window即窗口，这个概念在AndroidFramework中的实现为android.view.Window这个抽象类，这个抽象类是对Android系统中的窗口的抽象。在介绍这个类之前，我们先来看看究竟什么是窗口呢？

02

[Android技术专题]应用开发进阶必经之路之性能优化（上）

性能优化在一款产品的迭代过程中非常重要；程序实现了功能、还原产品原型只能保证程序能用，但如果要让用户更愿意使用，产品得好用。试想一下如果你开发的产品启动慢、页面显示需要长时间转圈加载、页面切换卡顿、黑白屏、用一会机器就发烫、耗内存、OOM、程序切换到后台后占用内存无法释放......，这些问题就像正在玩游戏时弹出提示框这类糟糕的用户体验一样让用户恼火，如果用户不得不使用你的产品，可能还会一直忍受；但如果有很多同类竞品，糟糕的用户体验会大大影响留存率。有时候产品在市场上的表现差，真不能全怪产品和运营，程序体验问题也是很大一部分原因。

02

Android View架构总结

View和Activity的区别 android的四大组件，Activity是四大组件中唯一一个用来和用户进行交互的组件。可以说Activity就是android的视图层。如果再细化，Activity相当于视图层中的控制层，是用来控制和管理View的，真正用来显示和处理事件的实际上是View。每个Activity内部都有一个Window对象， Window对象包含了一个DecorView(实际上就是FrameLayout)，我们通过setContentView给Activity设置显示的View实际上都

06

【技术】手持SLAM数据平立面成果生产

一般我们在外业扫描回来的点云的话，可能会有一些数据的倾斜，或者是有一些不需要的点云可以给它切割掉。然后输出平面和立面的那个正射影像，用来后面绘制那个平面图和立面图。

01

绘图黑科技—轻松搭建“真孪生”2D场景

描绘真实的物理世界时，3D的场景能给人更加直观的感受。然而在数字孪生应用中，除了描绘物理世界，很多时候也需要去描绘逻辑世界，表达对象之间的逻辑拓扑关系，比如组态工艺流程、网络拓扑关系等。在对面这些需求时，2D的表现方式显然更为清晰。搭建3D园区和3D城市，可以使用ThingJS的工具，做一些3D可视化的开发。那面对这些2D场景时，该用什么工具呢？

03

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭