Display processing method and device of browser, equipment and medium

Abstract

The invention relates to a browser display processing method and device, equipment and a medium, and the method comprises the steps: obtaining to-be-rendered data of a page, and determining target rendering data in a visual area of the page from the to-be-rendered data; performing drawing processing on the target rendering data based on canvas element nodes to generate a page image of the visual area; and displaying the page image of the visible area in a browser. According to the technical scheme, rendering efficiency can be improved, and lagging can be reduced.

Description

Technical Field

[0001] The present disclosure relates to the field of browser rendering technology, and in particular to a browser display processing method, device, equipment and medium. Background Art

[0002] With the development of web front-end technology, the content displayed in the browser is becoming more and more diverse. In the scenario of browser rendering big data, as the amount of rendering data increases, higher requirements are placed on the browser's rendering efficiency.

[0003] In the related art, for the various contents displayed on the page, each element node is used to process the various contents displayed separately. In this method, the display of content requires the superposition of multiple element nodes. Since the performance consumption of browser operation of element nodes is large, as the amount of data increases, the number of element nodes increases, resulting in an increase in the memory usage of the page and a freeze phenomenon. Summary of the invention

[0004] In order to solve the above technical problems, the present disclosure provides a browser display processing method, device, equipment and medium.

[0005] In a first aspect, an embodiment of the present disclosure provides a display processing method of a browser, comprising:

[0006] Acquire the data to be rendered of the page, and determine the target rendering data in the visible area of ​​the page from the data to be rendered;

[0007] Performing drawing processing on the target rendering data based on the canvas element node to generate a page image of the visible area;

[0008] The page image of the visible area is displayed in the browser.

[0009] In a second aspect, an embodiment of the present disclosure provides a display processing device of a browser, comprising:

[0010] An acquisition module, used for acquiring data to be rendered of a page, and determining target rendering data in a visible area of ​​the page from the data to be rendered;

[0011] A rendering module, used for performing drawing processing on the target rendering data based on a canvas element node to generate a page image of the visible area;

[0012] The display module is used to display the page image of the visible area in the browser.

[0013] In a third aspect, an embodiment of the present disclosure provides an electronic device, comprising: a processor; a memory for storing executable instructions of the processor; the processor is used to read the executable instructions from the memory and execute the instructions to implement the display processing method of the browser described in the first aspect above.

[0014] In a fourth aspect, an embodiment of the present disclosure 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 browser display processing method described in the first aspect is implemented.

[0015] The technical solution provided by the embodiments of the present disclosure has the following advantages over the prior art: by acquiring the data to be rendered of the page, the target rendering data in the visible area of ​​the page is determined from the data to be rendered, and then, the target rendering data is drawn based on the canvas element node to generate a page image of the visible area, and the page image of the visible area is displayed in the browser. Thus, the data rendering of the entire visible area is realized by drawing using the canvas element node. Compared with the browser rendering method in the related art, one canvas element node can replace other element nodes in the related art, thereby solving the technical problem of excessive memory occupation due to too many element nodes when traditional browsers render big data, thereby improving rendering efficiency and reducing jams. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the principles of the present disclosure.

[0017] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0018] Figure 1 A flowchart of a browser display processing method provided by an embodiment of the present disclosure;

[0019] Figure 2 A flowchart of another browser display processing method provided by an embodiment of the present disclosure;

[0020] Figure 3 A schematic diagram of the structure of a display processing device of a browser provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0021] In order to more clearly understand the above-mentioned objectives, features and advantages of the present disclosure, the scheme of the present disclosure will be further described below. It should be noted that the embodiments of the present disclosure and the features in the embodiments can be combined with each other without conflict.

[0022] In the following description, many specific details are set forth to facilitate a full understanding of the present disclosure, but the present disclosure may also be implemented in other ways different from those described herein; it is obvious that the embodiments in the specification are only part of the embodiments of the present disclosure, rather than all of the embodiments.

[0023] Figure 1 This is a flow chart of a display processing method of a browser provided in an embodiment of the present disclosure. The method provided in the embodiment of the present disclosure can be executed by a display processing device of the browser, which can be implemented in software and / or hardware and can be integrated on any electronic device with computing capabilities.

[0024] like Figure 1 As shown, the display processing method of the browser provided by the embodiment of the present disclosure may include:

[0025] Step 101 : obtaining data to be rendered of a page, and determining target rendering data within a visible area of ​​the page from the data to be rendered.

[0026] In this embodiment, a data scene is rendered in the front-end browser, a current page to be displayed is obtained, and all data to be rendered in the page are obtained, wherein the data to be rendered includes but is not limited to text, operation controls, images, icons, etc.

[0027] Among them, the visible area of ​​the page refers to the area of ​​the page that can be displayed in the browser. The visible area can be the entire area or a part of the area of ​​the page. Therefore, when the browser renders data, the data to be rendered in the visible area is determined from all the data to be rendered on the page as the target rendering data. Optionally, a container element is created. The container element serves as a container of the visible area to imitate the scroll bar height and realize the scrolling effect. The width and height of the container element are respectively consistent with the width and height of the visible area.

[0028] The following describes an implementation method for determining target rendering data from the data to be rendered.

[0029] In one embodiment of the present disclosure, target rendering data in the visible area of ​​a page is determined from the data to be rendered, including: determining the starting position of the row index of the target rendering data according to the height distance between the scroll bar and the top of the page and the row height of each row of data in the data to be rendered; calculating the number of rows of the target rendering data according to the row height and the height of the visible area; determining the ending position of the row index of the target rendering data according to the starting position of the row index and the number of rows of the target rendering data; and determining the target rendering data according to multiple rows of data to be rendered between the starting position and the ending position of the row index. Thus, the target rendering data in the visible area can be accurately determined from the data to be rendered, and the starting position and the ending position can be determined by indexing, thereby improving processing efficiency.

[0030] In this embodiment, based on the above container element, a scroll bar is set for the container element to achieve a scrolling effect in the direction indicated by the page height. According to the height distance between the scroll bar and the top of the page and the ratio between the row height of each row of data in the data to be rendered, the starting position of the row index of the target rendering data is calculated, and the starting position of the row index is used to indicate the data to be rendered that actually starts to be rendered. According to the ratio between the height of the visible area and the row height of each row of data in the data to be rendered, the number of rows of the target rendering data is calculated, and the number of rows is used to indicate the number of data actually rendered. Further, according to the starting position of the row index and the number of rows of the target rendering data, the end position of the row index is determined, and the end position of the row index is used to indicate the data to be rendered that ends. The multiple rows of data to be rendered between the starting position and the end position of the row index are determined as the target rendering data. Thus, when rendering the content of the visible area, the target rendering data to be rendered is determined from the data to be rendered, and other data to be rendered are not traversed and rendered to improve performance.

[0031] As an example, the starting position of the row index is N, and the ending position of the row index is M, then multiple rows of data to be rendered from the Nth row to the Mth row in the data to be rendered are determined as target rendering data.

[0032] As another example, the starting position of the row index is N, and the ending position of the row index is M, then the multiple rows of data to be rendered from the N-1th row to the M+1th row are determined as the target rendering data. In this example, the starting position of the row index determined according to the height distance between the scroll bar and the top of the page and the row height of each row of data to be rendered is the Nth row. In order to process the upper edge data, it is necessary to render one more piece of data upward, that is, to start rendering from the N-1th row of the data to be rendered, and, in order to process the lower edge data, it is necessary to render one more piece of data downward, that is, to render to the M+1th row of the data to be rendered. This can meet the needs of edge data processing and improve the edge display effect.

[0033] In this embodiment, after the starting position and the ending position of the row index are determined, the data columns to be rendered may be determined according to the columns configuration.

[0034] It should be noted that the above-mentioned implementation of determining the target rendering data based on multiple rows of data to be rendered between the starting position and the ending position of the row index is an example. The starting position and the ending position of the column index can also be determined according to actual needs, and the target rendering data can be determined in combination with the starting position and the ending position of the column index. For example, the starting position of the column index of the target rendering data is determined based on the width distance between the bottom scroll bar and the side of the page and the column width of each column of data in the data to be rendered; the number of columns of the target rendering data is calculated based on the column width and the width of the visible area; the ending position of the column index of the target rendering data is determined based on the starting position of the column index and the number of columns of the target rendering data; the target rendering data is determined based on the multiple columns of data to be rendered between the starting position and the ending position of the column index. No specific restrictions are made here.

[0035] Step 102 : performing drawing processing on the target rendering data based on the canvas element node to generate a page image of the visible area.

[0036] In this embodiment, a canvas element node is created, and the canvas element node realizes data rendering by drawing. The target rendering data is drawn by the canvas element node to generate a page image of the visible area. Optionally, the canvas element node is implemented by canvas, and the canvas element node is used to render the display content in the visible area. The canvas element node is placed inside the container element, and the scroll bar is positioned to the specified position of the container element to avoid the canvas element node from moving in the visible area with the scroll when the scroll bar scrolls. For example, taking the scroll bar scrolling along the vertical direction of the page as an example, the specified position can be the top, and the canvas element node is positioned to the top of the container element to avoid the canvas element node from moving in the visible area when scrolling occurs. For another example, taking the scroll bar scrolling along the horizontal direction of the page as an example, the specified position can be the left, and the canvas element node is positioned to the left of the container element to avoid the canvas element node from moving in the visible area when scrolling occurs. It should be noted that the positioning of the canvas element node to the specified position of the container element is only an example, and the canvas element node can be positioned to the bottom, left or other specified position of the container element as needed, which is not limited here.

[0037] Optionally, the target height is determined according to the product of the number of rows of data to be rendered and the row height of each row of data, and the scroll bar height is set for the container element according to the target height. For example, for n rows of data, the row height is h, and the scroll bar height n*h is set for the container element.

[0038] Therefore, a container element of corresponding size is created according to the width and height of the visible area, and a canvas element node is placed inside the container element to render the display content in the visible area. When scrolling occurs, the visible area changes, and the rendered display content also changes with the scrolling, achieving the display effect of page scrolling. At the same time, because the canvas element node is positioned at the specified position of the container element, the problem of the canvas element node moving in the visible area with scrolling is avoided.

[0039] In the relevant technologies of browser rendering scenarios, for the various contents displayed in the page, such as text, icons, operation controls, etc., each element node is used to process the above-mentioned various contents respectively, wherein the element node refers to an html (HyperText Markup Language) tag, such as a div tag, a ul tag, a table tag, etc., and multiple tags need to be superimposed to render the displayed content. For browser big data rendering, the amount of data that needs to be rendered is too much, resulting in too many element nodes. Further, due to the large performance consumption of the browser operating the element nodes, the page occupies too much memory and freezes. In this embodiment, a canvas element node is used to realize data rendering of the entire visible area by drawing. It can replace other element nodes in the relevant technology with a canvas element node, and the data and logical operations are stored on ordinary data objects, thereby solving the technical problem that the traditional browser renders big data because the number of element nodes is too large, which causes excessive memory usage, can reduce freezes and improve rendering efficiency.

[0040] The following is an example of the drawing processing of the target rendering data by the canvas element node.

[0041] The target rendering data includes but is not limited to text, operation controls, images, icons, etc.

[0042] As an example, the target rendering data includes text, and the target rendering data is processed based on the canvas element node, including: drawing table grid lines according to the predetermined column width and the row height of each row of data in the data to be rendered, and then comparing the width of the text with the column width. When the width of the text is less than or equal to the column width, the text is drawn between the table grid lines, and when the width of the text is greater than the column width, a preset ellipsis symbol is drawn between the table grid lines. In this example, the table grid lines are used to represent the layout of the displayed content. The column width can be determined according to the columns column configuration. The number of columns to be rendered is determined by the columns column configuration, and then the column width is calculated according to the ratio between the width of the visible area and the number of columns. When drawing text, the width and height of the text are calculated. When the width of the text is greater than the column width, it needs to be processed into an ellipsis symbol when drawing, for example, the text in the excess part is drawn as an ellipsis symbol "···". When the text is drawn when the width of the text is less than or equal to the column width, the problem of poor display effect caused by the text being drawn beyond the range can be solved, and the display effect of the text is improved. Optionally, the text can be drawn in the middle of the table grid line to ensure neat typesetting.

[0043] As another example, the target rendering data includes an operation control, and the target rendering data is drawn based on the canvas element node, including: drawing table grid lines according to the predetermined column width and the row height of each row of data in the data to be rendered, and then drawing the display content of the operation control between the table grid lines, and drawing the path of the operation control, and performing a fill operation on the operation control. In this example, the path of the operation control is drawn for subsequent determination of whether to interact with the operation control to realize the interactive function of the operation control. After drawing the path of the operation control, a fill operation is performed on the operation control. The fill operation is implemented, for example, using ctx.fill(), and the display content of the drawn operation button is overlaid on the background of the operation control for display. By drawing the path of the operation control and performing a fill operation, the drawn operation control supports interactive functions.

[0044] Optionally, the display content of the operation control includes text, and the display content of the operation control is drawn between the table grid lines, including: when the width of the text is less than or equal to the column width, the text is drawn between the table grid lines; and, when the width of the text is greater than the column width, a preset ellipsis symbol is drawn between the table grid lines. For example, when drawing text, the width and height of the text are calculated, and when the width of the text is greater than the column width, it is processed as an ellipsis symbol when drawing, for example, the excess part of the text is drawn as an ellipsis symbol, and the text is drawn when the width of the text is less than or equal to the column width.

[0045] Step 103: Display the page image in the visible area in the browser.

[0046] In this embodiment, after the canvas element node processes the target rendering data by drawing to generate a page image of the visible area, the page image of the visible area is displayed in the display area of ​​the browser interface.

[0047] As an example, when the page is displayed for the first time, the preset initial visible area is obtained, the target rendering data within the initial visible area of ​​the page is determined from the data to be rendered, and then the target rendering data is drawn based on the canvas element node to generate a page image of the initial visible area and display it in the browser.

[0048] As another example, when a page scrolling event occurs, in response to detecting the page scrolling event, the previous visible area before the page scrolling event occurs is determined, and the scrolling distance corresponding to the page scrolling event is determined, and the current visible area after the page scrolling event occurs is determined based on the previous visible area and the scrolling distance, and then, the target rendering data in the current visible area of ​​the page is determined from the data to be rendered, and the target rendering data is processed based on the canvas element node to generate a page image of the current visible area and display it in the browser. In this example, a page scrolling event is bound to a container element, and when a page scrolling event occurs, the above steps are re-executed to re-determine the target rendering data to be rendered and to re-execute rendering and display, so as to realize the page scrolling display function of the browser.

[0049] According to the technical solution of the embodiment of the present disclosure, the data to be rendered of the page is obtained, the target rendering data in the visible area of ​​the page is determined from the data to be rendered, and then, the target rendering data is drawn based on the canvas element node to generate a page image of the visible area, and the page image of the visible area is displayed in the browser. Thus, the data rendering of the entire visible area is realized by drawing using the canvas element node. Compared with the browser rendering method in the related art, one canvas element node can replace other element nodes in the related art, which solves the technical problem of excessive memory occupation due to too many element nodes when traditional browsers render big data, thereby improving rendering efficiency and reducing jams.

[0050] The functions and code implementations involved in the above embodiments are illustrated below.

[0051] The function setViewArr for setting the rendering data is defined. According to the row index starting position startIndex and the row index ending position endIndex, the target rendering data viewArr that needs to be rendered is obtained as data.slice(startIndex, endIndex). In addition, the rendering function render is defined. The target rendering data viewArr is first traversed, and the current row traversal element is obtained as row, and the current row traversal index is rowIndex. Then, columns is traversed in the row, and the current column traversal element col is obtained, and the current column traversal index colIndex is obtained.

[0052] During the drawing process, the code for drawing the table grid lines is implemented as follows: ctx.strokeRect(colIndex*colWidth, rowIndex*lineHeight, (colIndex+1)*colWidth, (rowIndex+1)*lineHeight); the code for calculating the text width is implemented as follows: const{width}=ctx.measureText(row.text); the code for drawing the text in the middle of the grid lines is implemented as follows: ctx.strokeText(row.text, ((2*colIndex+1)*colWidth) / 2, ((2*rowIndex+1)*lineHeight) / 2); and, the drawing path is implemented using ctx.rect(), and the filling is implemented using ctx.fill(). After determining the target rendering data to be rendered, different types of rendering methods can be called to support multiple types of rendering and display such as text, buttons, images, and icons.

[0053] Based on the above embodiment, the following is an explanation of the interaction process with the content displayed in the browser. In this embodiment, since the canvas element node realizes the data rendering of the visible area by drawing, when the data in the visible area contains operation controls, the interaction cannot be realized only by rendering by drawing. In order to achieve the effect of interacting with the content displayed in the browser, Figure 2 A flowchart of another browser display processing method provided by an embodiment of the present disclosure is shown in FIG. Figure 2 As shown, the method comprises the following steps:

[0054] Step 201, in response to detecting an event object that triggers a mouse event, obtaining a mouse pointer position corresponding to the event object.

[0055] In this embodiment, various mouse events are bound to the canvas element nodes. The mouse events include mouse button press event (mousedown), mouse button release event (mouseup), mouse pass event (mouseover), single-click event (click), double-click event (dblclick), etc. Then, when a mouse event occurs, in response to detecting the event object that triggers the mouse event, the mouse pointer position corresponding to the event object is obtained. The mouse pointer position is, for example, the coordinates (x, y) of the mouse pointer in the visible area.

[0056] Step 202: for each operation control in the target rendering data, draw the path of the operation control in sequence, and determine whether the mouse pointer is on the path of the operation control.

[0057] In this embodiment, in response to detecting an event object that triggers a mouse event, re-drawing is executed. For each operation control in the target rendering data, when drawing each operation control, the path of the operation control is drawn and a fill operation is performed, and at the same time, it is determined whether the mouse pointer position is on the path of the operation control. By executing the step of drawing the path when drawing the operation control, it is possible to determine whether the mouse pointer is on the path based on a function that determines whether a point is on the path while drawing the path, thereby achieving the effect of determining whether the mouse pointer is on the operation control.

[0058] Step 203: If the mouse pointer is located on the path of the target operation control, an event corresponding to the mouse event and the target operation control is executed.

[0059] In this embodiment, if the judgment result is that the mouse pointer position is on the path of the target operation control among all the operation controls, it is determined that the mouse pointer is on the target operation control, and the event corresponding to the mouse event and the target operation control is executed. If the judgment result is that the mouse pointer position is not on the path of any operation control, it is determined that the mouse pointer is not on any operation control, and the event corresponding to the operation control is not triggered.

[0060] As an example, taking operation controls A and operation controls B as examples, in response to detecting the event object when a mouse event is triggered, the path of operation control A is redrawn, wherein the rendering function is re-called, and the ctx.rect() function is called during rendering to draw the path of the operation control, and ctx.fill() is called for filling, and at the same time, it is determined whether the mouse pointer position is on the path of operation control A. If the judgment result is that the mouse pointer position is not on the path of operation control A, the path of operation control B is further redrawn, and at the same time, it is determined whether the mouse pointer position is on the path of operation control B. At this time, if the judgment result is that the mouse pointer position is on the path of operation control B, the event corresponding to operation control B is triggered according to the mouse event. For example, the mouse event is a click event, and the triggered event is to jump to a new page corresponding to operation control B.

[0061] In the disclosed embodiment, based on the data rendering of the visible area by drawing the canvas element node, the interactive function of the operation control is realized by drawing the path of the operation control and judging whether the mouse interacts with the operation control, so as to realize the interactive function of the operation control, thereby improving the rendering efficiency and achieving the effect equivalent to interacting with the content displayed by the browser.

[0062] Figure 3 A schematic diagram of a display processing device of a browser provided by an embodiment of the present disclosure is shown in FIG. Figure 3 As shown, the display processing device of the browser includes: an acquisition module 31, a rendering module 32, and a display module 33.

[0063] An acquisition module 31 is used to acquire the data to be rendered of the page, and determine the target rendering data in the visible area of ​​the page from the data to be rendered;

[0064] A rendering module 32, used for performing drawing processing on target rendering data based on canvas element nodes to generate a page image of a visible area;

[0065] The display module 33 is used to display the page image in the visible area in the browser.

[0066] In one embodiment of the present disclosure, the acquisition module 31 is specifically used to:

[0067] Determine the starting position of the row index of the target rendering data according to the height distance between the scroll bar and the top of the page and the row height of each row of data in the data to be rendered;

[0068] Calculate the number of rows of target rendering data based on the row height and the height of the visible area;

[0069] Determine the end position of the row index of the target rendering data according to the start position of the row index and the number of rows of the target rendering data;

[0070] The target rendering data is determined according to a plurality of lines of to-be-rendered data between the start position and the end position of the line index.

[0071] In one embodiment of the present disclosure, the starting position of the row index is N, and the ending position of the row index is M. The acquisition module 31 is specifically used for:

[0072] According to the multiple lines of to-be-rendered data from the N-1th line to the M+1th line, target rendering data is determined.

[0073] In one embodiment of the present disclosure, the target rendering data includes an operation control, and the rendering module 32 is specifically used to:

[0074] Draw table grid lines according to the predetermined column width and the row height of each row of data to be rendered;

[0075] Draw the display content of the operation control between the table grid lines;

[0076] Draws the path of the operation control and performs fill operations on the operation control.

[0077] In one embodiment of the present disclosure, the displayed content includes text, and the rendering module 32 is specifically used to:

[0078] Draw text between table grid lines when the text width is less than or equal to the column width;

[0079] Draws a preset ellipsis symbol between table grid lines when the text width is greater than the column width.

[0080] In one embodiment of the present disclosure, the device further includes:

[0081] An interaction module, for obtaining a mouse pointer position corresponding to an event object in response to detecting an event object when a mouse event is triggered;

[0082] For each operation control in the target rendering data, draw the path of the operation control in turn, and determine whether the mouse pointer position is on the path of the operation control;

[0083] If the mouse pointer is on the path of the target operation control, the event corresponding to the mouse event and the target operation control is executed.

[0084] In one embodiment of the present disclosure, the acquisition module 31 is specifically used to:

[0085] In response to detecting a page scrolling event, determining a current visible area according to a previous visible area and a scrolling distance of the page scrolling event;

[0086] The target rendering data in the current visible area is determined from the data to be rendered.

[0087] In one embodiment of the present disclosure, the device further includes:

[0088] The preprocessing module is used to create a container element; the container width of the container element is consistent with the width of the visible area, and the container height is consistent with the height of the visible area;

[0089] A canvas element node is created and placed inside a container element; the canvas element node is positioned at a specified position of the container element by using a scroll bar.

[0090] In one embodiment of the present disclosure, the device further includes:

[0091] A setting module, used for determining a target height according to the product between the number of rows of data to be rendered and the row height of each row of data in the data to be rendered;

[0092] Sets the scrollbar height for the container element according to the target height.

[0093] In one embodiment of the present disclosure, the device further includes:

[0094] A determination module, used to determine the number of columns to be rendered according to the column configuration;

[0095] The column width is determined based on the ratio between the width of the visible area and the number of columns.

[0096] The browser display processing device provided in the embodiment of the present disclosure can execute any browser display processing method provided in the embodiment of the present disclosure, and has the corresponding functional modules and beneficial effects of the execution method. The contents not described in detail in the embodiment of the device of the present disclosure can refer to the description in any method embodiment of the present disclosure.

[0097] The present disclosure also provides an electronic device, which includes one or more processors and a memory. The processor may be a central processing unit (CPU) or other forms of processing units with data processing capabilities and / or instruction execution capabilities, and may control other components in the electronic device to perform desired functions. The memory may include one or more computer program products, and the computer program product may include various forms of computer-readable storage media, such as volatile memory and / or non-volatile memory. Volatile memory may include, for example, random access memory (RAM) and / or cache memory (cache), etc. Non-volatile memory may include, for example, read-only memory (ROM), hard disk, flash memory, etc. One or more computer program instructions may be stored on a computer-readable storage medium, and the processor may run the program instructions to implement the method of the above embodiment of the present disclosure and / or other desired functions. Various contents such as input signals, signal components, noise components, etc. may also be stored in the computer-readable storage medium.

[0098] In one example, the electronic device may further include: an input device and an output device, and these components are interconnected through a bus system and / or other forms of connection mechanisms. In addition, the input device may also include, for example, a keyboard, a mouse, etc. The output device may output various information to the outside, including determined distance information, direction information, etc. The output device may include, for example, a display, a speaker, a printer, and a communication network and a remote output device connected thereto, etc. In addition, according to the specific application, the electronic device may also include any other appropriate components such as a bus, an input / output interface, etc.

[0099] In addition to the above methods and devices, the embodiments of the present disclosure may also be a computer program product, which includes computer program instructions. When the computer program instructions are executed by a processor, the processor executes any method provided by the embodiments of the present disclosure.

[0100] The computer program product may be written in any combination of one or more programming languages ​​to write program code for performing the operations of the disclosed embodiments, including object-oriented programming languages ​​such as Java, C++, etc., and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as a separate software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0101] In addition, the embodiments of the present disclosure may also be a computer-readable storage medium on which computer program instructions are stored. When the computer program instructions are executed by a processor, the processor executes any method provided by the embodiments of the present disclosure.

[0102] Computer readable storage media can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can include, for example, but is not limited to, a system, device or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0103] It should be noted that, in this article, relational terms such as "first" and "second" 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 these entities or operations. Moreover, the terms "include", "comprise" or any other variants thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise a ..." do not exclude the existence of other identical elements in the process, method, article or device including the elements.

[0104] The above description is only a specific embodiment of the present disclosure, so that those skilled in the art can understand or implement the present disclosure. Various modifications to these embodiments will be apparent to those skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present disclosure. Therefore, the present disclosure will not be limited to the embodiments described herein, but will conform to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A display processing method of a browser, characterized in that: The method comprises: Acquire the data to be rendered of the page, and determine the target rendering data in the visible area of ​​the page from the data to be rendered; Performing drawing processing on the target rendering data based on the canvas element node to generate a page image of the visible area; The page image of the visible area is displayed in the browser.

2. The method according to claim 1, characterized in that The step of determining target rendering data within a visible area of ​​the page from the data to be rendered includes: Determine the starting position of the row index of the target rendering data according to the height distance between the scroll bar and the top of the page and the row height of each row of data in the data to be rendered; Calculate the number of rows of the target rendering data according to the row height and the height of the visible area; Determine the end position of the row index of the target rendering data according to the start position of the row index and the number of rows of the target rendering data; A plurality of lines of to-be-rendered data between the starting position and the ending position of the line index are determined as the target rendering data.

3. The method according to claim 2, characterized in that The starting position of the row index is N, the ending position of the row index is M, and the multiple rows of to-be-rendered data between the starting position and the ending position of the row index are determined as the target rendering data, including: The target rendering data is determined according to a plurality of lines of to-be-rendered data from the N-1th line to the M+1th line.

4. The method according to claim 1, characterized in that The target rendering data includes an operation control, and the drawing processing of the target rendering data based on the canvas element node includes: Draw table grid lines according to a predetermined column width and a row height of each row of data in the data to be rendered; Drawing the display content of the operation control between the grid lines of the table; Draw a path of the operation control, and perform a filling operation on the operation control.

5. The method according to claim 4, characterized in that The display content includes text, and the display content of the operation control drawn between the grid lines of the table includes: When the width of the text is less than or equal to the column width, draw the text between the table grid lines; When the width of the text is greater than the column width, a preset ellipsis symbol is drawn between the table grid lines.

6. The method according to claim 4, characterized in that The method further comprises: In response to detecting an event object when a mouse event is triggered, obtaining a mouse pointer position corresponding to the event object; For each operation control in the target rendering data, drawing the path of the operation control in sequence, and determining whether the position of the mouse pointer is on the path of the operation control; If the mouse pointer is located on the path of the target operation control, an event corresponding to the mouse event and the target operation control is triggered.

7. The method according to claim 1, characterized in that The step of determining target rendering data within a visible area of ​​the page from the data to be rendered includes: In response to detecting a page scrolling event, determining a current visible area according to a previous visible area and a scrolling distance of the page scrolling event; Target rendering data within the current visible area is determined from the data to be rendered.

8. The method according to claim 1, characterized in that The method further comprises: Create a container element; the container width of the container element is consistent with the width of the visible area, and the container height is consistent with the height of the visible area; The canvas element node is created and placed inside the container element; wherein the canvas element node is positioned at a specified position of the container element by using a scroll bar.

9. The method according to claim 8, characterized in that After creating the container element, the method further includes: Determine a target height according to the product of the number of rows of the data to be rendered and the row height of each row of the data to be rendered; A scroll bar height is set for the container element according to the target height.

10. The method according to claim 4, characterized in that The method further comprises: Determine the number of columns to render based on the column configuration; The column width is determined according to a ratio between the width of the visible area and the number of columns.

11. A display processing device for a browser, characterized in that: include: An acquisition module, used for acquiring data to be rendered of a page, and determining target rendering data in a visible area of ​​the page from the data to be rendered; A rendering module, used for performing drawing processing on the target rendering data based on a canvas element node to generate a page image of the visible area; The display module is used to display the page image of the visible area in the browser.

12. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is used to read the executable instructions from the memory and execute the instructions to implement the display processing method of the browser described in any one of claims 1-10.

13. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by a processor, the display processing method of the browser described in any one of claims 1 to 10 is implemented.

Images