A streaming-based rendering method and system

Abstract

The application provides a streaming-based rendering method and system, and relates to the technical field of data processing.The streaming-based rendering method comprises the following steps: receiving streaming data sent by a backend, and detecting a closing tag in the streaming data; if the closing tag is detected for the first time in the streaming data, storing the closing tag and the streaming data received subsequently in a buffer, and rendering according to a first rendering mode; if the same type of closing tag is continuously detected in the streaming data, determining that a block to be parsed is received completely, switching the first rendering mode to a second rendering mode and rendering, wherein the second rendering mode comprises rendering the block to be parsed based on the buffer.The application can render the transmitted data more accurately, and improve user experience.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of data processing, in particular to a rendering method and system based on streaming. BACKGROUND

[0002] In the scene of artificial intelligence-based streaming conversation, the integrity and correctness of data, the transmission speed (low delay) are the core indicators.

[0003] In the related art, SSE (Server-Sent Events) is selected for streaming transmission, which has the characteristics of no need to maintain a two-way communication channel, low memory occupation and network resource consumption, and the transmitted data is parsed and rendered by a parser, but the above means often leads to the problem of format confusion, content loss or style error of the rendered data, and the user experience is poor. SUMMARY

[0004] The problem to be solved by the present application is that the data streamed in the related art is prone to rendering errors, and the user experience is poor.

[0005] To solve the above problems, in a first aspect, the present application provides a rendering method based on streaming transmission, applied to the front end, the rendering method based on streaming transmission comprises:

[0006] receiving streaming data sent by the back end, and detecting the closing tag in the streaming data;

[0007] If the closing tag is first detected in the streaming data, the closing tag and the subsequent received streaming data are stored in a buffer, and rendered according to a first rendering mode;

[0008] If the same type of closing tag is continuously detected in the streaming data, it is determined that the to-be-parsed block is received, the first rendering mode is switched to a second rendering mode and rendered, wherein the second rendering mode comprises rendering the to-be-parsed block based on the buffer.

[0009] Optionally, before receiving the streaming data sent by the back end, the method further comprises:

[0010] sending a streaming request to the back end, and calling a listening function and a processing function after the back end responds to the streaming request, wherein the listening function is used to detect the streaming data, and the processing function is used to format the streaming data.

[0011] Optionally, the receiving the streaming data sent by the backend and detecting the closing tag in the streaming data comprises:

[0012] receiving the streaming data sent by the backend, wherein the streaming data comprises data blocks pushed in blocks, and the block to be parsed comprises one or more data blocks;

[0013] detecting, based on the data blocks, whether the closing tag in a preset format is contained.

[0014] Optionally, if the closing tag is detected for the first time in the streaming data, the closing tag and the streaming data received subsequently are stored in a buffer, and rendering is performed in a first rendering mode, comprising:

[0015] in an initial state, detecting the closing tag according to a preset composition structure and creating an array, wherein the array is used for marking a tag type and is also used for splicing and buffering the streaming data received subsequently;

[0016] if the closing tag is detected, loading preset materials on a page of the front end, wherein the preset materials comprise a preset placeholder and / or a preset animation.

[0017] Optionally, the method further comprises:

[0018] in an initial state, if the closing tag is not detected in the streaming data, rendering in a first normal data on a page of the front end until the closing tag is detected.

[0019] Optionally, the detecting the closing tag according to a preset composition structure and creating an array comprises:

[0020] if the start structure of the closing tag is detected, creating an array according to the data blocks, wherein the array is used for marking a tag type and splicing and buffering the streaming data received subsequently;

[0021] if the remaining structure of a single closing tag is continuously detected, it is determined that the closing tag is detected, the tag type is modified to the closing tag, and the streaming data received subsequently is buffered through the array;

[0022] wherein the composition structure comprises a start structure and a remaining structure.

[0023] Optionally, the creating an array according to the data blocks comprises:

[0024] creating a string to store the data blocks received;

[0025] creating the array and increasing objects of the array according to the data block, wherein each object in the array is the string stored according to the data block;

[0026] creating an end mark after the closing tag at the end position of each of the to-be-parsed blocks based on the array, the end mark being used to distinguish the to-be-parsed blocks from non-to-be-parsed blocks;

[0027] creating a closing tag stack in the object, the closing tag stack being used to add the closing tag based on the stored to-be-parsed block when the closing tag is detected.

[0028] Optionally, if the same type of closing tag continues to be detected in the streaming data, it is determined that the to-be-parsed block is received completely, the first rendering mode is switched to a second rendering mode and rendering is performed, and the method comprises:

[0029] traversing the objects newly added to the array, if the outermost pair of closing tags in the object is detected, it is determined that the to-be-parsed block is received completely, the first rendering mode is removed, and the content of the to-be-parsed block contained in the outermost pair of closing tags is rendered on the page.

[0030] Optionally, the method further comprises:

[0031] creating an end mark at the end position of the closing tag at the outermost layer of the to-be-parsed block based on the array, the to-be-parsed block being rendered completely;

[0032] detecting based on the end mark, if the end mark does not contain the closing tag, rendering on the page according to second normal data until a new closing tag is detected.

[0033] The streaming-based rendering method provided by this invention receives streaming data sent from the backend and detects closing tags in the streaming data. This allows for accurate capture and classification of different types of structured content, facilitating the transition and rendering from data blocks to rich text. Upon initial detection of closing tags in the streaming data, the closing tags and subsequent received streaming data are stored in a buffer and rendered according to a first rendering method, thus intuitively demonstrating to the user that the system is processing structured content (such as code blocks being loaded). If the same type of closing tags are detected in the streaming data, it is determined that the block to be parsed has been received. The first rendering method is then switched to a second rendering method and rendered, enabling accurate rendering of rich text based on the complete data blocks (blocks to be parsed) already assembled in the buffer, thereby achieving correct display of data within closing tags. This dynamic adjustment strategy not only ensures the correct display of data such as text within closed tags, but also provides real-time feedback, allowing users to clearly understand the current data reception status and rendering progress. Furthermore, the main data processing operations are performed on the front end, ensuring low-latency data presentation. It is particularly suitable for rendering streaming data from the back end to the front end, which is beneficial for improving the user experience in scenarios such as AI-based streaming dialogues between the front end and the back end.

[0034] Secondly, the present invention also provides a streaming-based rendering system, comprising:

[0035] The receiving and detection module is used to: receive streaming data sent by the backend and detect closed tags in the streaming data;

[0036] The first rendering module is configured to: if the closing tag is detected for the first time in the streaming data, store the closing tag and the subsequently received streaming data into a buffer, and render them according to the first rendering method;

[0037] The second rendering module is configured to: if the same type of closed tag is detected in the streaming data, determine that the block to be parsed has been received, switch the first rendering mode to the second rendering mode and perform rendering, wherein the second rendering mode includes rendering the block to be parsed based on the buffer.

[0038] Thirdly, the present invention provides an electronic device, including a memory and a processor;

[0039] The memory is used to store computer programs;

[0040] The processor is configured to implement the streaming-based rendering method as described in the first aspect when executing the computer program.

[0041] In a fourth aspect, the present application provides a computer readable storage medium, wherein the storage medium stores a computer program, and when the computer program is executed by a processor, the computer program implements the streaming-based rendering method according to the first aspect.

[0042] The streaming-based rendering system, the electronic device and the computer readable storage medium provided by the present application have the same beneficial effects as the streaming-based rendering method, which will not be repeated here. BRIEF DESCRIPTION OF DRAWINGS

[0043] Figure 1 Fig. 1 shows a flowchart of the streaming-based rendering method according to an embodiment of the present application;

[0044] Figure 2 Fig. 3 shows a comparative diagram of rendering with emphasis on closed tags according to an embodiment of the present application;

[0045] Figure 3 Fig. 5 shows a comparative diagram of the form of normal text rendering and the source code after rendering according to an embodiment of the present application;

[0046] Figure 4 Fig. 7 shows a diagram of the page display effect after normal text rendering according to an embodiment of the present application; Figure 3

[0047] Figure 5 Fig. 10 shows a structural diagram of the streaming-based rendering system according to an embodiment of the present application;

[0048] Figure 6 Fig. 12 shows a structural diagram of the electronic device according to an embodiment of the present application. DETAILED DESCRIPTION

[0049] In order to make the above-mentioned purposes, features and advantages of the present application more obvious and easy to understand, the specific embodiments of the present application will be described in detail below with reference to the accompanying drawings.

[0050] ​It should be noted that the relationship terms such as "first" and "second" and the like in the present application are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between the entities or operations. Moreover, the terms "include", "contain" or any other variants thereof are intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements not only includes those elements, but also includes other elements not explicitly listed or inherent to such process, method, article or device. Without more limitation, the element defined by the statement "including a" does not exclude the presence of another identical element in the process, method, article or device including the element.

[0051] In the description of the present specification, the description referring to the terms "embodiment", "one embodiment" and "one implementation" and the like means that the specific features, structures, materials or characteristics described in connection with the embodiment or implementation are included in at least one embodiment or implementation of the present application. In the present specification, the illustrative description of the above terms does not necessarily refer to the same embodiment or implementation. Moreover, the specific features, structures, materials or characteristics described can be combined in any one or more embodiments or implementations in a suitable manner.

[0052] The related terms will be explained first as follows.

[0053] SSE (Server-Sent Events, a kind of HTTP-based server pushing real-time data to the client, sending event stream, small size.

[0054] Rich text (Rich Text) refers to text data containing rich content such as format, style, multimedia, etc. Real-time rendering of rich text requires special processing to ensure security, performance and user experience. Common formats of rich text: 1. HTML format: contains complete HTML tags and styles; 2. Markdown format, which is a lightweight markup language.

[0055] Referring to Figure 1 The embodiment of the present application proposes a rendering method based on streaming transmission, applied to the front end, the rendering method based on streaming transmission comprises:

[0056] S100: receiving streaming data sent by the back end, and detecting the closing tag in the streaming data.

[0057] Specifically, the streaming data is real-time piecewise transmission data, such as streaming text received based on the SSE transmission technology, the data blocks in the streaming text are transmitted and received, and it is dynamically detected whether the sub-data (for example, data blocks) of the transmitted data block of the streaming data contains a closing tag, and the closing tag represents a specific symbol or symbol sequence used to define the boundary of structured content.

[0058] Generally, a complete "closed" structure (for example, a closing tag in Markdown format) is composed of a start identifier and an end identifier, so as to distinguish the special format data block (such as code, bold text, link, etc.) to be parsed from the normal text, so as to accurately capture and classify different types of structured content (to ensure that the complete code, emphasized text, etc. to be parsed data block is correctly parsed), and to ensure the integrity and accurate parsing of the streaming data rich text, which is beneficial to the transition and accurate rendering from the data block to the rich text.

[0059] S200: If the closing tag is detected in the streaming data for the first time, the closing tag and the subsequent received streaming data are stored in a buffer, and the first rendering mode is used for rendering.

[0060] Specifically, if the start monitoring received sub-data of the data block contains a closing tag of the rich text format, that is, the closing tag appears at the start position of the sub-data of the data block, the closing tag and the subsequent received data block are added to the buffer (for example, an array structure) for caching, and the closing of the tag is dynamically monitored while receiving the subsequent transmission. At this time, it is indicated that the to-be-parsed data block starts to be transmitted, and the to-be-parsed data block is not complete at this time. The first rendering mode is used for rendering, for example, a special placeholder or a default loading animation is used for front-end page display; so as to directly show the user that the structured content (such as the code block is being loaded) is being processed, which is beneficial to alleviate the waiting anxiety caused by the streaming delay; at the same time, the background caching mechanism guarantees the complete splicing of the data, and after the closing tag is completely identified, the placeholder material will be seamlessly replaced by the finally rendered rich text content, which is beneficial to maintaining the visual coherence of the page.

[0061] It should be noted that the subsequent received streaming data herein refers to the data block and the end identifier transmitted once or multiple times according to the actual composition of the to-be-parsed data block. If the to-be-parsed data block is composed of two data blocks, it is the subsequent two data blocks and the end identifier, and so on.

[0062] S300: If it is continuously detected that the same type of the closing tag exists in the streaming data, it is determined that the to-be-parsed block is received completely, the first rendering mode is switched to a second rendering mode, and rendering is performed, where the second rendering mode includes rendering the to-be-parsed block based on the buffer.

[0063] Specifically, when it is continuously detected that the same type of the closing tag exists in the streaming data, it indicates the end position of the sub-data of one or more sub-blocks, at this time, it indicates that the to-be-parsed block is received completely on the front end, that is, the complete structured content is received completely, and then the rendering mode is switched from the first rendering mode to the second rendering mode. The core of the second rendering mode is to perform accurate rendering of the rich text based on the complete data block (to-be-parsed block) spliced in the buffer, so as to realize correct display of the data in the closing tag.

[0064] In actual application, by receiving the streaming data sent by the back end and detecting the closing tag in the streaming data, different types of structured content can be accurately captured and classified, which is beneficial to realize the transition and rendering from the data block to the rich text. By detecting the closing tag in the streaming data for the first time, the closing tag and the subsequent received streaming data are stored in the buffer, and rendering is performed according to the first rendering mode, so as to intuitively show the user that the structured content is being processed (such as the code block is being loaded). If it is continuously detected that the same type of the closing tag exists in the streaming data, it is determined that the to-be-parsed block is received completely, the first rendering mode is switched to the second rendering mode and rendering is performed, so that accurate rendering of the rich text can be performed based on the complete data block (to-be-parsed block) spliced in the buffer, so as to realize correct display of the data in the closing tag. This dynamic adjustment strategy not only ensures correct display of the text and other data in the closing tag, but also provides real-time feedback to let the user clearly understand the current data receiving state and rendering progress. Moreover, the main data processing operation is performed on the front end, so as to ensure low-delay presentation of the data, which is especially suitable for rendering of the streaming data from the back end to the front end, and is beneficial to improve the user experience in the scene of AI streaming conversation between the front end and the back end.

[0065] As an optional embodiment of the application, before receiving the streaming data sent by the back end, the rendering method based on streaming further includes:

[0066] sending a streaming request to the back end, and calling a listening function and a processing function after the back end responds to the streaming request, where the listening function is used to detect the streaming data, and the processing function is used to perform format conversion on the streaming data.

[0067] Specifically, taking the WeChat applet as an example, the front end initiates a request to the back end using wx.request provided by the WeChat applet, wherein the parameter enable Chunked of the api is set to true, the parameter responseType is set to array Buffer, a streaming transmission connection is established with the back end, then a listening function on Chunk Received is called and a processing function listener is passed in, when a new data block is received, the listener is called to process the data block, and the array Buffer is converted into a string. If the parsed content prompts that the current SSE transmission has ended, off Chunk Received is called to remove the listener; the above can ensure the establishment of streaming data transmission from the back end to the front end, and the detection and analysis after the establishment, so as to ensure the smooth progress of buffering and rendering.

[0068] As an optional embodiment of the application, the receiving of the streaming transmission data sent by the back end and the detection of the closing tag in the streaming transmission data comprise:

[0069] Receiving the streaming transmission data sent by the back end, wherein the streaming transmission data comprises data blocks pushed in blocks, and the to-be-parsed block comprises one or more data blocks.

[0070] Specifically, for example, for streaming transmission, data is divided into data blocks for block transmission, such as a Markdown code block complete text: ```const a = 1 + 1```, because SSE is a segmented transmission, the first segment may be: ``, the second segment may be: ``const a, …`; the to-be-parsed data block is a code block, a link or text expressing complete meaning, which is composed of one or more data blocks.

[0071] Based on the data block, it is detected whether the data block contains the closing tag of the preset format.

[0072] Specifically, the closing tag is expressed by a directly set closing tag, and the following gives the basic closing tag types:

[0073] Code block: using three back quotes ```;

[0074] Emphasis tag: italic, wrapped with a single asterisk * or underscore _; bold, wrapped with two asterisks ** or two units of underscores __; bold italic, wrapped with three asterisks *** or three units of underscores ___;

[0075] Link tag: display text wrapped with square brackets [] followed by link address wrapped with round brackets ();

[0076] Picture tag: starts with an exclamation mark!, followed by square brackets [] wrapping the picture description, and then followed by round brackets () wrapping the picture address.

[0077] The above regular expression is called a closing tag, that is, the regular expression will be written according to the above rules, accordingly, the Markdown parsing state machine is divided into several states, and the corresponding regular expression is designed for different states, wherein the states involved are: normal text state, code block state, emphasis state (italic / bold), link state, picture state, and except for the normal text state, the other states involve closing tag code blocks, and the initial state is normal text.

[0078] The rendering result of the closing tag is shown in the emphasis state before and after the closing tag is rendered, as shown in Figure 2

[0079] The rendering result of the normal text is shown in the hierarchical title text as shown in Figure 3 and Figure 4 There is no closing tag, and the Markdown non-closing tag is rendered.

[0080] In the actual application of the embodiment, the continuously received stream data sent by the backend in blocks is detected dynamically to determine whether the closing tag (such as code block, emphasis, link, etc.) of a preset format is included in each data block, the initial state and the default state (without indicating other rendering states) are normal text mode, once the starting symbol (such as backtick, asterisk, etc.) of the closing tag is identified, the state is switched to the corresponding structured parsing state (such as code block state, emphasis state, etc.), for each state, a specially designed regular expression rule is used for accurate matching, so that the starting and ending boundaries (such as starting and ending closing tags) of the tags are gradually identified in the streaming process, ensuring the integrity and accuracy of the Markdown syntax under the streaming data, and finally facilitating the transition from the data block to the rich text and accurate rendering.

[0081] As an optional embodiment of the application, if the closing tag is detected for the first time in the stream data, the closing tag and the subsequent received stream data are stored in a buffer, and rendered according to a first rendering mode, which includes:

[0082] In the initial state, the closing tag is detected according to a preset composition structure, and an array is created, wherein the array is used to mark the tag type, and is also used to splice and cache the subsequent received stream data.

[0083] ​Specifically, in the initial state, based on the special composition structure of the closing tag, it can be detected whether the closing tag appears in the data block, and the array structure is created for caching. The array of the specific structure can identify and track the tag type (such as inline code or code block), and the subsequent incoming data is spliced and cached in sequence through the content field and the like. The core effect of this design is to realize the accurate capture and temporary storage of structured content: by storing the label type metadata and content data separately, the system can accurately identify and distinguish different types of closing tags (such as dynamically updating the label by adding backticks), and can ensure the integrity and sequence of the streaming data (by continuously splicing content and the like), all data are temporarily stored in the buffer, and then uniformly submitted for rendering after the corresponding closing tag is detected.

[0084] If the closing tag is detected, a preset material is loaded on the page of the front end, wherein the preset material includes a preset placeholder and / or a preset animation.

[0085] Specifically, when the starting symbol of the closing tag in the streaming data is detected (such as the first backtick), the loading process of the front-end preset material is triggered synchronously, and a preset placeholder (such as a gray rectangular box, a code block thumbnail, and the like static element) or a preset animation (such as a flashing cursor, a code highlighting skeleton screen, a pulsing gloss effect, and the like dynamic effect) is inserted at the corresponding position of the page, and the subsequent data is continuously cached through the array structure.

[0086] In the actual application of the embodiment, the closing tag is detected according to the preset composition structure in the initial state, and the array is created to realize the accurate capture and temporary storage of structured content, and if the closing tag is detected, a preset material is loaded on the page of the front end, thereby intuitively indicating to the user that the structured content (such as a code block being loaded) is being processed by the system, effectively relieving the waiting anxiety caused by the streaming delay; at the same time, the background caching mechanism guarantees the complete splicing of the data, and after the closing tag is completely identified, the placeholder material is seamlessly replaced by the final rendered rich text content, which maintains the visual coherence of the page and improves the user experience through visual feedback.

[0087] As an optional embodiment of the application, the rendering method based on streaming further includes:

[0088] In the initial state, if it is detected that the closing tag does not exist in the streaming data, the page of the front end is rendered according to the first normal data until the closing tag is detected.

[0089] Specifically, in the initial state, the new data is rendered in the normal text state, and in the initial state, the streaming data does not contain any Markdown (or HTML format) tags, so the received text is directly rendered (specifically, the text is rendered in the most commonly used tags in html, and the text generally does not have any special style or effect); this rendering can be considered as a first rendering mode.

[0090] If a closing tag is received, the state change is parsed, the loading animation is rendered after the rendered content, and the rendering of the received content after the pause is suspended, which can be in the streaming scenario before the closing tag appears, that is, the user is shown on the page before the appearance of the to-be-parsed block.

[0091] As an optional embodiment of the application, the closing tag is detected according to the preset composition structure, and an array is created.

[0092] If the start structure of the closing tag is detected, an array is created according to the data block, and the array is used to mark the tag type and splice the subsequent received streaming data and cache.

[0093] Specifically, when the data is received at the front end (browser, etc.), a buffer (which can be created by an array structure) is maintained to store the data received in the closing tag, using the code block tag as an example: when it is monitored that the content currently transmitted by SSE contains back quotes, the subsequent content may contain inline code (wrapped by a back quote at the beginning and end) or code blocks (wrapped by three consecutive back quotes at the beginning and end); assuming that the first back quote is received, an array is maintained, and the basic format is [{label: '`', content: ''}], both fields are string types, label is used to mark the closing tag type, and content stores the spliced text received based on the SSE transmission.

[0094] If the remaining structure of the single closing tag is continuously detected, it is determined that the closing tag is detected, the tag type is modified to the closing tag, and the subsequent received streaming data is cached through the array.

[0095] The composition structure includes a start structure and a remaining structure. The start structure and the remaining structure are different numbers of characters divided according to the original order of the closing tag.

[0096] ​Specifically, the label of the head is continuously monitored to see if there is a supplement, such as receiving a back quote based on the first SSE transmission, and then receiving two back quotes, which indicates that the current received is a code block rather than an inline code, and the value of the label is changed to '```', and the subsequent received content is monitored to see if there is another triple back quote, if there is, it indicates that the code block is received, at this time, the closed label is closed, and the writing in the buffer (array structure) is ended, and the rendering process of the rich text is entered.

[0097] In actual application, the embodiment dynamically analyzes the label composition structure (start + remaining), adapts the uncertainty of the streaming data, ensures accurate identification and splicing of nested or mixed labels (such as inline code and code block), and finally realizes efficient segmented rendering.

[0098] As an optional embodiment of the application, the array created according to the data block includes:

[0099] A string is created to store the received data block.

[0100] Specifically, the string is the most basic storage unit in the array structure, a string is created to store all received data blocks, and when new content is processed into a string, the new string is spliced with the stored content.

[0101] The array is created, and the number of objects of the array is increased according to the number of the to-be-parsed blocks, wherein each object in the array includes the string stored according to each to-be-parsed block.

[0102] Specifically, a first array is created according to the number of the to-be-parsed blocks, the first array includes one or more first objects, and the first objects correspond to the to-be-parsed blocks, wherein when the closed label is detected, the first object in the first array is started to add the streaming data transmitted subsequently until the same type of closed label is detected.

[0103] Generally, the content of a closed label corresponds to an object.

[0104] The data blocks in the array combined with the closed label can be divided into closed label blocks and non-closed label blocks, the closed label block includes the to-be-parsed block and the outermost pair of closed labels, and the non-closed label block is part of the streaming data excluding the closed label block.

[0105] Since the received text in Markdown format or the like contains possibly more than one closed tag data block, an array is used to record (one array can contain many closed tag data blocks, including parallel closed tag data blocks and nested closed tag data blocks, the parallel closed tag data blocks are consecutive closed tag data blocks, each of which contains only a first and a last closed tag, and the nested closed tag data blocks have at least one pair of closed tags between a first and a last closed tag, thus forming a closed tag nest).

[0106] The first array is used to record all the text contained in the closed tag, and then combined with the closed tag stack to become a closed tag data block. The array is used to determine the range of the closed tag block, and thus by detecting the first array, the closed tag block and the non-closed tag block can be distinguished, and the position of the non-closed tag block can be finally determined.

[0107] The relationship between the object and the array can be that the object contains the array, or that the array is provided with the object. The object in the closed tag block needs to maintain an array, which has the same function as the outermost array. When there are other closed tags inside the closed tag, the closed tag structure is continuously parsed to the next layer, and the parsing result is stored in the array.

[0108] A second array is created according to the number of data blocks, each object in the second array stores the accepted characters by block, and an end marker is created in the second array according to the end position of each block to be parsed, wherein the second array includes one or more second objects, the second objects correspond to the data blocks, the storage order of the second objects is the transmission order of the data blocks, and the second array is used for rendering.

[0109] That is, each object in the second array stores the accepted characters by block, and the closed tag block and the non-closed tag block are stored in the order of the text.

[0110] A closed tag stack is created in the object, which is used to receive the closed tag when the closed tag is detected.

[0111] Specifically, an object (mainly the object of the first array) also needs to maintain a closed tag stack. When the recognized string is a closed tag in Markdown format, the current received closed tag is added to the stack. The stack is used in combination with a regular expression to judge the closed tag, to further judge whether the content block of the closed tag is received. When the content in each closed tag is received, the received closed tag data block enters the rendering process (into the second array), and the subsequent closed tag data block starts a new object in the array for storage.

[0112] When a new closing tag is parsed, the tag is pushed into the closing tag stack of the object, the parsing state is changed, and the content received thereafter will belong to the content in the closing tag by default and be added to the string of the object until the end tag of the same level is received, the parsing state is changed to the state of the parent closing tag (the outermost closing tag) (add the parser in the parent), and the tag is popped from the top of the stack, and for nested closing tags, the principle of who closes first, who pops first is followed; when the end tag of the outermost closing tag is received, it is indicated that the block has been parsed, the content of the block is added to the array of closing tags, the current parsed part is divided into a non-closing tag data block and a closing tag data block, and is sequentially added to the rendering array (the second array), and the position of the end marker is changed for processing of the next possible closing tag data block.

[0113] The above mechanism accurately matches opening and closing tags through the first array and the closing tag stack, ensures the structural correctness of nested syntax (such as code blocks in code blocks), realizes incremental receiving and processing by temporarily storing streaming data in the array object, and enables users to see part of the rendering result without waiting for the entire content to be transmitted, thereby greatly improving the perception speed and experience; meanwhile, the second array is responsible for sequentially organizing complete blocks to be rendered, for realizing rendering, so that the final output can be accurately rendered in strict accordance with the order and nesting level of the parsed blocks, and the situation of tag misplacement or rendering confusion caused by streaming is avoided.

[0114] In actual application, the establishment of the data structure facilitates the process from data block receiving to rendering on the front end, does not need to be executed on the server, can realize localization from buffering to rendering, and can improve the rendering experience effect of the front end for users.

[0115] As an optional embodiment of the application, if the same type of closing tag is continuously detected in the streaming data, it is determined that the parsed block receiving is completed, the first rendering mode is switched to the second rendering mode and rendering is performed, which includes:

[0116] The objects added in the array are traversed, if the outermost pair of closing tags in the object is detected, it is determined that the parsed block receiving is completed, the first rendering mode is removed, and the content of the parsed block contained in the outermost pair of closing tags is rendered on the page.

[0117] Specifically, detecting the outermost pair of the closing tags in the object indicates that not only the at least one pair of the closing tags is detected (in the case of no closing tag nesting), or in the case of closing tag nesting, and the to-be-parsed block in the closing tag successfully completes the buffering, but also the judgment is more correct when the to-be-parsed block is received, and the success rate of rendering the to-be-parsed block is higher; at this time, the previously rendered normal text and loading animation are removed from the DOM (Document Object Model, objectified representation of a page), and the newly added objects in the rendering array are traversed and rendered using the block tag, and the content of the to-be-parsed block (such as the current text block) is rendered to the page in the block, balancing the instant feedback (user experience) and the final accuracy (rendering quality), while ensuring the efficiency and stability of the processing process.

[0118] As an optional embodiment of the present application, the rendering method based on streaming further comprises:

[0119] Based on the to-be-parsed block rendered in the array, an end marker is created at the end position of the closing tag in the outermost layer thereof.

[0120] Specifically, based on the foregoing data structure, a marker is maintained to record the end position of the last complete closing tag block obtained, which is actually the start position of the newly started data block.

[0121] Based on the end marker, if the end marker does not contain the closing tag, rendering is performed on the page according to the second normal data until a new closing tag is detected.

[0122] Specifically, if the received data block does not contain a closing tag after the last to-be-parsed block is completed, it is considered that a non-closing tag data block is received, which is similar to the case that no closing tag is detected in the initial state. At this time, the newly added content is still rendered in the format of ordinary text and displayed on the front-end page, and this continues until a new closing tag is detected. At this time, rendering is performed in the form of rendering animation, so as to show the user the receiving progress of the "non-important content"; if the received data block does not contain a closing tag when the last to-be-parsed block is completed, including the two cases of not containing any Markdown tag and containing a Markdown non-closing tag (the non-closing tag is not closed, appears singly, and is different from the symbol representation of the closing tag), the case of not containing any Markdown tag has been stated above, which is similar to the case that no closing tag is detected in the initial state; the case of containing a Markdown non-closing tag, after being parsed by the parser, is also parsed into corresponding html tags, some of which are text tags, which have some basic effects on the text (such as the rendering of hierarchical titles, as shown in Figure 3 and Figure 4 ), because it does not involve the need for paired reception, it can be normally rendered, and this case is also rendered in the format of ordinary text.

[0123] In actual application, the end marker is set to effectively distinguish the closing tag data block and the non-closing tag data block, and render after caching. Before a new closing tag appears, the user is shown the state before the next to-be-parsed block is parsed on the page.

[0124] As shown in Figure 5 , the embodiment of the application provides a rendering system 200 based on streaming, which applies the rendering method based on streaming as described in the above embodiment, and includes:

[0125] The receiving and detecting module 210 is configured to receive the streaming data sent by the back end and detect a closing tag in the streaming data.

[0126] The first rendering module 220 is configured to, if the closing tag is detected for the first time in the streaming data, store the closing tag and the streaming data received subsequently in a buffer, and render in a first rendering mode.

[0127] The second rendering module 230 is configured to: if the same type of the closing tag is continuously detected in the streaming data, determine that the to-be-parsed block is received completely, switch the first rendering mode to a second rendering mode and perform rendering, wherein the second rendering mode comprises rendering the to-be-parsed block based on the buffer.

[0128] The specific implementation of the embodiment can refer to the corresponding implementation method described above, and will not be described here.

[0129] As shown in Figure 6 The embodiment of the present application provides an electronic device 300, which comprises a memory 310 and a processor 320; the memory 310 is used for storing a computer program; and the processor 320 is used for realizing the streaming-based rendering method as described above when the computer program is executed.

[0130] Alternatively, an electronic device 300 comprises a memory 310 and a processor 320 coupled to the memory 310; the memory 310 is configured to store a computer program; and the processor 320 is configured to perform the following operations when the computer program is executed:

[0131] receiving the streaming data sent by the backend and detecting a closing tag in the streaming data;

[0132] if the closing tag is detected in the streaming data for the first time, storing the closing tag and the streaming data received subsequently into a buffer and performing rendering in a first rendering mode;

[0133] if the same type of the closing tag is continuously detected in the streaming data, determining that the to-be-parsed block is received completely, switching the first rendering mode to a second rendering mode and performing rendering, wherein the second rendering mode comprises rendering the to-be-parsed block based on the buffer.

[0134] The embodiment of the present application provides a computer readable storage medium, and the storage medium stores a computer program; when the computer program is executed by a processor, the streaming-based rendering method as described above is realized.

[0135] Alternatively, a non-volatile computer readable storage medium stores a computer program; when the computer program is executed by a processor, the processor performs the following operations:

[0136] receiving the streaming data sent by the backend and detecting a closing tag in the streaming data;

[0137] If the closed tag is detected for the first time in the streaming data, the closed tag and the streaming data received subsequently are stored in a buffer, and rendering is performed in a first rendering mode;

[0138] If the same type of closed tag continues to be detected in the streaming data, it is determined that the to-be-parsed block is received completely, the first rendering mode is switched to a second rendering mode and rendering is performed, wherein the second rendering mode comprises rendering the to-be-parsed block based on the buffer.

[0139] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by a computer program instructing related hardware. The program can be stored in a non-volatile computer readable storage medium, and when the program is executed, the processes of the above-mentioned embodiments can be included. Any reference to memory, storage, database or other medium used in the embodiments provided by the present application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. As an illustration but not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM) and memory bus dynamic RAM (RDRAM) and the like.

[0140] The above description is merely one specific implementation of the present application. Many modifications and variations of the described embodiments can be made by those skilled in the art without departing from the spirit or scope of the application. Thus, it is intended that the present application cover modifications and variations of this implementation provided they come within the scope of the appended claims and their equivalents.

[0141] Although the present application is disclosed as above, the protection scope of the present application is not limited to this. Those skilled in the art can make various changes and modifications without departing from the spirit and scope of the present application, and these changes and modifications shall fall within the protection scope of the present application.

Claims

1. A rendering method based on streaming transmission, characterized in that, When applied to the front end, the streaming-based rendering method includes: Receive streaming data sent from the backend and detect closing tags in the streaming data; If the closing tag is detected in the streaming data for the first time, the closing tag and the subsequently received streaming data are stored in the buffer and rendered according to the first rendering method. If the same type of closed tag is detected in the streaming data, it is determined that the block to be parsed has been received. The first rendering mode is switched to the second rendering mode and rendering is performed. The second rendering mode includes rendering the block to be parsed based on the buffer. The process of receiving streaming data sent from the backend and detecting closure tags in the streaming data includes: The system receives the streaming data sent by the backend, wherein the streaming data includes data blocks pushed in chunks, and the block to be parsed includes one or more of the data blocks; Based on the data block, detect whether it contains the closing tag in a preset format; If the closing tag is detected for the first time in the streaming data, the closing tag and the subsequently received streaming data are stored in a buffer and rendered according to the first rendering method, including: In the initial state, the closed tag is detected according to the preset composition structure, and an array is created. The array is used to mark the tag type and to splice and buffer the subsequently received streaming data. If the closed tag is detected, preset materials are loaded on the front-end page, wherein the preset materials include preset placeholders and / or preset animations.

2. The rendering method based on streaming transmission according to claim 1, characterized in that, Before receiving the streaming data sent by the backend, the method further includes: A streaming request is sent to the backend, and after the backend responds to the streaming request, a listening function and a processing function are called. The listening function is used to detect the streaming data, and the processing function is used to convert the format of the streaming data.

3. The rendering method based on streaming transmission according to claim 1, characterized in that, Also includes: In the initial state, if the closing tag is not detected in the streaming data, the page on the front end is rendered according to the first normal data until the closing tag is detected.

4. The rendering method based on streaming transmission according to claim 1 or 3, characterized in that, The composition structure includes the initial structure and the remaining structure of the closed label; the step of detecting the closed label according to the preset composition structure and creating an array includes: If the initial structure of the closed label is detected, the array is created based on the data block; If the remaining structure of a single closed tag is detected, it is determined that the closed tag has been detected, the tag type is modified to the closed tag, and the subsequently received streaming data is cached through the array.

5. The rendering method based on streaming transmission according to claim 4, characterized in that, Creating the array based on the data block includes: Create a string to store the received data block; Create the array, and increase the number of objects in the array according to the number of blocks to be parsed, wherein each object in the array contains the string stored according to each block to be parsed; A closed tag stack is created within the object, wherein the closed tag stack is used to receive the added closed tag when the closed tag is detected.

6. The rendering method based on streaming transmission according to claim 5, characterized in that, If the same type of closed tag is still detected in the streaming data, determining that the block to be parsed has been received, and switching the first rendering mode to the second rendering mode and performing rendering includes: Traverse the newly added objects in the array. If the outermost pair of closed tags is detected in the object, it is determined that the parsed block has been received. Remove the first rendering method and render the content of the parsed block contained in the outermost pair of closed tags on the page.

7. The rendering method based on streaming transmission according to claim 6, characterized in that, Also includes: Based on the rendered block to be parsed in the array, an end marker is created at the end position of the outermost closing tag; Based on the end marker, if no closing tag is present after the end marker, the page is rendered according to the second normal data until a new closing tag is detected.

8. A rendering system based on streaming transmission, characterized in that, include: The receiving and detection module is used to: receive streaming data sent by the backend and detect closed tags in the streaming data; The first rendering module is configured to: if the closing tag is detected for the first time in the streaming data, store the closing tag and the subsequently received streaming data into a buffer, and render them according to the first rendering method; The second rendering module is configured to: if the same type of closed tag is detected in the streaming data, determine that the block to be parsed has been received, switch the first rendering mode to the second rendering mode and perform rendering, wherein the second rendering mode includes rendering the block to be parsed based on the buffer; Specifically, the receiving and detection module is used for: The system receives the streaming data sent by the backend, wherein the streaming data includes data blocks pushed in chunks, and the block to be parsed includes one or more of the data blocks; Based on the data block, detect whether it contains the closing tag in a preset format; The first rendering module is specifically used for: In the initial state, the closed tag is detected according to the preset composition structure, and an array is created. The array is used to mark the tag type and to splice and buffer the subsequently received streaming data. If the closed tag is detected, preset materials are loaded on the front-end page, wherein the preset materials include preset placeholders and / or preset animations.

Images