Access loading method and device based on preloaded resources and dynamic data and terminal

Abstract

The invention discloses an access loading method and device based on preloaded resources and dynamic data and a terminal. The method comprises the following steps: setting a front page in front of a main website in advance; embedding an inline framework of the main website into the front page and carrying out hiding processing; when entering a front page, controlling to pre-load a main website through the inline framework; when it is detected that preloading of the main website is started, a service working thread is controlled to be used for pre-caching static resources and dynamic interface data of the website to a local database; and when an operation instruction that a user opens the main website is detected, the cache resources and the cache data corresponding to the operation instruction are found and verified to be available, and the cache resources and the cache data corresponding to the operation instruction are directly used for rendering display. According to the method, the resources and the dynamic data can be preloaded before the website is opened, the cache resources are used for increasing the speed, the data are used for dynamically converting the content, and the use experience of a user on the website can be improved.

Description

Technical Field

[0001] The present invention relates to the field of Internet technologies, and particularly to an access and loading method, device, intelligent terminal, and storage medium based on pre-loaded resources and dynamic data. Background Art

[0002] The SaaS platform, also known as the Software as a Service platform, is a model that provides software services via the Internet. Users do not need to install and maintain software locally but can directly access and use it through clients such as browsers. This model allows users to use software on demand and usually includes services such as automatic updates, maintenance, and data storage. With the increase in sub-applications and users of the SaaS platform, the requirement for the opening speed of the website to meet the work needs of users is getting higher and higher. In particular, the opening speed experience for the first visit will greatly affect the user experience. The loading efficiency of existing SaaS platform users during use needs to be further improved.

[0003] Therefore, the existing technology still needs to be improved and developed. Summary of the Invention

[0004] The technical problem to be solved by the present invention is to provide an access and loading method, device, intelligent terminal, and storage medium based on pre-loaded resources and dynamic data in view of the problems and defects of the above-mentioned existing technology. The present invention provides a method that can pre-load resources and dynamic data simultaneously before the website is opened. The cached resources are used to improve the speed, and the data is used for dynamic content, which can improve the user experience of using the website.

[0005] The technical solution adopted by the present invention to solve the problem is as follows: An access and loading method based on pre-loaded resources and dynamic data, including: Pre-set a pre-page before the main website; embed an inline frame of the main website in the pre-page and perform a hiding process; When entering the pre-page, control the pre-loading of the main website through the inline frame; When detecting the start of the pre-loading of the main website, control the use of a service worker thread to pre-cache the website static resources and dynamic interface data into the local database; When detecting an operation instruction for the user to open the main website, search for the cached resources and cached data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data and perform verification; When the cached resources and cached data corresponding to the operation instruction are found and the verification is available, directly use the cached resources and cached data corresponding to the operation instruction for rendering and display.

[0006] The access and loading method based on pre-loaded resources and dynamic data, wherein, after the step of directly using the cached resources and cached data corresponding to the operation instruction for rendering and display when the cached resources and cached data corresponding to the operation instruction are found and verified to be available, includes: When the cached resources and cached data corresponding to the operation instruction are not found, the corresponding cached data is abandoned and a regular pull is performed.

[0007] The access and loading method based on pre-loaded resources and dynamic data, wherein the step of pre-setting a pre-page before the main website; embedding an inline frame of the main website in the pre-page and performing a hiding process includes: A main website is pre-set, and the main website is set in the software as a service platform mode. A plurality of sub-application modules are set in the main website, and each sub-application module can separately load the corresponding sub-application.

[0008] The access and loading method based on pre-loaded resources and dynamic data, wherein the step of, when entering the pre-page, controlling the pre-loading of the main website through the inline frame includes: When it is detected that the pre-page is entered, control is performed to pre-load the main website in the background through the inline frame in a hidden processing manner.

[0009] The access and loading method based on pre-loaded resources and dynamic data, wherein the step of, when it is detected that the pre-loading of the main website is started, controlling the use of a service worker thread to pre-cache the website static resources and dynamic interface data into the local database includes: When it is detected that the pre-loading of the main website is started, control is performed to use a service worker thread to pre-cache the web page resources and data of the main website in the local database; And pre-cache the static resources of the main website in the local database; And pre-cache the dynamic interface data of the main website in the local database. The access and loading method based on pre-loaded resources and dynamic data, wherein the step of, when it is detected that the user opens an operation instruction for the main website, searching for the cached resources and cached data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data and performing verification includes: When it is detected that the user opens an operation instruction for the main website, according to the operation instruction, search for the cached resources and cached data corresponding to the operation instruction from the local database pre-cached with the website static resources and dynamic interface data; Judge whether there are cached resources and cached data corresponding to the operation instruction requested in the local database pre-cached with the website static resources and dynamic interface data.

[0010] The access and loading method based on pre-loaded resources and dynamic data, wherein the step of directly using the cached resources and cached data corresponding to the operation instruction for rendering and display when the cached resources and cached data corresponding to the operation instruction are found and verified to be available includes: When there are cached resources and cached data corresponding to the request of the operation instruction in the local database that pre-caches website static resources and dynamic interface data, control to directly use the cached resources and cached data corresponding to the request of the operation instruction for rendering and display; And control to pre-load the static resources and dynamic interface data of each sub-application module of the main website.

[0011] An access and loading device based on pre-loaded resources and dynamic data, wherein the device includes: A pre-setting module, configured to pre-set a pre-page in front of the main website; embed an inline frame of the main website in the pre-page and perform a hiding process; A pre-loading module, configured to control to pre-load the main website through the inline frame when entering the pre-page; A cache control unit, configured to control to pre-cache website static resources and dynamic interface data into the local database using a service worker thread when detecting the start of pre-loading of the main website; An operation cache matching module, configured to search for and verify cached resources and cached data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data when detecting an operation instruction for the user to open the main website; A matching rendering unit, configured to directly use the cached resources and cached data corresponding to the operation instruction for rendering and display when the cached resources and cached data corresponding to the operation instruction are found and verified to be available; A pulling control module, configured to abandon the corresponding cached data and perform a regular pull when no cached resources and cached data corresponding to the operation instruction are found.

[0012] An intelligent terminal, which includes a memory, and one or more programs, wherein one or more programs are stored in the memory and are configured to be executed by one or more processors, and the one or more programs include those for executing the method according to any one of the above.

[0013] A computer-readable storage medium, wherein when the instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the method according to any one of the above.

[0014] Advantages of the present invention: The present invention provides an access and loading method, device, intelligent terminal and storage medium based on pre-loaded resources and dynamic data; the present invention provides a first access acceleration method based on pre-loading website resources and dynamic data; a method that can pre-load resources and dynamic data simultaneously before the website is opened, caches resources to improve speed, and uses data for dynamic content, which can improve the user experience of using the website. It realizes loading sub-applications during idle time after the main website is opened, so as to speed up the loading efficiency when the user opens the sub-applications, providing convenience for the user's use. Brief Description of the Drawings

[0015] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the drawings described below are only some embodiments recorded in the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0016] Figure 1 It is a schematic flowchart of the access and loading method based on pre-loaded resources and dynamic data provided in Embodiment 1 of the present invention.

[0017] Figure 2 It is a schematic flowchart of the access and loading method based on pre-loaded resources and dynamic data provided in Embodiment 2 of the present invention.

[0018] Figure 3 It is a schematic diagram of the main website interface of the access and loading method based on pre-loaded resources and dynamic data provided in the embodiments of the present invention.

[0019] Figure 4 The principle block diagram of the access and loading device embodiment based on pre-loaded resources and dynamic data provided by the present invention.

[0020] Figure 5 It is the internal structure principle block diagram of the intelligent terminal provided in the embodiments of the present invention. Detailed Embodiments

[0021] To make the objectives, technical solutions and advantages of the present invention clearer and more definite, the following further describes the present invention in detail with reference to the accompanying drawings and by way of examples. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention.

[0022] As the number of sub-applications and users on the SaaS platform increases, the requirement for the opening speed of the website to meet the work needs of users is also getting higher and higher. In particular, the opening speed experience during the first visit will greatly affect the user experience. Therefore, it is proposed to preload sub-applications during the idle time of user use. As an important technology to accelerate website opening, the preloaded resources can be immediately obtained from the cache without relying on network requests, which can significantly improve the loading speed and responsiveness of the application.

[0023] There are also some preloading schemes in the prior art. Basic preloading usually occurs after the website is opened, and the acceleration effect on the first visit is limited. And there are some pre-caching schemes before web page access, but they can only cache static resources, and may not be able to accurately capture and present pages containing dynamic or personalized content.

[0024] Therefore, the present invention provides an access loading method based on preloaded resources and dynamic data, providing a method that can preload resources and dynamic data simultaneously before the website is opened. The cached resources are used to improve speed, and the data is used for dynamic content, which can improve the user experience of using the website.

[0025] Such as Figure 1 shown, an access loading method based on preloaded resources and dynamic data in Embodiment 1 of the present invention includes the following steps: Step S100, set a pre-page in front of the main website in advance; embed an iframe inline frame of the main website in the pre-page and perform a hiding process; In the embodiment of the present invention, the set pre-page is a layer of page displayed before the user accesses the main SaaS platform, that is, a layer of page displayed before accessing the main website, which is used to display some important information, such as a disclaimer, a loading animation, a welcome message, etc.

[0026] In the embodiment of the present invention, embedding the iframe of the main website in the pre-page means embedding the content of the main website into the pre-page. In this way, when the user accesses the pre-page, the content of the main website is actually being loaded, which allows the user to continue loading the main page during the waiting process. The iframe allows the content of another web page to be displayed in one web page, which is convenient for accelerating the response efficiency when the user accesses the main website in the subsequent steps.

[0027] And in the embodiment of the present invention, not only the content of the main website is embedded into the pre-page, but also the iframe inline frame of the embedded main website is hidden. For example, the visual elements of the iframe can be hidden through CSS (Cascading Style Sheets) or JavaScript. In this way, embedding the iframe in the pre-website and performing a hiding process makes it imperceptible to the user. Usually, in order to achieve a better user experience, a seamless transition feeling is provided.

[0028] For example, taking an online education platform such as Learning Network as an example, before a user accesses the home page, they will see a pre-page that says "Welcome to Learning Network. Please wait a moment while the content is being loaded for you." At the same time, what is actually loaded in the iframe of the pre-page is the main page of Learning Network, but it is set to be hidden so that the user will not see the loading progress bar or scroll bar.

[0029] In this way, the pre-page of the present invention can be used to load content, giving the user a visual feedback and preventing the user from feeling bored or uneasy while waiting. And the transition effect: By using the pre-page and the iframe, a smoother page loading effect can be achieved, allowing the user to seamlessly transition to the main website. Moreover, the pre-page can be optimized for specific keywords to improve the visibility of the website in search engines and increase the user click-through rate.

[0030] Step S200: When entering the pre-page, control the preloading of the main website through the inline frame (iframe); The pre-page is the page that the user sees when they first visit the website and is displayed before the main content page is loaded.

[0031] In the embodiment of the present invention, when entering the pre-page, controlling the iframe to preload can be specifically achieved by creating an embedded iframe and connecting it to the URL of the main website. The present invention preloads the content of the main website when the user enters the pre-page. The iframe acts as a window that allows the user to see or interact with the content. In the embodiment of the present invention, the display of the iframe is set to be hidden to ensure that the user only sees the off-domain content after a specific event (such as after loading is completed).

[0032] For example, taking an online library platform such as "Book Sea" as an example. When a user accesses the URL of "Book Sea", they first see a pre-page, and the content may be: "Welcome to Book Sea". At this time, the following HTML fragment can preload the content of the main website through the iframe: In the embodiment of the present invention, through preloading, the user can achieve almost seamless transition when switching from the pre-page to the main website, reducing the frustration during the loading wait. And when the user clicks to enter the pre-page, the content of the main page has actually been loaded in the background. This method reduces the waiting time felt by the user and can improve the overall user satisfaction.

[0033] Step S300: When detecting the start of the preloading of the main website, control to use the Service Worker to pre-cache the static resources and dynamic interface data of the website into the local database; In the embodiment of this step, when a user accesses a website, it is detected that the preloading of the main website is started. By listening for specific events, such as the user accessing a page or a specific network status change.

[0034] In the embodiment of the present invention, through Service Worker, the static resources of the website (such as CSS, JavaScript, pictures, etc.) are pre-cached into the local database of the user. It is convenient that when the user accesses the website again, even without a network connection, the cached content can still be accessed quickly.

[0035] In addition to static resources, the present invention also caches dynamic interface data through Service Worker. These data can be the content obtained by the user in the application, such as the user's configuration information, real-time data, etc.

[0036] In this way, by caching resources in the local database in the present invention, the user hardly needs to wait when returning to the page, thus significantly improving the loading speed and user experience. And after the client caches the static resources and data, even in the offline state, the user can still access some content, enhancing the reliability and availability of the application. And pre-caching resources can reduce the dependence on the network during subsequent accesses, thus reducing the data usage, especially for mobile users.

[0037] Step S400: When an operation instruction for the user to open the main website is detected, search for the cached resources and cached data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data and perform verification; In the embodiment of the present invention, when it is detected that the user triggers an operation through button clicking, page loading or other interaction methods, the website needs to monitor this operation instruction in real time. The present invention can be implemented through an event listener, such as listening for click events.

[0038] Then search for the cached resources and data corresponding to the operation instruction. Because in the previous steps of the present invention, the static resources and dynamic interface data are cached in the predefined Service Worker. When the user issues an instruction, the embodiment of the present invention will query these caches to search for the resources and data that match the instruction.

[0039] In the embodiment of the present invention, in order to ensure that the cached content is the latest and valid, the found cached resources and data are also verified; including checking the version, validity or timestamp of the data, etc., to ensure that the required cached content can be used.

[0040] For example, take a sub-application of the SaaS platform of the present invention, such as the weather forecast application "Weather Link", as an example. When the user clicks the update weather button, the present invention will query the cached weather data according to the user's instruction and perform verification; in this example, when the user clicks the update weather button, the sub-application first tries to obtain the weather data from the cache and perform verification. If the cache is valid (for example, not timed out), the application will use this data to update the interface; if the cache does not exist or is invalid, the application will obtain the latest weather data through a network request and cache it for future use.

[0041] In this way, by monitoring the user's operation instructions in real time and searching for and verifying the cached resources and data, the Web application can provide a fast and reliable user experience. This method effectively improves the response speed of the application and enhances the offline function.

[0042] Step S500: When the cached resources and cached data corresponding to the operation instruction are found and verified to be available, directly use the cached resources and cached data corresponding to the operation instruction for rendering and display; In the embodiment of the present invention, when the user issues an operation instruction (for example, clicks a button, selects an option, etc.), the sub-application will query the previously cached resources and data, including static content (such as images, style sheets) and dynamic data (such as user information, real-time data). After finding the relevant cached resources and data, the next step is to perform verification. The verification process includes checking the validity, correctness of the data, or any relevant timestamp to ensure that this content is up-to-date and can be used safely.

[0043] In the embodiment of the present invention, once the cached resources and data pass the verification, the application will directly use this content for rendering and display it to the user. In this way, the user will not experience delay and can quickly see the updated content.

[0044] For example, take an online e-commerce platform, such as "Shopping Assistant". When the user searches for goods on the page, the present invention will, according to the user's input, search for whether there is corresponding cached data; in this example, when the user searches for goods, first search for the relevant cache. If the cache is found and it is valid, directly use this data to render the product list.

[0045] In this way, through searching for and verifying the corresponding cached resources and data, the Web application of the present invention can achieve fast and effective rendering, improve user satisfaction and the overall experience. This method not only improves application performance but also enhances the usability in offline and low-network environments.

[0046] And the present invention also has the following advantages: 1) It can improve the loading speed: By directly using the cached content, the application can significantly reduce the loading time, improve the response speed, and thus enhance the user experience.

[0047] 2) It can reduce network requests: Using cached data to render the display reduces the direct requests to the server, lowers the bandwidth consumption and the burden on the server, which is particularly important in high-concurrency situations.

[0048] 3) It can achieve smooth user interaction: The update of the user interface (UI) can be carried out quickly without interruption, creating a smooth interaction experience and making the user feel more natural and intuitive.

[0049] 4) It can optimize the offline experience: Even when the network is unstable or offline, the application can use the previously cached data for rendering, ensuring that users can continue to use certain functions without being affected.

[0050] 5) It can speed up the response: By directly obtaining the required resources from the cache, the website can significantly reduce the loading time, enhance the user experience, and avoid repeated requests to the server.

[0051] 6) It can reduce the server burden: Accessing cached resources can reduce the requests to the server, thereby reducing the server load and improving the overall resource utilization efficiency.

[0052] 7) It can ensure data consistency: Through the verification mechanism, the accuracy and reliability of the data can be maintained, ensuring that the information obtained by users is always the latest and valid.

[0053] Step S600: When no cached resources and cached data corresponding to the operation instruction are found, the corresponding cached data is abandoned and a regular pull is performed.

[0054] In the embodiment of this step, if no resources or data corresponding to the user operation are found in the cache, it means that the cached data is incomplete or expired. In this case, the present invention will decide not to use these invalid data and release them.

[0055] Then a regular pull is performed. Since no valid cached data is found, the present invention will perform a regular data acquisition, which can be done by directly sending a request to the server to pull the latest resources or data. This may involve sending an HTTP request, obtaining relevant information and presenting it to the user.

[0056] In this way, through the regular pull, it is ensured that users obtain the latest and most relevant information, avoiding the use of stale or invalid cached data. When pulling data, the application will use real-time server data, which can improve the overall accuracy and reliability, especially in dynamically changing application scenarios.

[0057] In summary, when the corresponding cached resources cannot be found, abandoning these caches and performing a regular pull is to ensure that the application always responds to user needs with the latest and most accurate data.

[0058] In another embodiment of the present invention, for the access and loading method based on preloaded resources and dynamic data, a pre-page is set in front of the main website; the steps of embedding an inline frame of the main website in the pre-page and performing a hiding process include: As Figure 3 shown, in this embodiment, a main website is set in advance, and the main website is set in the software as a service platform mode, that is, the SaaS platform. Multiple sub-application modules are set in the main website, such as Figure 3 shown, Application 1, Application 2, Application 3, Application 4... Application 10. Each sub-application module can independently load the corresponding sub-application.

[0059] In another embodiment of the present invention, for the access and loading method based on preloaded resources and dynamic data, wherein the step of controlling the preloading of the main website through the inline frame when entering the pre-page includes: When it is detected that the pre-page is entered, control is adopted to preload the main website in the background through the inline frame in a hidden processing manner.

[0060] That is, in the embodiment of the present invention, an event of a user accessing the pre-page can be monitored, which can be specifically triggered by URL routing, clicking a link or other instructions.

[0061] And the control adopts a hidden processing manner. Specifically, the pre-page of the present invention is first displayed to the user, and this page can contain some basic information or loading prompts. During this period, the user will not see the complete content. To enhance the user experience, the present invention adopts the "hidden processing manner", that is, the iframe of the main website is set to be invisible, so as to prevent the user from viewing an incomplete interface during the loading period.

[0062] Then when the user sees the pre-page, the control background will preload the content of the main website through the iframe. That is, the application of the present invention will obtain and load the main content in advance before the user interface is displayed, so as to reduce latency and improve the speed of subsequent access.

[0063] In this way, by using the pre-page and hiding processing methods, information can be displayed to users during loading, enhancing their anticipation and reducing user anxiety. The user has more control over the content during the waiting period. And since the main website has been pre-loaded in the background, when the user clicks to enter the main page, the content can be quickly displayed, thus greatly reducing the user's perceived waiting time and improving fluency. Moreover, the hiding processing method ensures that users will not see the content in the process of loading during subsequent visits, bringing a more natural transition experience, thus enhancing the overall user satisfaction. And by pre-loading the main website, the application can make better use of network bandwidth and resources, ensure quick response during user access, and contribute to improving the overall performance of the website.

[0064] In a further embodiment of the present invention, the step of, when detecting the start of pre-loading of the main website, controlling the use of a service worker thread to pre-cache website static resources and dynamic interface data into the local database includes: When detecting the start of pre-loading of the main website, controlling the use of a service worker thread to pre-cache the web page resources and data of the main website in the local database; And pre-caching the static resources of the main website in the local database; And pre-caching the dynamic interface data of the main website in the local database.

[0065] In the embodiment of the present invention, when a user accesses the main website, this event can be detected and the corresponding service worker thread can be activated.

[0066] The present invention uses a service worker thread. Among them, the service worker thread is a script that runs in the background, does not directly intervene in the user interface of the web page, but can manage functions such as caching and intercepting network requests.

[0067] Regarding the pre-caching of web page resources and data in the embodiment of the present invention, it includes: Web page resources: Caching the web page infrastructure (such as HTML files, CSS styles) in the local database so that the page can be quickly displayed when the user accesses it.

[0068] Static resources: Include files such as images, audio, and video. Once these files are cached, they can be quickly loaded during subsequent user visits without additional network requests.

[0069] Dynamic interface data: Refers to real-time data obtained from the server (such as user information or dynamic content), which will also be cached locally to improve the application response speed and ensure access even in the offline situation.

[0070] In this way, through local caching, when users access a page, they can load content faster, reducing the waiting time caused by network latency and optimizing the user experience. Moreover, it can enhance offline availability: even when the network connection is unstable or completely disconnected, the application can still provide some functions, and users can view the data cached offline, improving the availability of the application.

[0071] The present invention can also reduce bandwidth consumption because by caching static resources and dynamic data, the number of requests to the server is reduced, thereby reducing the use of network bandwidth and improving the utilization efficiency of resources.

[0072] The present invention can also improve performance and responsiveness because by quickly accessing the local cache instead of obtaining data from the network every time, the response speed of the application can be significantly improved, making the user experience smoother.

[0073] It can be seen that by using service worker threads to pre-cache web page resources, static resources, and dynamic interface data in the local database, the present invention not only improves the user experience but also ensures that the application can run properly even when the network is unreliable. This method effectively balances performance and availability, making the Web application more efficient and user-friendly.

[0074] In a further embodiment of the present invention, the step of, when detecting an operation instruction for the user to open the main website, finding and verifying the cached resources and cached data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data includes: When detecting an operation instruction for the user to open the main website, according to the operation instruction, find the cached resources and cached data corresponding to the operation instruction from the local database pre-cached with website static resources and dynamic interface data; Judge whether there are cached resources and cached data corresponding to the operation instruction requested in the local database pre-cached with website static resources and dynamic interface data.

[0075] In this embodiment, regarding detecting the user operation instruction, the application can be used to monitor the user's operations in real time, such as clicking a button, selecting a menu, etc. These operations are regarded as instructions telling the system the actions the user hopes to perform.

[0076] Then, according to the user's operation instruction, the present invention queries from the local database (the cache managed by the service worker thread) to find the cached resources and data related to the instruction. These caches include static resources (such as pictures, style sheets) and dynamic interface data (such as user personal information, the latest news, etc.). This step will confirm whether there are cached resources and data corresponding to the user's request in the local database. If they exist, the system of the present invention can directly use these data to quickly respond to the user's operation.

[0077] It can be seen that this step helps to improve the response speed and user experience of the application by monitoring user instructions and searching for local caches. If valid cached data can be found, the present invention can avoid unnecessary network requests, thereby reducing the loading time and improving the interaction efficiency.

[0078] In a further embodiment of the present invention, the step of directly using the cache resources and cache data corresponding to the operation instruction for rendering and display when the cache resources and cache data corresponding to the operation instruction are found and verified to be available includes: When there are cache resources and cache data corresponding to the request of the operation instruction in the local database that pre-caches website static resources and dynamic interface data, control is performed to directly use the cache resources and cache data corresponding to the request of the operation instruction for rendering and display; And control is performed to pre-load the static resources and dynamic interface data of each sub-application module of the main website.

[0079] In the embodiment of this step, first, it is judged whether there are cache resources and dynamic interface data corresponding to the user's operation instruction in the local database. That is, the present invention will confirm in the system whether the data or resources requested by the user have been pre-cached.

[0080] If matching resources or data are found in the cache, the present invention will directly use these cached contents for page rendering. In this way, it is convenient for users to quickly see the content they requested without waiting for additional network requests, thereby providing a smoother user experience.

[0081] Regarding the pre-loading of sub-application modules, that is, at the same time, in order to further improve the response speed of subsequent operations, the present invention will also trigger the pre-loading of the static resources and dynamic interface data of each sub-application module of the main website. Pre-loading means that when the user has not requested these resources, the present invention has already started to download and cache them so that users can access these contents more quickly during future operations (such as switching pages or function modules).

[0082] This process not only improves the response speed of user requests but also better prepares for future interactions. By quickly rendering using the existing cached data and pre-loading the resources and data that may be requested by the user subsequently, the system ensures the efficiency and smoothness of the Web application. This method effectively balances performance and user experience, making the application more user-friendly.

[0083] The following further describes the present invention in detail through another specific application embodiment, as Figure 2 shown, a method for accessing and loading based on pre-loaded resources and dynamic data in this specific application embodiment includes the following steps: S10. Start and proceed to step S11; S11. Enter the SaaS (Software as a Service) platform and proceed to step S12; In the embodiment of the present invention, a pre - page will be set on the main website. By adding a pre - page which is simple enough with few functions and dependencies, it can be opened extremely fast; S12. Embed a hidden iframe; and proceed to step S13. When the instruction to open the main platform is detected, enter S16; Embed an iframe in the pre - page and hide it so that users cannot perceive it; Among them, embedding an iframe (inline frame) is a technology for embedding other web pages or content in a web page. By using HTML's <iframe>The label can display the content of another web page within one web page without the user leaving the current page.

[0084] S13. Open the main platform; and enter step S14; Control to open the main website in the Iframe (inline frame); S14. Start the Service Worker and enter step S15; Among them, the Service Worker (service worker thread) is a browser technology that allows developers to create a programmable proxy between the browser and the network; it runs in the background, independent of the web page, and can handle network requests, cache content, and push notifications.

[0085] S15. After the main website is started, use the Service Worker to cache the static resources and dynamic interface data of the website into the local databases IndexDB and cache storage; and enter step S16; Among them, the local database IndexedDB (index database) refers to the data storage function provided by the IndexedDB technology in the user's browser. IndexedDB allows web applications to store data on the user's device in a persistent and structured manner, enabling access and manipulation of this data even in an offline state.

[0086] The IndexedDB index database is an API used in the browser to efficiently store and retrieve large amounts of structured data, allowing web applications to store data persistently on the user's device.

[0087] Cache Storage is cache storage and is part of the Web API, used to store caches of network requests and responses in the browser to support offline access and improve the performance of web applications.

[0088] In the embodiments of the present invention, Service Worker pre-caching is used. Using Service Worker can achieve offline caching and resource preloading to ensure that users can access the website even in an offline state. Service Worker can preload resources asynchronously in the background to improve the user experience.

[0089] Specifically in implementation, the resources pre-cached by the Service Worker of the present invention are downloaded and stored locally during the first loading and can be utilized only when accessed again later.

[0090] S16. Detect that the user browses other content, and then enter S17;S17. According to the user's operation instruction, enter the target site accessed by the user, obtain cached data from the database, and enter step S18.

[0091] S18. Determine whether there is a cache. If not, enter S19; if so, enter S20;S19. Perform a normal load, and then enter S23;S20. Determine whether the cache is available. If not, enter S21; if so, enter S22;S21. Perform a normal load, and then enter S23;S22. Use the cached data to complete the load, and then enter S23;In the embodiment of the present invention, when the user opens the main website, search for and verify cached resources and data; if the resources and data exist and are available, directly use the cache for rendering; if the resources or data are unavailable, then abandon the corresponding cache and perform a normal pull.

[0092] S23. End.

[0093] In the embodiment of the present invention, regarding introducing an iframe tag into the website html code and setting a hidden attribute, the code example is as follows:HTML<style>.hidden-iframe {display: none;}< / style><iframe src="https: / / example.com" class="hidden-iframe">。< / iframe> .

[0094] In addition, the code examples for using Service Worker to cache resources and dynamic data (implemented using Workbox) in the embodiment of the present invention are as follows: TypeScript / / Basic configuration import { setCacheNameDetails, skipWaiting, clientsClaim} from 'workbox - core'; / / Cache - related import { precacheAndRoute} from 'workbox - precaching / precacheAndRoute'; import { registerRoute, setDefaultHandler} from 'workbox - routing'; import { NetworkFirst, StaleWhileRevalidate, CacheFirst, NetworkOnly, } from 'workbox - strategies'; / / Plugins import { CacheableResponsePlugin} from 'workbox-cacheable-response / CacheableResponsePlugin'; import { ExpirationPlugin} from 'workbox-expiration / ExpirationPlugin'; / / Built-in solutions import { pageCache, offlineFallback} from 'workbox-recipes'; / / Custom methods and plugins import { getCacheKeyWillBeUsed, blockStaticSource, blockImageSource} from '@ / utils-ts / service-worker' self.__WB_DISABLE_DEV_LOGS = true; setCacheNameDetails({ prefix:'sw-tools', suffix: 'v1', precache: 'precache', runtime: 'runtime-cache', }); skipWaiting(); clientsClaim(); / * When the user accesses / , the corresponding page HTML file accessed is / index.html. By default, the precache routing mechanism will append index.html after the / at the end of any URL, which means that any pre-cached index.html can be accessed via / index.html or / . Of course, this default behavior can also be disabled through the directoryIndex parameter; * / precacheAndRoute(self.__WB_MANIFEST, { ignoreUrlParametersMatching: [ / .* / ], directoryIndex: null, }); / / URL navigation cache pageCache(); / / Cache for html / / For HTML, if you want the page to be accessible offline, use NetworkFirst. If you don't need offline access, use NetworkOnly. It is not recommended to use other strategies for HTML.

[0095] registerRoute(new RegExp( / .*.html / ), new NetworkFirst()); / / Cache for static resources / / CSS and JS are more complicated because generally the CSS and JS of a site are on the CDN, and the SW has no way to determine whether the resources requested from the CDN are correct (HTTP 200). If the failed results are cached, it will be a big problem. I suggest using the Stale-While-Revalidate strategy, which not only ensures the page speed but also allows users to update by refreshing if it fails. If your CSS and JS are in the same domain as the site and the file names contain the Hash version number, you can directly use the Cache First strategy.

[0096] registerRoute( blockStaticSource, new StaleWhileRevalidate({ cacheName:'static-resources', plugins: new CacheableResponsePlugin({ statuses: [0, 200], }), new ExpirationPlugin({ maxEntries: 500, maxAgeSeconds: 30 * 24 * 60 * 60, }), , }), ); / / Caching of images / / It is recommended to use Cache First for images and set a certain expiration time so that the request will not change after one request.

[0097] registerRoute( blockImageSource, new CacheFirst({ cacheName: 'images', plugins: { cacheKeyWillBeUsed: getCacheKeyWillBeUsed('all')}, new CacheableResponsePlugin({ statuses: [0, 200], }), new ExpirationPlugin({ maxEntries: 200, maxAgeSeconds: 30 * 24 * 60 * 60, }), }], }), ); / / Caching of the xxxx interface registerRoute( / ^http(s)?: / / ((dev.)|(test.)|(testing.))?xxxx.net / api / v\d+ / (.*)? / xxxx.* / , new StaleWhileRevalidate({ cacheName: 'xxxx_cache', plugins: { cacheKeyWillBeUsed: getCacheKeyWillBeUsed('t')}, new CacheableResponsePlugin({ statuses: [0, 200], }), new ExpirationPlugin({ maxEntries: 2000, maxAgeSeconds: 7 * 24 * 60 * 60, }), , }), ); / / yyyy interface registerRoute( / ^http(s)?: / / ((dev.)|(test.)|(testing.))?xxxx.net / api / v\d+ / (.*)? / yyyy.* / , new StaleWhileRevalidate({ cacheName: 'yyyy_cache', plugins: { cacheKeyWillBeUsed: getCacheKeyWillBeUsed('t')}, new CacheableResponsePlugin({ statuses: [0, 200], }), new ExpirationPlugin({ maxEntries: 10000, maxAgeSeconds: 20 * 60, / / 20 minutes }), , }), );

[0098] In the embodiments of the present invention, the judgment of whether resources and data are available on the main website includes: 1), Judge whether static resources are available. A hash value can be added to the resource path, and the html file introduces the file with the hash value. The Service Worker intercepts the request, looks up the cache through the path with the hash value, and judges whether it exists. The code example is as follows: HTML <!DOCTYPE html> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Hashed Resource Example< / title> <!-- Use static resources with hash values --> <link rel="stylesheet" href=" / styles / style-abc123.css"> <h1>Hashed Resource Example< / h1> <!-- Page content --> <script>self.addEventListener('fetch', (event) =>{event.respondWith(caches.match(event.request).then((response) =>{ / / 如果缓存中有匹配的资源，则返回缓存，否则从网络请求return response || fetch(event.request);}));});< / script> 2), Determine whether dynamic data is available. Assume that data within 5 minutes is considered available data. The code example is as follows: TypeScript const CACHE_NAME ='my-api-cache-v1'; const MAX_AGE_SECONDS = 300; / / 5 minutes self.addEventListener('fetch', (event) =>{ event.respondWith( caches.match(event.request).then((cachedResponse) =>{ if (cachedResponse) { / / There is a matching response in the cache const cacheTimestamp = cachedResponse.headers.get('x-cache-timestamp'); const currentTimestamp = new Date().getTime(); / / Check if the timestamp is within the valid period if (currentTimestamp - parseInt(cacheTimestamp, 10)<MAX_AGE_SECONDS *1000) { / / The data is within the valid period, return the cache return cachedResponse; } else { / / The data has expired, request new data from the network return fetchAndCache(event.request); } } else { / / There is no matching response in the cache, request new data from the network return fetchAndCache(event.request); } }) ); }); function fetchAndCache(request) { return fetch(request).then((response) =>{ / / Clone the response so that it can be used twice in the response const responseToCache = response.clone(); / / Cache the new data caches.open(CACHE_NAME).then((cache) =>{ cache.put(request, responseToCache); }); / / Add a timestamp to the response header for subsequent determination of data expiration const timestampedResponse = new Response(response.body, { headers: { 'x-cache-timestamp': new Date().getTime()}, }); return timestampedResponse; }); }。

[0099] As can be seen from the above, the present invention can, through local caching, not only cache static resources but also cache dynamic data, achieving true dynamic acceleration and shortening the experience time of the full functionality of the website. Moreover, the present invention does not additionally increase network overhead.

[0100] Exemplary Device Such as Figure 4As shown in the figure, an access and loading device based on pre-loaded resources and dynamic data is provided in an embodiment of the present invention. The device includes: A presetting module 310, configured to preset a pre-page before the main website; embed an inline frame of the main website in the pre-page and perform a hiding process; A pre-loading module 320, configured to control the pre-loading of the main website through the inline frame when entering the pre-page; A cache control unit 330, configured to control the pre-caching of website static resources and dynamic interface data to a local database using a service worker thread when detecting the start of the pre-loading of the main website; An operation cache matching module 340, configured to, when detecting an operation instruction for opening the main website by the user, search for cache resources and cache data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data and perform verification; A matching rendering unit 350, configured to directly use the cache resources and cache data corresponding to the operation instruction for rendering and display when finding the cache resources and cache data corresponding to the operation instruction and verifying their availability; A pulling control module 360, configured to, when not finding the cache resources and cache data corresponding to the operation instruction, abandon the corresponding cache data and perform a normal pull, as described above.

[0101] Based on the above embodiment, the present invention further provides an intelligent terminal, and its principle block diagram can be as Figure 5 shown. The intelligent terminal includes a processor, a memory, a network interface, a display screen, and a database connected through a system bus. Among them, the processor of the intelligent terminal is used to provide computing and control capabilities. The memory of the intelligent terminal includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the intelligent terminal is used to communicate with an external terminal through a network connection. The computer program, when executed by the processor, implements an access and loading method based on pre-loaded resources and dynamic data. The database of the intelligent terminal is used to store an access and loading program based on pre-loaded resources and dynamic data.

[0102] Those skilled in the art can understand that Figure 5 the principle block diagram shown in

[0103] In one embodiment, an intelligent terminal is provided, including a memory, and one or more programs, where one or more programs are stored in the memory and are configured to be executed by one or more processors. The one or more programs include instructions for performing the following operations: Pre-set a pre-page before the main website; embed an inline frame of the main website in the pre-page and perform a hiding process; When entering the pre-page, control to pre-load the main website through the inline frame; When detecting the start of pre-loading of the main website, control to use a service worker thread to pre-cache website static resources and dynamic interface data into the local database; When detecting an operation instruction for the user to open the main website, search for cached resources and cached data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data and perform verification; When finding the cached resources and cached data corresponding to the operation instruction and the verification is available, directly use the cached resources and cached data corresponding to the operation instruction for rendering and display, as described above.

[0104] Wherein, after the step of when finding the cached resources and cached data corresponding to the operation instruction and the verification is available, directly using the cached resources and cached data corresponding to the operation instruction for rendering and display includes: When not finding the cached resources and cached data corresponding to the operation instruction, discard the corresponding cached data and perform a regular pull.

[0105] Wherein, the step of pre-setting a pre-page before the main website; embedding an inline frame of the main website in the pre-page and performing a hiding process includes: Pre-set a main website, and set the main website to the software as a service platform mode. Set multiple sub-application modules in the main website, and each sub-application module can be loaded separately with the corresponding sub-application.

[0106] Wherein, the step of when entering the pre-page, controlling to pre-load the main website through the inline frame includes: When detecting the entry into the pre-page, control to adopt a hiding process method and pre-load the main website in the background through the inline frame.

[0107] Wherein, the step of when detecting the start of pre-loading of the main website, controlling to use a service worker thread to pre-cache website static resources and dynamic interface data into the local database includes: When detecting the start of pre-loading of the main website, control to use a service worker thread to pre-cache the web resources and data of the main website in the local database; and pre-cache the static resources of the main website in the local database; and pre-cache the dynamic interface data of the main website in the local database. Among them, the step of, when detecting an operation instruction for the user to open the main website, finding the cached resources and cached data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data and performing verification includes: When detecting an operation instruction for the user to open the main website, according to the operation instruction, find the cached resources and cached data corresponding to the operation instruction from the local database pre-cached with website static resources and dynamic interface data; Judge whether there are cached resources and cached data corresponding to the request of the operation instruction in the local database pre-cached with website static resources and dynamic interface data.

[0108] Among them, the step of, when finding the cached resources and cached data corresponding to the operation instruction and performing verification to be available, directly using the cached resources and cached data corresponding to the operation instruction for rendering and display includes: When there are cached resources and cached data corresponding to the request of the operation instruction in the local database pre-cached with website static resources and dynamic interface data, control to directly use the cached resources and cached data corresponding to the operation instruction for rendering and display; And control to pre-load the static resources and dynamic interface data of each sub-application module of the main website, as specifically described above.

[0109] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above various methods. Among them, any reference to a memory, storage, database, or other medium used in the various embodiments provided by the present invention can include non-volatile and / or volatile memories. Non-volatile memories can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memories can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), Rambus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and Rambus dynamic RAM (RDRAM), etc.

Claims

1. An access and loading method based on pre-loaded resources and dynamic data, characterized in that, Including: Pre-set a pre-page before the main website; embed an inline frame of the main website in the pre-page and perform a hiding process; When entering the pre-page, control to pre-load the main website through the inline frame; When detecting the start of pre-loading of the main website, control to use a service worker thread to pre-cache the website static resources and dynamic interface data into the local database; When detecting an operation instruction for the user to open the main website, search for the cached resources and cached data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data and perform verification; When finding the cached resources and cached data corresponding to the operation instruction and the verification is available, directly use the cached resources and cached data corresponding to the operation instruction for rendering and display.

2. The access and loading method based on pre-loaded resources and dynamic data according to claim 1, wherein After the step of when finding the cached resources and cached data corresponding to the operation instruction and the verification is available, directly use the cached resources and cached data corresponding to the operation instruction for rendering and display, it includes: When not finding the cached resources and cached data corresponding to the operation instruction, abandon the corresponding cached data and perform a regular pull.

3. The access and loading method based on pre-loaded resources and dynamic data according to claim 1, wherein The step of pre-setting a pre-page before the main website; embedding an inline frame of the main website in the pre-page and performing a hiding process includes: Pre-set a main website, and set the main website to the software as a service platform mode, set multiple sub-application modules in the main website, and each sub-application module can be separately loaded with the corresponding sub-application.

4. The access and loading method based on pre-loaded resources and dynamic data according to claim 2, wherein The step of when entering the pre-page, control to pre-load the main website through the inline frame includes: When detecting the entry into the pre-page, control to use a hiding process method to pre-load the main website in the background through the inline frame.

5. The access and loading method based on preloaded resources and dynamic data according to claim 2, wherein The step of when detecting the start of pre-loading of the main website, control to use a service worker thread to pre-cache the website static resources and dynamic interface data into the local database includes: When detecting the start of pre-loading of the main website, control to use a service worker thread to pre-cache the web page resources and data of the main website in the local database; And pre-cache the static resources of the main website in the local database; And pre-cache the dynamic interface data of the main website in the local database.

6. The access and loading method based on pre-loaded resources and dynamic data according to claim 1, wherein The step of when detecting an operation instruction for the user to open the main website, search for the cached resources and cached data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data and perform verification includes: When detecting an operation instruction for the user to open the main website, according to the operation instruction, search for the cached resources and cached data corresponding to the operation instruction from the local database pre-cached with website static resources and dynamic interface data; Judge whether there are cached resources and cached data corresponding to the operation instruction requested in the local database pre-cached with website static resources and dynamic interface data.

7. The access and loading method based on pre-loaded resources and dynamic data according to claim 1, characterized in that The step of when finding the cached resources and cached data corresponding to the operation instruction and the verification is available, directly use the cached resources and cached data corresponding to the operation instruction for rendering and display includes: When there are cached resources and cached data corresponding to the request of the operation instruction in the local database that has pre-cached website static resources and dynamic interface data, control to directly use the cached resources and cached data corresponding to the request of the operation instruction for rendering and display; And control to pre-load the static resources and dynamic interface data of each sub-application module of the main website.

8. An access and loading device based on pre-loaded resources and dynamic data, characterized in that The device includes: A pre-setting module, configured to pre-set a pre-page in front of the main website; embed an inline frame of the main website in the pre-page and perform a hiding process; A pre-loading module, configured to control to pre-load the main website through the inline frame when entering the pre-page; A cache control unit, configured to control to pre-cache website static resources and dynamic interface data to the local database using a service worker thread when detecting the start of pre-loading of the main website; An operation cache matching module, configured to, when detecting an operation instruction for the user to open the main website, search for cached resources and cached data corresponding to the operation instruction from the pre-cached website static resources and dynamic interface data and perform verification; A matching rendering unit, configured to, when finding cached resources and cached data corresponding to the operation instruction and verifying their availability, directly use the cached resources and cached data corresponding to the operation instruction for rendering and display; A pulling control module, configured to, when not finding cached resources and cached data corresponding to the operation instruction, discard the corresponding cached data and perform a normal pull.

9. An intelligent terminal, characterized in that, It includes a memory, and one or more programs, where one or more programs are stored in the memory and are configured to be executed by one or more processors. The one or more programs include those for executing the method according to any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, When the instructions in the storage medium are executed by the processor of the electronic device, the electronic device is enabled to execute the method according to any one of claims 1-7.

Images