Webpage page loading method and device, storage medium and electronic equipment

Abstract

This disclosure relates to a method, apparatus, storage medium, and electronic device for loading web pages, belonging to the field of computer technology. The method includes: extracting the main content structure of the web page and the website copyright information structure from an original hypertext markup language (HTML) file; constructing new child nodes based on the main content structure and the website copyright information structure, and updating the original HTML file based on the new child nodes to obtain a target HTML file; rearranging the main content of the web page and the website copyright information from an original cascading style sheet (CSS) file based on the new child nodes included in the target HTML file to obtain a target CSS file; and rendering the web page to be loaded based on the target HTML file and the target CSS file. This disclosure improves page loading efficiency.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and more specifically, to a method for loading web pages, a device for loading web pages, a computer-readable storage medium, and an electronic device. Background Technology

[0002] In existing webpage loading methods, loading copyright information included in the webpage triggers a page reflow and repaint, resulting in low loading efficiency.

[0003] It should be noted that the information in the background section above is only used to enhance the understanding of the background of this disclosure, and therefore may include information that does not constitute prior art known to those skilled in the art. Summary of the Invention

[0004] The purpose of this disclosure is to provide a method for loading web pages, a device for loading web pages, a computer-readable storage medium, and an electronic device, thereby overcoming, at least to some extent, the problem of low loading efficiency caused by the limitations and defects of related technologies.

[0005] According to one aspect of this disclosure, a method for loading a webpage is provided, comprising:

[0006] Obtain the original hypertext markup language file and the original cascading style sheet file corresponding to the web page to be loaded, and extract the main content structure of the web page and the website copyright information structure included in the original hypertext markup language file;

[0007] Based on the main content structure of the webpage and the website copyright information structure, new child nodes are constructed, and the original hypertext markup language file is updated based on the new child nodes to obtain the target hypertext markup language file;

[0008] Based on the newly added child nodes included in the target hypertext markup language file, the main content of the webpage and the website copyright information included in the original cascading style sheet file are rearranged to obtain the target cascading style sheet file.

[0009] Based on the target Hypertext Markup Language file and the target Cascading Style Sheets file, the layout rendering of the web page to be loaded is performed.

[0010] According to one aspect of this disclosure, a webpage loading device is provided, comprising:

[0011] The information extraction module is used to obtain the original hypertext markup language file and the original cascading style sheet file corresponding to the web page to be loaded, and to extract the main content structure of the web page and the website copyright information structure included in the original hypertext markup language file.

[0012] The child node construction module is used to construct new child nodes based on the main content structure of the webpage and the copyright information structure of the website, and to update the original hypertext markup language file based on the new child nodes to obtain the target hypertext markup language file;

[0013] The layout and arrangement module is used to rearrange the main content of the webpage and the website copyright information included in the original Cascading Style Sheet file based on the newly added child nodes included in the target Hypertext Markup Language file, so as to obtain the target Cascading Style Sheet file.

[0014] The layout rendering module is used to perform layout rendering on the web page to be loaded based on the target hypertext markup language file and the target cascading style sheet file.

[0015] According to one aspect of this disclosure, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the webpage loading method described in any of the preceding claims.

[0016] According to one aspect of this disclosure, an electronic device is provided, comprising:

[0017] Processor; and

[0018] Memory for storing the executable instructions of the processor;

[0019] The processor is configured to execute the web page loading method described above by executing the executable instructions.

[0020] This disclosure provides a method for loading a webpage. On one hand, it extracts the main content structure and website copyright information structure from the original Hypertext Markup Language (HTML) file; then, it constructs new child nodes based on these structures and updates the original HTML file to obtain a target HTML file; next, it rearranges the main content and website copyright information from the original Cascading Style Sheets (CSS) file based on the new child nodes in the target HTML file to obtain a target CSS file; finally, it renders the webpage to be loaded based on the target HTML file and the target CSS file. This eliminates the need to trigger page reflow and repaint during layout rendering, solving the problem of low loading efficiency caused by page reflow and repaint in existing technologies, thus improving page loading efficiency. On the other hand, it eliminates the need to listen to loading events during page layout rendering, avoiding the heavy system burden caused by adding a large amount of implementation code due to the need to listen to loading events.

[0021] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0022] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure. It is obvious that the drawings described below are merely some embodiments of this disclosure, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort.

[0023] Figure 1 The illustration shows an example web interface without a scrollbar.

[0024] Figure 2 The diagram illustrates an example of a web page interface with a scrollbar.

[0025] Figure 3 The diagram illustrates a code example of a webpage interface implemented using JavaScript to manipulate the HTML DOM.

[0026] Figure 4 This diagram illustrates an example of a webpage interface implemented using JavaScript to manipulate the HTML DOM.

[0027] Figure 5 The flowchart illustrates a method for loading a web page according to an exemplary embodiment of the present disclosure.

[0028] Figure 6 The diagram illustrates an application scenario of a webpage loading method according to an example embodiment of the present disclosure.

[0029] Figure 7 This diagram schematically illustrates an example of how a webpage loads according to an exemplary embodiment of this disclosure.

[0030] Figure 8 This diagram illustrates an example of a typical entry HTML file document structure.

[0031] Figure 9 This diagram schematically illustrates an example structure of a raw hypertext markup language file according to an exemplary embodiment of this disclosure.

[0032] Figure 10 This diagram schematically illustrates an example structure of a target hypertext markup language file according to an exemplary embodiment of the present disclosure.

[0033] Figure 11 The flowchart illustrates a method for rearranging the main content of a webpage and website copyright information included in an original Cascading Style Sheets (CSS) file based on newly added child nodes included in a target Hypertext Markup Language (HTML) file, according to an example embodiment of the present disclosure, to obtain a target CSS file.

[0034] Figure 12 This diagram schematically illustrates an example structure of a target cascading style sheet file according to an exemplary embodiment of the present disclosure.

[0035] Figure 13 A block diagram schematically illustrates a web page loading device according to an exemplary embodiment of the present disclosure.

[0036] Figure 14 An electronic device for implementing the above-described webpage loading method is illustrated according to an example embodiment of this disclosure. Detailed Implementation

[0037] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided to make this disclosure more comprehensive and complete, and to fully convey the concept of the example embodiments to those skilled in the art. The described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. In the following description, numerous specific details are provided to give a full understanding of embodiments of this disclosure. However, those skilled in the art will recognize that the technical solutions of this disclosure can be practiced with one or more of the specific details omitted, or other methods, components, apparatus, steps, etc., can be employed. In other instances, well-known technical solutions are not shown or described in detail to avoid obscuring various aspects of this disclosure.

[0038] Furthermore, the accompanying drawings are merely illustrative of this disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and therefore repeated descriptions of them will be omitted. Some block diagrams shown in the drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities may be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0039] In specific webpage display scenarios, a standard website must display its copyright information (i.e., copyright ownership) at the bottom of each webpage. In practice, the module corresponding to the website's copyright information remains fixed at the bottom of the page as different pages are opened within the website. Nowadays, many websites are single-page web applications (SPAs). Within the same domain, they seamlessly switch routes to display corresponding webpages through a routing mechanism encapsulated by a History object. Because the copyright information is fixed at the bottom of the page and closely attached to the main content, if the content can be displayed within a single screen (i.e., without a scrollbar), switching between pages can result in a choppy, unpleasant user experience.

[0040] by Figure 1 as well as Figure 2 Taking the webpage display interface shown as an example, it can be... Figure 1 The webpage shown is marked as A. Figure 2 The webpage shown is labeled B. Because the main content of A is quite long, scrolling is required to view the copyright information at the bottom. Clicking a button redirects to B, where the main content is shorter and the copyright information can be viewed without scrolling. Figure 1 as well as Figure 2 As shown in the webpage, when the main content changes from A to B or B to A at different heights, if the overall content of B is too small, resulting in blank space near the bottom of the webpage, the content change will appear abrupt, and the visual experience will be affected. At the same time, due to the uncertainty of the height occupied by the main content of B, blank space may appear at the bottom of the webpage without the creation of a scrollbar. Therefore, the height occupied by the main content is dynamically calculated and filled using JavaScript, so that the copyright information is moved to the bottom.

[0041] To solve the above problems, the conventional solution is based entirely on JavaScript manipulating the HTML DOM (DOM stands for Document Object Model, a document object model specifically for HTML / XHTML; the HTML DOM can be understood as the API of a webpage, which treats each element in the webpage as an object, allowing the elements in the webpage to be read and written by computer languages). Specifically, this is achieved by obtaining the browser window height X, the height of the main content of the webpage Y, and the height of the copyright information Z. If X is less than Y, no processing is done; if X is less than Y+Z, no processing is done; if X is greater than Y+Z, appropriate processing is performed. The difference between X and Y+Z is calculated and marked as M. The margin-top of the copyright information is dynamically declared as M, causing it to automatically expand those blank areas, keeping the copyright information at the bottom. For the specific implementation code, please refer to [reference needed]. Figure 3 The example screenshot of the website's display interface shown below can be used as a reference. Figure 4 As shown.

[0042] However, while using JavaScript to brute-force style declarations to fix the copyright information module automatically at the bottom of the page without generating a scrollbar is a solution, its implementation suffers from several drawbacks. Specifically, these drawbacks include: First, the overall implementation relies on JavaScript to manipulate the HTML DOM. DOM manipulation inevitably triggers a reflow and repaint after the page has finished loading, leading to low page loading efficiency. Second, this process needs to be reset every time the route is switched, meaning frequent page switching exacerbates the reflow and repaint after page loading. Third, the `onLoad` event needs to be listened to after each page load, requiring a significant amount of code for what should be a simple function, thus increasing the system load. Furthermore, it relies on `Script` tags for inline or external integration, making the loading process complex. Inline integration involves injecting code into the HTML structure via `script` tags, while external integration involves creating a new JavaScript file and then embedding it into the HTML structure via `script` tags. Fourth, it requires using JavaScript's `History` or `Hash` objects to encapsulate a listening URL (Uniform Resource Locator). Locator (Uniform Resource Locator) changes allow for route monitoring functions, enabling dynamic handling of URL changes. However, this process requires writing a significant amount of code. While projects using front-end frameworks like React / Vue can utilize built-in listener functions, this makes conventional solutions inflexible and often necessitates the integration of third-party modules, increasing implementation difficulty and complexity. Furthermore, if asynchronous loading occurs, the height of the main content must wait for asynchronous loading to complete before calculation, requiring an additional asynchronous monitoring mechanism. Customizing such an asynchronous monitoring mechanism to address the uncertainty of the main content makes the process even more challenging.

[0043] Based on this, this exemplary embodiment first provides a method for loading a webpage. This method can run on a terminal device, which may include a mobile terminal, such as a mobile phone, tablet computer, or PDA (Personal Digital Assistant), or a PC (Personal Computer) or desktop computer. Of course, those skilled in the art can also run the method disclosed herein on other platforms as needed, and this exemplary embodiment does not impose any special limitations on this. Specifically, refer to... Figure 5 As shown, the method for loading this webpage may include the following steps:

[0044] Step S510. Obtain the original Hypertext Markup Language file and the original Cascading Style Sheet file corresponding to the web page to be loaded, and extract the main content structure of the web page and the website copyright information structure included in the original Hypertext Markup Language file;

[0045] Step S520. Construct new child nodes based on the main content structure of the webpage and the copyright information structure of the website, and update the original hypertext markup language file based on the new child nodes to obtain the target hypertext markup language file;

[0046] Step S530. Based on the newly added child nodes included in the target hypertext markup language file, rearrange the main content of the webpage and the website copyright information included in the original cascading style sheet file to obtain the target cascading style sheet file;

[0047] Step S540. Based on the target Hypertext Markup Language file and the target Cascading Style Sheet file, perform layout rendering on the web page to be loaded.

[0048] In the aforementioned method for loading web pages, on the one hand, the main content structure and website copyright information structure of the original hypertext markup language file can be extracted; then, new child nodes are constructed based on the main content structure and website copyright information structure, and the original hypertext markup language file is updated based on the new child nodes to obtain the target hypertext markup language file; then, based on the new child nodes included in the target hypertext markup language file, the main content of the web page and the website copyright information included in the original cascading style sheet file are rearranged to obtain the target cascading style sheet file; finally, based on the target hypertext markup language file and the target cascading style sheet file, the web page to be loaded is laid out and rendered. Therefore, during the layout rendering, there is no need to trigger page reflow and repaint, which solves the problem of low loading efficiency caused by triggering page reflow and repaint in the existing technology, and improves the page loading efficiency. On the other hand, during the page layout rendering process, the display of website copyright information can be achieved without listening to loading events, avoiding the problem of heavy system burden caused by adding a lot of implementation code due to the need to listen to loading time.

[0049] The following will provide a detailed explanation and description of the webpage loading method of the exemplary embodiments of this disclosure, in conjunction with the accompanying drawings.

[0050] First, the inventive purpose of this exemplary embodiment will be explained and described. Specifically, this exemplary embodiment provides a method for loading a webpage, which can dynamically control the display of website copyright information at the bottom of the webpage; at the same time, no source code is modified during the construction phase, but the derived code after the project is packaged is modified at the final node of the construction phase (packaging process), realizing a non-intrusive implantation process; at the same time, a pure CSS implementation method is provided during the runtime phase, minimizing the access cost and development cost, and incidentally solving the pain points of the above-mentioned conventional solutions. The overall implementation principle may include: using CSS (Cascading Style Sheets) to declare and dynamically calculate the browser's layout, thereby replacing the behavior of manipulating the HTML DOM with JavaScript. During the construction phase, the document structure of the website entry HTML file is read, converted into an abstract syntax tree, and the element structure of the main content and the element structure of the copyright information are identified. These two elements are extracted, wrapped in a Div (separator) tag, and their original document positions are replaced. Finally, the CSS entry file is located and the CSS code of the webpage to be loaded is inserted into it. Meanwhile, the webpage loading method described in the example embodiments of this disclosure can fully support PC browsers and mobile browsers, and is backward compatible with conventional solutions, enabling it to be applied normally in production environments.

[0051] Secondly, the application scenarios of the exemplary embodiments of this disclosure will be explained and described. Specifically, refer to... Figure 6 As shown, the page state detection method described in the example embodiments of this disclosure can be applied to scenarios including a terminal device 610 and a server 620. The terminal device and the server can communicate via a wired or wireless network; simultaneously, the terminal device can be used to implement the webpage loading method described in the example embodiments of this disclosure, and the server can be used to provide the terminal device with the data required for loading the webpage.

[0052] The following will combine Figure 7 This section explains and clarifies the loading principle of a webpage. Specifically, when a webpage needs to be loaded, the browser on the terminal device first requests the corresponding text file from the server. This text file can include HTML files and CSS files. (See also...) Figure 7As shown, once the terminal device receives the HTML file, it begins parsing it. The result of parsing the HTML file is the DOM (Document Object Model). At this point, the HTML document has been loaded and parsed. Simultaneously, the CSSOM (Cascading Style Sheets Object Model) is generated based on the CSS file. Further, the DOM and CSSOM are merged to produce the Render Tree. With the Render Tree, the styles of all the nodes in the webpage to be loaded can be determined. Based on these nodes and styles, their exact size and position in the browser (or display interface) on the display terminal can be calculated, that is, the page layout can be calculated. With the page layout information, the nodes can be drawn onto the browser (display interface), completing the overall loading process.

[0053] The following will combine Figures 6-7 right Figure 5 The method for loading the webpage shown is explained in detail. Specifically:

[0054] In step S510, the original hypertext markup language file and the original cascading style sheet file corresponding to the web page to be loaded are obtained, and the main content structure of the web page and the website copyright information structure included in the original hypertext markup language file are extracted.

[0055] In this example embodiment, firstly, when a webpage needs to be loaded, the terminal device can send a file retrieval request to the server corresponding to the webpage to be loaded; after receiving the file retrieval request, the server can send back to the terminal device the original Hypertext Markup Language (HTML) file and the original Cascading Style Sheets (CSS) file corresponding to the webpage to be loaded; wherein, the original HTML file described here is different from the HTML file described in existing technical solutions; for example, the document structure of a conventional entry HTML file can be as follows: Figure 8 As shown. Specifically, in Figure 8 In the document structure of the HTML file shown, the structure enclosed by the div tag with the class "main" is the main content, and the structure enclosed by the div tag with the class "footer" is the copyright information; furthermore, the original Hypertext Markup Language file described in the example embodiments of this disclosure can be found in [reference needed]. Figure 9 As shown.

[0056] Secondly, after the terminal device receives the original Hypertext Markup Language (HTML) file and the original Cascading Style Sheets (CSS) file, it can extract the main webpage structure and website copyright information structure included in the original HTML file. Specifically, this can be achieved as follows: First, the original HTML file is parsed to obtain the original Document Object Model (DOM), and the original Abstract Syntax Tree (ABST) is generated based on the DOM. Second, all current child nodes in the ABST are traversed, and the first target child node containing the main webpage content structure and the second target child node containing the website copyright information structure are determined from these current child nodes. Then, the main webpage content structure is extracted from the first target child node, and the website copyright information structure is extracted from the second target child node.

[0057] Specifically, in practical applications, when receiving such... Figure 9 After obtaining the original Hypertext Markup Language (HTML) file, the corresponding executable script can be launched to locate the index.html file in the dist directory of the original HTML file (this is usually the directory in a production website environment, but you need to specify it yourself). Then, the readFileSync function of the NodeJS Fs (File System) module is used to read the content of the index.html file. The HtmlParser (HTML parser) module is used to convert this content into an Abstract Syntax Tree (AST). From this AST, the child nodes (i.e., the first target child node and the second target child node) with type "tag", name "div" (a separating tag), and attribs (attributes) class with the above class names (the class names in the example above are main and footer, but the specific cases depend on the project being processed; this is just an example) are found. Then, the main content structure of the webpage and the website copyright information structure included in the first target child node and the second target child node are extracted.

[0058] In step S520, new child nodes are constructed based on the main content structure of the webpage and the copyright information structure of the website, and the original hypertext markup language file is updated based on the new child nodes to obtain the target hypertext markup language file.

[0059] In this example embodiment, firstly, new child nodes are constructed based on the main content structure of the webpage and the website copyright information structure. Specifically, this can be achieved as follows: First, a separator tag is constructed, and a root element identifier is configured for the separator tag; secondly, the new child node is generated based on the main content structure of the webpage, the website copyright information structure, and the separator tag with the root element identifier. Specifically, in practical applications, an HtmlParser module can be used to construct a Div tag, which uses Root (root element) as its ID (identifier), and then the resulting separator tag with the root element identifier is converted into a standard AST child node (new child node); wherein, the standard AST child node may include the first target child node where the main content structure of the webpage is located, and the second target child node where the website copyright information structure is located. The Div tag described here can be called a separator mark or separator tag, and the function of the separator tag can be: setting the placement position of text, pictures, tables, etc.; for example, text, images, or other content can be placed in a Div, and the resulting Div can be called a Div Block or Div Element, etc.

[0060] Secondly, the original Hypertext Markup Language (HTML) file is updated based on the newly added child nodes to obtain the target HTML file. Specifically, this can be achieved as follows: First, the first and second target child nodes in the original abstract syntax tree (API) corresponding to the original HTML file are replaced using the newly added nodes to obtain the target API; second, the target API is converted to obtain the target HTML file. Specifically, in practical applications, after obtaining the newly added child nodes, the first node position of the first target child node containing the main content structure of the webpage and the second node position of the second target child node containing the website information structure in the original API can be identified. Then, the newly added child node is used to replace the first and second node positions to obtain the target API; furthermore, the target API is converted back into the target HTML file using the HtmlParser module. The specific details of the obtained target HTML file can be found in [reference needed]. Figure 10 As shown; finally, it is also necessary to use the writeFileSync function of the Fs module in NodeJS to... Figure 10 The target hypertext language file shown is written into the original index.html file.

[0061] In step S530, the main content of the webpage and the website copyright information included in the original Cascading Style Sheet (CSS) file are rearranged based on the newly added child nodes included in the target Hypertext Markup Language (HTML) file to obtain the target CSS file.

[0062] In this example embodiment, reference Figure 11 As shown, the process of rearranging the main content of the webpage and the website copyright information included in the original Cascading Style Sheets (CSS) file based on the newly added child nodes included in the target Hypertext Markup Language (HTML) file to obtain the target CSS file may include the following steps:

[0063] Step S1110: Obtain the partition tag with root element identifier from the target hypertext markup language file, and obtain the main content structure of the webpage and the website copyright information structure under the partition tag.

[0064] Step S1120: Change the root element in the original Cascading Style Sheet file to a flex container, and arrange all child elements included in each element vertically; wherein, the child elements include the main content of the webpage and website copyright information.

[0065] Step S1130: Configure a reference height for the root element according to the window height of the browser window set on the terminal device, and configure the content spacing between the main content structure of the webpage and the website copyright information structure in the elastic container based on the reference height; wherein, the content spacing includes the bottom spacing corresponding to the main content structure of the webpage and / or the top spacing corresponding to the website copyright information structure.

[0066] In one example embodiment, configuring a reference height for the root element based on the window height of the browser window set on the terminal device can be achieved as follows: First, obtain the screen resolution of the terminal device loading the webpage to be loaded; second, based on the screen resolution, determine the window height of the browser window loading the webpage to be loaded, and configure a reference height for the root element based on the window height.

[0067] In one example embodiment, configuring the content spacing between the main content structure of the webpage and the website copyright information structure within the elastic container based on the reference height can be achieved as follows: First, obtain the content layout information of the main content structure of the webpage and calculate the first display height required by the content layout information; second, when it is determined that the first display height is greater than the reference height, configure a lower spacing between the main content structure of the webpage and the website copyright information structure; then, when it is determined that the first display height is less than or equal to the reference height, configure an upper spacing between the website copyright information structure and the main content structure of the webpage.

[0068] In one example embodiment, the bottom spacing between the main content structure of the webpage and the website copyright information structure can be achieved by configuring a content scrollbar for the browser window and setting the bottom spacing between the main content structure of the webpage and the website copyright information structure to a preset number of pixels.

[0069] In one example embodiment, configuring the top spacing between the website copyright information structure and the main content structure of the webpage can be achieved as follows: First, obtain the copyright layout information of the website copyright information structure and calculate the second display height required by the copyright layout information; second, calculate the first height difference between the first display height and the reference height, and calculate the second height difference between the first height difference and the second display height; finally, configure the top spacing between the website copyright information structure and the main content structure of the webpage based on the second height difference.

[0070] Step S1140: Based on the content spacing, rearrange the main content of the webpage and the website copyright information included in the original Cascading Style Sheet file to obtain the target Cascading Style Sheet file.

[0071] The following will explain and illustrate steps S1110-S1140. Specifically, during the layout process, firstly, the execution script of the webpage to be loaded is restarted, and the index.css file in the project's dist directory (usually the production environment of a website, but you need to specify it yourself in the actual case) is located. Then, the dividing tag (Div tag) with the root element identifier (Root) is obtained from the target hypertext markup language file, and then the main content structure of the webpage and the website copyright information structure under the dividing tag are obtained.

[0072] Furthermore, for the Div tag with ID Root (which can be represented by #Root), it can be used as the new overall container for the webpage (that is, the root element in the original Cascading Style Sheet file can be changed to the container), and the layout of the child elements included in the root element also needs to be rearranged; for this purpose, Flex layout (that is, a flexible container) is used to rearrange the main content and copyright information. In practical applications, to achieve this goal, the original Cascading Style Sheet file can be declared as follows: First, declare Display as flex, making the #root element a Flex container; second, declare flex-direction as column, causing all child elements in #root to be arranged vertically; third, declare min-height as 100vh (100vh refers to a relative length value with a size of 100 units of vh; where vh is a relative length unit in CSS, relative to the height of the browser window, 100vh means the element's height is equal to the current browser window height, i.e., the height of the visible area inside the browser), thus ensuring that #root always uses the browser window height as its minimum height; simultaneously, if the main content of the webpage exceeds the browser window height, the latest height is automatically calculated, and declare overflow as auto so that if the child elements exceed the height of the entire browser window when arranged vertically, they are automatically resized. The scrollbar is displayed automatically for user viewing. Furthermore, the `div` tag with the class "main" (which can be represented by `.main`) serves as the main content of the webpage and has few declaration restrictions. Simply declare `margin-bottom` as `n pixels` to separate the copyright information; if this is not required, `margin-bottom` can be declared as 0. Even further, the `div` tag with the class "footer" (which can be represented by `.footer`) serves as the copyright information of the webpage. Declaring `margin-top` as `auto` ensures that if `.main` and `.footer` can only fit within one browser window due to content height (without a scrollbar), `auto` will automatically calculate the height of the main content area and allocate the remaining height to `.footer`'s `margin-top`. Additionally, `margin-*` represents spacing, `margin-top` represents top spacing, and `margin-bottom` represents bottom spacing; spacing is the distance between two elements.

[0073] Meanwhile, by rearranging and refining the original Cascading Style Sheet (CSS) file using the methods described above, the following effects can be achieved: Firstly, if the main content and copyright information are displayed in full without a scrollbar in the browser, the copyright information automatically moves to the bottom and maintains an adaptive spacing with the main content; secondly, if the main content and copyright information are displayed in full with a scrollbar in the browser, the copyright information maintains a fixed n-pixel spacing with the main content; thirdly, if the height of the main content changes dynamically, it can freely switch between the above two scenarios; based on this, the copyright information can automatically adapt its position and spacing according to the height of the main content; the resulting target CSS file can be as follows... Figure 12 As shown.

[0074] Finally, after obtaining the target Cascading Style Sheet file, it is also necessary to use the `readFileSync` function of the NodeJS `Fs` module to read the contents of the `index.css` file and... Figure 12 The target cascading stylesheet file shown is inserted into this content and ensured to be on top (pre-loading). Then, the writeFileSync function of the Fs module in NodeJS is used to write the new content into the original index.css file.

[0075] In step S540, the layout rendering of the web page to be loaded is performed based on the target hypertext markup language file and the target cascading style sheet file.

[0076] In this example embodiment, the layout rendering of the webpage to be loaded based on the target Hypertext Markup Language file and the target Cascading Style Sheets (CSS) file can be achieved as follows: First, the target Hypertext Markup Language file is parsed to obtain a target Document Object Model (DOM), and the target CSS file is parsed to obtain a target CSS Object Model (CSS Object Model); second, a page rendering tree is generated based on the DOM and CSS Object Models, and the page layout of the webpage to be loaded is calculated based on the page rendering tree; then, the webpage to be loaded is rendered based on the page layout to achieve the loading of the webpage.

[0077] Thus, the webpage loading method described in the exemplary embodiments of this disclosure has been fully implemented. Based on the foregoing description, the webpage loading method described in the exemplary embodiments of this disclosure has at least the following advantages: Firstly, the overall implementation scheme is achieved using pure CSS; that is, a small amount (a dozen lines) of CSS code can replace the functionality of a large amount (dozens of lines) of JavaScript code, without the need to encapsulate route listener functions or introduce third-party modules to implement route listener functions; secondly, there is no need to listen for URL changes and onLoad (window loading) events, omitting a large portion of JavaScript code, making the implementation process simpler and more efficient; thirdly, each time the route page is switched, this implementation process does not need to be reset, meaning that frequent page switching will not exacerbate the reflow and repainting of the webpage after loading; the specific reason is that the above calculation process is all based on the relevant layout defined before the webpage is laid out, so this reflow and repainting will not occur again; furthermore, there is no need to calculate accurate spacing values ​​and then assign them to the margin-top of the copyright information as in conventional solutions; the specific reason is... The webpage loading method described in this exemplary embodiment utilizes Flex layout and `margin-top:auto` to dynamically calculate the `margin-top` of copyright information, allowing it to adapt to different environments. The entire process is dynamically calculated by the browser, meaning the copyright information is automatically placed at the bottom as soon as the webpage is rendered, unlike conventional methods that require the webpage to finish loading before processing. Furthermore, if the main content is loaded asynchronously, conventional methods wait for the asynchronous loading to complete before performing the calculation, requiring an asynchronous monitoring mechanism for placing the copyright information at the bottom. However, the webpage loading method described in this exemplary embodiment eliminates the need for this approach. Specifically, the processing timing of the webpage loading method described in this exemplary embodiment differs from that of conventional methods. Moreover, the webpage loading method described in this exemplary embodiment provides a better user experience for placing the copyright information at the bottom, avoiding the fleeting appearance of the copyright information after the webpage finishes loading, thus improving the user's viewing experience.

[0078] This disclosure also provides an example embodiment of a web page loading device. Specifically, refer to... Figure 13 As shown, the webpage loading device may include an information extraction module 1310, a child node construction module 1320, a layout arrangement module 1330, and a layout rendering module 1340. Wherein:

[0079] The information extraction module 1310 can be used to obtain the original hypertext markup language file and the original cascading style sheet file corresponding to the web page to be loaded, and extract the main content structure of the web page and the website copyright information structure included in the original hypertext markup language file.

[0080] The child node construction module 1320 can be used to construct new child nodes based on the main content structure of the webpage and the copyright information structure of the website, and update the original hypertext markup language file based on the new child nodes to obtain the target hypertext markup language file;

[0081] The layout arrangement module 1330 can be used to rearrange the main content of the webpage and the website copyright information included in the original Cascading Style Sheet file based on the newly added child nodes included in the target Hypertext Markup Language file, so as to obtain the target Cascading Style Sheet file.

[0082] The layout rendering module 1340 can be used to perform layout rendering on the web page to be loaded based on the target hypertext markup language file and the target cascading style sheet file.

[0083] In one exemplary embodiment of this disclosure, extracting the webpage main content structure and website copyright information structure included in the original hypertext markup language file includes:

[0084] The original Hypertext Markup Language file is parsed to obtain the original Document Object Model, and the original Abstract Syntax Tree is generated based on the original Document Object Model;

[0085] Traverse all current child nodes included in the original abstract syntax tree, and determine the first target child node where the main content structure of the webpage is located, and the second target child node where the website version information structure is located from the current child nodes;

[0086] Extract the main content structure of the webpage from the first target child node, and extract the website copyright information structure from the second target child node.

[0087] In one exemplary embodiment of this disclosure, constructing new child nodes based on the main content structure of the webpage and the website copyright information structure includes:

[0088] Construct a partition label and configure a root element identifier for the partition label;

[0089] The newly added child node is generated based on the main content structure of the webpage, the website copyright information structure, and the distinguishing tag with the root element identifier.

[0090] In one exemplary embodiment of this disclosure, updating the original Hypertext Markup Language file based on the newly added child nodes to obtain a target Hypertext Markup Language file includes:

[0091] The newly added nodes are used to replace the first target child node and the second target child node in the original abstract syntax tree corresponding to the original hypertext markup language file, to obtain the target abstract syntax tree;

[0092] The target abstract syntax tree is transformed to obtain the target hypertext markup language file.

[0093] In one exemplary embodiment of this disclosure, the main content of the webpage and the website copyright information included in the original Cascading Style Sheets (CSS) file are rearranged based on the newly added child nodes included in the target Hypertext Markup Language (HTML) file to obtain the target CSS file, including:

[0094] Obtain the partitioning tag with the root element identifier from the target hypertext markup language file, and obtain the main content structure of the webpage and the website copyright information structure under the partitioning tag;

[0095] Change the root element in the original Cascading Style Sheet file to a flex container, and arrange all child elements included in each element vertically; wherein, the child elements include the main content of the webpage and website copyright information;

[0096] Configure a reference height for the root element based on the window height of the browser window set on the terminal device, and configure the content spacing between the main content structure of the webpage and the website copyright information structure in the elastic container based on the reference height;

[0097] Based on the content spacing, the main content of the webpage and the website copyright information included in the original Cascading Style Sheet (CSS) file are rearranged to obtain the target CSS file.

[0098] In one exemplary embodiment of this disclosure, configuring a reference height for the root element based on the window height of the browser window set on the terminal device includes:

[0099] Obtain the screen resolution of the terminal device loading the webpage to be loaded;

[0100] Based on the screen resolution, determine the window height of the browser window that loads the webpage to be loaded, and configure a base height for the root element based on the window height.

[0101] In one exemplary embodiment of this disclosure, the content spacing includes a lower spacing corresponding to the main content structure of the webpage and / or an upper spacing corresponding to the copyright information structure of the website;

[0102] Specifically, based on the reference height, configuring the content spacing between the main content structure of the webpage and the website copyright information structure within the elastic container includes:

[0103] Obtain the content layout information of the main content structure of the webpage, and calculate the first display height required by the content layout information;

[0104] When it is determined that the first display height is greater than the reference height, the lower spacing between the main content structure of the webpage and the copyright information structure is configured;

[0105] When it is determined that the first display height is less than or equal to the reference height, the top spacing between the website copyright information structure and the main content structure of the webpage is configured.

[0106] In one exemplary embodiment of this disclosure, configuring the lower spacing between the main content structure of the webpage and the copyright information structure of the website includes:

[0107] Configure a content scrollbar for the browser window, and set the bottom spacing between the main content structure of the webpage and the copyright information structure of the website to a preset number of pixels.

[0108] In one exemplary embodiment of this disclosure, configuring the top spacing between the website copyright information structure and the main content structure of the webpage includes:

[0109] Obtain the copyright layout information of the website copyright information structure, and calculate the second display height required for the copyright layout information;

[0110] Calculate a first height difference between the first display height and the reference height, and calculate a second height difference between the first height difference and the second display height;

[0111] Based on the second height difference, the top spacing between the website copyright information structure and the main content structure of the webpage is configured.

[0112] In one exemplary embodiment of this disclosure, layout rendering of the webpage to be loaded is performed based on the target Hypertext Markup Language file and the target Cascading Style Sheets file, including:

[0113] The target Hypertext Markup Language file is parsed to obtain the target Document Object Model, and the target Cascading Style Sheet file is parsed to obtain the target Cascading Style Sheet Object Model.

[0114] Based on the target document object model and the target cascading style sheet object model, a page rendering tree is generated, and the page layout of the web page to be loaded is calculated based on the page rendering tree.

[0115] The webpage to be loaded is rendered based on the page layout to achieve the loading of the webpage.

[0116] The specific details of each module in the above-mentioned webpage loading device have been described in detail in the corresponding webpage loading method, so they will not be repeated here.

[0117] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to embodiments of this disclosure, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0118] Furthermore, although the steps of the method in this disclosure are described in a specific order in the accompanying drawings, this does not require or imply that the steps must be performed in that specific order, or that all the steps shown must be performed to achieve the desired result. Additional or alternative steps may be omitted, multiple steps may be combined into one step, and / or a step may be broken down into multiple steps.

[0119] In an exemplary embodiment of this disclosure, an electronic device capable of implementing the above-described method is also provided.

[0120] Those skilled in the art will understand that various aspects of this disclosure can be implemented as a system, method, or program product. Therefore, various aspects of this disclosure can be specifically implemented in the following forms: a completely hardware implementation, a completely software implementation (including firmware, microcode, etc.), or a combination of hardware and software aspects, collectively referred to herein as a "circuit," "module," or "system."

[0121] The following reference Figure 14 To describe an electronic device 1400 according to such an embodiment of the present disclosure. Figure 14 The electronic device 1400 shown is merely an example and should not be construed as limiting the functionality and scope of use of the embodiments disclosed herein.

[0122] like Figure 14 As shown, the electronic device 1400 is manifested in the form of a general-purpose computing device. The components of the electronic device 1400 may include, but are not limited to: at least one processing unit 1410, at least one storage unit 1420, a bus 1430 connecting different system components (including storage unit 1420 and processing unit 1410), and a display unit 1440.

[0123] The storage unit stores program code that can be executed by the processing unit 1410, causing the processing unit 1410 to perform the steps described in the "Exemplary Methods" section of this specification according to various exemplary embodiments of this disclosure. For example, the processing unit 1410 can perform actions such as... Figure 5 Step S510: Obtain the original Hypertext Markup Language (HTML) file and the original Cascading Style Sheets (CSS) file corresponding to the webpage to be loaded, and extract the main content structure and website copyright information structure included in the original HTML file; Step S520: Construct new child nodes based on the main content structure and website copyright information structure, and update the original HTML file based on the new child nodes to obtain the target HTML file; Step S530: Rearrange the main content of the webpage and the website copyright information included in the original CSS file based on the new child nodes included in the target HTML file to obtain the target CSS file; Step S540: Render the layout of the webpage to be loaded based on the target HTML file and the target CSS file.

[0124] Storage unit 1420 may include readable media in the form of volatile storage units, such as random access memory (RAM) 14201 and / or cache memory 14202, and may further include read-only memory (ROM) 14203.

[0125] Storage unit 1420 may also include a program / utility 14204 having a set (at least one) of program modules 14205, such program modules 14205 including but not limited to: an operating system, one or more application programs, other program modules and program data, each or some combination of these examples may include an implementation of a network environment.

[0126] Bus 1430 can represent one or more of several types of bus structures, including a memory cell bus or memory cell controller, a peripheral bus, a graphics acceleration port, a processing unit, or a local bus using any of the various bus structures.

[0127] Electronic device 1400 can also communicate with one or more external devices 1500 (e.g., keyboard, pointing device, Bluetooth device, etc.), and with one or more devices that enable a user to interact with electronic device 1400, and / or with any device that enables electronic device 1400 to communicate with one or more other computing devices (e.g., router, modem, etc.). This communication can be performed via input / output (I / O) interface 1450. Furthermore, electronic device 1400 can also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN), and / or public networks, such as the Internet) via network adapter 1460. As shown, network adapter 1460 communicates with other modules of electronic device 1400 via bus 1430. It should be understood that, although not shown in the figures, other hardware and / or software modules can be used in conjunction with electronic device 1400, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0128] From the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this disclosure can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, terminal device, or network device, etc.) to execute the methods according to the embodiments of this disclosure.

[0129] In exemplary embodiments of this disclosure, a computer-readable storage medium is also provided, on which a program product capable of implementing the methods described above is stored. In some possible implementations, various aspects of this disclosure may also be implemented as a program product including program code that, when the program product is run on a terminal device, causes the terminal device to perform the steps of the various exemplary embodiments of this disclosure described in the "Exemplary Methods" section above.

[0130] The program product for implementing the above-described method according to embodiments of the present disclosure may employ a portable compact disc read-only memory (CD-ROM) and include program code, and may run on a terminal device, such as a personal computer. However, the program product of the present disclosure is not limited thereto. In this document, the readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, apparatus, or device.

[0131] The program product may employ any combination of one or more readable media. A readable medium may be a readable signal medium or a readable storage medium. A readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of readable storage media (a non-exhaustive list) include: an electrical connection having one or more wires, a portable disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0132] Computer-readable signal media may include data signals propagated in baseband or as part of a carrier wave, carrying readable program code. Such propagated data signals may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. A readable signal medium may also be any readable medium other than a readable storage medium, capable of sending, propagating, or transmitting programs for use by or in conjunction with an instruction execution system, apparatus, or device.

[0133] The program code contained on the readable medium may be transmitted using any suitable medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination thereof.

[0134] Program code for performing the operations of this disclosure can be written in any combination of one or more programming languages, including object-oriented programming languages ​​such as Java and C++, and conventional procedural programming languages ​​such as C or similar languages. The program code can execute entirely on the user's computing device, partially on the user's computing device, as a standalone software package, partially on the user's computing device and partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via the Internet using an Internet service provider).

[0135] Furthermore, the above figures are merely illustrative of the processes included in the method according to exemplary embodiments of this disclosure and are not intended to be limiting. It is readily understood that the processes shown in the above figures do not indicate or limit the temporal order of these processes. Additionally, it is readily understood that these processes may be executed synchronously or asynchronously, for example, in multiple modules.

[0136] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention described herein. This application is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not invented by this disclosure. The specification and embodiments are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the claims.

Claims

1. A method for loading a webpage, characterized in that, include: Obtain the original hypertext markup language file and the original cascading style sheet file corresponding to the web page to be loaded, and extract the main content structure of the web page and the website copyright information structure included in the original hypertext markup language file; Based on the main content structure of the webpage and the website copyright information structure, new child nodes are constructed, and the original hypertext markup language file is updated based on the new child nodes to obtain the target hypertext markup language file; Obtain the dividing tag with the root element identifier from the target Hypertext Markup Language file, and obtain the main content structure of the webpage and the website copyright information structure under the dividing tag; change the root element in the original Cascading Style Sheet (CSS) file to a flex container, and arrange all child elements included in the root element vertically; configure a reference height for the root element according to the window height of the browser window on the terminal device, and configure the content spacing between the main content structure of the webpage and the website copyright information structure in the flex container based on the reference height; based on the content spacing, rearrange the main content of the webpage and the website copyright information included in the original CSS file to obtain the target CSS file; Based on the target Hypertext Markup Language file and the target Cascading Style Sheets file, the layout rendering of the web page to be loaded is performed.

2. The webpage loading method according to claim 1, characterized in that, Extract the main content structure of the webpage and the website copyright information structure from the original Hypertext Markup Language file, including: The original Hypertext Markup Language file is parsed to obtain the original Document Object Model, and an original Abstract Syntax Tree is generated based on the original Document Object Model; Traverse all current child nodes included in the original abstract syntax tree, and determine the first target child node where the main content structure of the webpage is located, and the second target child node where the website copyright information structure is located from the current child nodes; Extract the main content structure of the webpage from the first target child node, and extract the website copyright information structure from the second target child node.

3. The webpage loading method according to claim 2, characterized in that, Based on the main content structure of the webpage and the website copyright information structure, new child nodes are constructed, including: Construct a partition label and configure a root element identifier for the partition label; The newly added child node is generated based on the main content structure of the webpage, the website copyright information structure, and the distinguishing tag with the root element identifier.

4. The webpage loading method according to claim 3, characterized in that, The original Hypertext Markup Language file is updated based on the newly added child nodes to obtain the target Hypertext Markup Language file, including: The newly added child nodes are used to replace the first target child node and the second target child node in the original abstract syntax tree corresponding to the original hypertext markup language file, so as to obtain the target abstract syntax tree; The target abstract syntax tree is transformed to obtain the target hypertext markup language file.

5. The method for loading a webpage according to claim 1, characterized in that, The sub-elements include the main content of the webpage and website copyright information.

6. The method for loading a webpage according to claim 5, characterized in that, Configure a base height for the root element based on the window height of the browser window on the terminal device, including: Obtain the screen resolution of the terminal device loading the webpage to be loaded; Based on the screen resolution, determine the window height of the browser window that loads the webpage to be loaded, and configure a base height for the root element based on the window height.

7. The webpage loading method according to claim 5, characterized in that, The content spacing includes the bottom spacing corresponding to the main content structure of the webpage, and / or the top spacing corresponding to the copyright information structure of the website; Specifically, based on the reference height, configuring the content spacing between the main content structure of the webpage and the website copyright information structure within the elastic container includes: Obtain the content layout information of the main content structure of the webpage, and calculate the first display height required by the content layout information; When it is determined that the first display height is greater than the reference height, the lower spacing between the main content structure of the webpage and the copyright information structure is configured; When it is determined that the first display height is less than or equal to the reference height, the top spacing between the website copyright information structure and the main content structure of the webpage is configured.

8. The method for loading a webpage according to claim 7, characterized in that, Configure the bottom spacing between the main content structure of the webpage and the website copyright information structure, including: Configure a content scrollbar for the browser window, and set the bottom spacing between the main content structure of the webpage and the copyright information structure of the website to a preset number of pixels.

9. The method for loading a webpage according to claim 7, characterized in that, Configure the top spacing between the website copyright information structure and the main content structure of the webpage, including: Obtain the copyright layout information of the website copyright information structure, and calculate the second display height required for the copyright layout information; Calculate a first height difference between the first display height and the reference height, and calculate a second height difference between the first height difference and the second display height; Based on the second height difference, the top spacing between the website copyright information structure and the main content structure of the webpage is configured.

10. The method for loading a webpage according to claim 1, characterized in that, Based on the target Hypertext Markup Language file and the target Cascading Style Sheets file, the layout rendering of the webpage to be loaded is performed, including: The target Hypertext Markup Language file is parsed to obtain the target Document Object Model, and the target Cascading Style Sheet file is parsed to obtain the target Cascading Style Sheet Object Model. Based on the target document object model and the target cascading style sheet object model, a page rendering tree is generated, and the page layout of the web page to be loaded is calculated based on the page rendering tree. The webpage to be loaded is rendered based on the page layout to achieve the loading of the webpage.

11. A webpage loading device, characterized in that, include: The information extraction module is used to obtain the original hypertext markup language file and the original cascading style sheet file corresponding to the web page to be loaded, and to extract the main content structure of the web page and the website copyright information structure included in the original hypertext markup language file. The child node construction module is used to construct new child nodes based on the main content structure of the webpage and the copyright information structure of the website, and to update the original hypertext markup language file based on the new child nodes to obtain the target hypertext markup language file; The layout and arrangement module is used to obtain the dividing tags with root element identifiers from the target hypertext markup language file, and obtain the main content structure of the webpage and the website copyright information structure under the dividing tags; change the root element in the original Cascading Style Sheets (CSS) file to a flex container, and arrange all child elements included in the root element vertically; configure a reference height for the root element according to the window height of the browser window on the terminal device, and configure the content spacing between the main content structure of the webpage and the website copyright information structure in the flex container based on the reference height; and rearrange the main content of the webpage and the website copyright information included in the original CSS file based on the content spacing to obtain the target CSS file. The layout rendering module is used to perform layout rendering on the web page to be loaded based on the target hypertext markup language file and the target cascading style sheet file.

12. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the web page loading method according to any one of claims 1-10.

13. An electronic device, characterized in that, include: processor; as well as Memory for storing the executable instructions of the processor; The processor is configured to execute the web page loading method according to any one of claims 1-10 by executing the executable instructions.

Images