Image rendering processing method and device
By obtaining the JS event queue in React Native and using cached bitmap rendering during event handling delays, the problems of video playback stuttering and frame dropping were solved, achieving highly smooth video rendering.
Patent Information
- Application Number
- CN202310212910.5
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2023-02-28
- Publication Date
- 2025-12-09
- Estimated Expiration
- 2043-02-28
AI Technical Summary
The existing React Native rendering mechanism causes the main thread to fail to render due to event processing delays, resulting in video playback stuttering and frame drops.
During video playback, the JS event queue is retrieved. If the event processing status is detected as "processing", the cached bitmap of the previous frame image is retrieved from the cache for rendering, and a marker is generated to distinguish the rendering method, ensuring normal rendering after the event processing is completed.
By using cached bitmap rendering technology, video playback stuttering was eliminated, ensuring a smooth rendering speed of 60 frames per second, and solving the stuttering and frame dropping issues in RN applications.
Smart Images
Figure CN116208810B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of image processing, and particularly relates to an image rendering processing method and device. BACKGROUND
[0002] In order to better publicize products and services to customers, a bank can produce corresponding video content, and customers can intuitively and vividly understand the products and services by playing the video content.
[0003] React Native (RN for short) is an open source cross-platform mobile application development framework, which can support two platforms of Android and IOS, and is the most widely used cross-platform mobile application development framework at present. The current RN rendering mechanism is: after receiving various events, waiting for the event processing to be completed, adding the message queue, synchronizing to the native, and performing corresponding rendering.
[0004] The existing rendering scheme, after receiving an event source, if the event processing appears a delay, will make the main thread unable to obtain the current event processing result, and further will cause the main thread unable to perform rendering, will appear time delay, produces application frame loss, and the user will appear the carding phenomenon when watching the video. SUMMARY
[0005] In view of the problems in the prior art, the embodiments of the present application provide an image rendering processing method and device, which can at least partially solve the problems in the prior art.
[0006] In one aspect, the present application provides an image rendering processing method, comprising:
[0007] acquiring a JS event queue in a video playing process; the JS event queue comprises an event processing state corresponding to each event respectively, and the event processing state is determined according to whether the event processing is timed out;
[0008] if it is determined that at least one event processing state of the events is in a processing state, obtaining a cache bitmap of a previous frame image of the current frame image from the cache; the cache pre-stores a bitmap of each frame image;
[0009] rendering the cache bitmap of the previous frame image of the current frame image.
[0010] In one aspect, the present application provides an image rendering processing method, comprising:
[0011] receiving the JS event queue periodically sent by the JS through the native.
[0012] In one aspect, the present application provides an image rendering processing method, comprising:
[0013] Generate the mark information of the rendered image based on the cache bitmap.
[0014] The image rendering processing method further comprises:
[0015] If it is determined that the event processing state of all events is the processing completed state, the bitmap of the current frame image is rendered, and the bitmap of the current frame image is stored in the cache.
[0016] The image rendering processing method further comprises, before the step of rendering the bitmap of the current frame image:
[0017] If it is determined that the mark information is contained in the current frame image, the mark information is deleted.
[0018] The image rendering processing method further comprises, before the step of receiving the JS event queue periodically sent by the JS through the native:
[0019] The JS adds the event to be processed to the event collection;
[0020] The processing state of each event in the event collection is detected, and the processing state of each event is marked according to the detection result;
[0021] The JS event queue is periodically sent to the native; the JS event queue comprises the event processing state corresponding to each event.
[0022] The detection of the processing state of each event in the event collection and the marking of the processing state of each event according to the detection result comprises:
[0023] After each event is processed, the processing state of the processed event is marked as the processing completed state;
[0024] The processing state of the event which has not been processed for more than a preset time length is marked as the processing state.
[0025] In one aspect, the application provides an image rendering processing device, comprising:
[0026] The first acquisition unit is configured to acquire the JS event queue during the video playing process; the JS event queue comprises the event processing state corresponding to each event, and the event processing state is determined according to whether the event processing is timed out;
[0027] The second acquisition unit is configured to acquire the cache bitmap of the previous frame image of the current frame image from the cache if it is determined that the event processing state of at least one event is the processing state; the cache pre-stores the bitmap of each frame image.
[0028] The rendering unit is configured to render the cache bitmap of the previous frame image of the current frame image.
[0029] In still another aspect, an electronic device is provided, comprising: a processor, a memory and a bus, wherein,
[0030] The processor and the memory communicate with each other through the bus;
[0031] The memory stores program instructions executable by the processor, and the processor invoking the program instructions can execute the following method:
[0032] acquire a JS event queue in a video playing process; the JS event queue comprises event processing states corresponding to respective events, and the event processing states are determined according to whether event processing is timed out;
[0033] if it is determined that at least one event processing state is in a processing state, acquire a cache bitmap of a previous frame image of a current frame image from a cache; the cache pre-stores bitmaps of each frame image;
[0034] render the cache bitmap of the previous frame image of the current frame image.
[0035] The embodiments of the present application provide a non-transitory computer readable storage medium, comprising:
[0036] The non-transitory computer readable storage medium stores computer instructions, and the computer instructions make the computer execute the following method:
[0037] acquire a JS event queue in a video playing process; the JS event queue comprises event processing states corresponding to respective events, and the event processing states are determined according to whether event processing is timed out;
[0038] if it is determined that at least one event processing state is in a processing state, acquire a cache bitmap of a previous frame image of a current frame image from a cache; the cache pre-stores bitmaps of each frame image;
[0039] render the cache bitmap of the previous frame image of the current frame image.
[0040] The image rendering processing method and device provided by the embodiments of the present application acquire a JS event queue in a video playing process; the JS event queue comprises event processing states corresponding to respective events, and the event processing states are determined according to whether event processing is timed out; if it is determined that at least one event processing state is in a processing state, a cache bitmap of a previous frame image of a current frame image is acquired from a cache; the cache pre-stores bitmaps of each frame image; and the cache bitmap of the previous frame image of the current frame image is rendered, which can improve the fluency of the video playing process. BRIEF DESCRIPTION OF DRAWINGS
[0041] In order to make the technical solutions of the embodiments of the present application or the prior art clearer, the accompanying drawings needed in the embodiments or prior art description will be briefly introduced. Obviously, the accompanying drawings in the following description only aim to some embodiments of the present application, and other drawings can be obtained by those skilled in the art without any creative effort. In the drawings:
[0042] Figure 1 is a flowchart of an image rendering processing method provided by an embodiment of the present application.
[0043] Figure 2 is a flowchart of an image rendering processing method provided by another embodiment of the present application.
[0044] Figure 3 is a structural diagram of an image rendering processing device provided by an embodiment of the present application.
[0045] Figure 4 is an electronic device entity structure diagram provided by an embodiment of the present application. DETAILED DESCRIPTION
[0046] In order to make the technical solutions of the embodiments of the present application or the prior art clearer, the accompanying drawings needed in the embodiments or prior art description will be briefly introduced. Obviously, the accompanying drawings in the following description only aim to some embodiments of the present application, and other drawings can be obtained by those skilled in the art without any creative effort. In the drawings:
[0047] Related terms are explained as follows:
[0048] Native: refers to the part of the RN code processed by iOS or android itself.
[0049] JS: refers to the part of the RN code processed by Java script.
[0050] Frame: the application is called a frame once rendered, usually 60 frames per second, and the time interval between two frames is 16.67 ms.
[0051] Drop frame: the number of frames per second of the application is less than 60 frames, and the phenomenon of obvious application jamming is felt.
[0052] Figure 1 is a flowchart of an image rendering processing method provided by an embodiment of the present application, as shown in Figure 1 The image rendering processing method provided by the embodiment of the present application comprises:
[0053] Step S1: obtaining a JS event queue in a video playing process; the JS event queue comprises event processing states corresponding to respective events, and the event processing states are determined according to whether event processing is timed out.
[0054] Step S2: if it is determined that at least one event processing state of an event is in a processing state, obtaining a cache bitmap of a previous frame image of a current frame image from a cache; the cache pre-stores a bitmap of each frame image.
[0055] Step S3: rendering the cache bitmap of the previous frame image of the current frame image.
[0056] In the above step S1, the device obtains a JS event queue in a video playing process; the JS event queue comprises event processing states corresponding to respective events, and the event processing states are determined according to whether event processing is timed out. The device can be a computer device executing the method, for example, can comprise a server. It should be noted that the data acquisition and analysis of the embodiments of the present application are authorized by a user. As shown in the figure, in the video playing process, each frame image needs to be rendered, specifically, a bitmap of the image is rendered, and is displayed through a display screen. Bitmap rendering can be realized by enabling an application program. Figure 2
[0057] It can be understood that in the video playing process, if a current frame image is denoted as t, bitmaps of t-1, t-2,..., t-m frame images can be all stored in a cache.
[0058] The JS event queue can be understood as a queue composed of events processed by JS according to the order of event occurrence.
[0059] Each event can be distinguished by an event ID, and each event ID corresponds to an event processing state, for example, if event processing is timed out, the event processing state of the event is in a processing state.
[0060] If event processing is not timed out, the event processing state of the event is in a processing completion state.
[0061] The obtaining of the JS event queue in the video playing process comprises:
[0062] The JS event queue periodically sent by JS is received through a native. The time interval of periodic sending can be set autonomously according to actual conditions, and can be less than the length of time set for timeout, for example, as shown in the figure, if the length of time set for timeout is 16.67 ms, the time interval of periodic sending can be selected as 5 ms, and setting 5 ms can prevent too fast refreshing from affecting application performance. Figure 2
[0063] The JS event queue is received every 5 ms, and the subsequent steps are processed for the JS event queue, and after receiving the JS event queue every time, the just received JS event queue is processed.
[0064] In step S2, if the device determines that the event processing state of at least one event is in the processing state, the cached bitmap of the previous frame image of the current frame image is obtained from the cache, and the cache pre-stores the bitmap of each frame image. Figure 2 As shown in the figure, if the event processing state of at least one event is in the processing state, the cached bitmap of the previous frame image of the current frame image is obtained from the cache.
[0065] In step S3, the device renders the cached bitmap of the previous frame image of the current frame image. Since all previous images are stored in the cache, the cached bitmap of all images can be obtained, and in this case, the rendering is not affected by the event processing timeout, so that the phenomenon of playing card jamming can be eliminated.
[0066] In the process of rendering the cached bitmap of the previous frame image of the current frame image, the image rendering processing method further comprises:
[0067] Generating mark information for rendering the image based on the cached bitmap. The mark information is used to indicate that the image is rendered based on the cached bitmap stored in the cache.
[0068] The image rendering processing method further comprises:
[0069] If it is determined that the event processing state of all events is in the processing completed state, the bitmap of the current frame image is rendered, and the bitmap of the current frame image is stored in the cache. In this case, it is indicated that the event processing is normal, and there is no influence of event processing timeout, so that the bitmap rendering based on the JS event queue is realized, and the phenomenon of playing card jamming does not occur.
[0070] Before the step of rendering the bitmap of the current frame image, the image rendering processing method further comprises:
[0071] If it is determined that the current frame image contains the mark information, the mark information is deleted. As described above, the current frame image may have the mark information, and deleting the mark information indicates that the rendered bitmap is directly rendered based on the JS event queue.
[0072] The above steps can be realized by the native, and the subsequent steps can be realized by JS. Before the step of receiving the JS event queue periodically sent by JS through the native, the image rendering processing method further comprises:
[0073] Adding the event to be processed to the event collection through JS;
[0074] detecting the processing state of each event in the event set, and marking the processing state of each event according to the detection result;
[0075] periodically sending a JS event queue to the native; the JS event queue includes the event processing state corresponding to each event. The sending period of the periodic sending can be determined according to actual conditions.
[0076] The detecting the processing state of each event in the event set, and marking the processing state of each event according to the detection result, includes:
[0077] after processing of each event is completed, marking the processing state of the processed event as a processing completed state; and indicating that the event has no processing timeout.
[0078] marking the processing state of an event that has not been processed for more than a preset time length as a processing state. The preset time length is a set timeout time length, which can be set autonomously according to actual conditions. A timer can be bound to the event, and the timer has an interval of 16.67 ms.
[0079] The events in the event set can be processed according to the corresponding code written by the user, and the state of the event is marked as processing completed when the processing is completed. The event is added to a JS message queue, if the event already exists in the JS message queue, the event is overwritten, the event is removed from the event set, and the timer bound to the event is closed.
[0080] The image rendering processing method provided by the embodiment of the application can be implemented based on modularization:
[0081] Briefly described as follows:
[0082] 1. A JavaScript message processing device, configured to receive a message event, process the event, add the event to a message queue, and periodically notify a native to respond to rendering. The device mainly includes the following modules:
[0083] 1) An event receiving module, configured to receive various events, including native events, user events, animation events, state events, and the like, and serving as a message input source.
[0084] 2) A JS event processing module, mainly configured to process the message received in 1), encode the received event message, assign a unique ID to the event message, set an event state mark, add the event to an event set, mark the state as an unprocessed state, process the event according to the ID, and start a corresponding timer. If the event is not processed within 1 frame (16.67 ms), the state of the event is marked as processing.
[0085] 3) JS message queue: used for receiving the processed and processing events in 2), and caching the events, sending the cached events to the native every 5 ms, so that the native performs bitmap calculation and rendering.
[0086] 2. Native rendering device, used for receiving the events in the JS message queue, performing bitmap calculation according to the message events, caching the bitmap, and rendering the bitmap to the screen. Mainly includes the following modules:
[0087] 1) Native message receiving module: used for receiving the events sent by the message queue in 3) of 1), and further processing the events. If all the received events are in a processed state, the events are marked as a direct rendering state, and if there are processing events, the events are marked as a cached rendering.
[0088] 2) Bitmap conversion module: used for converting the events in 1) into bitmaps.
[0089] 3) Bitmap caching module: used for caching the bitmaps.
[0090] 4) Bitmap rendering module: if 1) is marked as direct rendering, the bitmap in 2) is directly rendered to the screen, and the bitmap in 2) is put into 3) the bitmap caching module, and if 1) is marked as cached rendering, the cached bitmap in 3) is rendered, and the marked information can be generated according to the actual situation.
[0091] The image rendering processing method provided by the embodiment of the application is suitable for iOS and Android applications developed using an RN framework, and a cached frame rendering mechanism based on the RN framework is implemented, which is used to solve the problems of lag, delay, frame loss and the like caused by complex operations, a large amount of calculation, complex animation and frequent native JS interaction.
[0092] The image rendering processing method provided by the embodiment of the application has the following beneficial effects:
[0093] 1. The application solves the problem of application lag caused by the inability of RN to quickly respond to events due to complex interaction and mutual communication. The application returns early for long-time event processing, uses cached bitmap compensation rendering, and eliminates the lag caused by waiting for event processing.
[0094] 2. The application solves the problem of frame loss. The application guarantees that there is a frame that can be rendered every 16.67 ms by caching the bitmap, so that the application guarantees 60 frames per second, and the problem of frame loss does not occur.
[0095] The image rendering processing method provided by the embodiment of the present application can obtain a JS event queue in a video playing process; the JS event queue comprises an event processing state corresponding to each event respectively, and the event processing state is determined according to whether the event processing is timed out; if it is determined that the event processing state of at least one event is in a processing state, a cache bitmap of a previous frame image of a current frame image is obtained from a cache; the cache pre-stores a bitmap of each frame image; and the cache bitmap of the previous frame image of the current frame image is rendered, so that the fluency of the video playing process can be improved.
[0096] Further, the obtaining of the JS event queue in the video playing process comprises:
[0097] The JS event queue periodically sent by the JS is received by the native.
[0098] The image rendering processing method provided by the embodiment of the present application can efficiently obtain the JS event queue through the interaction between the native and the JS.
[0099] Further, the image rendering processing method further comprises:
[0100] The marking information of the image rendered based on the cache bitmap is generated.
[0101] The image rendering processing method provided by the embodiment of the present application can effectively distinguish the image rendered based on the cache bitmap through the marking information.
[0102] Further, the image rendering processing method further comprises:
[0103] If it is determined that the event processing state of all events is in a processing completion state, the bitmap of the current frame image is rendered, and the bitmap of the current frame image is stored in the cache.
[0104] The image rendering processing method provided by the embodiment of the present application can realize the bitmap rendering in a normal case.
[0105] Further, the image rendering processing method further comprises:
[0106] If it is determined that the marking information is contained in the current frame image, the marking information is deleted.
[0107] The image rendering processing method provided by the embodiment of the present application can accurately distinguish the implementation mode of the rendered bitmap.
[0108] Further, before the step of receiving the JS event queue periodically sent by the JS through the native, the image rendering processing method further comprises:
[0109] adding the to-be-processed event into the event set by the JS; refer to the above description.
[0110] detecting the processing state of each event in the event set, and marking the processing state of each event according to the detection result; refer to the above description.
[0111] periodically sending the JS event queue to the native; the JS event queue comprises the event processing state corresponding to each event; refer to the above description.
[0112] The image rendering processing method provided by the embodiment of the present application can further efficiently obtain the JS event queue.
[0113] Further, the detecting the processing state of each event in the event set, and marking the processing state of each event according to the detection result comprises:
[0114] marking the processing state of the processed event as a processing completion state; refer to the above description.
[0115] marking the processing state of the event which has not been processed for more than a preset time length as a processing state; refer to the above description.
[0116] The image rendering processing method provided by the embodiment of the present application can accurately mark the processing state of each event.
[0117] It should be noted that the image rendering processing method provided by the embodiment of the present application can be applied to the financial field, and can also be applied to any technical field other than the financial field, and the application field of the image rendering processing method is not limited by the embodiment of the present application.
[0118] Figure 3 is a structural schematic diagram of an image rendering processing device provided by an embodiment of the present application, as shown in Figure 3 The image rendering processing device provided by the embodiment of the present application comprises a first acquisition unit 301, a second acquisition unit 302 and a rendering unit 303, wherein:
[0119] The first obtaining unit 301 is configured to obtain a JS event queue in a video playing process; the JS event queue comprises event processing states corresponding to respective events, and the event processing states are determined according to whether event processing is timed out; the second obtaining unit 302 is configured to, if it is determined that at least one event processing state is in a processing state, obtain a cache bitmap of a previous frame image of a current frame image from a cache; the cache pre-stores bitmaps of each frame image; and the rendering unit 303 is configured to render the cache bitmap of the previous frame image of the current frame image.
[0120] Specifically, the first obtaining unit 301 in the device is configured to obtain a JS event queue in a video playing process; the JS event queue comprises event processing states corresponding to respective events, and the event processing states are determined according to whether event processing is timed out; the second obtaining unit 302 is configured to, if it is determined that at least one event processing state is in a processing state, obtain a cache bitmap of a previous frame image of a current frame image from a cache; the cache pre-stores bitmaps of each frame image; and the rendering unit 303 is configured to render the cache bitmap of the previous frame image of the current frame image.
[0121] The image rendering processing device provided by the embodiment of the application obtains a JS event queue in a video playing process; the JS event queue comprises event processing states corresponding to respective events, and the event processing states are determined according to whether event processing is timed out; if it is determined that at least one event processing state is in a processing state, a cache bitmap of a previous frame image of a current frame image is obtained from a cache; the cache pre-stores bitmaps of each frame image; and the previous frame image of the current frame image is rendered based on the cache bitmap, so that the fluency of the video playing process can be improved.
[0122] Further, the first obtaining unit 301 is specifically configured to:
[0123] The JS event queue periodically sent by the JS is received through the native.
[0124] The image rendering processing device provided by the embodiment of the application can efficiently obtain the JS event queue through the interaction between the native and the JS.
[0125] Further, while the cache bitmap of the previous frame image of the current frame image is rendered, the image rendering processing device is further configured to:
[0126] The marking information based on the rendered image of the cache bitmap is generated.
[0127] The image rendering processing device provided by the embodiment of the application can effectively distinguish the image rendered based on the cache bitmap through the marking information.
[0128] Further, the image rendering processing device is further configured to:
[0129] If it is determined that the event processing state of all events is the processing completed state, a bitmap of the current frame image is rendered, and the bitmap of the current frame image is stored in the cache.
[0130] The image rendering processing device provided by the embodiment of the present application realizes bitmap rendering in a normal case.
[0131] Further, before the step of rendering the bitmap of the current frame image, the image rendering processing device is further used for:
[0132] If it is determined that the mark information is contained in the current frame image, the mark information is deleted.
[0133] The image rendering processing device provided by the embodiment of the present application can accurately distinguish the implementation manner of rendering a bitmap.
[0134] Further, before the step of receiving the JS event queue periodically sent by the JS through the native, the image rendering processing device is further used for:
[0135] The event to be processed is added to the event collection through the JS;
[0136] The processing state of each event in the event collection is detected, and the processing state of each event is marked according to the detection result;
[0137] The JS event queue is periodically sent to the native; the JS event queue includes the event processing state corresponding to each event.
[0138] The image rendering processing device provided by the embodiment of the present application can further efficiently obtain the JS event queue.
[0139] Further, the image rendering processing device is specifically used for:
[0140] After each event is processed, the processing state of the processed event is marked as the processing completed state;
[0141] The processing state of the event which has not been processed for more than a preset time length is marked as the processing state.
[0142] The image rendering processing device provided by the embodiment of the present application can accurately mark the processing state of each event.
[0143] It should be noted that the image rendering processing method provided by the embodiment of the present application can be used in the financial field, and can also be used in any technical field other than the financial field, and the application field of the image rendering processing method is not limited by the embodiment of the present application.
[0144] The embodiments of the image rendering processing apparatus provided by the present application can be specifically used for executing the processing procedures of the above-mentioned method embodiments, and the functions thereof will not be repeated here, and the detailed description can be referred to the above-mentioned method embodiments.
[0145] Figure 4 The electronic device physical structure schematic diagram provided by the embodiments of the present application is shown in Figure 4 The electronic device includes a processor 401, a memory 402 and a bus 403.
[0146] The processor 401, the memory 402 and the bus 403 complete the communication between each other.
[0147] The processor 401 is used to call the program instructions in the memory 402 to execute the method provided by the above-mentioned method embodiments, for example, including:
[0148] Obtaining a JS event queue in a video playing process; the JS event queue includes event processing states corresponding to respective events, and the event processing states are determined according to whether the event processing is timed out;
[0149] If it is determined that at least one event processing state is in a processing state, obtaining a cache bitmap of a previous frame image of a current frame image from a cache; the cache pre-stores a bitmap of each frame image;
[0150] Rendering the cache bitmap of the previous frame image of the current frame image.
[0151] The present embodiment discloses a computer program product, the computer program product includes a computer program stored on a non-transient computer readable storage medium, the computer program includes program instructions, when the program instructions are executed by a computer, the computer can execute the method provided by the above-mentioned method embodiments, for example, including:
[0152] Obtaining a JS event queue in a video playing process; the JS event queue includes event processing states corresponding to respective events, and the event processing states are determined according to whether the event processing is timed out;
[0153] If it is determined that at least one event processing state is in a processing state, obtaining a cache bitmap of a previous frame image of a current frame image from a cache; the cache pre-stores a bitmap of each frame image;
[0154] Rendering the cache bitmap of the previous frame image of the current frame image.
[0155] The embodiment provides a computer readable storage medium, which stores a computer program, and the computer program causes the computer to execute the method provided in each method embodiment.
[0156] acquire a JS event queue in a video playing process; the JS event queue comprises an event processing state corresponding to each event respectively, and the event processing state is determined according to whether event processing is timed out;
[0157] if it is determined that the event processing state of at least one event is a processing state, acquire a cache bitmap of a previous frame image of the current frame image from the cache; the cache pre-stores a bitmap of each frame image;
[0158] render the cache bitmap of the previous frame image of the current frame image.
[0159] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can adopt a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can adopt a computer program product implemented on one or more computer usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer usable program codes.
[0160] The present application is described with reference to flowcharts and / or block diagrams of the method, device (system), and computer program product according to the embodiments of the present application. It should be understood that each flow and / or block in the flowcharts and / or block diagrams, and the combination of the flows and / or blocks in the flowcharts and / or block diagrams can be realized by computer program instructions. These computer program instructions can be provided to a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to produce a machine, so that the instructions executed by the computer or other programmable data processing devices produce a device implemented in the flowcharts and / or block diagrams. Figure 1 The function specified in one or more flows and / or blocks. Figure 1 The function specified in one or more flows and / or blocks.
[0161] These computer program instructions can also be stored in a computer readable storage medium, which can guide the computer or other programmable data processing devices to work in a specific way, so that the instructions stored in the computer readable storage medium produce a manufactured product including instruction devices, which implement the functions specified in the flowcharts and / or block diagrams. Figure 1 The function specified in one or more flows and / or blocks. Figure 1 The function specified in one or more flows and / or blocks.
[0162] These computer program instructions can also be loaded into a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart block or blocks. Figure 1 Figure 1
[0163] In this description, references to "one embodiment", "one example", "some embodiments", "example", "exemplary", or "some examples", etc., mean that a particular feature, structure, material, or characteristic being referred to is included in at least one embodiment or example of the present application, it is
[0164] The specific embodiments described above are examples of the present application and it is not intended that the present application be limited thereto. It will be apparent to those skilled in the art that various modifications, changes, additions, and omissions can be made without departing from the spirit and scope of the present application.
Claims
1. An image rendering processing method, characterized by, The image rendering processing method comprises the following steps: acquiring a JS event queue in a video playing process; the JS event queue comprises event processing states corresponding to respective events, and the event processing states are determined according to whether event processing is timed out; if it is determined that at least one event processing state is in a processing state, acquiring a cache bitmap of a previous frame image of a current frame image from a cache; the cache pre-stores bitmaps of each frame image; rendering the cache bitmap of the previous frame image of the current frame image; the step of acquiring the JS event queue in the video playing process comprises the following steps: receiving the JS event queue periodically sent by the JS through a native; before the step of receiving the JS event queue periodically sent by the JS through the native, the image rendering processing method further comprises the following steps: adding a to-be-processed event to an event set through the JS; detecting processing states of respective events in the event set, and marking the processing states of the respective events according to a detection result; periodically sending the JS event queue to the native; the JS event queue comprises event processing states corresponding to respective events; the step of detecting the processing states of the respective events in the event set and marking the processing states of the respective events according to the detection result comprises the following steps: after processing is completed for one event, marking a processing state of the processed event as a processing completed state; marking a processing state of an event that has not been processed for more than a preset time length as a processing state. while rendering the cache bitmap of the previous frame image of the current frame image, the image rendering processing method further comprises the following step: generating marking information of a bitmap rendered based on the cache bitmap.
2. The image rendering processing method of claim 1, wherein, the image rendering processing method further comprises the following step: if it is determined that all event processing states are in the processing completed state, rendering a bitmap of the current frame image, and storing the bitmap of the current frame image in the cache.
3. The image rendering processing method of claim 1, wherein, before the step of rendering the bitmap of the current frame image, the image rendering processing method further comprises the following step: if it is determined that the marking information is contained in the current frame image, deleting the marking information contained in the current frame image.
4. The image rendering processing method of claim 2, wherein, The image rendering processing method comprises the following steps: a first acquiring unit is configured to acquire a JS event queue in a video playing process; the JS event queue comprises event processing states corresponding to respective events, and the event processing states are determined according to whether event processing is timed out; 5. An image rendering processing apparatus characterized by comprising: a second acquiring unit is configured to acquire a cache bitmap of a previous frame image of a current frame image from a cache if it is determined that at least one event processing state is in a processing state; the cache pre-stores bitmaps of each frame image; a rendering unit is configured to render the cache bitmap of the previous frame image of the current frame image; the first acquiring unit is configured to receive the JS event queue periodically sent by the JS through a native; before the step of receiving the JS event queue periodically sent by the JS through the native, the image rendering processing device further comprises a unit configured to add a to-be-processed event to an event set through the JS; a detecting unit is configured to detect processing states of respective events in the event set, and mark the processing states of the respective events according to a detection result; a periodically sending unit is configured to periodically send the JS event queue to the native; the JS event queue comprises event processing states corresponding to respective events; The image rendering processing apparatus is further configured to mark the processing state of a processing completed event as a processing completed state after processing of each event is completed, and mark the processing state of an event that has not been completed for more than a preset time length as a processing in progress state.
6. An electronic device comprising a memory, a processor, and a computer program stored on the memory and executable on the processor, characterized in that, The computer program is executed by the processor to implement the steps of the method of any one of claims 1 to 4.
7. A computer-readable storage medium having stored thereon a computer program, characterized in that The computer program is executed by the processor to implement the steps of the method of any one of claims 1 to 4.
Citation Information
Patent Citations
Page drawing method and related device
CN113132526A
Asynchronous UI framework
US20180322605A1