CN115438290A - 自动分析单页面应用静态资源并预加载的方法及系统 - Google Patents

自动分析单页面应用静态资源并预加载的方法及系统 Download PDF

Info

Publication number
CN115438290A
CN115438290A CN202211212768.6A CN202211212768A CN115438290A CN 115438290 A CN115438290 A CN 115438290A CN 202211212768 A CN202211212768 A CN 202211212768A CN 115438290 A CN115438290 A CN 115438290A
Authority
CN
China
Prior art keywords
page application
static resource
static
interface
module
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211212768.6A
Other languages
English (en)
Inventor
柴骏
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Quanren Planet Education Technology Co ltd
Original Assignee
Beijing Quanren Planet Education Technology Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Quanren Planet Education Technology Co ltd filed Critical Beijing Quanren Planet Education Technology Co ltd
Priority to CN202211212768.6A priority Critical patent/CN115438290A/zh
Publication of CN115438290A publication Critical patent/CN115438290A/zh
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Data Mining & Analysis (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明涉及一种自动分析单页面应用静态资源并预加载的方法及系统，包括步骤：步骤S110，向服务器端请求获得单页面应用所对应的HTML文件；步骤S130，解析单页面应用所对应的HTML文件的外部依赖，并获取其内容；步骤S140，分析渲染单页面应用当前界面所需静态资源，并将所需静态资源下载至静态资源池中；步骤S150，通过客户端浏览器渲染单页面应用当前界面；步骤S160，显示单页面应用的当前界面。本发明通过上述方法和系统，使用解析脚本分析出单页面应用所使用的静态资源如CSS、JavaScript、图片、视频、音频，通过定制规则预先对静态资源进行加载以达到用户在切换页面等交互无需等待资源进行加载从而提高用户浏览页面时的流畅体验。

Description

自动分析单页面应用静态资源并预加载的方法及系统
技术领域
本发明涉及互联网技术领域，具体涉及一种自动分析单页面WEB应用静态资源并提供预先加载以提升用户体验的方法、系统及计算机设备和计算机程序产品。
背景技术
单页面WEB应用(single page web application，SPA)是一种特殊的WEB应用，其加载单个HTML页面并在用户与应用程序交互时动态更新该页面；由于将所有的活动局限于一个WEB页面中，仅在该WEB页面初始化时加载相应的HTML、JavaScript、CSS，页面加载完成后不会根据用户操作而进行页面的重新加载或跳转，而是利用JavaScript动态的变换HTML，例如采用div切换显示和隐藏，以实现与用户交互的UI显示和变换。
由于单页面WEB应用将所有内容都在一个页面中动态替换显示，通常一开始就会加载所有必需的代码(HTML，JavaScript和CSS)；具体地，单页面WEB应用大都采用MVVM、虚拟DOM等技术方案，页面所有内容都在JavaScript文件中通过对JavaScript文件的解析后才可呈现；因此WEB应用内容初次加载时或在切换路由时需要耗费较多时间，期间会产生长时间白屏。
为了解决单页面WEB应用初次加载耗时多的问题，现有技术中也开始考虑按需加载，即在初次加载页面的时候将JavaScript、CSS统一加载，按照当前呈现的不同页面加载不同的文件，部分页面可以在需要的时候再加载，而不是最开始就把所有文件都加载出来，以及对JavaScript及CSS代码进行合并压缩处理，从而避免首屏加载很慢。
但是随着网络技术的发展，为了提升显示效果，现在单页面WEB应用上包含的图像、动画、布局、导航等信息越来丰富，导致单页面WEB应用在显示过程中需要加载的数据量也越来越多，加载所需要的时间也就越长，用户等待的时间也就越长，即便是已经采用了一定的优化手段，但是在初次加载或路由切换时依然可能会在应用中出现白屏闪烁，导致用户体验较差。
发明内容
为了解决上述技术问题，本发明提供了一种自动分析单页面WEB应用静态资源并提供预先加载、资源加载监控的技术，其包括步骤：
步骤S110，向服务器端请求获得单页面应用所对应的HTML文件；
步骤S130，解析单页面应用所对应的HTML文件的外部依赖，并获取其内容；
步骤S140，分析渲染单页面应用当前界面所需静态资源，并将所需静态资源下载至静态资源池中；
步骤S150，通过客户端浏览器渲染单页面应用当前界面；
步骤S160，显示单页面应用的当前界面；
所述步骤S140具体包括：
步骤S1410，启动分析渲染单页面应用所需显示界面的解析脚本；
步骤S1420，该解析脚本分析单页面应用所对应的HTML文件及其外部依赖内容中所包括的所有URL路径；
步骤S1430，判断步骤S1420中所获得的URL路径所对应的资源类型是否为静态资源；
步骤S1440，将各个静态资源所对应URL路径及其类型推入静态资源池；
步骤S1450，静态资源池通过下载线程下载推入该静态资源池中的URL路径所对应的静态资源下载至静态资源池。
在上述技术方案中，所述步骤S130之前进一步包括步骤S120，在客户端显示界面上启动显示加载动画；相应地，步骤S160进一步包括移除步骤S120中所显示的加载动画，以显示单页面应用的当前界面。
在上述技术方案中，进一步包括步骤S170，该单页面应用在与用户交互过程中，在切换界面显示时，执行与上述步骤S140和步骤S150相同的方法，以渲染单页面应用所需显示界面，并在渲染完成后进行显示单页面应用所需显示界面。
本发明还提供一种自动分析单页面应用静态资源并预加载的系统，其包括：
HTML文件获取模块，向服务器端请求获得单页面应用所对应的HTML文件；
外部依赖获取模块，解析单页面应用所对应的HTML文件的外部依赖，并获取其内容；
静态资源获取模块，分析渲染单页面应用当前界面所需静态资源，并将所需静态资源下载至静态资源池中；
界面渲染模块，通过客户端浏览器渲染单页面应用当前界面；
界面显示模块，显示单页面应用的当前界面；
所述静态资源获取模块，具体包括：
启动解析脚本模块，启动分析渲染单页面应用所需显示界面的解析脚本；
解析URL路径模块，该解析脚本分析单页面应用所对应的HTML文件及其外部依赖内容中所包括的所有URL路径；
分析资源类型模块，判断解析URL路径模块中所获得的URL路径所对应的资源类型是否为静态资源；
静态资源池模块，将各个静态资源所对应URL路径及其类型推入静态资源池；
静态资源下载模块，通过下载线程将推入静态资源池中的URL路径所对应的静态资源下载至静态资源池。
在上述技术方案中，还包括加载动画绘制模块，在客户端显示界面上启动显示加载动画；相应地，在界面显示模块，移除加载动画绘制模块所显示的加载动画。
在上述技术方案中，进一步包括界面切换显示模块，该单页面应用在与用户交互过程中，在切换界面显示时，执行与静态资源获取模块和界面渲染模块相同的功能，以渲染单页面应用所需显示界面，并在渲染完成后进行显示单页面应用所需显示界面。
在上述技术方案中，所述静态资源包括渲染、显示网页界面所需的样式文件、脚本文件、图片文件、音频文件、视频文件中的一项或多项。
本发明取得了以下技术效果：
通过对首页HTML文件增加加载(Loading)动画、并对当前单页面WEB应用项目分析其静态资源链接地址，在获取到静态资源链接后进行动态请求该资源，以达到减少路由切换、异步加载的脚本，懒加载的白屏或等待时间，让单页面WEB应用更流畅，用户体验更好。
附图说明
图1为本发明的系统框架图。
图2为本发明自动分析单页面WEB应用静态资源并提供预先加载的方法步骤图。
图3为本发明下载页面渲染所需静态资源的方法步骤图。
具体实施方式
为了便于本领域普通技术人员理解和实施本发明，下面结合附图及具体实施方式对本发明作进一步的详细描述。
如图1所示，本发明提供了一种自动分析单页面WEB应用静态资源并提供预先加载的方法，其包括步骤：
步骤S110，向服务器端请求获得单页面应用所对应的HTML文件。
步骤S120，在客户端显示界面上启动显示加载动画(即Loading界面)。
加载动画包括但不限于客户端显示界面上呈现的文字、图片、动画、视频，以及通过客户端音频设备输出的音乐、音效、语音中的一项或多项。显示加载动画所需的图片、文字、动画、视频、音乐、音效、语音等资源中的一项或多项可预先存储于客户端本地，或者，在步骤S1000中从服务器端请求获得单页面应用所对应的HTML文件之后从服务器端请求获得。
本领域技术人员知晓，如果显示加载动画所需的各种资源均预先存储于客户端本地时，可以在从服务器端请求获得单页面应用所对应的HTML文件之前即在客户端显示界面上启动显示加载动画。
步骤S130，解析单页面应用所对应的HTML文件的外部依赖，并获取其内容。
HTML文件的外部依赖是指在单页面应用所对应的HTML文件/页面中所引入的外部HTML文件/页面的内容。
步骤S140，分析渲染单页面应用当前界面所需静态资源，并将所需静态资源下载至静态资源池中。
步骤S150，通过客户端浏览器渲染单页面应用当前界面。
客户端浏览器包括客户端的浏览器引擎，可以是现有任意一种浏览器或浏览器引擎。可选地，将步骤S140中下载得到的资源送入客户端浏览器或浏览器引擎的缓存，通过客户端浏览器或浏览器引擎对单页面应用进行渲染，以便在客户端显示单页面应用的当前界面。在渲染单页面应用的当前界面时，从静态资源池中将所需的静态资源调入浏览器缓存。
步骤S160，移除步骤S120中所显示的加载动画，以显示单页面应用的当前界面。
可选择地，上述方法中可不包括步骤S120，相对应地，在步骤S160中不包括移除加载动画，在步骤S150中的渲染完成后，由步骤S160显示单页面应用的当前界面。
可选地，进一步包括步骤S170，该单页面应用在与用户交互过程中，在切换界面显示时，执行与上述步骤S140和步骤S150相同的方法，以渲染单页面应用所需显示界面，并在渲染完成后进行显示单页面应用所需显示界面。
可选地，步骤S170之前还包括在执行与上述步骤S140和步骤S150相同的方法之前，显示过场动画，并在渲染完成后，移除所显示的过场动画后再显示单页面应用所需显示界面。
所述步骤S140中的分析渲染单页面应用当前界面所需静态资源，并将所需静态资源下载至静态资源池中，具体包括：
步骤S1410，启动分析渲染单页面应用所需显示界面的解析脚本。
该解析脚本可以采用能够在客户端运行或在客户端浏览器中运行的脚本语言中任意一种或几种，例如JavaScript、VBScript、WML Script等。
步骤S1420，该解析脚本分析单页面应用所对应的HTML文件及其外部依赖内容中所包括的所有URL路径。
可选择地，通过解析HTML中的标签，根据各个标签的类型、名称、内容，以及是否包括URL地址来解析所包括的所有URL路径，以及该URL路径所对应的标签类型和名称等信息。
步骤S1430，判断步骤S1420中所获得的URL路径所对应的资源类型，如果资源类型为静态资源，则进入步骤S1440。所述静态资源包括但不限于渲染、显示网页界面所需的样式文件(CSS)、脚本文件(JS，JavaScript)、图片文件、音频文件、视频文件中的一项或多项。
可选择地，通过URL路径所对应的标签类型和名称等信息来判断该URL路径所对应的资源类型，和/或，通过URL路径中的路径信息来判断该URL路径所对应的资源类型，和/或，通过URL路径中的文件名信息来判断该URL路径所对应的资源类型。
步骤S1440，将各个静态资源所对应URL路径及其类型推入静态资源池。
可选择地，步骤S1440，在将静态资源所对应URL路径及其类型推入静态资源池时，进一步根据在界面渲染中的重要程度来确定各个静态资源的优先级，并将其推送至静态资源池，该重要程度或优先级可以直接记录在HTML文件中设置该URL地址的标签中；或者体现在URL地址中；或者由解析脚本进行确定，例如当该静态资源是渲染当前界面所需时，优先级高，反正则低，又例如样式文件(CSS)和脚本文件比图片文件的优先级高，图片文件比音频文件和视频文件的优先级高。
可选择地，步骤S1440，在将静态资源所对应URL路径及其类型推入静态资源池时，进一步根据各个静态资源的类型来各个静态资源的老化时间，并将其推送至静态资源池，该老化时间可以直接记录在HTML文件中设置该URL地址的标签中；或者体现在URL地址中；或者由解析脚本进行确定。
步骤S1450，静态资源池通过下载线程下载推入该静态资源池中的URL路径所对应的静态资源下载至静态资源池。
可选择地，步骤S1450，下载线程根据推入该静态资源池中的URL路径的时间顺序将其所对应的静态资源下载至静态资源池。
可选择地，步骤S1450，下载线程根据各个静态资源的优先级来确定下载各个静态资源的先后顺序和/或带宽。
可选择地，步骤S1450，下载线程根据各个静态资源的老化时间来确定是否重新该静态资源。
可选择地，步骤S1450，下载线程在获取某一静态资源失败后，多次尝试重新下载该静态资源。
相对应地，本发明提供了一种自动分析单页面WEB应用静态资源并提供预先加载的系统，其包括：
HTML文件获取模块，向服务器端请求获得单页面应用所对应的HTML文件。
加载动画绘制模块，在客户端显示界面上启动显示加载动画(即Loading界面)。
加载动画包括但不限于客户端显示界面上呈现的文字、图片、动画、视频，以及通过客户端音频设备输出的音乐、音效、语音中的一项或多项。显示加载动画所需的图片、文字、动画、视频、音乐、音效、语音等资源中的一项或多项可预先存储于客户端本地，或者，从服务器端请求获得单页面应用所对应的HTML文件之后从服务器端请求获得。
本领域技术人员知晓，如果显示加载动画所需的各种资源均预先存储于客户端本地时，可以在从服务器端请求获得单页面应用所对应的HTML文件之前即在客户端显示界面上启动显示加载动画。
外部依赖获取模块，解析单页面应用所对应的HTML文件的外部依赖，并获取其内容。
HTML文件的外部依赖是指在单页面应用所对应的HTML文件/页面中所引入的外部HTML文件/页面的内容。
静态资源获取模块，分析渲染单页面应用当前界面所需静态资源，并将所需静态资源下载至静态资源池中。
界面渲染模块，通过客户端浏览器渲染单页面应用当前界面。
客户端浏览器包括客户端的浏览器引擎，可以是现有任意一种浏览器或浏览器引擎。可选地，将静态资源获取模块下载得到的资源送入客户端浏览器或浏览器引擎的缓存，通过客户端浏览器或浏览器引擎对单页面应用进行渲染，以便在客户端显示单页面应用的当前界面。在渲染单页面应用的当前界面时，从静态资源池中将所需的静态资源调入浏览器缓存。
界面显示模块，移除加载动画绘制模块所显示的加载动画，显示单页面应用的当前界面。
可选择地，上述方法中可不包括加载动画绘制模块，相对应地，在界面显示模块中不包括移除加载动画，在界面渲染模块的渲染完成后，由界面显示模块显示单页面应用的当前界面。
可选地，进一步包括界面切换显示模块，该单页面应用在与用户交互过程中，在切换界面显示时，执行与静态资源获取模块和界面渲染模块相同的功能，以渲染单页面应用所需显示界面，并在渲染完成后进行显示单页面应用所需显示界面。
可选地，界面切换显示模块还包括在执行静态资源获取模块和界面渲染模块相同的功能之前，显示过场动画，并在渲染完成后，移除所显示的过场动画后再显示单页面应用所需显示界面。
所述静态资源获取模块，具体包括：
启动解析脚本模块，启动分析渲染单页面应用所需显示界面的解析脚本。
该解析脚本可以采用能够在客户端运行或在客户端浏览器中运行的脚本语言中任意一种或几种，例如JavaScript、VBScript、WML Script等。
解析URL路径模块，该解析脚本分析单页面应用所对应的HTML文件及其外部依赖内容中所包括的所有URL路径。
可选择地，通过解析HTML中的标签，根据各个标签的类型、名称、内容，以及是否包括URL地址来解析所包括的所有URL路径，以及该URL路径所对应的标签类型和名称等信息。
分析资源类型模块，判断解析URL路径模块中所获得的URL路径所对应的资源类型，即资源类型是否为静态资源。所述静态资源包括但不限于渲染、显示网页界面所需的样式文件(CSS)、脚本文件(JS，JavaScript)、图片文件、音频文件、视频文件中的一项或多项。
可选择地，通过URL路径所对应的标签类型和名称等信息来判断该URL路径所对应的资源类型，和/或，通过URL路径中的路径信息来判断该URL路径所对应的资源类型，和/或，通过URL路径中的文件名信息来判断该URL路径所对应的资源类型。
静态资源池模块，将各个静态资源所对应URL路径及其类型推入静态资源池。
可选择地，步骤S1440，在将静态资源所对应URL路径及其类型推入静态资源池时，进一步根据在界面渲染中的重要程度来确定各个静态资源的优先级，并将其推送至静态资源池，该重要程度或优先级可以直接记录在HTML文件中设置该URL地址的标签中；或者体现在URL地址中；或者由解析脚本进行确定，例如当该静态资源是渲染当前界面所需时，优先级高，反正则低，又例如样式文件(CSS)和脚本文件比图片文件的优先级高，图片文件比音频文件和视频文件的优先级高。
可选择地，静态资源池模块，在将静态资源所对应URL路径及其类型推入静态资源池时，进一步根据各个静态资源的类型来各个静态资源的老化时间，并将其推送至静态资源池，该老化时间可以直接记录在HTML文件中设置该URL地址的标签中；或者体现在URL地址中；或者由解析脚本进行确定。
静态资源下载模块，通过下载线程将推入静态资源池中的URL路径所对应的静态资源下载至静态资源池。
可选择地，静态资源下载模块，下载线程根据推入该静态资源池中的URL路径的时间顺序将其所对应的静态资源下载至静态资源池。
可选择地，静态资源下载模块，下载线程根据各个静态资源的优先级来确定下载各个静态资源的先后顺序和/或带宽。
可选择地，静态资源下载模块，下载线程根据各个静态资源的老化时间来确定是否重新该静态资源。
可选择地，静态资源下载模块，下载线程在获取某一静态资源失败后，多次尝试重新下载该静态资源。
本发明通过上述方法和系统，使用解析脚本分析出单页面应用所使用的静态资源如CSS、JavaScript、图片、视频、音频，通过定制规则预先对静态资源进行加载以达到用户在切换页面等交互无需等待资源进行加载从而提高用户浏览页面时的流畅体验。各种静态资源的类型，以及相对应的下载方式、优先级、老化时间、带宽占比等可以在定制规则中进行配置和指定。
为了实现上述目的，根据本发明的另一方面，还提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述自动分析单页面WEB应用静态资源并提供预先加载的方法步骤。
处理器可以为中央处理器(Central Processing Unit，CPU)。处理器还可以为其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合。
存储器作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及单元，如本发明上述方法实施例中对应的程序单元。处理器通过运行存储在存储器中的非暂态软件程序、指令以及模块，从而执行处理器的各种功能应用以及作品数据处理，即实现上述方法实施例中的方法。
存储器可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储处理器所创建的数据等。此外，存储器可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器可选包括相对于处理器远程设置的存储器，这些远程存储器可以通过网络连接至处理器。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。
所述一个或者多个单元存储在所述存储器中，当被所述处理器执行时，执行上述实施例中的方法。
上述计算机设备具体细节可以对应参阅上述实施例中对应的相关描述和效果进行理解，此处不再赘述。
为了实现上述目的，根据本申请的另一方面，还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序在计算机处理器中执行时实现上述去中心化的个人健康信息的存储中的步骤。本领域技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)、随机存储记忆体(RandomAccessMemory，RAM)、快闪存储器(Flash Memory)、硬盘(HardDisk Drive，缩写：HDD)或固态硬盘(Solid-State Drive，SSD)等；所述存储介质还可以包括上述种类的存储器的组合。
显然，本领域的技术人员应该明白，上述的本发明的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本发明不限制于任何特定的硬件和软件结合。
以上所述仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的构思和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种自动分析单页面应用静态资源并预加载的方法，其特征在于包括步骤：
步骤S110，向服务器端请求获得单页面应用所对应的HTML文件；
步骤S130，解析单页面应用所对应的HTML文件的外部依赖，并获取其内容；
步骤S140，分析渲染单页面应用当前界面所需静态资源，并将所需静态资源下载至静态资源池中；
步骤S150，通过客户端浏览器渲染单页面应用当前界面；
步骤S160，显示单页面应用的当前界面；
所述步骤S140具体包括：
步骤S1410，启动分析渲染单页面应用所需显示界面的解析脚本；
步骤S1420，该解析脚本分析单页面应用所对应的HTML文件及其外部依赖内容中所包括的所有URL路径；
步骤S1430，判断步骤S1420中所获得的URL路径所对应的资源类型是否为静态资源；
步骤S1440，将各个静态资源所对应URL路径及其类型推入静态资源池；
步骤S1450，静态资源池通过下载线程下载推入该静态资源池中的URL路径所对应的静态资源下载至静态资源池。
2.如权利要求1所述的一种自动分析单页面应用静态资源并预加载的方法，其特征在于：所述步骤S130之前进一步包括步骤S120，在客户端显示界面上启动显示加载动画；相应地，步骤S160进一步包括移除步骤S120中所显示的加载动画，以显示单页面应用的当前界面。
3.如权利要求1-2中任一项所述的一种自动分析单页面应用静态资源并预加载的方法，其特征在于：进一步包括步骤S170，该单页面应用在与用户交互过程中，在切换界面显示时，执行与上述步骤S140和步骤S150相同的方法，以渲染单页面应用所需显示界面，并在渲染完成后进行显示单页面应用所需显示界面。
4.如权利要求1-3中任一项所述的一种自动分析单页面应用静态资源并预加载的方法，其特征在于：所述静态资源包括渲染、显示网页界面所需的样式文件、脚本文件、图片文件、音频文件、视频文件中的一项或多项。
5.一种自动分析单页面应用静态资源并预加载的系统，其特征在于包括：
HTML文件获取模块，向服务器端请求获得单页面应用所对应的HTML文件；
外部依赖获取模块，解析单页面应用所对应的HTML文件的外部依赖，并获取其内容；
静态资源获取模块，分析渲染单页面应用当前界面所需静态资源，并将所需静态资源下载至静态资源池中；
界面渲染模块，通过客户端浏览器渲染单页面应用当前界面；
界面显示模块，显示单页面应用的当前界面；
所述静态资源获取模块，具体包括：
启动解析脚本模块，启动分析渲染单页面应用所需显示界面的解析脚本；
解析URL路径模块，该解析脚本分析单页面应用所对应的HTML文件及其外部依赖内容中所包括的所有URL路径；
分析资源类型模块，判断解析URL路径模块中所获得的URL路径所对应的资源类型是否为静态资源；
静态资源池模块，将各个静态资源所对应URL路径及其类型推入静态资源池；
静态资源下载模块，通过下载线程将推入静态资源池中的URL路径所对应的静态资源下载至静态资源池。
6.如权利要求5所述的一种自动分析单页面应用静态资源并预加载的系统，其特征在于：还包括加载动画绘制模块，在客户端显示界面上启动显示加载动画；相应地，在界面显示模块，移除加载动画绘制模块所显示的加载动画。
7.如权利要求5-6中任一项所述的一种自动分析单页面应用静态资源并预加载的系统，其特征在于：进一步包括界面切换显示模块，该单页面应用在与用户交互过程中，在切换界面显示时，执行与静态资源获取模块和界面渲染模块相同的功能，以渲染单页面应用所需显示界面，并在渲染完成后进行显示单页面应用所需显示界面。
8.如权利要求5-7中任一项所述的一种自动分析单页面应用静态资源并预加载的系统，其特征在于：所述静态资源包括渲染、显示网页界面所需的样式文件、脚本文件、图片文件、音频文件、视频文件中的一项或多项。
9.一种计算机设备，包括存储器和处理器，所述存储器用于存储计算机指令，所述计算机指令供所述处理器调用执行；其特征在于，所述处理器在调用所述存储器所存储的计算机指令时执行如权利要求1-4中任一项所述的方法。
10.一种计算机程序可读存储介质，其上存储有计算机指令，其特征在于，计算机在调用所存储的计算机指令时执行如权利要求1-4中任一项所述的方法。
CN202211212768.6A 2022-09-30 2022-09-30 自动分析单页面应用静态资源并预加载的方法及系统 Pending CN115438290A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211212768.6A CN115438290A (zh) 2022-09-30 2022-09-30 自动分析单页面应用静态资源并预加载的方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211212768.6A CN115438290A (zh) 2022-09-30 2022-09-30 自动分析单页面应用静态资源并预加载的方法及系统

Publications (1)

Publication Number Publication Date
CN115438290A true CN115438290A (zh) 2022-12-06

Family

ID=84251392

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211212768.6A Pending CN115438290A (zh) 2022-09-30 2022-09-30 自动分析单页面应用静态资源并预加载的方法及系统

Country Status (1)

Country Link
CN (1) CN115438290A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117009690A (zh) * 2023-07-03 2023-11-07 唯科终端技术(深圳)有限公司 内容预先加载的方法及系统

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117009690A (zh) * 2023-07-03 2023-11-07 唯科终端技术(深圳)有限公司 内容预先加载的方法及系统

Similar Documents

Publication Publication Date Title
US11144711B2 (en) Webpage rendering method, device, electronic apparatus and storage medium
CN108984714B (zh) 页面渲染方法、装置、电子设备及计算机可读介质
US7921353B1 (en) Method and system for providing client-server injection framework using asynchronous JavaScript and XML
US10880227B2 (en) Apparatus, hybrid apparatus, and method for network resource access
JP4857349B2 (ja) ポータル・システム内で非同期ポータル・ページを提供するための方法、システム、およびコンピュータ・プログラム
CN111639289A (zh) 一种网页加载方法及装置
CN106294658B (zh) 网页快速展示方法和装置
US20100005410A1 (en) Mobile device application framework
CN109388766A (zh) 页面加载的方法和装置
US20040268249A1 (en) Document transformation
CN112395027B (zh) 微件界面生成方法、装置、存储介质与电子设备
CN112256990B (zh) 一种图像处理方法及装置、计算机可读存储介质
US10082937B2 (en) Intelligent rendering of webpages
CN108062336B (zh) 媒体信息处理方法及装置
CN111737614B (zh) 页面显示方法、装置、电子设备和存储介质
US20110055740A1 (en) Defining and sharing display space templates
CN111723314B (zh) 网页展示方法、装置、电子设备及计算机可读存储介质
CN115438290A (zh) 自动分析单页面应用静态资源并预加载的方法及系统
CN114706616A (zh) 小程序构建方法和装置
CN113760283A (zh) 一种文本渲染方法和装置
CN110807162A (zh) 加载占位图的方法和装置
CN113094612A (zh) 客户端加载网页的方法、装置、电子设备及介质
CN110209973A (zh) 一种网页游戏加载方法及装置
CN114528510A (zh) 网页数据处理的方法、装置、电子设备及介质
CN113961298A (zh) 一种页面切换方法、装置、设备及介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination