Article detail page loading method based on static resource separation and related device thereof
By using a static resource separation method, the header, body, and footer of the article details page are identified and loaded separately. This approach, which employs both native and H5 loading methods, solves the problem of slow H5 page loading speed and improves user experience.
Patent Information
- Application Number
- CN202211568714.3
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-12-08
- Publication Date
- 2026-02-24
- Estimated Expiration
- 2042-12-08
AI Technical Summary
In existing technologies, H5 page article detail pages load slowly, resulting in a poor user experience and a lack of targeted optimization.
The static resource separation method is adopted. The text content is obtained through AJAX, and the header, body and footer are identified by distinguishing objects. The content is loaded using native loading and H5 loading methods respectively, and stored on CDN and native loading servers respectively. The loading method is selected according to preset conditions.
It improved the loading speed of article detail pages, ensured a better user experience, simplified the loading process, and reduced loading time.
Smart Images

Figure CN116069408B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the technical field of financial technology, and in particular to an article detail page loading method based on static resource separation and a related device thereof. BACKGROUND
[0002] An article is an important information in a mobile phone app, and its information carrier is mainly a combination of text and images. At present, most articles in apps are implemented by using h5 pages to meet the requirement of diversified expression forms. However, the h5 page has a slower loading speed than a native page, and the user experience is poor.
[0003] Pingan Property Insurance creates a car owner ecosystem through the self-developed good car owner APP. On the premise of the permission of the customer, the “Pingan Road” function is started, the car owner is encouraged to voluntarily use the “earn money by driving” function to upload driving behavior data, and at the same time, various insurance and vehicle information will be pushed for the customer to read.
[0004] At present, the common optimization direction in the industry for such articles is mainly the unified optimization of the h5 page, such as webview preloading, and there is no special optimization for the special scenario of the article detail page. Although this optimization method can reduce the loading time of part of the article detail page, it still has a very obvious page loading process, and the loading speed is still slower than that of the native page. SUMMARY
[0005] The purpose of the embodiments of the present application is to provide an article detail page loading method based on static resource separation and a related device thereof, so as to improve the loading speed of the article detail page to a certain extent and ensure the user experience.
[0006] In order to solve the above technical problems, the embodiments of the present application provide an article detail page loading method based on static resource separation, which adopts the following technical solutions:
[0007] An article detail page loading method based on static resource separation, comprising the following steps:
[0008] Step S1, obtaining text content edited by an article publisher in a text editing page;
[0009] Step S2, identifying a head part, a body part and a tail part in the text content according to a distinguished object preset in the text editing page, wherein the distinguished object at least includes a first distinguished object, a second distinguished object and a third distinguished object, the first distinguished object corresponds to the head part in the text content, the second distinguished object corresponds to the body part in the text content, and the third distinguished object corresponds to the tail part in the text content;
[0010] Step S3, loading the head part and the tail part to the target page by using a preset native loading mode to complete the page rendering of the head part and the tail part, wherein the native loading mode includes an Android native loading mode or an iOS native loading mode.
[0011] Step S4, loading the text part to the target page according to a preset loading mode according to a preset judgment condition to complete the loading of the entire article detail page.
[0012] Further, the execution step of step S1 specifically includes:
[0013] The text content edited by the text editing page is obtained by using a POST request mode in AJAX.
[0014] Further, the conditions for simultaneously executing step S3 when initializing the target page include that the target page is an APP home page, the user stays on the target page for more than 1 second, all article display cards in the target page are displayed, the current network environment is a WiFi environment, and the interest label corresponding to the article display card in the target page is the interested label of the user. Before executing step S3, the method further includes:
[0015] According to a preset monitoring component, it is judged whether the article publisher has submitted a text content loading instruction;
[0016] If the article publisher has submitted a text content loading instruction, it is judged according to a preset preloading rule whether the conditions for simultaneously executing step S3 when initializing the target page are met;
[0017] If so, step S3 is executed simultaneously when the target page is initialized.
[0018] Further, after executing step S2, the method further includes:
[0019] According to the distinguished object, the text part, the head part and the tail part are filtered from the text editing page;
[0020] The text part is stored in a preset CDN server;
[0021] The head part and the tail part are stored in a storage server corresponding to a preset native loading file.
[0022] Further, the execution step of step S4 specifically includes:
[0023] Step S4-1, obtaining the page tag corresponding to the text part in the text editing page;
[0024] Step S4-2, identifying the content part requiring user interaction and the content part not requiring user interaction in the text part according to the page label;
[0025] Step S4-3, obtaining the position line information of the content part requiring user interaction in the text part;
[0026] Step S4-4, extracting the content part requiring user interaction according to the position line information, and loading the content part requiring user interaction from the storage server corresponding to the native loading file to the target page in the native loading mode;
[0027] Step S4-5, obtaining the position line information of the content part not requiring user interaction in the text part, extracting the content part not requiring user interaction according to the position line information, and loading the content part not requiring user interaction from the CDN server to the target page in the preset H5 page loading mode.
[0028] Further, after performing the step S4-3, the method further comprises:
[0029] extracting the content part requiring user interaction in the text part from the CDN server;
[0030] caching the content part requiring user interaction in the text part and the position line information corresponding to the content part requiring user interaction to the storage server corresponding to the native loading file.
[0031] Further, the conditions for simultaneously performing step S4-4 when initializing the target page include that the target page is an APP home page, the browsing user stays on the target page for more than 1 second, all article display cards in the target page are displayed, the current network environment is a wi-fi environment, and the interest label corresponding to the article display card in the target page is the interested label of the browsing user. Before performing the step S4-4, the method further comprises:
[0032] determining whether the article publisher has submitted a text content loading instruction according to the monitoring component;
[0033] If the article publisher has submitted a text content loading instruction, determining whether the conditions for simultaneously performing step S4-4 when initializing the target page are met according to the preloading rule;
[0034] If the conditions are met, simultaneously performing step S4-4 when initializing the target page.
[0035] To solve the above technical problems, the embodiment of the present application also provides an article detail page loading device based on static resource separation, which adopts the technical scheme as follows:
[0036] An article detail page loading device based on static resource separation, comprising:
[0037] A text content acquisition module is configured to acquire text content edited by an article publisher on a text editing page.
[0038] A content classification identification module is configured to identify a header part, a body part and a tail part in the text content according to a preset distinguishing object on the text editing page, wherein the distinguishing object comprises at least a first distinguishing object, a second distinguishing object and a third distinguishing object, the first distinguishing object corresponds to the header part in the text content, the second distinguishing object corresponds to the body part in the text content, and the third distinguishing object corresponds to the tail part in the text content.
[0039] A native loading module is configured to load the header part and the tail part to a target page by using a preset native loading mode to complete page rendering of the header part and the tail part, wherein the native loading mode comprises an Android native loading mode or an iOS native loading mode.
[0040] A selectable loading module is configured to load the body part to the target page by using a preset loading mode according to a preset judgment condition to complete the entire article detail page loading.
[0041] To solve the above technical problems, the embodiment of the present application also provides a computer device, which adopts the technical scheme as follows:
[0042] A computer device comprises a memory and a processor, the memory stores computer readable instructions, and the processor executes the computer readable instructions to realize the steps of the article detail page loading method based on static resource separation.
[0043] To solve the above technical problems, the embodiment of the present application also provides a computer readable storage medium, which adopts the technical scheme as follows:
[0044] A computer readable storage medium stores computer readable instructions, and the computer readable instructions are executed by a processor to realize the steps of the article detail page loading method based on static resource separation.
[0045] Compared with the prior art, the embodiment of the present application has the following beneficial effects:
[0046] The article detail page loading method based on static resource separation described in this application involves: acquiring the text content edited by the article publisher on a text editing page; identifying the header, body, and footer of the text content based on a preset distinguishing object on the text editing page; loading the header and footer to the target page using a preset native loading method, thus completing the page rendering of the header and footer; and loading the body to the target page using a preset loading method based on preset judgment conditions, thus completing the loading of the entire article detail page. This application improves the loading speed of the article detail page and ensures a better user experience by using native loading for the interactive parts of the body, the header, and the footer during initialization, and using H5 loading for the non-interactive parts of the body. Attached Figure Description
[0047] To more clearly illustrate the solutions in this application, the accompanying drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0048] Figure 1 This is an exemplary system architecture diagram to which this application can be applied;
[0049] Figure 2 A flowchart of an embodiment of the article detail page loading method based on static resource separation according to this application;
[0050] Figure 3 yes Figure 2 A flowchart of a specific embodiment of step S4 shown;
[0051] Figure 4 A schematic diagram of a structural embodiment of an article detail page loading device based on static resource separation according to this application;
[0052] Figure 5 This is a schematic diagram of the structure of an embodiment of the preloading judgment module according to this application;
[0053] Figure 6 A schematic diagram of the structure of an embodiment of the computer device according to this application. Detailed Implementation
[0054] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description herein is for describing particular embodiments only and is not intended to be limiting upon the application; the terms "comprising," "including," and "having," and variations thereof, as used in enrolling and claims herein, are intended to be open-ended and to mean including, but not limited to; the terms "first," "second," and the like, as used in the description herein, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description herein is for describing particular embodiments only and is not intended to be limiting upon the application; the terms "comprising," "including," and "having," and variations thereof, as used in enrolling and claims herein, are intended to be open-ended and to mean including, but not limited to; the terms "first," "second," and the like, as used in the description herein, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by one of ordinary skill in the art to which this application belongs; the terminology used in the description herein is for describing particular embodiments only and is not intended to be limiting upon the application; the terms "comprising," "including," and "having," and variations thereof, as used in enrolling and claims herein, are intended to be open-ended and to mean including, but not limited to; the terms "first," "second," and the like, as used in the description herein, are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order.
[0055] Reference herein to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the application. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are they necessarily mutually exclusive or alternative embodiments. It is expressly understood that the embodiments described herein are intended to be combined with each other in their various permutations and combinations.
[0056] In order to make the technical personnel in the art better understand the scheme of the application, the technical solutions in the embodiments of the application will be clearly and completely described below with reference to the drawings.
[0057] As shown in Figure 1 The system architecture 100 can include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 serves as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 can include various connection types, such as wired, wireless communication links, or optical fiber cables, etc.
[0058] A user can use the terminal devices 101, 102, 103 to interact with the server 105 through the network 104 to receive or send messages, etc. Various communication client applications can be installed on the terminal devices 101, 102, 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social platform software, etc.
[0059] The terminal devices 101, 102, and 103 can be various electronic devices with display screens and supporting web browsing, including but not limited to smart phones, tablet computers, e-book readers, MP3 (Moving Picture Experts Group Audio Layer III) players, MP4 (Moving Picture Experts Group Audio Layer IV) players, laptop computers, desktop computers, and the like.
[0060] The server 105 can be a server providing various services, such as a background server providing support for a page displayed on the terminal devices 101, 102, and 103.
[0061] It should be noted that the article detail page loading method based on static resource separation provided in the embodiments of the present application is generally executed by a server / terminal device, and accordingly, the article detail page loading apparatus based on static resource separation is generally arranged in a server / terminal device.
[0062] It should be understood that Figure 1 The number of terminal devices, networks, and servers in
[0063] With reference to Figure 2 , a flowchart of one embodiment of the article detail page loading method based on static resource separation according to the present application is shown. The article detail page loading method based on static resource separation includes the following steps:
[0064] In step S1, text content edited on a text editing page by an article publisher is acquired.
[0065] In the present embodiment, the execution step of step S1 specifically includes acquiring the text content edited on the text editing page by a POST request mode in AJAX.
[0066] In step S2, a head part, a body part, and a tail part in the text content are identified according to a preset distinguishing object in the text editing page, wherein the distinguishing object includes at least a first distinguishing object, a second distinguishing object, and a third distinguishing object, the first distinguishing object corresponds to the head part in the text content, the second distinguishing object corresponds to the body part in the text content, and the third distinguishing object corresponds to the tail part in the text content.
[0067] In the embodiment, after step S2 is performed, the method further comprises: screening the body part, the head part and the tail part from the text editing page according to the distinguished object; storing the body part into a preset CDN server; and storing the head part and the tail part into a storage server corresponding to a preset native loading file.
[0068] In the embodiment, the CDN server is a content distribution network, which is a new network construction method. Using the CDN server to access the network restructures a new network architecture in the Internet and enables special network transmission functions for the network of users. Through the load balancing, content distribution, scheduling and other function modules of the central platform, the users can obtain the required content nearby, reduce network congestion, improve user access response speed and hit rate. The key technologies of the CDN include content storage and distribution technologies.
[0069] By storing the head part and the tail part into a preset storage server corresponding to a preset native loading file and storing the body part into a preset CDN server, the content parts in different loading modes are stored in different data storage devices, so that the to-be-loaded texts of different content parts can be quickly located during page loading.
[0070] In step S3, the head part and the tail part are loaded into the target page by using a preset native loading mode, and the page rendering of the head part and the tail part is completed. The native loading mode includes an Android native loading mode or an iOS native loading mode.
[0071] In the embodiment, before step S3 is performed, the method further comprises: determining whether the article publisher submits a text content loading instruction according to a preset monitoring component; if the article publisher submits the text content loading instruction, determining whether a condition for simultaneously performing step S3 is met when the target page is initialized according to a preset preloading rule; and if the condition is met, simultaneously performing step S3 when the target page is initialized.
[0072] In the embodiment, the preloading rule includes: whether the target page of the browsing user corresponding to the article publisher is an APP home page, whether the browsing user stays on the target page for more than 1 second, whether all the article display cards in the target page are displayed, whether the current network environment is a wi-fi environment, and whether the interest tags corresponding to the article display cards in the target page are the interested tags of the browsing user.
[0073] In this embodiment, if the target page is the APP homepage, the browsing user stays on the target page for more than 1 second, all article display cards on the target page are displayed, the current network environment is a Wi-Fi environment, and the interest tags corresponding to the article display cards on the target page are the browsing user's interest tags, then the conditions for executing step S3 simultaneously when initializing the target page are met.
[0074] By using pre-set preloading rules, if the interactive content to be loaded on the article details page meets the preloading rules, it will be preloaded onto the target page along with JS, CSS, and other page resources during initialization. Compared to the existing pure H5 page loading method for article details pages, the preloading method simplifies the loading process. At the same time, the interactive content is loaded using native loading, which is faster and saves more loading time than the previous H5 page loading method, ensuring a better user experience.
[0075] Step S4: Select a preset loading method based on preset judgment conditions to load the main text to the target page, thus completing the loading of the entire article details page.
[0076] Continue to refer to Figure 3 , Figure 3 yes Figure 2 A flowchart of a specific embodiment of step S4 shown includes:
[0077] Step S4-1: Obtain the page tag corresponding to the main text portion on the text editing page;
[0078] In this embodiment, the page tags corresponding to the main text portion on the text editing page include two types: interactive page tags and non-interactive page tags. For example, the tags used for clickable links in the main text portion are interactive page tags, while the tags used only for reading in the main text portion are non-interactive page tags.
[0079] Step S4-2: Identify the parts of the main text that require user interaction and the parts that do not require user interaction based on the page tags;
[0080] In this embodiment, the step of identifying the content parts in the main text that require user interaction and the content parts that do not require user interaction based on the page tags specifically includes: if the page tag is an interactive page tag, then the corresponding content part is the content part in the main text that requires user interaction; conversely, if the page tag is a non-interactive page tag, then the corresponding content part is the content part in the main text that does not require user interaction.
[0081] Step S4-3: Obtain the position line information of the content section requiring user interaction within the main text section;
[0082] In this embodiment, after performing step S4-3, the method further includes: extracting the content part of the main text that requires user interaction from the CDN server; and caching the content part of the main text that requires user interaction and the position line information corresponding to the content part that requires user interaction to the storage server corresponding to the natively loaded file.
[0083] By identifying whether there is content in the main body that needs to be loaded using the native loading method, it ensures that when such content exists in the main body, it is transferred from the CDN to the storage server corresponding to the native loading file. This ensures the separation of content loaded using different loading methods, making it easier to quickly locate the text to be loaded corresponding to different loading methods when the page loads.
[0084] Step S4-4: Extract the content part that needs user interaction based on the location row information, and load the content part that needs user interaction from the storage server corresponding to the native loading file to the target page using the native loading method;
[0085] In this embodiment, before executing step S4-4, the method further includes: determining, according to the monitoring component, whether the article publisher has submitted a text content loading instruction; if the article publisher has submitted a text content loading instruction, determining, according to the preloading rule, whether the condition for simultaneously executing step S4-4 is met when initializing the target page; if met, then simultaneously executing step S4-4 when initializing the target page.
[0086] In this embodiment, the preloading rules include: whether the target page of the browsing user corresponding to the article publisher is the APP homepage, whether the browsing user stays on the target page for more than 1 second, whether all the article display cards on the target page are displayed, whether the current network environment is a Wi-Fi environment, and whether the interest tags corresponding to the article display cards on the target page are the browsing user's interest tags.
[0087] In this embodiment, if the target page is the APP homepage, the browsing user stays on the target page for more than 1 second, all article display cards on the target page are displayed, the current network environment is a Wi-Fi environment, and the interest tags corresponding to the article display cards on the target page are the browsing user's interest tags, then the conditions for executing step S4-4 simultaneously when initializing the target page are met.
[0088] By using pre-set preloading rules, if the interactive content to be loaded on the article details page meets the preloading rules, it will be preloaded onto the target page along with JS, CSS, and other page resources during initialization. Compared to the existing pure H5 page loading method for article details pages, the preloading method simplifies the loading process. At the same time, the interactive content is loaded using native loading, which is faster and saves more loading time than the previous H5 page loading method, ensuring a better user experience.
[0089] Step S4-5: Obtain the position line information of the content section that does not require user interaction in the main text section, extract the content section that does not require user interaction based on the position line information, and load the content section that does not require user interaction from the CDN server to the target page using a preset H5 page loading method.
[0090] This application obtains the text content edited by the article publisher on a text editing page; identifies the header, body, and footer of the text content based on a preset distinguishing object on the text editing page; loads the header and footer to the target page using a preset native loading method, completing the page rendering of the header and footer; and loads the body to the target page using a preset loading method based on preset judgment conditions, completing the loading of the entire article details page. This application improves the loading speed of the article details page and ensures a better user experience by using native loading for the interactive parts of the body, the header, and the footer, and H5 loading for the non-interactive parts of the body during initialization, thus implementing different loading methods.
[0091] The embodiments of this application can acquire and process relevant data based on artificial intelligence technology. Artificial intelligence (AI) is the theory, method, technology, and application system that uses digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to obtain optimal results.
[0092] Foundational technologies for artificial intelligence generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, operating / interactive systems, and mechatronics. AI software technologies mainly encompass computer vision, robotics, biometrics, speech processing, natural language processing, and machine learning / deep learning.
[0093] In this embodiment, an artificial intelligence approach can be used in the corresponding operation / interaction system loaded on the article details page. During initialization, the parts of the text that require user interaction, the header and footer are loaded natively, while the parts of the text that do not require user interaction are loaded using H5. By loading different types of content, the loading speed of the article details page can be improved to a certain extent, thus ensuring a better user experience.
[0094] Further reference Figure 4 As a response to the above Figure 2 The implementation of the method shown in this application provides an embodiment of an article details page loading device based on static resource separation. This device embodiment is similar to... Figure 2 Corresponding to the method embodiments shown, this device can be specifically applied to various electronic devices.
[0095] like Figure 4 As shown, the article details page loading device 400 based on static resource separation described in this embodiment includes: a text content acquisition module 401, a content classification and recognition module 402, a native loading module 403, and a selectable loading module 404. Wherein:
[0096] The text content acquisition module 401 is used to acquire the text content edited by the article publisher on the text editing page;
[0097] The content classification and recognition module 402 is used to identify the header, body and tail portions of the text content according to the preset distinguishing objects on the text editing page. The distinguishing objects include at least a first distinguishing object, a second distinguishing object and a third distinguishing object. The first distinguishing object corresponds to the header portion of the text content, the second distinguishing object corresponds to the body portion of the text content, and the third distinguishing object corresponds to the tail portion of the text content.
[0098] The native loading module 403 is used to load the header and footer portions to the target page using a preset native loading method, thereby completing the page rendering of the header and footer portions. The native loading method includes Android native loading method or iOS native loading method.
[0099] The optional loading module 404 is used to select a preset loading method based on preset judgment conditions to load the main text to the target page, thereby completing the loading of the entire article details page.
[0100] Continue to refer to Figure 5In some specific embodiments of this application, the article detail page loading device 400 based on static resource separation further includes a preloading judgment module 405, which includes a first judgment unit 4051 and a second judgment unit 4052, wherein...
[0101] The first judgment unit 4051 is used to determine, according to the preset monitoring component, whether the article publisher has submitted a text content loading instruction; if the article publisher has submitted a text content loading instruction, then according to the preset preloading rule, it is determined whether the condition for simultaneously executing step S3 is met when initializing the target page; if it is met, then step S3 is executed simultaneously when initializing the target page.
[0102] The second judgment unit 4052 is used to determine, based on the monitoring component, whether the article publisher has submitted a text content loading instruction; if the article publisher has submitted a text content loading instruction, then based on the preloading rule, it is determined whether the condition for simultaneously executing step S4-4 is met when initializing the target page; if it is met, then step S4-4 is executed simultaneously when initializing the target page.
[0103] In some specific embodiments of this application, the article detail page loading device 400 based on static resource separation further includes a differentiation and transfer module. The differentiation and transfer module is used to, after executing step S2, filter out the main text, the header, and the footer from the text editing page according to the differentiation object; transfer the main text to a preset CDN server; and transfer the header and the footer to a storage server corresponding to a preset native loading file.
[0104] In some specific embodiments of this application, the article detail page loading device 400 based on static resource separation further includes a transfer adjustment module. The transfer adjustment module is used to extract the content part that needs user interaction from the main text from the CDN server after executing the step S4-3; and cache the content part that needs user interaction in the main text and the position line information corresponding to the content part that needs user interaction to the storage server corresponding to the native loading file.
[0105] This application obtains the text content edited by the article publisher on a text editing page; identifies the header, body, and footer of the text content based on a preset distinguishing object on the text editing page; loads the header and footer to the target page using a preset native loading method, completing the page rendering of the header and footer; and loads the body to the target page using a preset loading method based on preset judgment conditions, completing the loading of the entire article details page. This application improves the loading speed of the article details page and ensures a better user experience by using native loading for the interactive parts of the body, the header, and the footer, and H5 loading for the non-interactive parts of the body during initialization, thus implementing different loading methods.
[0106] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by instructing related hardware through computer-readable instructions. These computer-readable instructions can be stored in a computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the methods described above. The aforementioned storage medium can be a non-volatile storage medium such as a magnetic disk, optical disk, or read-only memory (ROM), or random access memory (RAM).
[0107] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.
[0108] To address the aforementioned technical problems, embodiments of this application also provide a computer device. Please refer to [link / reference needed]. Figure 6 , Figure 6 This is a basic structural block diagram of the computer device in this embodiment.
[0109] The computer device 6 includes a memory 6a, a processor 6b, and a network interface 6c that are interconnected via a system bus. It should be noted that only the computer device 6 with components 6a-6c is shown in the figure; however, it should be understood that it is not required to implement all the shown components, and more or fewer components can be implemented alternatively. Those skilled in the art will understand that the computer device described here is a device capable of automatically performing numerical calculations and / or information processing according to pre-set or stored instructions. Its hardware includes, but is not limited to, microprocessors, application-specific integrated circuits (ASICs), programmable gate arrays (FPGAs), digital signal processors (DSPs), embedded devices, etc.
[0110] The computer device can be a desktop computer, laptop, handheld computer, or cloud server, etc. The computer device can interact with the user via a keyboard, mouse, remote control, touchpad, or voice control.
[0111] The memory 6a includes at least one type of readable storage medium, including flash memory, hard disk, multimedia card, card-type memory (e.g., SD or DX memory), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, optical disk, etc. In some embodiments, the memory 6a may be an internal storage unit of the computer device 6, such as the hard disk or memory of the computer device 6. In other embodiments, the memory 6a may also be an external storage device of the computer device 6, such as a plug-in hard disk, smart memory card (SMC), secure digital card (SD) card, flash memory card, etc. of the computer device 6. Of course, the memory 6a may also include both the internal storage unit and the external storage device of the computer device 6. In this embodiment, the memory 6a is typically used to store the operating system and various application software installed on the computer device 6, such as computer-readable instructions for loading article detail pages based on static resource separation. Furthermore, the memory 6a can also be used to temporarily store various types of data that have been output or will be output.
[0112] In some embodiments, the processor 6b may be a central processing unit (CPU), controller, microcontroller, microprocessor, or other data processing chip. The processor 6b is typically used to control the overall operation of the computer device 6. In this embodiment, the processor 6b is used to execute computer-readable instructions stored in the memory 6a or to process data, for example, to execute the computer-readable instructions of the article details page loading method based on static resource separation.
[0113] The network interface 6c may include a wireless network interface or a wired network interface, which is typically used to establish communication connections between the computer device 6 and other electronic devices.
[0114] The computer device proposed in this embodiment belongs to the field of financial technology. This application obtains the text content edited by the article publisher on a text editing page; identifies the header, body, and footer of the text content based on a preset distinguishing object on the text editing page; loads the header and footer to the target page using a preset native loading method, completing the page rendering of the header and footer; and loads the body to the target page using a preset loading method based on preset judgment conditions, completing the loading of the entire article details page. This application improves the loading speed of the article details page to a certain extent and ensures a better user experience by using native loading for the interactive parts of the body, the header, and the footer, and H5 loading for the non-interactive parts of the body during initialization, thus performing different types of loading.
[0115] This application also provides another embodiment, namely, providing a computer-readable storage medium storing computer-readable instructions that can be executed by a processor to cause the processor to perform the steps of the article detail page loading method based on static resource separation as described above.
[0116] The computer-readable storage medium proposed in this embodiment belongs to the field of financial technology. This application obtains the text content edited by the article publisher on a text editing page; identifies the header, body, and footer of the text content based on a preset distinguishing object on the text editing page; loads the header and footer to the target page using a preset native loading method, completing the page rendering of the header and footer; and loads the body to the target page using a preset loading method based on preset judgment conditions, completing the loading of the entire article details page. This application improves the loading speed of the article details page and ensures a better user experience by using native loading for the interactive parts of the body, the header, and the footer during initialization, and using H5 loading for the non-interactive parts of the body.
[0117] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in the various embodiments of this application.
[0118] Obviously, the embodiments described above are only some embodiments of this application, not all embodiments. The accompanying drawings show preferred embodiments of this application, but do not limit the patent scope of this application. This application can be implemented in many different forms; rather, the purpose of providing these embodiments is to provide a more thorough and comprehensive understanding of the disclosure of this application. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art can still modify the technical solutions described in the foregoing specific embodiments, or make equivalent substitutions for some of the technical features. Any equivalent structures made using the content of this application's specification and drawings, directly or indirectly applied to other related technical fields, are similarly within the scope of patent protection of this application.
Claims
1. A method for loading article detail pages based on static resource separation, characterized in that, Includes the following steps: Step S1: Obtain the text content edited by the article publisher on the text editing page; Step S2: Identify the header, body, and footer of the text content based on preset distinguishing objects on the text editing page. The distinguishing objects include at least a first distinguishing object, a second distinguishing object, and a third distinguishing object. The first distinguishing object corresponds to the header of the text content, the second distinguishing object corresponds to the body of the text content, and the third distinguishing object corresponds to the footer of the text content. Step S3: Load the header and footer portions to the target page using a preset native loading method to complete the page rendering of the header and footer portions. The native loading method includes Android native loading method or iOS native loading method. Step S4: Based on preset judgment conditions, select a preset loading method to load the main text onto the target page, completing the loading of the entire article details page. Specifically, the execution steps of step S4 include: Step S4-1: Obtain the page tag corresponding to the main text portion on the text editing page; Step S4-2: Identify the parts of the main text that require user interaction and the parts that do not require user interaction based on the page tags; Step S4-3: Obtain the position line information of the content section requiring user interaction within the main text section; Step S4-4: Extract the content part that needs user interaction based on the location row information, and load the content part that needs user interaction from the storage server corresponding to the native loading file to the target page using the native loading method; Step S4-5: Obtain the position line information of the content section that does not require user interaction in the main text section, extract the content section that does not require user interaction based on the position line information, and load the content section that does not require user interaction from the preset CDN server to the target page using a preset H5 page loading method.
2. The article detail page loading method based on static resource separation according to claim 1, characterized in that, The execution steps of step S1 specifically include: The text content edited on the text editing page is obtained through a POST request using AJAX.
3. The article detail page loading method based on static resource separation according to claim 1, characterized in that, The conditions for simultaneously executing step S3 when initializing the target page include: the target page is the APP homepage; the browsing user stays on the target page for more than 1 second; all article display cards on the target page are displayed; the current network environment is a Wi-Fi environment; and the interest tags corresponding to the article display cards on the target page are the browsing user's interest tags. Before executing step S3, the method further includes: Based on the preset monitoring components, it is determined whether the article publisher has submitted a text content loading instruction; If the article publisher submits a text content loading instruction, then the condition for simultaneously executing step S3 is determined according to the preset preloading rules when initializing the target page; If the conditions are met, step S3 is executed simultaneously when the target page is initialized.
4. The article detail page loading method based on static resource separation according to claim 3, characterized in that, After performing step S2, the method further includes: Based on the distinguishing object, the main text, the header, and the footer are filtered from the text editing page; The main text portion is then transferred to a pre-defined CDN server. The head portion and the tail portion are transferred to the storage server corresponding to the preset native loading file.
5. The article detail page loading method based on static resource separation according to claim 1, characterized in that, After performing step S4-3, the method further includes: Extract the interactive content portion of the main text from the CDN server; The content that requires user interaction in the main text and the corresponding position line information of the content that requires user interaction are cached in the storage server corresponding to the natively loaded file.
6. The article detail page loading method based on static resource separation according to claim 1, characterized in that, The conditions for simultaneously executing step S4-4 during the initialization of the target page include: the target page is the APP homepage; the browsing user stays on the target page for more than 1 second; all article display cards on the target page are displayed; the current network environment is a Wi-Fi environment; and the interest tags corresponding to the article display cards on the target page are the browsing user's interest tags. Before executing step S4-4, the method further includes: Based on the monitoring component, it is determined whether the article publisher submitted a text content loading instruction; If the article publisher submits a text content loading instruction, then the preloading rules determine whether the conditions for simultaneously executing step S4-4 are met when initializing the target page. If the conditions are met, then step S4-4 is executed simultaneously when initializing the target page.
7. An article details page loading device based on static resource separation, characterized in that, include: The text content acquisition module is used to acquire the text content edited by the article publisher on the text editing page; The content classification and recognition module is used to identify the header, body and tail portions of the text content based on preset distinguishing objects on the text editing page. The distinguishing objects include at least a first distinguishing object, a second distinguishing object and a third distinguishing object. The first distinguishing object corresponds to the header portion of the text content, the second distinguishing object corresponds to the body portion of the text content, and the third distinguishing object corresponds to the tail portion of the text content. The native loading module is used to load the header and footer portions to the target page using a preset native loading method, thereby completing the page rendering of the header and footer portions. The native loading method includes Android native loading method or iOS native loading method. The selectable loading module is used to select a preset loading method based on preset judgment conditions to load the main text to the target page, thus completing the loading of the entire article details page. Specifically, the selectable loading module includes: Obtain the page tag corresponding to the main text portion on the text editing page; Based on the page tags, identify the parts of the main text that require user interaction and the parts that do not require user interaction; Obtain the line information of the position of the content section requiring user interaction within the main text section; The content that requires user interaction is extracted based on the location row information, and the content that requires user interaction is loaded from the storage server corresponding to the natively loaded file to the target page using the native loading method. Obtain the position line information of the content section that does not require user interaction in the main text section, extract the content section that does not require user interaction based on the position line information, and load the content section that does not require user interaction from the preset CDN server to the target page using a preset H5 page loading method.
8. A computer device, comprising a memory and a processor, wherein the memory stores computer-readable instructions, and the processor, when executing the computer-readable instructions, implements the steps of the article detail page loading method based on static resource separation as described in any one of claims 1 to 6.
9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-readable instructions, which, when executed by a processor, implement the steps of the article detail page loading method based on static resource separation as described in any one of claims 1 to 6.
Citation Information
Patent Citations
Webpage loading method and device
CN104866359A
Static resource management method and management system
CN106528663A