Loading method and device, electronic equipment and storage medium
By determining the loading priority and timing of web page components, and using server-side rendering and code segmentation technology, the problem of poor web page rendering performance is solved, and the components are loaded on demand and delayed hydration are realized, which improves rendering performance and user experience.
Patent Information
- Application Number
- CN202410030724.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-01-08
- Publication Date
- 2025-07-08
AI Technical Summary
In the prior art, web page rendering performance is poor, especially when loading a lot of content, it cannot effectively improve rendering performance.
By determining the components of the target page and their loading priority and timing, server-side rendering and code segmentation technology are used to realize on-demand loading and delayed hydration of components, and optimize the loading order and resource requests of components.
Improves the rendering performance of web pages, reduces the concentration of component loading, and improves the rendering speed of the first screen and user interaction experience.
Smart Images
Figure CN120277290A_ABST
Abstract
Description
Technical Field
[0001] Embodiments of the present disclosure relate to computer technology, and in particular, to a loading method, apparatus, electronic device, and storage medium. Background Art
[0002] A web page refers to a document or page presented on the Internet through the Hypertext Transfer Protocol. When a user enters a Uniform Resource Locator (URL) in a browser or clicks on a hyperlink, the browser requests the content of the web page from the server and displays it on the user's screen.
[0003] With the development and popularization of the Internet, the content presented on web pages has become increasingly rich and diverse. Current web pages not only contain various media forms such as text, pictures, audio, and video, but also can implement interactive functions. This places higher requirements on the rendering performance of web pages.
[0004] In the prior art, in order to improve the rendering performance of web pages, the rendering performance of web pages has been improved from the perspective of the timing of data interaction between the server and the client. However, due to the large amount of content to be loaded in web pages, there are still problems with poor rendering performance. Summary of the Invention
[0005] The present disclosure provides a loading method, apparatus, electronic device, and storage medium, which improve the rendering performance of pages.
[0006] In a first aspect, embodiments of the present disclosure provide a loading method, including:
[0007] Determine at least one component included in a target page, where the target page is a page to be rendered;
[0008] Determine the loading priority of each of the components, where the loading priority indicates the priority of loading the corresponding component;
[0009] Determine the loading timing corresponding to the loading priority of each of the components, where the loading timing indicates the timing of loading the corresponding component;
[0010] Load the corresponding components based on the loading timing of each of the components.
[0011] In a second aspect, embodiments of the present disclosure further provide a loading apparatus, including:
[0012] A first determination module, configured to determine at least one component included in a target page, where the target page is a page to be rendered;
[0013] A second determination module, configured to determine the loading priority of each of the components, where the loading priority indicates the priority of loading the corresponding component;
[0014] A third determination module, configured to determine the loading time corresponding to the loading priority of each of the components, where the loading time indicates the time when the corresponding component is loaded;
[0015] A loading module, configured to load the corresponding component based on the loading time of each of the components.
[0016] In a third aspect, an embodiment of the present disclosure further provides an electronic device, where the electronic device includes:
[0017] One or more processing devices;
[0018] A storage device, configured to store one or more programs,
[0019] When the one or more programs are executed by the one or more processing devices, the one or more processing devices implement the loading method provided by the embodiment of the present disclosure.
[0020] In a fourth aspect, an embodiment of the present disclosure further provides a storage medium including computer-executable instructions, where the computer-executable instructions are used to execute the loading method provided by the embodiment of the present disclosure when executed by a computer processor.
[0021] In the embodiment of the present disclosure, by determining at least one component included in a target page, where the target page is a page to be rendered; determining the loading priority of each of the components, where the loading priority indicates the loading priority of the corresponding component; determining the loading time corresponding to the loading priority of each of the components, where the loading time indicates the time when the corresponding component is loaded; and loading the corresponding component based on the loading time of each of the components, the problem of poor page rendering performance is solved. By determining the loading time corresponding to the loading priority of the components included in the target page, the components are loaded based on the loading time. Different components can correspond to different loading times, realizing the on-demand loading of components and also realizing the loading of components at different stages, avoiding the problem of poor rendering performance of the target page caused by too concentrated component loading, and improving the rendering performance of the target page. BRIEF DESCRIPTION OF THE DRAWINGS
[0022] Combined with the accompanying drawings and referring to the following specific embodiments, the above and other features, advantages, and aspects of the embodiments of the present disclosure will become more obvious. Throughout the accompanying drawings, the same or similar reference numerals represent the same or similar elements. It should be understood that the drawings are schematic, and the original elements and elements are not necessarily drawn to scale.
[0023] Figure 1 is a flowchart of a loading method provided by an embodiment of the present disclosure;
[0024] Figure 2 is an interface diagram of a target page provided by an embodiment of the present disclosure;
[0025] Figure 3 is a schematic flowchart of another loading method provided by an embodiment of the present disclosure;
[0026] Figure 4 is a schematic structural diagram of a loading device provided by an embodiment of the present disclosure;
[0027] Figure 5 is a schematic structural diagram of an electronic device provided by an embodiment of the present disclosure. Detailed implementation manners
[0028] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although some embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. On the contrary, these embodiments are provided to more thoroughly and completely understand the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes and are not used to limit the protection scope of the present disclosure.
[0029] It should be understood that the various steps recited in the method embodiments of the present disclosure can be executed in a different order and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present disclosure is not limited in this regard.
[0030] As used herein, the term "including" and its variants are open-ended, that is, "including but not limited to". The term "based on" is "at least partially based on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". The relevant definitions of other terms will be given in the following description.
[0031] It should be noted that the concepts such as "first" and "second" mentioned in the present disclosure are only used to distinguish different devices, modules or units, and are not used to limit the order of functions performed by these devices, modules or units or their interdependent relationships.
[0032] It should be noted that the modifications of "one" and "multiple" mentioned in the present disclosure are illustrative rather than restrictive. Those skilled in the art should understand that unless otherwise clearly stated in the context, it should be understood as "one or more".
[0033] The names of the messages or information exchanged between multiple devices in the embodiments of the present disclosure are only for illustrative purposes and are not used to limit the scope of these messages or information.
[0034] The present disclosure can adopt server-side rendering when performing page rendering. Server-side rendering is a technology that can generate the complete HyperText Markup Language (HTML) of an application on the server side and then return it to the client. The client uses the HTML generated by the server and then binds events to become a complete interactive application; in this way, the client can display basic static HTML content before the JavaScript (abbreviated as JS) rendering is completed, reducing the white screen waiting time.
[0035] The architecture for managing asynchronous operations and states does not have to wait for all data to be loaded on the server side before sending HTML to the client; on the contrary, it can send the application shell to the client as quickly as possible and send the remaining part to the client later; it does not have to wait for all JavaScript code to be loaded on the client side before starting hydration; on the contrary, it can use server-side rendering and code splitting at the same time. The HTML corresponding to the code-split components will be retained and hydrated after the corresponding code is loaded; it does not have to wait for all components to be hydrated on the client side before responding to user interactions; on the contrary, it can improve the hydration priority of all components on the user interaction component link by selective hydration, hydrate these components first and respond to user interactions. However, there are still the following disadvantages in rendering performance:
[0036] 1) There are unnecessary hydration and unnecessary resource (JavaScript) loading processes for non-interactive components on the page. In front-end development, hydration usually refers to combining the HTML generated on the server side with the client-side JavaScript code to create a complete, interactive page on the client side;
[0037] 2) For the content rendering of the page, component rendering and resource loading cannot be performed in the order of priority.
[0038] To solve the above technical problems, the present disclosure provides a loading method. Figure 1 It is a schematic flowchart of a loading method provided by an embodiment of the present disclosure. The embodiment of the present disclosure is applicable to the situation of loading components in a target page. This method can be executed by a loading device, and this device can be implemented in the form of software and / or hardware. Optionally, it is implemented by an electronic device, and this electronic device can be a mobile terminal, a PC, or a server, etc.
[0039] As Figure 1 shown, the method includes:
[0040] S110. Determine at least one component included in the target page.
[0041] The target page is the page to be rendered, such as a web page. A component can be an independent module within the page. Components can be combined to form a complete page or application. Components can be various types of elements, such as text boxes, buttons, images, links, etc. Each component has its own specific function and style and can be customized as needed. By splitting the page into multiple independent components, it is easier to manage and update the code. If you need to modify the style or function of a certain component, you only need to modify the code of that component without affecting other parts of the entire page. Components can also help improve the performance of the page. Since components are independent, they can be loaded separately when needed, thus reducing the page loading time.
[0042] This operation can determine at least one component included in the target page. The division of the components of the page can be pre-divided or determined by this operation according to the function as needed, and this is not limited here.
[0043] Figure 2 It is a schematic diagram of the interface of a target page provided by an embodiment of the present disclosure. Refer to Figure 2 , the target page 1 includes a media content playback component 2, a media content list component 3, and a comment component 4. The target page of this embodiment can be a page for browsing media content on the web side. Such as a page for browsing short videos. The media content playback component 2 can be considered as a component for implementing media content playback. Media content can refer to content that can convey information. Through the production and release of media content, the information required to be conveyed in the media content can be transmitted to users. Media content can include audio and multiple media resources, and the media resources can include images and / or videos. When the media resources include images, the media content includes audio and multiple images, and the media content can be understood as a picture work; when the media resources include videos, the media content includes audio and multiple videos, and the media content can be understood as a video work; when the media resources include images and videos, the media content includes audio, images, and videos, and the media content can be understood as a mixed work with pictures and videos mixed. Media content can be published to achieve the sharing of media content.
[0044] The media content list component 3 can be a component for displaying a media content list. The media content list can be considered as multiple media contents shown in the form of a list. The comment component 4 can be considered as a component for displaying comments, such as a component for displaying comments on the media content played by the media content playback component 2. The area where the comment component 4 is located can be an invisible area.
[0045] In one embodiment, the component is an interactive component.
[0046] An interactive component can be considered as a component that interacts with users. For example, buttons, input boxes, dropdown boxes, radio boxes, checkboxes, etc. These components can receive user input and perform corresponding operations based on the input content, thereby realizing the interaction between the user and the page.
[0047] S120. Determine the loading priority of each of the said components.
[0048] The loading priority indicates the priority of loading the corresponding component. In the present disclosure, different components included in the target page can have their own loading priorities. The loading priorities of different components can be the same or different, enabling loading on demand.
[0049] When defining a component, the corresponding loading priority can be defined by defining attributes. This operation can determine the loading priority of the component by determining the attributes of the component.
[0050] The loading priority of the media content playback component 2 can be the highest level. The media content playback component 2 can immediately load JS and immediately hydrate. The loading priority of the media content list component 3 can be the intermediate level. It can load JS during idle time and hydrate during idle time. The loading priority of the comment component 4 can be the lowest level. It can load JS when visible and does not require hydration. Loading during idle time can mean that when the browser is running and there are idle resources, it comes to load.
[0051] Table 1 is an example table of a component type provided by an embodiment of the present disclosure. Referring to Table 1, non-interactive components in the present disclosure can be HTML components that do not need to run on the client side. Non-interactive components in the present disclosure do not need to load JS and do not need to hydrate. They can be defined using React Server Components (RSC). They can also be defined using an island architecture, such as use client:island. However, the call mode is not specified, that is, the islandMode property (i.e., the island property) is not specified. The island property is used to indicate the loading priority.
[0052] Table 1 An example table of a component type provided by an embodiment of the present disclosure
[0053]
[0054] In one embodiment, the target page is a web page, and non-interactive components in the target page are components that do not perform hydration and do not load resources. This embodiment can achieve that non-interactive parts of the page do not need to be rendered on the client side (nor hydrated), interactive parts can be progressively hydrated and loaded with resources (achieved through loading priority), and for content that the user has never seen, it will never be hydrated and unused resources will never be loaded.
[0055] Table 2 is a relationship table of loading priorities provided by an embodiment of the present disclosure. Referring to Table 2, the attributes of components, such as the island attribute, are represented by the islandMode attribute, respectively representing four levels of loading priorities. Components with high loading priorities need to be loaded immediately. Components with medium loading priorities can be loaded during idle time. Components with low loading priorities can be loaded when visible. When the attribute corresponding to the loading priority is an event, it can be loaded when the custom event is triggered. So that when the target page is rendered, by supporting mechanisms such as immediate loading (load), idle-time loading (idle), visual loading (visible), and custom event (event) to trigger the rendering of page components, the control of the page rendering timing is realized.
[0056] Table 2 A relationship table of loading priorities provided by an embodiment of the present disclosure
[0057]
[0058]
[0059] The requestIdleCallback event can refer to a function called when the browser is idle, representing the idle state. The load event can be a loading event. Components with a medium loading priority are loaded when the page completes the initial loading and is in the idle state. IntersectionObserver is a JavaScript API used to asynchronously detect whether a document object model element intersects (is visible) with the viewport. The island component is an architectural pattern used in front-end development that splits an application into independent, reusable components that can be developed, tested, and deployed independently.
[0060] S130. Determine the loading time corresponding to the loading priority of each component.
[0061] The loading time indicates the time when the corresponding component is loaded. Different loading priorities correspond to different loading times. This operation determines the loading time of each component based on the corresponding relationship between the loading priority and the loading time, so as to facilitate the loading of components based on the loading time.
[0062] In one embodiment, the loading time includes:
[0063] When the target page is loaded; and,
[0064] When the target page completes the initial loading and the idle event is triggered; and,
[0065] When the visual state of the corresponding component changes from invisible to visible; and,
[0066] Set time.
[0067] When the target page is loaded, it can correspond to a high loading priority.
[0068] The initial loading can be considered as the initial load. For example, when a user accesses a web page, the browser fetches resources such as HTML, CSS, and JavaScript of the page from the server and loads them into the browser for display. The idle event can be an event indicating a control, such as the requestIdleCallback event and the load event. When the target page completes the initial loading and the idle event is triggered, it corresponds to a medium loading priority.
[0069] When the visual state of the corresponding component changes from invisible to visible, it corresponds to a low loading priority. The setting timing can be a custom timing. When the custom timing arrives, the corresponding component can be loaded. For example, after a click operation is performed, the corresponding component is loaded.
[0070] S140. Load the corresponding component based on the loading timing of each component.
[0071] This operation can detect whether the loading timing of each component has arrived. When the loading timing of the component arrives, the corresponding component is loaded.
[0072] Each component is loaded based on the corresponding loading timing, and loading is carried out in stages such as immediate loading, idle-time loading, and visible-time loading. This ensures that the high-priority content of the page is displayed as early as possible, and the non-high-priority content is loaded later, and is rendered and displayed in sequence according to conditions such as the loading priority and user interaction trigger.
[0073] In this embodiment, the target page can be the first-screen page, that is, the page loaded for the first time. After the page is loaded for the first time, relevant content can be stored in the client cache.
[0074] The technical solution of the embodiments of the present disclosure determines at least one component included in the target page, where the target page is the page to be rendered; determines the loading priority of each component, where the loading priority indicates the priority of the corresponding component to be loaded; determines the loading timing corresponding to the loading priority of each component, where the loading timing indicates the timing of the corresponding component to be loaded; and loads the corresponding component based on the loading timing of each component, solving the problem of poor page rendering performance. By determining the loading priority of the components included in the target page, the corresponding loading timing is determined to load the components based on the loading timing. Different components can correspond to different loading timings, realizing the on-demand loading of components and also realizing the loading of components at different stages, avoiding the problem of poor rendering performance of the target page caused by overly concentrated component loading, and improving the rendering performance of the target page.
[0075] Each component on the target page can manage network requests individually. Or multiple components on the target page can manage the network requests of these multiple components separately. A network request can refer to the process of sending a request from a client (such as a browser) to a server to obtain or submit data.
[0076] In one embodiment, each component on the target page manages the corresponding network request individually.
[0077] In this embodiment, each component on the target page manages the network request of this component individually. It supports fine-grained combination of network requests with the corresponding components through RSC components, and other components can be rendered immediately, thus eliminating the waterfall flow formed by requests.
[0078] Figure 3 It is a schematic flowchart of another loading method provided by the embodiments of the present disclosure. This embodiment refines the operation of loading components based on the above embodiment. Refer to Figure 3 , the loading method includes the following operations:
[0079] S310. Determine at least one component included in the target page.
[0080] S320. Determine the loading priority of each of the components.
[0081] S330. Determine the loading time corresponding to the loading priority of each of the components.
[0082] S340. Load the resources of the corresponding component based on the loading time of each of the components.
[0083] Different components can load the resources of the component based on the corresponding loading time, such as JavaScript resources.
[0084] The present disclosure supports delaying the loading of JavaScript resources of interactive components through island components, which can effectively control and greatly reduce the package size of the initial screen rendering; at the same time, for non-interactive components, RSC rendering can also be used to achieve zero volume.
[0085] S350. Hydrate the corresponding component based on the loading time of each of the components.
[0086] Different components can be hydrated based on the corresponding loading time. Hydration can refer to combining the HTML generated on the server side with JavaScript code to create a complete and interactive page on the client side.
[0087] The present disclosure supports delaying the hydration of interactive components through island components, which can effectively reduce the time consumption of initial rendering hydration; at the same time, for non-interactive components, RSC components can also be used to achieve without hydration.
[0088] In this embodiment, the operation of the loading component is refined, and resources are loaded and hydrated at the loading time of the component. It is possible to customize the resource loading time and hydration time of the component, and then perform resource loading and hydration based on the defined loading time.
[0089] This disclosure is based on Server-side Rendering (SSR). In SSR, after receiving a client request, the server uses JavaScript or other programming languages to generate complete HTML code on the server side and then sends it to the client. This disclosure can customize and control the timing and priority of resource loading, data request, and component hydration for page components. Data requests are processed at the component granularity, and each component takes over its own data request.
[0090] The UI before hydration is displayed in the HTML rendered on the backend. Before hydration, the search box will be displayed, but text input interaction is not allowed until hydration occurs at a specific time, which is determined by the configuration item passed to the island component.
[0091] If the island depends on a backend interface, then from the user's perspective, the following interfaces will be seen in sequence:
[0092] 1. Skeleton screen - When the interface has not yet returned, the fallback component in Suspense is displayed, that is, the skeleton screen;
[0093] 2. Non-interactive UI - When the interface is ready and the streaming data is sent to the browser, the UI in the html is displayed and non-interactive;
[0094] 3. Interactive UI - When the island is hydrated at a specific time, the interactive UI is rendered.
[0095] Solve the request waterfall flow and achieve zero production object volume through the RSC technology, and achieve delayed hydration and delayed resource loading through the island technology concept, so as to implement an architecture for controlling the page rendering timing.
[0096] Figure 4 It is a schematic structural diagram of a loading device provided by an embodiment of this disclosure. The loading device is integrated on an electronic device, such as Figure 4 shown, the device includes:
[0097] A first determination module 410, configured to determine at least one component included in a target page, where the target page is a page to be rendered;
[0098] A second determination module 420, configured to determine the loading priority of each of the components, where the loading priority indicates the priority of loading the corresponding component;
[0099] A third determination module 430, configured to determine a loading time corresponding to the loading priority of each of the components, where the loading time indicates the time when the corresponding component is loaded;
[0100] A loading module 440, configured to load the corresponding component based on the loading time of each of the components.
[0101] The technical solution provided by the embodiments of the present disclosure solves the problem of poor page rendering performance. By determining the loading priority of the components included in the target page, the corresponding loading time is determined, so as to load the components based on the loading time. Different components can correspond to different loading times, realizing the on-demand loading of components and also realizing the loading of components at different stages, avoiding the problem of poor rendering performance of the target page caused by too concentrated component loading, and improving the rendering performance of the target page.
[0102] In one embodiment, the loading time includes:
[0103] When the target page is loaded; and,
[0104] When the target page completes initial loading and an idle event is triggered; and,
[0105] When the visual state of the corresponding component changes from invisible to visible; and,
[0106] A set time.
[0107] In one embodiment, the loading module 440 is specifically configured to:
[0108] Load the resources of the corresponding component based on the loading time of each of the components.
[0109] In one embodiment, the loading module 440 is specifically configured to:
[0110] Hydrate the corresponding component based on the loading time of each of the components.
[0111] In one embodiment, each component in the target page manages the corresponding network request separately.
[0112] In one embodiment, the target page is a web page, and the non-interactive components in the target page are components that do not undergo hydration and do not load resources.
[0113] In one embodiment, the component is an interactive component.
[0114] The loading device provided by the embodiments of the present disclosure can execute the loading method provided by any embodiment of the present disclosure, and has the corresponding functional modules and beneficial effects for executing the method.
[0115] It should be noted that the various units and modules included in the above-mentioned device are only divided according to functional logic, but are not limited to the above division, as long as the corresponding functions can be realized; in addition, the specific names of the functional units are only for the convenience of mutual distinction and do not limit the protection scope of the embodiments of the present disclosure.
[0116] Figure 5 It is a schematic structural diagram of an electronic device provided by an embodiment of the present disclosure. The following refers to Figure 5 , which shows a schematic structural diagram of an electronic device (such as Figure 5 the terminal device or server in
[0117] The electronic device 500 includes:
[0118] One or more processing devices 501;
[0119] A storage device 508 for storing one or more programs,
[0120] When the one or more programs are executed by the one or more processing devices 501, the one or more processing devices 501 implement the loading method provided by the present disclosure.
[0121] The terminal device in the embodiments of the present disclosure may include, but is not limited to, mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Tablet Computers), PMPs (Portable Multimedia Players), in-vehicle terminals (such as in-vehicle navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 5 The electronic device shown is only an example and should not impose any limitations on the functions and usage scope of the embodiments of the present disclosure.
[0122] As Figure 5 shown, the electronic device 500 may include a processing device (such as a central processing unit, a graphics processing unit, etc.) 501, which may perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 502 or the program loaded from the storage device 508 into the random access memory (RAM) 503. In the RAM 503, various programs and data required for the operation of the electronic device 500 are also stored. The processing device 501, the ROM 502, and the RAM 503 are connected to each other through a bus 504. The editing / output (I / O) interface 505 is also connected to the bus 504.
[0123] Typically, the following devices can be connected to the I / O interface 505: input devices 506 including, for example, a touch screen, a touch pad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; output devices 507 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; storage devices 508 including, for example, magnetic tapes, hard disks, etc.; and a communication device 509. The communication device 509 can allow the electronic device 500 to communicate with other devices wirelessly or wiredly to exchange data. Although Figure 5 the electronic device 500 with various devices is shown, it should be understood that it is not required to implement or have all the shown devices. Instead, more or fewer devices can be implemented or had.
[0124] Specifically, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product that includes a computer program carried on a non-transitory computer-readable medium, and the computer program contains program codes for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through the communication device 509, or installed from the storage device 508, or installed from the ROM 502. When the computer program is executed by the processing device 501, the above-mentioned functions defined in the method of the embodiment of the present disclosure are executed.
[0125] The names of the messages or information exchanged between multiple devices in the embodiments of the present disclosure are only for illustrative purposes and are not used to limit the scope of these messages or information.
[0126] The electronic device provided by the embodiment of the present disclosure and the loading method provided by the above embodiment belong to the same inventive concept. Technical details not described in detail in this embodiment can be referred to the above embodiment, and this embodiment has the same beneficial effects as the above embodiment.
[0127] The embodiment of the present disclosure provides a computer storage medium, on which a computer program is stored, and when the program is executed by a processor, the loading method provided by the above embodiment is implemented.
[0128] It should be noted that the above-mentioned computer-readable medium of the present disclosure can be a computer-readable signal medium or a computer-readable storage medium or any combination of the two.
[0129] The computer storage medium can be a storage medium for computer-executable instructions, and the computer-executable instructions are used to execute the method provided by the present disclosure when executed by a computer processor.
[0130] A computer-readable storage medium may, for example, but is not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples of the computer-readable storage medium may include, but are not limited to, an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, the computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In the present disclosure, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries computer-readable program code. Such a propagated data signal may take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The computer-readable signal medium may also be any computer-readable medium other than the computer-readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.
[0131] In some embodiments, the client and the server may communicate using any currently known or future-developed network protocol such as HTTP (HyperText Transfer Protocol), and may be interconnected with digital data communication in any form or medium (e.g., a communication network). Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), the Internet (e.g., the Internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future-developed networks.
[0132] The above computer-readable medium may be included in the above electronic device; or may exist separately without being assembled into the electronic device.
[0133] The above computer-readable medium carries one or more programs, and when the one or more programs are executed by the electronic device, the electronic device is caused to:
[0134] The above computer-readable medium carries one or more programs, and when the one or more programs are executed by the electronic device, the electronic device is caused to: determine at least one component included in a target page, where the target page is a page to be rendered;
[0135] Determine the loading priority of each of the components, where the loading priority indicates the priority of the corresponding component to be loaded;
[0136] Determine the loading timing corresponding to the loading priority of each of the components, where the loading timing indicates the timing of the corresponding component to be loaded;
[0137] Load the corresponding component based on the loading timing of each of the components.
[0138] Computer program code for performing the operations of the present disclosure can be written in one or more programming languages or combinations thereof. The above programming languages include, but are not limited to, object-oriented programming languages such as Java, Smalltalk, C++, and also include conventional procedural programming languages such as the "C" language or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, executed as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer can be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computer (e.g., by connecting through the Internet using an Internet service provider).
[0139] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of systems, methods, and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagram can represent a module, a program segment, or a part of code that contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks can occur in a different order than that marked in the accompanying drawings. For example, two consecutive blocks shown can actually be executed substantially in parallel, and they can sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram and / or flowchart, and combinations of blocks in the block diagram and / or flowchart, can be implemented by a dedicated hardware-based system for performing the specified functions or operations, or can be implemented by a combination of dedicated hardware and computer instructions.
[0140] The modules or units involved in the embodiments of the present disclosure can be implemented in software or in hardware. Among them, the name of the module or unit does not constitute a limitation on the unit itself in some cases. For example, the first determination module can also be described as a "component determination module".
[0141] The functions described above in this document can be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that can be used include: Field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), Systems on Chip (SOCs), Complex Programmable Logic Devices (CPLDs), and so on.
[0142] In the context of this disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in connection with an instruction execution system, apparatus, or device. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer disk, a hard disk, a Random Access Memory (RAM), a Read-Only Memory (ROM), an Erasable Programmable Read-Only Memory (EPROM or Flash Memory), an optical fiber, a portable Compact Disc Read-Only Memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
[0143] According to one or more embodiments of this disclosure, [Example 1] provides a loading method, including:
[0144] Determine at least one component included in a target page, where the target page is a page to be rendered;
[0145] Determine the loading priority of each of the components, where the loading priority indicates the priority of loading the corresponding component;
[0146] Determine the loading timing corresponding to the loading priority of each of the components, where the loading timing indicates the timing of loading the corresponding component;
[0147] Load the corresponding component based on the loading timing of each of the components.
[0148] According to one or more embodiments of this disclosure, [Example 2] provides the method described in Example 1, where the loading timing includes:
[0149] When the target page is loaded; and,
[0150] When the target page completes initial loading and an idle event is triggered; and,
[0151] When the visible state of the corresponding component changes from invisible to visible; and,
[0152] A set timing.
[0153] According to one or more embodiments of the present disclosure, [Example 3] provides the method described in Example 1. Loading the corresponding components based on the loading timing of each of the components includes:
[0154] Loading the resources of the corresponding components based on the loading timing of each of the components.
[0155] According to one or more embodiments of the present disclosure, [Example 4] provides the method described in Example 1. Loading the corresponding components based on the loading timing of each of the components includes:
[0156] Hydrating the corresponding components based on the loading timing of each of the components.
[0157] According to one or more embodiments of the present disclosure, [Example 5] provides the method described in Example 1. Each component in the target page manages the corresponding network requests separately.
[0158] According to one or more embodiments of the present disclosure, [Example 6] provides the method described in Example 1. The target page is a web page, and the non-interactive components in the target page are components that do not undergo hydration and do not load resources.
[0159] According to one or more embodiments of the present disclosure, [Example 7] provides the method described in Example 1. The component is an interactive component.
[0160] According to one or more embodiments of the present disclosure, [Example 8] provides a loading device, including:
[0161] A first determination module, configured to determine at least one component included in a target page, where the target page is a page to be rendered;
[0162] A second determination module, configured to determine the loading priority of each of the components, where the loading priority indicates the priority of loading the corresponding component;
[0163] A third determination module, configured to determine the loading timing corresponding to the loading priority of each of the components, where the loading timing indicates the timing of loading the corresponding component;
[0164] A loading module, configured to load the corresponding components based on the loading timing of each of the components.
[0165] According to one or more embodiments of the present disclosure, [Example 9] provides an electronic device, where the electronic device includes:
[0166] One or more processing devices;
[0167] A storage device, configured to store one or more programs,
[0168] When the one or more programs are executed by the one or more processing devices, the one or more processing devices implement the loading method as described in any one of Examples 1-7.
[0169] According to one or more embodiments of the present disclosure, [Example 10] provides a storage medium containing computer-executable instructions, which are used to execute the loading method as described in any one of Examples 1-7 when executed by a computer processor.
[0170] The above description is only a preferred embodiment of the present disclosure and an explanation of the applied technical principles. Those skilled in the art should understand that the scope of the disclosure involved in the present disclosure is not limited to the technical solutions formed by the specific combination of the above technical features, and should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the above disclosure concept. For example, the technical solutions formed by mutually replacing the above features with the technical features (but not limited to) having similar functions disclosed in the present disclosure.
[0171] In addition, although the operations are depicted in a particular order, this should not be construed as requiring that the operations be performed in the particular order shown or in sequential order. In certain circumstances, multitasking and parallel processing may be advantageous. Similarly, although several specific implementation details are included in the above discussion, these should not be construed as limiting the scope of the present disclosure. Certain features described in the context of separate embodiments may also be implemented combinatorially in a single embodiment. Conversely, the various features described in the context of a single embodiment may also be implemented separately or in any suitable sub-combination in multiple embodiments.
[0172] Although the subject matter has been described in language specific to structural features and / or methodological logical acts, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. On the contrary, the specific features and acts described above are merely example forms for implementing the claims.
Claims
1. A loading method, characterized in that, Including: Determine at least one component included in a target page, where the target page is a page to be rendered; Determine the loading priority of each of the components, where the loading priority indicates the priority of loading the corresponding component; Determine the loading timing corresponding to the loading priority of each of the components, where the loading timing indicates the timing of loading the corresponding component; Load the corresponding component based on the loading timing of each of the components.
2. The method according to claim 1, wherein The loading timing includes: When the target page is loaded; and, When the target page completes initial loading and an idle event is triggered; and, When the visual state of the corresponding component changes from non-visible to visible; and, A set timing.
3. The method according to claim 1, characterized in that The loading of the corresponding component based on the loading timing of each of the components includes: Load the resources of the corresponding component based on the loading timing of each of the components.
4. The method according to claim 1, wherein The loading of the corresponding component based on the loading timing of each of the components includes: Hydrate the corresponding component based on the loading timing of each of the components.
5. The method according to claim 1, characterized in that, Each component in the target page manages the corresponding network request separately.
6. The method according to claim 1, wherein The target page is a web page, and non-interactive components in the target page are components that are not hydrated and do not load resources.
7. The method according to claim 1, characterized in that, The component is an interactive component.
8. A loading device, characterized in that, Including: A first determination module for determining at least one component included in a target page, where the target page is a page to be rendered; A second determination module for determining the loading priority of each of the components, where the loading priority indicates the priority of loading the corresponding component; A third determination module for determining the loading timing corresponding to the loading priority of each of the components, where the loading timing indicates the timing of loading the corresponding component; A loading module for loading the corresponding component based on the loading timing of each of the components.
9. An electronic device, characterized in that, The electronic device includes: One or more processing devices; A storage device for storing one or more programs, When the one or more programs are executed by the one or more processing devices, the one or more processing devices implement the loading method according to any one of claims 1-7.
10. A storage medium containing computer-executable instructions, where the computer-executable instructions are used to execute the loading method according to any one of claims 1-7 when executed by a computer processor.