Text display method and device, terminal equipment and storage medium

Abstract

The invention relates to the technical field of page processing, in particular to a text display method and device, terminal equipment and a storage medium, and the method comprises the following steps: when a page text scrolls, determining a head text in a text rendering range from a text queue, and determining a tail text according to the head text and a preset rendering number; rendering all unrendered texts in a text rendering range defined by the head text and the tail text; and deleting the document object model of the text which is not in the text rendering range so as to release the memory. Only the preset rendering number of texts in the page are rendered at the same time, and the pressure of a memory is greatly reduced.

Description

Technical Field

[0001] The present application relates to the field of page processing technology, and in particular to a text display method, apparatus, terminal device and storage medium. Background Art

[0002] With the development of banking business, when a customer initiates a loan process, according to the diversion rules, if a joint loan is hit, multiple lending institutions can be selected. At that time, the customer needs to pull up, read and sign the agreement; however, because multiple institutions jointly lend, many agreements will be pulled up, and the agreement formats provided by each cooperative institution are also different. When the number of agreements is greater than 20, the page will be stuck when the customer browses, reads and slides the agreement. Even when more reading agreements need to be displayed, the current page will be refreshed, blocking the current process. Currently, browsing and reading multiple agreements only supports the document object model tree. Due to the increase in the number of agreements, the number of rendered document object model nodes is huge, and the browser needs to process more nodes, which increases the rendering time and consumption of the page. When the number of document object model nodes continues to increase, they are not released in time, resulting in excessive memory usage by the browser, thus affecting page performance. Summary of the invention

[0003] In view of this, the embodiments of the present application provide a text display method, apparatus, terminal device and storage medium, which can effectively solve the problem of poor performance of multi-document display.

[0004] In a first aspect, an embodiment of the present application provides a text display method, comprising: When the page text is scrolling, the head text of the text rendering range is determined from the text queue, and the tail text is determined according to the head text and a preset rendering quantity; Rendering all unrendered text within the text rendering range framed by the head text and the tail text to display in the visible area; The document object model of the text that is not within the text rendering range is deleted to release memory.

[0005] In some embodiments, rendering all unrendered text within a text rendering range defined by the head text and the tail text includes: Determine all texts included between the header text and the tail text; Check if there is any unrendered text in all texts; If there is any unrendered text, the unrendered text is rendered.

[0006] In some embodiments, rendering the unrendered text includes: Determine the text type of the current text to be rendered; If the text type of the text is text in HTML format, a rendering operation is performed through the V-HTML tag of the vue component to display it; If the text type of the text is a text in PDF format, each page of the text is converted into an image and then displayed through an IMG tag; If the text type of the text is a picture, it is directly displayed through the IMG tag.

[0007] In some embodiments, determining the header text of the text rendering range includes: Determine the position data of each of the texts in the text queue, and determine the text offset of the text queue relative to the visible area; the position data includes the top distance and the bottom distance of each of the texts; A target text whose top distance is less than the text offset and whose bottom distance is greater than or equal to the text offset is determined, and a previous text adjacent to the target text is used as the header text.

[0008] In some embodiments, determining the position data of each text includes: The distance from the top of the text to the top of the first text in the text queue is used as the top distance; The distance from the bottom of the text to the top of the first text in the text queue is taken as the bottom distance; The position data also includes the text height and text sequence number of each of the texts; Determining the position data of each text also includes: If the text is not rendered, setting the text height to a default height; If the text has been rendered, the text height is set to the actual height recorded in the document object model after rendering; if the actual height is lower than the default height, the text height is set to the default height; the numerical value of the text in the text list is used as the text sequence number.

[0009] In some embodiments, determining the tail text according to the head text and a preset rendering quantity includes: The text serial number of the head text is added to the preset rendering quantity and then subtracted by one to obtain the text serial number of the tail text, and the corresponding tail text is determined according to the text serial number of the tail text.

[0010] In some embodiments, determining the text offset of the text queue in the visible area includes: The distance between the top of the first text in the text queue and the top of the visible area is calculated in real time, and the distance is used as the text offset.

[0011] In a second aspect, the present application further provides a text display device, comprising: A positioning module, used to determine the head text of the text rendering range from the text queue when the page text is scrolled, and determine the tail text according to the head text and a preset rendering quantity; A rendering module, used for rendering all unrendered texts within the text rendering range defined by the header text and the tail text; The deleting module is used to delete the document object model of the text that is not within the text rendering range to release memory.

[0012] In a third aspect, an embodiment of the present application further provides a terminal device, comprising a processor and a memory, wherein the memory stores a computer program, and the processor is used to execute the computer program to implement the text display method.

[0013] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium storing a computer program, which implements the text display method when executed on a processor.

[0014] The embodiments of the present application have the following beneficial effects: This embodiment limits the number of texts rendered simultaneously, thereby improving the fluency of users reading multiple texts and texts in multiple formats, reducing memory pressure, solving the problem of lag and unsmoothness during protocol reading, and greatly improving the client's interactive experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the embodiments will be briefly introduced below. It should be understood that the following drawings only show certain embodiments of the present application and therefore should not be regarded as limiting the scope. For ordinary technicians in this field, other related drawings can be obtained based on these drawings without paying creative work.

[0016] Figure 1 A flowchart of a text display method according to an embodiment of the present application is shown; Figure 2 A schematic diagram of a text display scenario in an embodiment of the present application is shown; Figure 3 A schematic diagram of a text rendering process in an embodiment of the present application is shown; Figure 4 A schematic diagram of the structure of a text display device according to an embodiment of the present application is shown. DETAILED DESCRIPTION

[0017] The technical solutions in the embodiments of the present application will be described clearly and completely below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, rather than all of the embodiments.

[0018] The components of the embodiments of the present application generally described and shown in the drawings herein may be arranged and designed in various configurations. Therefore, the following detailed description of the embodiments of the present application provided in the drawings is not intended to limit the scope of the application claimed for protection, but merely represents the selected embodiments of the present application. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without making creative work belong to the scope of protection of the present application.

[0019] Hereinafter, the terms "including", "having" and their cognates that can be used in various embodiments of the present application are intended only to indicate specific features, numbers, steps, operations, elements, components or a combination of the foregoing items, and should not be understood as first excluding the existence of one or more other features, numbers, steps, operations, elements, components or a combination of the foregoing items or increasing the possibility of one or more features, numbers, steps, operations, elements, components or a combination of the foregoing items. In addition, the terms "first", "second", "third" and the like are only used to distinguish descriptions and cannot be understood as indicating or implying relative importance.

[0020] Unless otherwise defined, all terms (including technical terms and scientific terms) used herein have the same meanings as those generally understood by those skilled in the art to which the various embodiments of the present application belong. The terms (such as those defined in generally used dictionaries) will be interpreted as having the same meanings as the contextual meanings in the relevant technical field and will not be interpreted as having idealized meanings or overly formal meanings unless clearly defined in the various embodiments of the present application.

[0021] The present application provides a text display method, which is applied to a mobile terminal page multi-text display scenario. When the page is displayed, only the text of the preset rendering display quantity will be rendered. When the user slides, the text rendering range will be determined according to the current central text. The text within the text rendering range that has not been rendered will be rendered, and the text outside the text rendering range will not be rendered, and the document object model outside the text rendering range will be deleted. In the same time period, only a fixed number of texts will be rendered, reducing memory requirements.

[0022] Next, the technical solution of the present application is described with specific embodiments.

[0023] Example 1 like Figure 1 As shown, the text display method provided in this embodiment includes: Step S100, when the page text is scrolling, determining the head text of the text rendering range from the text queue, and determining the tail text according to the head text and a preset rendering quantity; The visible area is the area where users can view text. Generally speaking, it is the area opened in the page where text can be displayed. The height and width of this area are fixed and do not exceed the size of the device display.

[0024] The text in the text queue in this embodiment refers to the text from various links when the user signs an agreement. For example, when the user takes out a loan, he or she needs to read and sign multiple agreements. These agreement texts are all separate files with their own formats and links. They need to be rendered before they can be displayed in the visible area. The above-mentioned agreement is the text mentioned in this embodiment, and different texts are different agreements.

[0025] When the texts need to be displayed in this embodiment, the text rendering range needs to be determined. The text rendering range of this embodiment is framed by the header text and the tail text, so the header text and the tail text need to be determined.

[0026] The rendering quantity is a preset value, that is, the number of texts that are rendered at the same time is the rendering quantity.

[0027] Specifically, each text in the text queue has its own position data, and the position data includes top distance and bottom distance. The top distance is the distance between the top of the text and the top of the first text in the text queue, and the bottom distance is the distance between the bottom of the text and the top of the visible area, which is the sum of the bottom distance of the adjacent previous text and the height of the text.

[0028] When the text queue is first displayed, the first text is displayed in the visible area. When the user slides the screen, the text will move upward. In this embodiment, the distance between the top of the first text and the top of the visible area is recorded, and this distance is the text offset.

[0029] Among them, the timing for displaying text in the visible area is when the text page is first opened for display, and when the user scrolls the screen. In the scenario where the user signs or views the agreement, it can be understood that after the user clicks on the agreement link, the user jumps to the agreement observation interface. At this time, the window that pops up is the visible area. When the window is just displayed, the agreement text must also be displayed, so rendering operations will be required at this time. In addition, when the user scrolls the screen, when the user scrolls the screen and the text moves up and down, the text outside the visible area will enter the visible area. At this time, this part of the text needs to be processed. Therefore, when the screen scrolls, a judgment will also be made to determine whether the text to be rendered has changed.

[0030] Specific as Figure 2 As shown, the dotted line portion is the visible area 100, and the solid line portion is each text. The distance between the top of text A and the top of the visible area 100 is L1, and L2 is the height of text A itself. It can also represent the bottom distance of text A. Because text A is the first text in the entire text queue, its bottom distance is its height. Similarly, the bottom distance of text B is calculated by adding the text height of text B to the bottom distance of text A. Text B and text A are adjacent and connected, so the top distance of text B is also the bottom distance of text A. By analogy, the top distance and bottom distance of all texts can be calculated.

[0031] The top distance and bottom distance of each text are equivalent to an indication interval, which can be used to indicate which text is currently located at the front of the visible area 100, such as Figure 2 L1 in is greater than the top distance of text B but less than the bottom distance of text B, so it can be determined that the text currently located at the top of the visible area 100 is text B, and the text before text B is text A, so text A is the head text.

[0032] For the tail text, after the head text is determined, it can be determined in combination with the preset rendering number. For example, if the rendering number is 3, including the head text, the 3 texts that follow in sequence are the tail text. Then, when text A is the head text, the tail text is text C.

[0033] In addition, the rendering quantity can also be 4, 5, 6 or other integers.

[0034] The above position data also includes text height and text sequence number.

[0035] If the text is not rendered, the text height is the preset default height. If the text is rendered, the text height is the actual height recorded in the document object model after rendering. If the actual height is lower than the default height, the text height is the default height. The text sequence number is the numerical order in which the text is sorted in the text list. The text sequence number can be used to calculate the tail text based on the head text. For example, if the sequence number of the head text is 4 and the preset rendering number is 5, the text sequence number of the tail text is 4+5-1=8. Therefore, after determining the head text based on the offset and position data, the text sequence number of the tail text can be calculated through simple calculations to determine the text rendering range.

[0036] The default height is half of the height of the visible area 100.

[0037] Step S200: Render all unrendered text within the text rendering range defined by the head text and the tail text.

[0038] The confirmation of the head text and the tail text is to define the text rendering range. The texts in this embodiment are arranged in sequence in the text queue, so a text rendering range can be framed according to the head text and the tail text.

[0039] After the text rendering range is determined, each text in the text rendering range will be checked in turn to see if it is rendered. If a text is found that has not been rendered but is within the text rendering range, the text will be rendered, otherwise the current rendering state will be maintained.

[0040] For example Figure 2 At this time, the header text is text A. When the user continues to slide the screen upward, text B will continue to scroll upward until text B becomes the new header text. If the rendering quantity is 3 at this time, the text rendering range will change from text A to text C to text B to text D. At this time, text D is the text that has newly entered the text rendering range and has not been rendered yet. Text D needs to be rendered.

[0041] In this embodiment, each text in the text queue is a separate file. Before rendering, each text is actually an independent URL address, and each address points to a corresponding text page. When rendering is required, the text is obtained from the URL address, and then the rendering operation is performed to obtain the document object model (DOM) of each text.

[0042] The format of each text may be different, and these formats may be HTML text format, PDF format or picture format. In this embodiment, different rendering methods are provided for each different format.

[0043] Specific as Figure 3 As shown in the figure, when a page needs to be rendered, the format type of the text in the current page to be rendered will be determined first. For text in HTML format, the V-HTML tag can be used to directly render it into a document object model node. If it is determined to be in PDF format, the PDF text will be converted into a collection of pictures according to the dimensions of each page. The format of the pictures is Base64, and then displayed on the page through the IMG tag; if it is determined to be a picture, it will be displayed directly through the IMG tag. Appropriate rendering is performed to adapt to different formats.

[0044] Secondly, since the content of each text is different, the height of each text is also not fixed. Therefore, when a text is loaded, the height of the text needs to be recalculated and recorded in the text's position data. According to the aforementioned instructions related to the position data, the text height is related to each position data. Therefore, when the height is updated, the various position data will also be updated accordingly.

[0045] For example, there are 10 texts in the initial text queue, and each text is not rendered, so their heights are all default heights, such as 200. Then, each text can calculate its own top distance and tail distance based on the default height. When the display starts, the first few texts are rendered. At this time, only the first few texts with the preset rendering number are rendered. The height of these texts will be updated from the default height to the actual height after rendering, and the layout of the entire text will also be updated according to the actual height, so as to ensure the correctness of the position data of each text.

[0046] In addition, depending on the user display interface, the width of the visible area 100 will also be different. Therefore, this embodiment will also perform adaptive compatibility operations based on the width and screen resolution. For example, based on the width and resolution, it determines how many characters can be displayed in a line, and then when rendering, it rearranges it according to the number of characters that can be displayed in each line to make it adapt.

[0047] Step S300, deleting the document object model of the text that is not in the text rendering range to release memory.

[0048] For text that is not in the text rendering range but is rendered, the document object model needs to be deleted. It can be understood that after the text is rendered, a corresponding document object model will be generated so that the text can be displayed on the page in an appropriate format. These document object models will be cached in the memory. Deleting these document object models is equivalent to freeing up memory space, so that the rendered text is no longer in a rendered state and cannot be directly displayed on the page.

[0049] For example, if the header text changes from text A to text B, and text A is no longer within the text rendering range, you need to delete the document object model of text A. This will free up memory space and keep the memory space at a lower occupancy rate.

[0050] On the contrary, if the header text is text B, and the user slides the screen downward, the text will scroll downward. At this time, the header text will change from text B to text A, and the text rendering range will change from text B to text D to text A to text C. At this time, text A will be rendered again, and the document object model of text D will be deleted.

[0051] Among them, as mentioned above, the height of the text will be updated after it is selected, but when the document object model of the text is deleted, the height of the text will not be updated back to the default height, but will be retained. On the one hand, it is convenient to determine the header text according to the offset in step S100, and on the other hand, because the user may scroll back the screen to view the protocol he has seen before, retaining the text height of each text can reduce the adaptive adjustment caused by the change of text height, and can also re-render these texts faster when the user rolls back, thereby increasing the user experience.

[0052] Example 2 like Figure 4 As shown, this embodiment also provides a text display device, including: A positioning module 10 is used to determine the head text of the text rendering range from the text queue when the page text is scrolled, and determine the tail text according to the head text and a preset rendering quantity; A rendering module 20, configured to render all unrendered text within the text rendering range defined by the header text and the tail text; The deleting module 30 is used to delete the document object model of the text that is not in the text rendering range to release memory.

[0053] An embodiment of the present application further provides a terminal device, which includes a processor and a memory, wherein the memory stores a computer program, and the processor is used to execute the computer program to implement the text display method.

[0054] The terminal device may be a mobile terminal, such as a mobile phone, a tablet computer or other mobile device terminal, or a desktop computer such as a computer that can run a client.

[0055] An embodiment of the present application further provides a computer-readable storage medium storing a computer program, wherein when the computer program is executed on a processor, the text display method is implemented.

[0056] It can be understood that the device of this embodiment corresponds to the method of the above embodiment, and the options in the above embodiment are also applicable to this embodiment, so they will not be described repeatedly here.

[0057] The present application also provides a terminal device. Exemplarily, the terminal device includes a processor and a memory, wherein the memory stores a computer program, and the processor runs the computer program, thereby enabling the terminal device to execute the functions of each module in the above method or the above apparatus.

[0058] Among them, the processor can be an integrated circuit chip with signal processing capabilities. The processor can be a general-purpose processor, including a central processing unit (CPU), a graphics processing unit (GPU), a network processor (NP), a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field programmable gate array (FPGA) or at least one of other programmable logic devices, discrete gates or transistor logic devices, and discrete hardware components. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc., which can implement or execute the methods, steps and logic block diagrams disclosed in the embodiments of the present application.

[0059] The memory may be, but is not limited to, a random access memory (RAM), a read only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable read-only memory (EEPROM), etc. The memory is used to store a computer program, and the processor may execute the computer program accordingly after receiving an execution instruction.

[0060] The present application also provides a computer-readable storage medium for storing the computer program used in the above-mentioned terminal device. For example, the computer-readable storage medium may include but is not limited to: a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, and other media that can store program codes.

[0061] In several embodiments provided in the present application, it should be understood that the disclosed devices and methods can also be implemented in other ways. The device embodiments described above are merely schematic. For example, the flowcharts and structure diagrams in the accompanying drawings show the possible architecture, functions and operations of the devices, methods and computer program products according to multiple embodiments of the present application. In this regard, each box in the flowchart or block diagram can represent a module, a program segment or a part of a code, and the module, a program segment or a part of a code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in an alternative implementation, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two consecutive boxes can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the structure diagram and / or the flow diagram, and the combination of boxes in the structure diagram and / or the flow diagram, can be implemented with a dedicated hardware-based system that performs a specified function or action, or can be implemented with a combination of dedicated hardware and computer instructions.

[0062] In addition, the functional modules or units in the various embodiments of the present application may be integrated together to form an independent part, or each module may exist separately, or two or more modules may be integrated to form an independent part.

[0063] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for enabling a computer device (which can be a smart phone, a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present application.

[0064] The above description is only a specific implementation manner of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application.

Claims

1. A text display method, characterized in that: include: When the page text is scrolling, the head text of the text rendering range is determined from the text queue, and the tail text is determined according to the head text and a preset rendering quantity; Rendering all unrendered text within the text rendering range framed by the head text and the tail text to display in the visible area; The document object model of the text that is not within the text rendering range is deleted to release memory.

2. The text display method according to claim 1, characterized in that: The rendering of all unrendered text within the text rendering range defined by the head text and the tail text frame includes: Determine all texts included between the header text and the tail text; Check if there is any unrendered text in all texts; If there is any unrendered text, the unrendered text is rendered.

3. The text display method according to claim 2, characterized in that: The rendering operation of the unrendered text includes: Determine the text type of the current text to be rendered; If the text type of the text is text in HTML format, a rendering operation is performed through the V-HTML tag of the vue component to display it; If the text type of the text is a text in PDF format, each page of the text is converted into an image and then displayed through an IMG tag; If the text type of the text is a picture, it is directly displayed through the IMG tag.

4. The text display method according to claim 1, characterized in that: The header text of the text rendering range is determined, including: Determine the position data of each of the texts in the text queue, and determine the text offset of the text queue relative to the visible area; the position data includes the top distance and the bottom distance of each of the texts; A target text whose top distance is less than the text offset and whose bottom distance is greater than or equal to the text offset is determined, and a previous text adjacent to the target text is used as the header text.

5. The text display method according to claim 4, characterized in that: The step of determining the position data of each text comprises: The distance from the top of the text to the top of the first text in the text queue is used as the top distance; The distance from the bottom of the text to the top of the first text in the text queue is taken as the bottom distance; The position data also includes the text height and text sequence number of each of the texts; Determining the position data of each text also includes: If the text is not rendered, setting the text height to a default height; If the text has been rendered, the text height is set to the actual height recorded in the document object model after rendering; if the actual height is lower than the default height, the text height is set to the default height; the numerical value of the text in the text list is used as the text sequence number.

6. The text display method according to claim 5, characterized in that: The step of determining the tail text according to the head text and a preset rendering quantity includes: The text serial number of the head text is added to the preset rendering quantity and then subtracted by one to obtain the text serial number of the tail text, and the corresponding tail text is determined according to the text serial number of the tail text.

7. The text display method according to claim 4, characterized in that: Determining the text offset of the text queue in the visible area includes: The distance between the top of the first text in the text queue and the top of the visible area is calculated in real time, and the distance is used as the text offset.

8. A text display device, characterized in that: include: A positioning module, used to determine the head text of the text rendering range from the text queue when the page text is scrolled, and determine the tail text according to the head text and a preset rendering quantity; A rendering module, used for rendering all unrendered texts within the text rendering range defined by the header text and the tail text; The deleting module is used to delete the document object model of the text that is not within the text rendering range to release memory.

9. A terminal device, characterized in that: The terminal device comprises a processor and a memory, wherein the memory stores a computer program, and the processor is configured to execute the computer program to implement the text display method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The device stores a computer program, which, when executed on a processor, implements the text display method according to any one of claims 1 to 7.

Images