Method, system, device and medium for accelerating first visit of website based on preloading

Abstract

The present invention provides a method, system, device and medium for accelerating the first visit of a website based on preloading, and belongs to the field of network data processing technology. The method includes: adding a front page to the main website; embedding an iframe tag in the front page and performing hidden processing; opening the main website through the iframe tag; after the main website is started, using Service Worker to cache the website static resources and dynamic interface data in a local database; when the user visits the main website for the first time, intercepting the access request, and performing a search and verification of the corresponding cached resources and data in the local database according to the access request; if the search and verification is successful, directly using the data of the cached resources for rendering; otherwise, performing conventional network requests and rendering. The present invention can preload resources and dynamic data at the same time before the website is opened, so as to increase the speed by caching resources, thereby improving the user's experience of using the website.

Description

Technical Field

[0001] The present invention belongs to the technical field of network data processing, and more specifically relates to a method, system, device and medium for accelerating the first visit of a website based on preloading. Background Art

[0002] With the rapid development of Internet technology, Web sites have become an indispensable part of people's daily life and work. Users have increasing requirements for website access speed and responsiveness, especially the first visit speed of the website, which has a significant impact on user retention and conversion rates. According to research, every 1 second increase in website loading time will lead to about 30% visitor loss; on the contrary, websites with fast loading speeds usually have higher conversion rates. For example, when the website page opening time increases from 1 second to 4 seconds, the conversion rate drops most significantly, while the conversion rate increases by 2% for every 1 second increase in the website opening speed. Therefore, improving the first visit speed of the website is crucial to improving user experience and business benefits.

[0003] In order to speed up the first visit of a website, a variety of preloading technologies have been proposed and applied. However, these technologies all have certain limitations in practical applications.

[0004] 1. CDN (Content Distribution Network) technology loads content in advance through globally distributed CDN edge nodes to optimize transmission speed and user experience. Although CDN can shorten resource loading time to a certain extent, its effect is far less than reading local cache, and it can usually only cache static resources, not dynamic data, so it cannot fully meet the dynamic acceleration requirements of the first visit to the website.

[0005] 2. Preload, prefetch, and dns-prefetch are resource preloading technologies provided by browsers to optimize web page performance. Preload allows developers to specify resources that need to be preloaded during page loading, while prefetch predicts resources that users may access based on browser algorithms and preloads them. dns-prefetch is used to resolve the IP address corresponding to the domain name in advance to reduce DNS resolution time. However, these technologies must start working after the website is opened, which inevitably leads to longer initial page loading time, and the preloaded resources may not be used before the user actually accesses the relevant content, causing unnecessary network overhead.

[0006] 3. async and defer are HTML <script>元素的属性，用于控制脚本的加载和执行时机。它们允许脚本异步加载，不会阻塞HTML解析，从而可以与其他资源并行加载，提高页面加载速度。然而，这两种属性并非真正意义上的预加载技术，而是通过延迟非重要资源的加载来加快主资源的加载速度。因此，它们并不能缩短网站全面功能的体验时间。

[0007] 4、Service Worker是一种运行在浏览器后台的脚本，可以实现离线缓存和资源预加载。通过Service Worker，可以在用户首次访问网站时下载并存储资源，以便后续访问时利用。然而，这会导致用户在首次进入网站时初始页面加载时的网络开销增加，尤其是对于包含大量资源的网站。

[0008] 5、<link rel="prerender">是一种预渲染技术，通过在用户浏览器后台预加载和渲染下一个可能访问的页面来提高用户体验。然而，该技术只能渲染静态的页面快照，对于包含动态或个性化内容的页面，预渲染可能无法准确捕捉和呈现。

[0009] 综上所述，现有的预加载技术在提高网站首次访问速度方面均存在一定的局限性。发明内容

[0010] 针对以上问题，本发明的目的在于提供一种基于预加载的网站首次访问加速方法、系统、设备及介质，能够在网站打开之前同时预加载资源和动态数据，以缓存资源提高速度，同时利用数据实现动态化内容呈现，从而提高用户对网站的使用体验。

[0011] 本发明为实现上述目的，通过以下技术方案实现：第一方面，本申请实施例提供一种基于预加载的网站首次访问加速方法，包括：为主体网站加入一个前置页面；在前置页面中嵌入iframe标签并进行隐藏处理；通过iframe标签打开主体网站；在主体网站启动后，利用Service Worker 缓存网站静态资源和动态接口数据到本地数据库中；当用户首次访问主体网站时，拦截访问请求，并根据访问请求在本地数据库中进行相应的缓存资源和数据的查找校验；如果查找校验成功，则直接使用缓存资源的数据进行渲染；如果查找校验识别，则进行常规的网络请求和渲染。

[0012] 在一个可选的实施方式中，所述为主体网站加入一个前置页面，包括：判断主体网站的前端是否设置有前置网页；若否，则根据网站主体使用的技术栈在主体网站的项目目录中创建前置网页文件，并在主体网站服务器的配置文件中设置前置页面为默认页面。

[0013] 在一个可选的实施方式中，所述在前置页面中嵌入iframe标签并进行隐藏处理，包括：在前置页面的HTML代码中，引入iframe标签；将iframe标签的src属性设置为主体网站的URL；使用CSS命令设置隐藏属性。

[0014] 在一个可选的实施方式中，所述在主体网站启动后，利用Service Worker 缓存网站静态资源和动态接口数据到本地数据库中，包括：获取当前作用域内所有已注册的Service Worker，并进行注销；注册一个新的Service Worker，指定其作用域为主体网站的根目录，并引入service-worker.js作为Service Worker的脚本文件；配置Workbox库进行缓存管理，设置将网站静态资源和动态接口数据缓存到IndexDB 和 cache storage中；使用registerRoute函数分别为HTLM页面、网站静态资源和图片资源配置缓存策略。

[0015] 在一个可选的实施方式中，所述当用户首次访问主体网站时，拦截访问请求，并根据访问请求在本地数据库中进行相应的缓存资源和数据的查找校验，包括：当用户首次访问主体网站时，通过Service Worker拦截访问请求；当访问请求为访问网站静态资源时，识别HTML文件引入的带有 hash 值的 URL；检查本地数据库中是否存在与带有 hash 值的 URL完全匹配的条目；若是，则网站静态资源的查找校验成功；若否，则网站静态资源的查找校验失败。

[0016] 在一个可选的实施方式中，所述当用户首次访问主体网站时，拦截访问请求，并根据访问请求在本地数据库中进行相应的缓存资源和数据的查找校验，包括：当用户首次访问主体网站时，通过Service Worker拦截访问请求；当访问请求为访问网站静态资源时，识别HTML文件引入的带有 hash 值的 URL；检查本地数据库中是否存在与带有 hash 值的 URL完全匹配的条目；若是，则网站静态资源的查找校验成功；若否，则网站静态资源的查找校验失败。

[0017] 在一个可选的实施方式中，所述使用registerRoute函数分别为HTLM页面、网站静态资源和图片资源配置缓存策略，包括：使用registerRoute函数为HTML页面注册使用NetworkFirst策略；使用registerRoute函数为网站静态资源注册使用StaleWhileRevalidate策略；使用registerRoute函数为图片资源注册使用CacheFirst策略。

[0018] 第二方面，本申请实施例还提供了一种基于预加载的网站首次访问加速系统，包括：前置页面配置模块，用于为主体网站加入一个前置页面；iframe标签嵌入模块，用于在前置页面中嵌入iframe标签并进行隐藏处理；登录模块，用于通过iframe标签打开主体网站；缓存模块，用于在主体网站启动后，利用Service Worker 缓存网站静态资源和动态接口数据到本地数据库中；资源数据渲染模块，用于当用户首次访问主体网站时，拦截访问请求，并根据访问请求在本地数据库中进行相应的缓存资源和数据的查找校验；如果查找校验成功，则直接使用缓存资源的数据进行渲染；如果查找校验识别，则进行常规的网络请求和渲染。

[0019] 第三方面，本申请实施例还提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现如上文任一项所述基于预加载的网站首次访问加速方法的步骤。

[0020] 第四方面，本申请实施例还提供了一种存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上文任一项所述基于预加载的网站首次访问加速的步骤。

[0021] 从以上技术方案可以看出，本发明具有以下优点：本申请提供的基于预加载的网站首次访问加速方法中，通过在主体网站前加入一个包含隐藏iframe的前置页面，使得在用户实际访问主体网站之前，主体网站的部分资源已经开始加载。这种方法不仅减少了用户首次访问时的等待时间，提高了首屏加载速度，还通过Service Worker技术将网站的静态资源和动态接口数据缓存至用户设备的本地数据库中（如IndexedDB和cache storage）。当用户真正访问主体网站时，Service Worker会拦截请求，优先从本地缓存中查找所需资源和数据，如果缓存中存在对应资源，则直接使用缓存数据进行页面渲染，否则再进行常规的网络请求。此外，通过Workbox库配置不同的缓存策略（如NetworkFirst、StaleWhileRevalidate、CacheFirst），可以针对不同类型资源实现最优的加载和更新机制，进一步优化了资源管理和加载效率。这种方法不仅显著提高了用户的初次访问体验，减少了对网络的依赖，还增强了应用在离线或弱网环境下的可用性，从而整体上改善了用户的浏览体验和应用的性能。

[0022] 本申请可以在网站访问之前进行预缓存，有效提升网站第一次的访问速度。同时缓存网站静态资源和数据，使网站打开速度快的同时交互也来的迅速，是一个完整的全缓存。不同于其他方案对用户有明显感知，本申请对用户几乎无感知。

[0023] 本申请有效的克服了其他方案提速效果不佳、无法提前预加载资源或无法预加载动态数据的缺点，本申请已经应用于实际项目中，实验结果表明能够满足实时性要求，是一个可靠的方案。附图说明

[0024] 为了更清楚地说明本发明的技术方案，下面将对描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

[0025] 图1为本申请提供的基于预加载的网站首次访问加速方法的流程示意图。

[0026] 图2为本申请提供的基于预加载的网站首次访问加速系统的结构示意图。

[0027] 图3为本申请提供的电子设备的结构示意图。具体实施方式

[0028] 在下文将详细描述基于预加载的网站首次访问加速方法的具体步骤中，将更全面地描述本公开的各种实施例。本公开可具有各种实施例，并且可在其中做出调整和改变。然而，应理解：不存在将本公开的各种实施例限于在此公开的特定实施例的意图，而是应将本公开理解为涵盖落入本公开的各种实施例的精神和范围内的所有调整、等同物和 / 或可选方案。

[0029] 在下文中，可在本公开的各种实施例中使用的术语"包括”或"可包括”指示所公开的功能、操作或元件的存在，并且不限制一个或更多个功能、操作或元件的增加。此外，如在本公开的各种实施例中所使用，术语"包括”、"具有”及其同源词仅意在表示特定特征、数字、步骤、操作、元件、组件或前述项的组合，并且不应被理解为首先排除一个或更多个其它特征、数字、步骤、操作、元件、组件或前述项的组合的存在或增加一个或更多个特征、数字、步骤、操作、元件、组件或前述项的组合的可能性。

[0030] 下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

[0031] 请参阅图1所示是一具体实施例中一种基于预加载的网站首次访问加速方法的方法流程图，方法包括：S1：为主体网站加入一个前置页面。

[0032] 示例的，判断主体网站的前端是否设置有前置网页；若否，则根据网站主体使用的技术栈在主体网站的项目目录中创建前置网页文件，并在主体网站服务器的配置文件中设置前置页面为默认页面。

[0033] 通常主体网站前都会有一个前置页面，如果没有可增加一个前置页面，此前置页面足够简单，功能少、依赖少，可以极速打开。

[0034] S2：在前置页面中嵌入iframe标签并进行隐藏处理。

[0035] 示例的，首先在前置页面的HTML代码中，引入iframe标签。然后将iframe标签的src属性设置为主体网站的URL；通过在HTML文档中嵌入一个<iframe>元素，并将其src属性设置为主体网站的URL，从而在当前页面的指定区域内显示主体网站的内容。

[0036] 最后，使用CSS命令设置隐藏属性，如使用CSS的display: none。

[0037] S3：通过iframe标签打开主体网站。

[0038] S4：在主体网站启动后，利用Service Worker 缓存网站静态资源和动态接口数据到本地数据库中。

[0039] 示例的，首先，获取当前作用域内所有已注册的Service Worker，并进行注销；具体的，使用navigator.serviceWorker.getRegistrations()获取当前作用域内所有已注册的Service Worker，并逐一注销它们，以防止作用域污染。

[0040] 然后注册一个新的Service Worker，指定其作用域为主体网站的根目录，并引入service-worker.js作为Service Worker的脚本文件。

[0041] 此时，配置Workbox库进行缓存管理，设置将网站静态资源和动态接口数据缓存到IndexDB 和 cache storage中。

[0042] 最后，使用registerRoute函数分别为HTLM页面、网站静态资源和图片资源配置缓存策略。其中，HTML页面使用NetworkFirst策略，即首先尝试从网络获取资源，如果失败则从缓存中获取。静态资源（通过blockStaticSource函数匹配）使用StaleWhileRevalidate策略，即如果缓存中有资源，则先使用它，同时在后台尝试从网络更新资源。图片资源使用CacheFirst策略，即首先尝试从缓存中获取资源，如果缓存中没有，则从网络获取并存储到缓存中。对于特定的API接口（如 / xxxx / *和 / yyyy / *），使用StaleWhileRevalidate策略，但设置了不同的缓存大小和过期时间。

[0043] S5：当用户首次访问主体网站时，拦截访问请求，并根据访问请求在本地数据库中进行相应的缓存资源和数据的查找校验；如果查找校验成功，则直接使用缓存资源的数据进行渲染；如果查找校验识别，则进行常规的网络请求和渲染。

[0044] 示例的，当用户首次访问主体网站时，通过Service Worker拦截访问请求。

[0045] 当访问请求为访问网站静态资源时，先识别HTML文件引入的带有 hash 值的URL；再检查本地数据库中是否存在与带有 hash 值的 URL完全匹配的条目；若是，则网站静态资源的查找校验成功；若否，则网站静态资源的查找校验失败。

[0046] 当访问请求为访问动态接口数据时，利用fetch事件的回调函数从本地数据库中查找与访问请求匹配的响应。如果有匹配的响应，则通过检查该响应的时间戳头来确定动态接口数据是否在有效期内；若是，则动态接口数据的查找校验成功，直接返回相应的动态接口数据；如果动态接口数据过期或没有匹配的相应，则动态接口数据的查找校验失败，调用fetchAndCache(event.request)函数从网络请求新数据。

[0047] 在本实施例中，通过在前置页面中预加载并缓存主体网站的静态资源和动态接口数据至本地数据库，显著提升用户首次访问速度，优化体验，减轻服务器压力，并增强网站可访问性。

[0048] 在本发明的一种实施例中，基于步骤S2，以下将给出一种可能的实施例对其具体的实施方案进行非限制性阐述。

[0049] 在网站 html 代码中引入 iframe 标签，并设置隐藏属性。具体代码如下：<style>.hidden-iframe {display: none;}< / style><iframe src="https: / / example.com" class="hidden-iframe">< / iframe>在本发明的一种实施例中，基于步骤S4，以下将给出一种可能的实施例对其具体的实施方案进行非限制性阐述。

[0050] 在网站 js 代码中启动 Service Worker，为了防止作用域污染，将安装前注销所有已生效的 Service Worker。具体代码如下：var sp = window.location.protocol + ' / / ' + window.location.host +' / ';if ('serviceWorker' in navigator) {navigator.serviceWorker.getRegistrations().then(regs =>{for (let reg of regs) {reg.unregister();}navigator.serviceWorker.register(sp + 'service-worker.js', {scope: sp,}).then(reg =>{console.log('set scope: ', sp, 'Service Worker instance: ', reg)});});}通过执行如下代码实现Service Worker 中缓存资源和动态数据： / / 基础配置import { setCacheNameDetails, skipWaiting, clientsClaim} from 'workbox-core'; / / 缓存相关import { precacheAndRoute} from 'workbox-precaching / precacheAndRoute';import { registerRoute, setDefaultHandler} from 'workbox-routing';import {NetworkFirst,StaleWhileRevalidate,CacheFirst,NetworkOnly,} from 'workbox-strategies'; / / 插件import { CacheableResponsePlugin} from 'workbox-cacheable-response / CacheableResponsePlugin';import { ExpirationPlugin} from 'workbox-expiration / ExpirationPlugin'; / / 内置方案import { pageCache, offlineFallback} from 'workbox-recipes'; / / 自定义方法和插件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();precacheAndRoute(self.__WB_MANIFEST, {ignoreUrlParametersMatching: [ / .* / ],directoryIndex: null,}); / / URL navigation 缓存pageCache(); / / html 的缓存registerRoute(new RegExp( / .*.html / ), new NetworkFirst()); / / 静态资源的缓存registerRoute(blockStaticSource,new StaleWhileRevalidate({cacheName: 'static-resources',plugins: [new CacheableResponsePlugin({statuses: [0, 200],}),new ExpirationPlugin({maxEntries: 500,maxAgeSeconds: 30 * 24 * 60 * 60,}),],}),); / / 图片的缓存 / / 图片建议使用 Cache First，并设置一定的失效事件，请求一次就不会再变动了。

[0051] registerRoute(blockImageSource,new CacheFirst({cacheName: 'images',plugins: [{ cacheKeyWillBeUsed: getCacheKeyWillBeUsed('all')},new CacheableResponsePlugin({statuses: [0, 200],}),new ExpirationPlugin({maxEntries: 200,maxAgeSeconds: 30 * 24 * 60 * 60,}),],}),); / / xxxx 接口的缓存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 接口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分钟}),],}),);在本发明的一种实施例中，基于步骤S5，以下将给出一种可能的实施例对其具体的实施方案进行非限制性阐述。

[0052] 1）判断静态资源是否可用，可以对资源路径添加 hash 值，html 文件引入带hash 值的文件，Service Worker 拦截请求，通过带 hash 值的路径查找缓存，判断是否存在。

[0053] <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Hashed Resource Example< / title><!-- 使用带哈希值的静态资源 --><link rel="stylesheet" href=" / styles / style-abc123.css" / >< / head><body><h1>Hashed Resource Example< / h1><!-- 页面内容 --><script src=" / scripts / script-xyz456.js">< / script> self.addEventListener('fetch', (event) =>{ event.respondWith( caches.match(event.request).then((response) =>{ / / If there is a matching resource in the cache, return the cache, otherwise request from the network return response || fetch(event.request); }) ); }); 2) Determine whether dynamic data is available, assuming that data within 5 minutes is available 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 validity period if (currentTimestamp - parseInt(cacheTimestamp, 10) <MAX_AGE_SECONDS *1000) { / / The data is within the validity period, return to cache return cachedResponse; } else { / / Data expires, 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 to determine whether the data is expired later const timestampedResponse = new Response(response.body, { headers: { 'x-cache-timestamp': new Date().getTime()}, }); return timestampedResponse; }); } like Figure 2 As shown, the following is an embodiment of the system for accelerating the first visit to a website based on preloading provided by an embodiment of the present disclosure. The system and the method for accelerating the first visit to a website based on preloading of the above-mentioned embodiments belong to the same inventive concept. For details not described in detail in the embodiment of the system for accelerating the first visit to a website based on preloading, please refer to the embodiment of the method for accelerating the first visit to a website based on preloading.

[0054] A website first visit acceleration system based on preloading comprises: a front page configuration module 1, an iframe tag embedding module 2, a login module 3, a cache module 4 and a resource data rendering module 5.

[0055] The front page configuration module 1 is used to add a front page to the main website.

[0056] The iframe tag embedding module 2 is used to embed the iframe tag in the front page and perform hiding processing.

[0057] Login module 3 is used to open the main website through an iframe tag.

[0058] The cache module 4 is used to cache the website static resources and dynamic interface data into the local database by using Service Worker after the main website is started.

[0059] The resource data rendering module 5 is used to intercept the access request when the user visits the main website for the first time, and perform a search and verification of the corresponding cached resources and data in the local database according to the access request; if the search and verification is successful, the cached resource data is directly used for rendering; if the search and verification is recognized, a regular network request and rendering are performed.

[0060] The website first visit acceleration system based on preloading provided in this embodiment realizes preloading and caching of resources of the main website before the user's first visit through the collaborative work of the front page configuration module, iframe tag embedding module, login module, cache module and resource data rendering module, which significantly improves the first screen loading speed and the response efficiency of subsequent visits, reduces network dependence, enhances the offline availability of the application, and thus greatly improves the user experience.

[0061] Figure 3 A schematic diagram of the hardware structure of an electronic device for implementing various embodiments of the present invention.

[0062] The website first access acceleration method based on preloading provided in the embodiment of the present application can be applied to electronic devices. It will be appreciated by those skilled in the art that the electronic device structure involved in the embodiment of the present invention does not constitute a limitation on the electronic device, and the electronic device may include more or less components than shown in the figure, or combine certain components, or arrange different components. In an embodiment of the present invention, the electronic device includes but is not limited to a laptop computer, a desktop computer, a workbench, a personal digital assistant, a server, a blade server, a mainframe computer, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processing, cellular phones, smart phones, wearable devices and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely examples, and are not intended to limit the implementation of the embodiments of the present application described and / or required herein.

[0063] The electronic device may include a processor, an external memory interface, an internal memory, a universal serial bus (USB) interface, a charging management module, a power management module, a battery, a wireless communication module, an audio module, a speaker, a microphone, a sensor module, buttons, a camera, a display, and a SIM card interface, etc.

[0064] The processor may include one or more processing units, for example, the processor may include a central processing unit (CPU), an application processor (AP), a modem processor, a graphics processing unit (GPU), an image signal processor (ISP), a controller, a memory, a video codec, a digital signal processor (DSP), a baseband processor, and / or a neural-network processing unit (NPU), etc. Among them, different processing units may be independent devices or integrated into one or more processors.

[0065] The processor can be the nerve center and command center of the electronic device. The controller can generate an operation control signal according to the instruction operation code and timing signal to complete the control of fetching and executing instructions.

[0066] A memory may also be provided in the processor for storing instructions and data. In some embodiments, the memory in the processor is a cache memory. The memory may store instructions or data that the processor has just used or is cyclically used. If the processor needs to use the instruction or data again, it may be directly called from the memory. This avoids repeated access, reduces the waiting time of the processor, and thus improves system efficiency.

[0067] The external memory interface can be used to connect an external memory card, such as a MicroSD card, to expand the storage capacity of the electronic device. The external memory card communicates with the processor through the external memory interface to implement data storage functions. For example, files such as music and videos can be saved in the external memory card.

[0068] The internal memory can be used to store computer executable program codes, which include instructions. The processor executes various functional applications and data processing of the electronic device by running the instructions stored in the internal memory. The internal memory may include a program storage area and a data storage area. The internal memory may include a high-speed random access memory and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, a universal flash storage (UFS), etc.

[0069] The wireless communication function of an electronic device can be realized through an antenna, a wireless communication module, a modem processor, and a baseband processor.

[0070] The wireless communication module can provide wireless communication solutions for electronic devices, including wireless local area networks (WLAN) (such as wireless fidelity (Wi-Fi) networks), Bluetooth (BT), global navigation satellite system (GNSS), frequency modulation (FM), near field communication (NFC), infrared technology (IR), etc.

[0071] Electronic devices can implement audio functions, etc. through audio modules, speakers, receivers, microphones, headphone jacks, and application processors.

[0072] Electronic devices can achieve shooting functions through ISP, camera, video codec, GPU, display and application processor.

[0073] Electronic devices can achieve display functions through GPU, display screen and application processor.

[0074] The GPU is a microprocessor for image processing that connects the display screen and the application processor. The GPU is used to perform mathematical and geometric calculations for graphics rendering. The processor may include one or more GPUs that execute program instructions to generate or change display information.

[0075] The display screen is used to display images, videos, etc. The display screen includes a display panel.

[0076] The above-mentioned electronic device implements the method for accelerating the first visit to a website based on preloading of the present application by hiding the iframe for loading the main website in the front page and using Service Worker to cache static resources and dynamic data, thereby achieving fast loading of the first visit to the website and efficient response of subsequent visits, significantly improving the beneficial effects of user experience and application availability.

[0077] The storage medium provided in the present application stores a program product capable of implementing a method for accelerating the first visit to a website based on preloading.

[0078] The method for accelerating the first visit to a website based on preloading includes: adding a front page to the main website; embedding an iframe tag in the front page and hiding it; opening the main website through the iframe tag; after the main website is started, using Service Worker to cache the website static resources and dynamic interface data in a local database; when a user visits the main website for the first time, intercepting the access request, and performing a search and verification of the corresponding cached resources and data in the local database based on the access request; if the search and verification is successful, directly using the data of the cached resources for rendering; if the search and verification is recognized, performing a regular network request and rendering.

[0079] In some possible implementations, the preloaded website first visit acceleration method disclosed herein can be implemented in the form of a program product, which includes a program code. When the program product is run on a terminal device, the program code is used to enable the terminal device to execute the steps described in the above “Exemplary Method” section of this specification according to various exemplary implementations of the present disclosure.

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

[0081] The above description of the disclosed embodiments enables one skilled in the art to implement or use the present invention. Various modifications to these embodiments will be apparent to one skilled in the art, and the general principles defined herein may be implemented in other embodiments without departing from the spirit or scope of the present invention. Therefore, the present invention will not be limited to the embodiments shown herein, but rather to the widest scope consistent with the principles and novel features disclosed herein.

Claims

1. A method for accelerating the first visit to a website based on preloading, characterized in that: include: Add a front page to the main website; Embed an iframe tag in the front page and hide it; Open the main website through the iframe tag; After the main website is started, Service Worker is used to cache the website's static resources and dynamic interface data into the local database; When a user visits the main website for the first time, the access request is intercepted, and the corresponding cache resources and data are searched and verified in the local database according to the access request; If the search verification is successful, the data of the cached resource is directly used for rendering; If the validation is found, a normal network request and rendering is performed.

2. The method for accelerating the first visit to a website based on preloading according to claim 1, characterized in that: The method of adding a front page to the main website includes: Determine whether a pre-loaded web page is set at the front end of the main website; if not, create a pre-loaded web page file in the project directory of the main website according to the technology stack used by the main website, and set the pre-loaded page as the default page in the configuration file of the main website server.

3. The method for accelerating the first visit to a website based on preloading according to claim 1, characterized in that: The embedding of the iframe tag in the front page and performing the hiding process include: In the HTML code of the front page, introduce the iframe tag; Set the src attribute of the iframe tag to the URL of the main website; Use CSS commands to set the hidden property.

4. The method for accelerating the first visit to a website based on preloading according to claim 1, characterized in that: After the main website is started, Service Worker is used to cache the website static resources and dynamic interface data into the local database, including: Get all registered Service Workers in the current scope and unregister them; Register a new Service Worker, specify its scope as the root directory of the main website, and introduce service-worker.js as the script file of the Service Worker; Configure the Workbox library for cache management, and set the website static resources and dynamic interface data to be cached in IndexDB and cache storage; Use the registerRoute function to configure cache strategies for HTLM pages, website static resources, and image resources respectively.

5. The method for accelerating the first visit to a website based on preloading according to claim 4, characterized in that: When a user visits the main website for the first time, the access request is intercepted, and the corresponding cache resources and data are searched and verified in the local database according to the access request, including: When a user visits the main website for the first time, the access request is intercepted by Service Worker; When the access request is to access the static resources of the website, identify the URL with hash value introduced by the HTML file; Check if there is an entry in the local database that exactly matches the URL with the hash value; If so, the search and verification of the website's static resources is successful; if not, the search and verification of the website's static resources fails.

6. The method for accelerating the first visit to a website based on preloading according to claim 4, characterized in that: When a user visits the main website for the first time, the access request is intercepted, and the corresponding cache resources and data are searched and verified in the local database according to the access request, and the following is also included: When a user visits the main website for the first time, the access request is intercepted by Service Worker; When the access request is to access dynamic interface data, the callback function of the fetch event is used to search the local database for a response that matches the access request; If there is a matching response, the timestamp header of the response is checked to determine whether the dynamic interface data is within the validity period; if so, the dynamic interface data search and verification is successful, and the corresponding dynamic interface data is directly returned; If the dynamic interface data is expired or there is no matching response, the dynamic interface data search verification fails, and the fetchAndCache(event.request) function is called to request new data from the network.

7. The method for accelerating the first visit to a website based on preloading according to claim 4, characterized in that: The registerRoute function is used to configure cache strategies for HTLM pages, website static resources and image resources, including: Use the registerRoute function to register the NetworkFirst strategy for the HTML page; Use the registerRoute function to register the StaleWhileRevalidate strategy for the website's static resources; Use the registerRoute function to register the CacheFirst strategy for image resources.

8. A website first access acceleration system based on preloading, characterized in that: The system adopts the method for accelerating the first visit to a website based on preloading as claimed in any one of claims 1 to 7; The system comprises: The front page configuration module is used to add a front page to the main website; The iframe tag embedding module is used to embed the iframe tag in the front page and perform hidden processing; Login module, used to open the main website through the iframe tag; The cache module is used to cache the website's static resources and dynamic interface data into the local database using Service Worker after the main website is started; The resource data rendering module is used to intercept the access request when the user visits the main website for the first time, and perform search and verification of the corresponding cached resources and data in the local database according to the access request; if the search and verification is successful, the cached resource data is directly used for rendering; if the search and verification is recognized, a regular network request and rendering are performed.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the program, the steps of the method for accelerating the first visit to a website based on preloading are implemented as described in any one of claims 1 to 7.

10. A storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the method for accelerating the first visit to a website based on preloading are implemented as described in any one of claims 1 to 7.

Images