CN110059277A - 首页加载优化方法、服务器及计算机可读存储介质 - Google Patents
首页加载优化方法、服务器及计算机可读存储介质 Download PDFInfo
- Publication number
- CN110059277A CN110059277A CN201910184612.3A CN201910184612A CN110059277A CN 110059277 A CN110059277 A CN 110059277A CN 201910184612 A CN201910184612 A CN 201910184612A CN 110059277 A CN110059277 A CN 110059277A
- Authority
- CN
- China
- Prior art keywords
- homepage
- page
- load
- loaded
- resource
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 45
- 238000009877 rendering Methods 0.000 claims abstract description 35
- 230000000007 visual effect Effects 0.000 claims abstract description 29
- 238000005457 optimization Methods 0.000 claims abstract description 27
- 238000012545 processing Methods 0.000 claims abstract description 24
- 238000004458 analytical method Methods 0.000 claims description 26
- 238000005516 engineering process Methods 0.000 claims description 16
- 230000006399 behavior Effects 0.000 claims description 3
- 230000006870 function Effects 0.000 description 30
- 238000012800 visualization Methods 0.000 description 13
- 230000004044 response Effects 0.000 description 12
- 238000012856 packing Methods 0.000 description 11
- 230000008859 change Effects 0.000 description 10
- 239000011800 void material Substances 0.000 description 9
- 230000002159 abnormal effect Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 7
- 230000008569 process Effects 0.000 description 7
- 230000000694 effects Effects 0.000 description 6
- 230000006835 compression Effects 0.000 description 4
- 238000007906 compression Methods 0.000 description 4
- 230000003068 static effect Effects 0.000 description 4
- 230000005540 biological transmission Effects 0.000 description 3
- 238000012217 deletion Methods 0.000 description 3
- 230000037430 deletion Effects 0.000 description 3
- 230000001737 promoting effect Effects 0.000 description 3
- 230000002441 reversible effect Effects 0.000 description 3
- 238000012546 transfer Methods 0.000 description 3
- 230000000712 assembly Effects 0.000 description 2
- 238000000429 assembly Methods 0.000 description 2
- 238000004891 communication Methods 0.000 description 2
- 238000004590 computer program Methods 0.000 description 2
- 230000002829 reductive effect Effects 0.000 description 2
- 230000000717 retained effect Effects 0.000 description 2
- 238000004883 computer application Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000000670 limiting effect Effects 0.000 description 1
- 238000000082 states acquisition Methods 0.000 description 1
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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- 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
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
本发明涉及UI设计技术，公开了一种首页加载优化方法、服务器及计算机可读存储介质，所述方法包括：对首页页面的数据文件进行可视化分析，并判断首页页面的多个组件之间是否符合预设依赖关系；当多个组件之间存在有不符合预设依赖关系时，输出优化提醒信息及优化建议，并对不符合预设依赖关系的组件进行调整；将经过优化处理的数据文件按照预设规则进行打包，并存储至Web服务器；接收首页页面的加载请求，并从Web服务器获取首页页面加载所需的基准资源；对基准资源执行页面渲染操作，以完成首页页面加载。本发明通过对首页页面的数据文件进行分析，减少页面加载时异常发生概率，且在首页页面加载时只加载基准资源，提高了页面加载速度。
Description
技术领域
本发明涉及计算机应用领域，尤其涉及首页加载优化方法、服务器及计算机可读存储介质。
背景技术
随着网络技术的发展，现在的网站信息量越来越大，尤其是网站首页，包含的数据、图像、动画、布局、导航等等信息也极其丰富，首页页面的显示效果越来越动人，如此庞大繁复的首页页面对加载效果的要求也越来越高。首页页面构建完成后的构建包的体积较大，导致首页页面加载时间长，存在长时间白屏的问题，对用户的体验十分不友好。同时，当网络状况并不顺畅的时候，也会影响首页页面加载的效果，大大地降低了首页页面的加载速度。
发明内容
有鉴于此，本发明提出一种首页加载优化方法、服务器及计算机可读存储介质，首页页面加载时只加载基准资源，而不是在首页内容全部加载，可提高首页页面的加载速度。
首先，为实现上述目的，本发明提出一种服务器，所述服务器包括存储器、处理器，所述存储器上存储有可在所述处理器上运行的首页加载优化系统，所述首页加载优化系统被所述处理器执行时实现如下步骤：
对首页页面的数据文件进行可视化分析生成分析结果，并根据所述分析结果来判断所述首页页面的多个组件之间是否符合预设依赖关系；
当多个所述组件之间存在有不符合所述预设依赖关系的情形时，输出优化提醒信息及优化建议，并根据所述优化提醒信息和所述优化建议对不符合所述预设依赖关系的组件进行调整；
将经过优化处理的数据文件按照预设规则进行打包，并将打包得到的数据包存储至Web服务器；
接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源；及
对所述基准资源执行页面渲染操作，以完成所述首页页面的加载。
可选地，所述接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源的步骤包括：
从所述首页页面的加载请求中提取用于记录客户端页面缓存的本地缓存信息；
根据所述本地缓存信息计算所述首页页面本次加载所需的基准资源；及
根据计算结果从所述Web服务器获取所述首页页面本次加载所需的基准资源。
可选地，所述对所述基准资源执行页面渲染操作的步骤包括：
获取所述基准资源包含的原始CSS文件；及
查找并删除所述原始CSS文件中的无效的CSS样式，并利用经过所述删除处理的基准资源执行页面渲染操作。
可选地，所述对所述基准资源执行页面渲染操作，以完成所述首页页面的加载的步骤之后还包括：
获取首页页面的点击指令，并根据所述点击指令获取与所述点击指令匹配的待加载资源；
判断所述待加载资源是否包含第三方库组件；及
当所述待加载资源包含第三方库组件时，通过内容分发网络来引入所述待加载资源中的第三方库组件，及从所述Web服务器获取其余待加载资源。
此外，为实现上述目的，本发明还提供一种首页加载优化方法，应用于服务器，所述首页加载优化方法包括：
对首页页面的数据文件进行可视化分析生成分析结果，并根据所述分析结果来判断所述首页页面的多个组件之间是否符合预设依赖关系；
当多个所述组件之间存在有不符合所述预设依赖关系的情形时，输出优化提醒信息及优化建议，并根据所述优化提醒信息和所述优化建议对不符合所述预设依赖关系的组件进行调整；
将经过优化处理的数据文件按照预设规则进行打包，并将打包得到的数据包存储至Web服务器；
接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源；及
对所述基准资源执行页面渲染操作，以完成所述首页页面的加载。
可选地，所述接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源的步骤包括：
从所述首页页面的加载请求中提取用于记录客户端页面缓存的本地缓存信息；
根据所述本地缓存信息计算所述首页页面本次加载所需的基准资源；及
根据计算结果从所述Web服务器获取所述首页页面本次加载所需的基准资源。
可选地，所述对所述基准资源执行页面渲染操作的步骤包括：
获取所述基准资源包含的原始CSS文件；及
查找并删除所述原始CSS文件中的无效的CSS样式，并利用经过所述删除处理的基准资源执行页面渲染操作。
可选地，所述首页页面通过异步组件技术和webpack代码分割技术被拆分成多个组件，所述预设规则包括：对首页页面的html，js，css文件进行打包时不生成后缀名为map的文件和/或对js文件和css文件进行压缩处理。
可选地，所述对所述基准资源执行页面渲染操作，以完成所述首页页面的加载的步骤之后还包括：
获取首页页面的点击指令，并根据所述点击指令获取与所述点击指令匹配的待加载资源；
判断所述待加载资源是否包含第三方库组件；及
当所述待加载资源包含第三方库组件时，通过内容分发网络来引入所述待加载资源中的第三方库组件，及从所述Web服务器获取其余待加载资源。
进一步地，为实现上述目的，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质存储有首页加载优化系统，所述首页加载优化系统可被至少一个处理器执行，以使所述至少一个处理器执行如上述首页加载优化方法的步骤。
相较于现有技术，本发明所提出的首页加载优化方法、服务器及计算机可读存储介质，在首页页面加载前对首页页面的数据文件进行可视化分析，以判断所述首页页面的多个组件之间是否符合预设依赖关系，并在多个所述组件之间存在有不符合所述预设依赖关系的情况时，对不符合所述预设依赖关系的组件进行调整，可减少页面加载时异常情况发生概率，同时在进行首页页面加载时，只加载首页页面所需的基准资源，而不是首页资源全部加载，实现了首页页面资源的懒加载功能，保证当页面资源被访问的时候才加载对应资源，进而可以提升首页页面的加载速度。
附图说明
图1是本发明服务器一可选的硬件架构的示意图。
图2是本发明首页加载优化系统第一实施例的程序模块示意图。
图3为本发明首页加载优化方法第一实施例的实施流程示意图。
图4为本发明首页加载优化方法第二实施例的实施流程示意图。
附图标记：
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
需要说明的是，在本发明中涉及“第一”、“第二”等的描述仅用于描述目的，而不能理解为指示或暗示其相对重要性或者隐含指明所指示的技术特征的数量。由此，限定有“第一”、“第二”的特征可以明示或者隐含地包括至少一个所述特征。另外，各个实施例之间的技术方案可以相互结合，但是必须是以本领域普通技术人员能够实现为基础，当技术方案的结合出现相互矛盾或无法实现时应当认为这种技术方案的结合不存在，也不在本发明要求的保护范围之内。
参阅图1所示，是本发明应用服务器2一可选的硬件架构的示意图。
本实施例中，所述应用服务器2可包括，但不仅限于，可通过系统总线相互通信连接存储器11、处理器12、网络接口13。需要指出的是，图2仅示出了具有组件11-13的应用服务器2，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。
其中，所述应用服务器2可以是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器等计算设备，所述应用服务器2可以是独立的服务器，也可以是多个服务器所组成的服务器集群。
所述存储器11至少包括一种类型的可读存储介质，所述可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，所述存储器11可以是所述应用服务器2的内部存储单元，例如所述应用服务器2的硬盘或内存。在另一些实施例中，所述存储器11也可以是所述应用服务器2的外部存储设备，例如所述应用服务器2上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。当然，所述存储器11还可以既包括所述应用服务器2的内部存储单元也包括其外部存储设备。本实施例中，所述存储器11通常用于存储安装于所述应用服务器2的操作系统和各类应用软件，例如首页加载优化系统100的程序代码等。此外，所述存储器11还可以用于暂时地存储已经输出或者将要输出的各类数据。
所述处理器12在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。所述处理器12通常用于控制所述应用服务器2的总体操作。本实施例中，所述处理器12用于运行所述存储器11中存储的程序代码或者处理数据，例如运行所述的首页加载优化系统100等。
所述网络接口13可包括无线网络接口或有线网络接口，所述网络接口13通常用于在所述应用服务器2与其他电子设备之间建立通信连接。
至此，己经详细介绍了本发明相关设备的硬件结构和功能。下面，将基于上述介绍提出本发明的各个实施例。
首先，本发明提出一种首页加载优化系统100。
参阅图2所示，是本发明首页加载优化系统100第一实施例的程序模块图。
本实施例中，所述首页加载优化系统100包括一系列的存储于存储器11上的计算机程序指令，当所述计算机程序指令被处理器12执行时，可以实现本发明各实施例的首页加载优化操作。在一些实施例中，基于所述计算机程序指令各部分所实现的特定的操作，首页加载优化系统100可以被划分为一个或多个模块。例如，在图2中，首页加载优化系统100可以被分割成判断模块101、调整模块102、存储模块103、获取模块104及加载模块105。其中：
所述判断模块101用于对首页页面的数据文件进行可视化分析生成分析结果，并根据所述分析结果来判断所述首页页面的多个组件之间是否符合预设依赖关系。
在一实施例中，所述预设依赖关系可以根据实际的需求进行设定，例如所述预设依赖关系为所述组件之间单依赖关系。所述首页页面可以通过异步组件技术及webpack代码分割技术被拆分成多个组件。所述组件可以是按照所述首页页面的预设功能进行封装后所形成的一个具体的逻辑或者是一个功能性的UI组件。
在一实施例中，可以理解，当判断模块101对所述首页页面的数据文件进行可视化分析时，所述组件可以以可视化形式呈现给用户，用户可以通过拖拽的方式将所述组件加载到正在配置的所述首页页面中。所述组件可以是按钮组件、对话框组件等。举例而言，当用户需要在一首页页面中设置一按钮时，用户可以直接将可视化按钮组件拖拽到待配置首页页面的适当位置处，之后所述首页页面中相应位置处即可呈现出相应的按钮。
在一实施例中，所述判断模块101对首页页面的数据文件进行可视化分析生成分析结果的具体方式包括：
D1.判断所述组件的源代码是否包括有多个js文件；
D2.当所述源代码包括有多个js文件时，将每个js文件编译成一个的单独的模块，并依据这些模块之间的依赖关系对所述组件进行编译打包；
D3.生成符合预设依赖关系的可执行模块文件，并对编译结果进行可视化分析生成分析结果。
在一实施例中，所述组件的源代码可以基于vue.js框架生成。当所述源代码包括有多个js文件时，当所述判断模块101对单个组件进行编译时，所述判断模块101可以将每个js文件编译成一个的单独的模块，并依据这些模块之间的依赖关系对所述组件进行编译打包，最终生成符合预设依赖关系的可执行模块文件，如符合umd规范的可执行模块文件。可以理解，由于对每个js文件进行编译时需要消耗系统资源，而且编译过程时可能会发生阻塞，为了提高系统可用性和性能，在对每个js文件进行编译时可采用多进程编译的方式，例如可以使用node.js环境下的cluster功能进行多进程编译。
在一实施例中，当对所述组件进行编译打包完成后，所述判断模块101还需要对编译结果进行可视化分析，以判断所述首页页面的多个组件之间是否符合预设依赖关系，从而实现对不符合所述预设依赖关系的组件进行调整。所述判断模块101可以采用webpack-bundle-analyzer工具(可视化视图查看器)对编译结果进行可视化分析。具体地，所述判断模块101可以通过“npm run build”命令启动所述可视化视图查看器，同时利用所述可视化视图查看器来获取经过webpack打包后所有组件之间的依赖关系，根据获取的经过webpack打包后所有组件之间的依赖关系来判断多个所述组件之间是否符合所述预设依赖关系。
所述调整模块102用于在多个所述组件之间存在有不符合所述预设依赖关系的情形时，输出优化提醒信息及优化建议，并根据所述优化提醒信息和所述优化建议对不符合所述预设依赖关系的组件进行调整。
在一实施例中，当所述判断模块101判断多个所述组件之间存在有不符合预设依赖关系的情况时，所述调整模块102输出优化提醒及优化建议，并根据所述优化提醒信息和所述优化建议对不符合所述依赖关系的组件进行调整。举例而言，当所述判断模块101对组件A1-A3进行可视化分析并判断所述组件A1-A3之间存在二次依赖关系时，所述调整模块102可以对所述组件A1-A3的依赖关系进行调整，以将所述组件A1-A3的二次依赖关系修改为单依赖关系。可以理解，通过所述调整模块102对不符合所述预设依赖关系的组件进行调整，可以使得多个所述组件之间的依赖关系均符合所述预设依赖关系，如此可以消除所述组件相互依赖和重复引用的情况，减少所述首页页面加载时异常情况的产生。
所述存储模块103用于将经过优化处理的数据文件按照预设规则进行打包，并将打包得到的数据包存储至Web服务器。
在一实施例中，所述预设规则可以是对所述首页页面的html，js，css文件进行打包时不生成后缀名为map的文件和/或对js文件和css文件进行压缩处理。
在一实施例中，所述后缀名为map文件可以用于对编译后的代码进行调试。在所述首页页面上线后的代码调试完成后，所述存储模块103对所述首页页面的html，js，css文件进行打包时，可以删掉这些后缀名为map的文件，从而可以减小数据包的大小。所述存储模块103对所述首页页面的html，js，css文件进行打包时，还可以对所述js文件和所述css文件进行压缩。可以理解，所述存储模块103可以使用前端开发常见的压缩技术对所述js文件和所述css文件进行压缩，例如compressor等。
在一实施例中，所述web服务器用于存储所述首页页面的数据文件，当浏览器(客户端)连接到所述web服务器上并请求数据文件时，所述web服务器将处理所述请求并将数据文件反馈到所述浏览器上，同时附带的信息会指示所述浏览器如何查看所述数据文件(即文件类型)，所述web服务器可以使用HTTP(超文本传输协议)与客户端浏览器进行信息交流。可以理解，所述客户端可以是PC电脑、手机、平板电脑等可以显示网页的移动终端。
所述获取模块104用于接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源。
在一实施例中，所述获取模块104接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源的具体方式包括：
D11.从所述首页页面的加载请求中提取用于记录客户端页面缓存的本地缓存信息；
D12.根据所述本地缓存信息计算所述首页页面本次加载所需的基准资源；
D13.根据计算结果从所述Web服务器获取所述首页页面本次加载所需的基准资源。
在一实施例中，所述加载请求可以由所述客户端发出，所述客户端可以根据用户输入的网址或者网页点击操作指令来触发所述首页页面的加载请求。所述首页页面的加载请求中携带有客户端请求显示的首页的URL地址等信息。同时，所述页面加载请求中还携带有客户端的标识以及客户端记录的本地的缓存变化信息。所述客户端的标识可以是由服务器预先为客户端生成的一数字标识符，作为客户端的唯一标识，用来标记客户端。所述客户端记录的本地缓存变化信息可以包括：客户端增加或减少一条URL对应的缓存数据。
在一实施例中，客户端可与通过一个缓存记录器，记录每次客户端缓存的变化信息，将增加的URL或者URL对应的hash值记录到一个ADD(增加)队列中，将删除的URL或者URL对应的hash值记录到一个REMOVE(移除)队列中。所述获取模块104可以根据客户端的缓存信息计算获取所述首页页面本次加载所需要的基准资源，将客户端上不存在的基准资源推送给客户端，以节省流量开销，进一步提升客户端网页加载速度。
在一实施例中，所述Web服务器在接收到客户端发送的首页页面的加载请求后，所述获取模块104获取所述加载请求，并根据所述加载请求携带的URL地址，获取相应的首页页面数据，作为返回给客户端的主页面数据。所述Web服务器还会解析所述主页面数据，所述获取模块104计算所述首页页面本次加载所需的基准资源，并根据计算结果从所述Web服务器获取所述首页页面本次加载所需的基准资源。
在一实施例中，所述基准资源可以指对一个HTML解析渲染起着基本显示作用的资源。所述基准资源可以根据实际显示需求进行设定与调整。所述基准资源可以包括js(客户端脚本语言)/css(级联样式表)资源等。所述基准资源是与所述首页页面的主资源相对的资源，所述主资源可以指一个完整的HTML首页页面的资源。
在一实施例中，由于所述首页页面通过异步组件技术和webpack代码分割技术被拆分成多个组件，进而可以实现路由组件按需求加载。也就是说，当路由被访问的时候才加载需要的组件，而不是在接收到首页页面的加载请求时就加载所述首页页面的全部组件。
所述加载模块105用于对所述基准资源执行页面渲染操作，以完成所述首页页面的加载。
在一实施例中，所述加载模块105对所述基准资源执行页面渲染操作的具体方式包括：
D21.获取所述基准资源包含的原始CSS文件；
D22.查找并删除所述原始CSS文件中的无效的CSS样式，并利用经过所述删除处理的基准资源执行页面渲染操作。
在一实施例中，在加载效果不佳的时候，加载CSS所花费的时间也不短，如果能够提升CSS的加载速度，就能极大地提高页面加载的速度。一般而言，由于CSS复用频繁，CSS文件中的样式代码可能会存在着大量的冗余，影响页面的加载速度。
在一实施例中，所述获取模块104获取所述基准资源包含的原始CSS文件，所述加载模块105从所述基准资源包含的原始CSS文件中识别出无效的CSS样式，然后删除识别出的所有CSS样式，即只保留有效的CSS样式，从而减小了CSS文件的大小，极大地降低了CSS文件所需的加载时间。其中，无效的CSS样式是指错误的CSS样式，有效的CSS样式即为正确的CSS样式。
在一实施例中，所述加载模块105可以使用UI Web View实现加载首页页面的功能，基于NS URL Connection实现UI Web View的网络资源加载功能。具体地，所述加载模块105可以调用NS URL Protocol Client的如下函数：1、-(void)URL Protocol:did ReceiveResponse:cache Storage Policy函数，目的在于通知浏览器(或者UI Web View)NS HTTPURL Response响应数据头；2、-(void)URL Protocol:did Load Data函数，目的在于返回给浏览器(或者UI Web View)响应的数据内容NS Data(即HTML文件和静态资源文件)；3、-(void)URL Protocol Did Finish Loading函数，目的在于通知浏览器(或者UI Web View)加载，执行页面渲染操作以完成页面加载。在WebKit内核中，网页在加载显示的时候会启动一个解析器(Parser)去解析HTML，然后生成渲染树(Render Tree)，最终渲染出所述首页页面。
在一实施方式中，当完成首页页面的加载后，首页页面还可以根据用户的点击指令来跳转呈现与所述点击指令匹配的页面。具体地，所述获取模块104用于获取首页页面的点击指令，并根据所述点击指令获取与所述点击指令匹配的待加载资源。所述判断模块101还用于判断所述待加载资源是否包含第三方库组件。当所述待加载资源包含有第三方库组件时，所述获取模块104通过内容分发网络来引入所述待加载资源中的第三方库组件，同时所述获取模块104还从所述Web服务器中获取其余的待加载资源。当所述待加载资源不包含有第三方库组件时，所述获取模块104可以直接从所述Web服务器中获取所述待加载资源。
举例而言，当所述判断模块101判断所述待加载资源包含组件A，且所述组件A不是存储在Web服务器时，获取模块104可以通过CDN引入组件A，具体的，获取模块104可以在index.html中配置从CDN引入所述组件A，并去掉所述首页页面的其他组件的导入口，在webpack配置的externals属性中加入所述组件A，进而实现配置通过CDN引入组件A。
上述首页加载优化系统，在首页页面加载前对首页页面的数据文件进行可视化分析，以判断所述首页页面的多个组件之间是否符合预设依赖关系，并在多个所述组件之间存在有不符合所述预设依赖关系的情况时，对不符合所述预设依赖关系的组件进行调整，可减少页面加载时异常情况发生概率，同时在进行首页页面加载时，只加载首页页面所需的基准资源，而不是首页资源全部加载，实现了首页页面资源的懒加载功能，保证当页面资源被访问的时候才加载对应资源，进而可以提升首页页面的加载速度。
此外，本发明还提出一种首页加载优化方法。
参阅图3所示，是本发明首页加载优化方法第一实施例的实施流程示意图。在本实施例中，根据不同的需求，图3所示的流程图中的步骤的执行顺序可以改变，某些步骤可以省略。
步骤S400，对首页页面的数据文件进行可视化分析生成分析结果，并根据所述分析结果来判断所述首页页面的多个组件之间是否符合预设依赖关系。
在一实施例中，可以理解，所述预设依赖关系可以根据实际的需求进行设定，例如所述预设依赖关系为所述组件之间单依赖关系。所述首页页面可以通过异步组件技术及webpack代码分割技术被拆分成多个组件。所述组件可以是按照所述首页页面的预设功能进行封装后所形成的一个具体的逻辑或者是一个功能性的UI组件。
在一实施例中，可以理解，当对所述首页页面的数据文件进行可视化分析时，所述组件可以以可视化形式呈现给用户，用户可以通过拖拽的方式将所述组件加载到正在配置的所述首页页面中。所述组件可以是按钮组件、对话框组件等。举例而言，当用户需要在一首页页面中设置一按钮时，用户可以直接将可视化按钮组件拖拽到待配置首页页面的适当位置处，之后所述首页页面中相应位置处即可呈现出相应的按钮。
在一实施例中，对首页页面的数据文件进行可视化分析生成分析结果的具体方式包括：
D1.判断所述组件的源代码是否包括有多个js文件；
D2.当所述源代码包括有多个js文件时，将每个js文件编译成一个的单独的模块，并依据这些模块之间的依赖关系对所述组件进行编译打包；
D3.生成符合预设依赖关系的可执行模块文件，并对编译结果进行可视化分析生成分析结果。
在一实施例中，所述组件的源代码可以基于vue.js框架生成。当所述源代码包括有多个js文件时，当对单个组件进行编译时，可以将每个js文件编译成一个的单独的模块，并依据这些模块之间的依赖关系对所述组件进行编译打包，最终生成符合预设依赖关系的可执行模块文件，如符合umd规范的可执行模块文件。可以理解，由于对每个js文件进行编译时需要消耗系统资源，而且编译过程时可能会发生阻塞，为了提高系统可用性和性能，在对每个js文件进行编译时可采用多进程编译的方式，例如可以使用node.js环境下的cluster功能进行多进程编译。
在一实施例中，当对所述组件进行编译打包完成后，还需要对编译结果进行可视化分析，以判断所述首页页面的多个组件之间是否符合预设依赖关系，从而实现对不符合所述预设依赖关系的组件进行调整。可以采用webpack-bundle-analyzer工具(可视化视图查看器)对编译结果进行可视化分析。具体地，可以通过“npm run build”命令启动所述可视化视图查看器，同时利用所述可视化视图查看器来获取经过webpack打包后所有组件之间的依赖关系，根据获取的经过webpack打包后所有组件之间的依赖关系来判断多个所述组件之间是否符合所述预设依赖关系。
步骤S402，当多个所述组件之间存在有不符合所述预设依赖关系的情形时，输出优化提醒信息及优化建议，并根据所述优化提醒信息和所述优化建议对不符合所述预设依赖关系的组件进行调整。
在一实施例中，当多个所述组件之间存在有不符合预设依赖关系的情况时，输出优化提醒及优化建议，并根据所述优化提醒信息和所述优化建议对不符合所述依赖关系的组件进行调整。举例而言，当对组件A1-A3进行可视化分析并判断所述组件A1-A3之间存在二次依赖关系时，可以对所述组件A1-A3的依赖关系进行调整，以将所述组件A1-A3的二次依赖关系修改为单依赖关系。可以理解，通过对不符合所述预设依赖关系的组件进行调整，可以使得多个所述组件之间的依赖关系均符合所述预设依赖关系，如此可以消除所述组件相互依赖和重复引用的情况，减少所述首页页面加载时异常情况的产生。
步骤S404，将经过优化处理的数据文件按照预设规则进行打包，并将打包得到的数据包存储至Web服务器。
在一实施例中，所述预设规则可以是对所述首页页面的html，js，css文件进行打包时不生成后缀名为map的文件和/或对js文件和css文件进行压缩处理。
在一实施例中，所述后缀名为map文件可以用于对编译后的代码进行调试。在所述首页页面上线后的代码调试完成后，对所述首页页面的html，js，css文件进行打包时，可以删掉这些后缀名为map的文件，从而可以减小数据包的大小。对所述首页页面的html，js，css文件进行打包时，还可以对所述js文件和所述css文件进行压缩。可以理解，可以使用前端开发常见的压缩技术对所述js文件和所述css文件进行压缩，例如compressor等。
在一实施例中，所述web服务器用于存储所述首页页面的数据文件，当浏览器(客户端)连接到所述web服务器上并请求数据文件时，所述web服务器将处理所述请求并将数据文件反馈到所述浏览器上，同时附带的信息会指示所述浏览器如何查看所述数据文件(即文件类型)，所述web服务器可以使用HTTP(超文本传输协议)与客户端浏览器进行信息交流。可以理解，所述客户端可以是PC电脑、手机、平板电脑等可以显示网页的移动终端。
步骤S406，接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源。
在一实施例中，接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源的具体方式包括：
D11.从所述首页页面的加载请求中提取用于记录客户端页面缓存的本地缓存信息；
D12.根据所述本地缓存信息计算所述首页页面本次加载所需的基准资源；
D13.根据计算结果从所述Web服务器获取所述首页页面本次加载所需的基准资源。
在一实施例中，所述加载请求可以由所述客户端发出，所述客户端可以根据用户输入的网址或者网页点击操作指令来触发所述首页页面的加载请求。所述首页页面的加载请求中携带有客户端请求显示的首页的URL地址等信息。同时，所述页面加载请求中还携带有客户端的标识以及客户端记录的本地的缓存变化信息。所述客户端的标识可以是由服务器预先为客户端生成的一数字标识符，作为客户端的唯一标识，用来标记客户端。所述客户端记录的本地缓存变化信息可以包括：客户端增加或减少一条URL对应的缓存数据。
在一实施例中，客户端可与通过一个缓存记录器，记录每次客户端缓存的变化信息，将增加的URL或者URL对应的hash值记录到一个ADD(增加)队列中，将删除的URL或者URL对应的hash值记录到一个REMOVE(移除)队列中。可以根据客户端的缓存信息计算获取所述首页页面本次加载所需要的基准资源，将客户端上不存在的基准资源推送给客户端，以节省流量开销，进一步提升客户端网页加载速度。
在一实施例中，所述Web服务器在接收到客户端发送的首页页面的加载请求后，获取所述加载请求，并根据所述加载请求携带的URL地址，获取相应的首页页面数据，作为返回给客户端的主页面数据。所述Web服务器还会解析所述主页面数据，计算所述首页页面本次加载所需的基准资源，并根据计算结果从所述Web服务器获取所述首页页面本次加载所需的基准资源。
在一实施例中，所述基准资源可以指对一个HTML解析渲染起着基本显示作用的资源。所述基准资源可以根据实际显示需求进行设定与调整。所述基准资源可以包括js(客户端脚本语言)/css(级联样式表)资源等。所述基准资源是与所述首页页面的主资源相对的资源，所述主资源可以指一个完整的HTML首页页面的资源。
在一实施例中，由于所述首页页面通过异步组件技术和webpack代码分割技术被拆分成多个组件，进而可以实现路由组件按需求加载。也就是说，当路由被访问的时候才加载需要的组件，而不是在接收到首页页面的加载请求时就加载所述首页页面的全部组件。
步骤S408，对所述基准资源执行页面渲染操作，以完成所述首页页面的加载。
在一实施例中，对所述基准资源执行页面渲染操作的具体方式包括：
D21.获取所述基准资源包含的原始CSS文件；
D22.查找并删除所述原始CSS文件中的无效的CSS样式，并利用经过所述删除处理的基准资源执行页面渲染操作。
在一实施例中，在加载效果不佳的时候，加载CSS所花费的时间也不短，如果能够提升CSS的加载速度，就能极大地提高页面加载的速度。一般而言，由于CSS复用频繁，CSS文件中的样式代码可能会存在着大量的冗余，影响页面的加载速度。
在一实施例中，获取所述基准资源包含的原始CSS文件，从所述基准资源包含的原始CSS文件中识别出无效的CSS样式，然后删除识别出的所有CSS样式，即只保留有效的CSS样式，从而减小了CSS文件的大小，极大地降低了CSS文件所需的加载时间。其中，无效的CSS样式是指错误的CSS样式，有效的CSS样式即为正确的CSS样式。
在一实施例中，可以使用UI Web View实现加载首页页面的功能，基于NS URLConnection实现UI Web View的网络资源加载功能。具体地，可以调用NS URL ProtocolClient的如下函数：1、-(void)URL Protocol:did Receive Response:cache StoragePolicy函数，目的在于通知浏览器(或者UI Web View)NS HTTP URL Response响应数据头；2、-(void)URL Protocol:did Load Data函数，目的在于返回给浏览器(或者UI Web View)响应的数据内容NS Data(即HTML文件和静态资源文件)；3、-(void)URL Protocol DidFinish Loading函数，目的在于通知浏览器(或者UI Web View)加载，执行页面渲染操作以完成页面加载。在WebKit内核中，网页在加载显示的时候会启动一个解析器(Parser)去解析HTML，然后生成渲染树(Render Tree)，最终渲染出所述首页页面。
上述首页加载优化方法，在首页页面加载前对首页页面的数据文件进行可视化分析，以判断所述首页页面的多个组件之间是否符合预设依赖关系，并在多个所述组件之间存在有不符合所述预设依赖关系的情况时，对不符合所述预设依赖关系的组件进行调整，可减少页面加载时异常情况发生概率，同时在进行首页页面加载时，只加载首页页面所需的基准资源，而不是首页资源全部加载，实现了首页页面资源的懒加载功能，进而可以提升首页页面的加载速度。
参阅图4所示，是本发明首页加载优化方法第二实施例的实施流程示意图。在本实施例中，根据不同的需求，图4所示的流程图中的步骤的执行顺序可以改变，某些步骤可以省略。
步骤S400，对首页页面的数据文件进行可视化分析生成分析结果，并根据所述分析结果来判断所述首页页面的多个组件之间是否符合预设依赖关系。
在一实施例中，可以理解，所述预设依赖关系可以根据实际的需求进行设定，例如所述预设依赖关系为所述组件之间单依赖关系。所述首页页面可以通过异步组件技术及webpack代码分割技术被拆分成多个组件。所述组件可以是按照所述首页页面的预设功能进行封装后所形成的一个具体的逻辑或者是一个功能性的UI组件。
在一实施例中，可以理解，当对所述首页页面的数据文件进行可视化分析时，所述组件可以以可视化形式呈现给用户，用户可以通过拖拽的方式将所述组件加载到正在配置的所述首页页面中。所述组件可以是按钮组件、对话框组件等。举例而言，当用户需要在一首页页面中设置一按钮时，用户可以直接将可视化按钮组件拖拽到待配置首页页面的适当位置处，之后所述首页页面中相应位置处即可呈现出相应的按钮。
在一实施例中，对首页页面的数据文件进行可视化分析生成分析结果的具体方式包括：
D1.判断所述组件的源代码是否包括有多个js文件；
D2.当所述源代码包括有多个js文件时，将每个js文件编译成一个的单独的模块，并依据这些模块之间的依赖关系对所述组件进行编译打包；
D3.生成符合预设依赖关系的可执行模块文件，并对编译结果进行可视化分析生成分析结果。
在一实施例中，所述组件的源代码可以基于vue.js框架生成。当所述源代码包括有多个js文件时，当对单个组件进行编译时，可以将每个js文件编译成一个的单独的模块，并依据这些模块之间的依赖关系对所述组件进行编译打包，最终生成符合预设依赖关系的可执行模块文件，如符合umd规范的可执行模块文件。可以理解，由于对每个js文件进行编译时需要消耗系统资源，而且编译过程时可能会发生阻塞，为了提高系统可用性和性能，在对每个js文件进行编译时可采用多进程编译的方式，例如可以使用node.js环境下的cluster功能进行多进程编译。
在一实施例中，当对所述组件进行编译打包完成后，还需要对编译结果进行可视化分析，以判断所述首页页面的多个组件之间是否符合预设依赖关系，从而实现对不符合所述预设依赖关系的组件进行调整。可以采用webpack-bundle-analyzer工具(可视化视图查看器)对编译结果进行可视化分析。具体地，可以通过“npm run build”命令启动所述可视化视图查看器，同时利用所述可视化视图查看器来获取经过webpack打包后所有组件之间的依赖关系，根据获取的经过webpack打包后所有组件之间的依赖关系来判断多个所述组件之间是否符合所述预设依赖关系。
步骤S402，当多个所述组件之间存在有不符合所述预设依赖关系的情形时，输出优化提醒信息及优化建议，并根据所述优化提醒信息和所述优化建议对不符合所述预设依赖关系的组件进行调整。
在一实施例中，当多个所述组件之间存在有不符合预设依赖关系的情况时，输出优化提醒及优化建议，并根据所述优化提醒信息和所述优化建议对不符合所述预设依赖关系的组件进行调整。举例而言，当对组件A1-A3进行可视化分析并判断所述组件A1-A3之间存在二次依赖关系时，可以对所述组件A1-A3的依赖关系进行调整，以将所述组件A1-A3的二次依赖关系修改为单依赖关系。可以理解，通过对不符合所述预设依赖关系的组件进行调整，可以使得多个所述组件之间的依赖关系均符合所述预设依赖关系，如此可以消除所述组件相互依赖和重复引用的情况，减少所述首页页面加载时异常情况的产生。
步骤S404，将经过优化处理的数据文件按照预设规则进行打包，并将打包得到的数据包存储至Web服务器。
在一实施例中，所述预设规则可以是对所述首页页面的html，js，css文件进行打包时不生成后缀名为map的文件和/或对js文件和css文件进行压缩处理。
在一实施例中，所述后缀名为map文件可以用于对编译后的代码进行调试。在所述首页页面上线后的代码调试完成后，对所述首页页面的html，js，css文件进行打包时，可以删掉这些后缀名为map的文件，从而可以减小数据包的大小。对所述首页页面的html，js，css文件进行打包时，还可以对所述js文件和所述css文件进行压缩。可以理解，可以使用前端开发常见的压缩技术对所述js文件和所述css文件进行压缩，例如compressor等。
在一实施例中，所述web服务器用于存储所述首页页面的数据文件，当浏览器(客户端)连接到所述web服务器上并请求数据文件时，所述web服务器将处理所述请求并将数据文件反馈到所述浏览器上，同时附带的信息会指示所述浏览器如何查看所述数据文件(即文件类型)，所述web服务器可以使用HTTP(超文本传输协议)与客户端浏览器进行信息交流。可以理解，所述客户端可以是PC电脑、手机、平板电脑等可以显示网页的移动终端。
步骤S406，接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源。
在一实施例中，接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源的具体方式包括：
D11.从所述首页页面的加载请求中提取用于记录客户端页面缓存的本地缓存信息；
D12.根据所述本地缓存信息计算所述首页页面本次加载所需的基准资源；
D13.根据计算结果从所述Web服务器获取所述首页页面本次加载所需的基准资源。
在一实施例中，所述加载请求可以由所述客户端发出，所述客户端可以根据用户输入的网址或者网页点击操作指令来触发所述首页页面的加载请求。所述首页页面的加载请求中携带有客户端请求显示的首页的URL地址等信息。同时，所述页面加载请求中还携带有客户端的标识以及客户端记录的本地的缓存变化信息。所述客户端的标识可以是由服务器预先为客户端生成的一数字标识符，作为客户端的唯一标识，用来标记客户端。所述客户端记录的本地缓存变化信息可以包括：客户端增加或减少一条URL对应的缓存数据。
在一实施例中，客户端可与通过一个缓存记录器，记录每次客户端缓存的变化信息，将增加的URL或者URL对应的hash值记录到一个ADD(增加)队列中，将删除的URL或者URL对应的hash值记录到一个REMOVE(移除)队列中。可以根据客户端的缓存信息计算获取所述首页页面本次加载所需要的基准资源，将客户端上不存在的基准资源推送给客户端，以节省流量开销，进一步提升客户端网页加载速度。
在一实施例中，所述Web服务器在接收到客户端发送的首页页面的加载请求后，获取所述加载请求，并根据所述加载请求携带的URL地址，获取相应的首页页面数据，作为返回给客户端的主页面数据。所述Web服务器还会解析所述主页面数据，计算所述首页页面本次加载所需的基准资源，并根据计算结果从所述Web服务器获取所述首页页面本次加载所需的基准资源。
在一实施例中，所述基准资源可以指对一个HTML解析渲染起着基本显示作用的资源。所述基准资源可以根据实际显示需求进行设定与调整。所述基准资源可以包括js(客户端脚本语言)/css(级联样式表)资源等。所述基准资源是与所述首页页面的主资源相对的资源，所述主资源可以指一个完整的HTML首页页面的资源。
在一实施例中，由于所述首页页面通过异步组件技术和webpack代码分割技术被拆分成多个组件，进而可以实现路由组件按需求加载。也就是说，当路由被访问的时候才加载需要的组件，而不是在接收到首页页面的加载请求时就加载所述首页页面的全部组件。
步骤S408，对所述基准资源执行页面渲染操作，以完成所述首页页面的加载。
在一实施例中，对所述基准资源执行页面渲染操作的具体方式包括：
D21.获取所述基准资源包含的原始CSS文件；
D22.查找并删除所述原始CSS文件中的无效的CSS样式，并利用经过所述删除处理的基准资源执行页面渲染操作。
在一实施例中，在加载效果不佳的时候，加载CSS所花费的时间也不短，如果能够提升CSS的加载速度，就能极大地提高页面加载的速度。一般而言，由于CSS复用频繁，CSS文件中的样式代码可能会存在着大量的冗余，影响页面的加载速度。
在一实施例中，获取所述基准资源包含的原始CSS文件，从所述基准资源包含的原始CSS文件中识别出无效的CSS样式，然后删除识别出的所有CSS样式，即只保留有效的CSS样式，从而减小了CSS文件的大小，极大地降低了CSS文件所需的加载时间。其中，无效的CSS样式是指错误的CSS样式，有效的CSS样式即为正确的CSS样式。
在一实施例中，可以使用UI Web View实现加载首页页面的功能，基于NS URLConnection实现UI Web View的网络资源加载功能。具体地，可以调用NS URL ProtocolClient的如下函数：1、-(void)URL Protocol:did Receive Response:cache StoragePolicy函数，目的在于通知浏览器(或者UI Web View)NS HTTP URL Response响应数据头；2、-(void)URL Protocol:did Load Data函数，目的在于返回给浏览器(或者UI Web View)响应的数据内容NS Data(即HTML文件和静态资源文件)；3、-(void)URL Protocol DidFinish Loading函数，目的在于通知浏览器(或者UI Web View)加载，执行页面渲染操作以完成页面加载。在WebKit内核中，网页在加载显示的时候会启动一个解析器(Parser)去解析HTML，然后生成渲染树(Render Tree)，最终渲染出所述首页页面。
步骤S410，获取首页页面的点击指令，并根据所述点击指令获取与所述点击指令匹配的待加载资源。
步骤S412，判断所述待加载资源是否包含第三方库组件。
步骤S414，当所述待加载资源包含第三方库组件时，通过内容分发网络来引入所述待加载资源中的第三方库组件，及从所述Web服务器获取其余待加载资源。
步骤S416，当所述待加载资源不包含第三方库组件时，从所述Web服务器获取所述待加载资源。
在一实施例中，当完成首页页面的加载后，首页页面还可以根据用户的点击指令来跳转呈现与所述点击指令匹配的页面。具体地，获取首页页面的点击指令，并根据所述点击指令获取与所述点击指令匹配的待加载资源；判断所述待加载资源是否包含第三方库组件；当所述待加载资源包含有第三方库组件时，通过内容分发网络来引入所述待加载资源中的第三方库组件，从所述Web服务器中获取其余的待加载资源；当所述待加载资源不包含有第三方库组件时，可以直接从所述Web服务器中获取所述待加载资源。
举例而言，当判断所述待加载资源包含组件A，且所述组件A不是存储在Web服务器时，可以通过CDN引入组件A，具体的，可以在index.html中配置从CDN引入所述组件A，并去掉所述首页页面的其他组件的导入口，在webpack配置的externals属性中加入所述组件A，进而实现配置通过CDN引入组件A。
上述首页加载优化方法，在首页页面加载前对首页页面的数据文件进行可视化分析，以判断所述首页页面的多个组件之间是否符合预设依赖关系，并在多个所述组件之间存在有不符合所述预设依赖关系的情况时，对不符合所述预设依赖关系的组件进行调整，可减少页面加载时异常情况发生概率，同时在进行首页页面加载时，只加载首页页面所需的基准资源，而不是首页资源全部加载，实现了首页页面资源的懒加载功能，保证当页面资源被访问的时候才加载对应资源，进而可以提升首页页面的加载速度。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，所述计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种首页加载优化方法，应用于服务器，其特征在于，所述首页加载优化方法包括：
对首页页面的数据文件进行可视化分析生成分析结果，并根据所述分析结果来判断所述首页页面的多个组件之间是否符合预设依赖关系；
当多个所述组件之间存在有不符合所述预设依赖关系的情形时，输出优化提醒信息及优化建议，并根据所述优化提醒信息和所述优化建议对不符合所述预设依赖关系的组件进行调整；
将经过优化处理的数据文件按照预设规则进行打包，并将打包得到的数据包存储至Web服务器；
接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源；及
对所述基准资源执行页面渲染操作，以完成所述首页页面的加载。
2.如权利要求1所述的首页加载优化方法，其特征在于，所述接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源的步骤包括：
从所述首页页面的加载请求中提取用于记录客户端页面缓存的本地缓存信息；
根据所述本地缓存信息计算所述首页页面本次加载所需的基准资源；及
根据计算结果从所述Web服务器获取所述首页页面本次加载所需的基准资源。
3.如权利要求1或2所述的首页加载优化方法，其特征在于，所述对所述基准资源执行页面渲染操作的步骤包括：
获取所述基准资源包含的原始CSS文件；及
查找并删除所述原始CSS文件中的无效的CSS样式，并利用经过所述删除处理的基准资源执行页面渲染操作。
4.如权利要求1或2所述的首页加载优化方法，其特征在于，所述首页页面通过异步组件技术和webpack代码分割技术被拆分成多个组件，所述预设规则包括：对首页页面的html，js，css文件进行打包时不生成后缀名为map的文件和/或对js文件和css文件进行压缩处理。
5.如权利要求1或2所述的首页加载优化方法，其特征在于，所述对所述基准资源执行页面渲染操作，以完成所述首页页面的加载的步骤之后还包括：
获取首页页面的点击指令，并根据所述点击指令获取与所述点击指令匹配的待加载资源；
判断所述待加载资源是否包含第三方库组件；及
当所述待加载资源包含第三方库组件时，通过内容分发网络来引入所述待加载资源中的第三方库组件，及从所述Web服务器获取其余待加载资源。
6.一种服务器，其特征在于，所述服务器包括存储器、处理器，所述存储器上存储有可在所述处理器上运行的首页加载优化系统，所述首页加载优化系统被所述处理器执行时实现如下步骤：
对首页页面的数据文件进行可视化分析生成分析结果，并根据所述分析结果来判断所述首页页面的多个组件之间是否符合预设依赖关系；
当多个所述组件之间存在有不符合所述预设依赖关系的情形时，输出优化提醒信息及优化建议，并根据所述优化提醒信息和所述优化建议对不符合所述预设依赖关系的组件进行调整；
将经过优化处理的数据文件按照预设规则进行打包，并将打包得到的数据包存储至Web服务器；
接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源；及
对所述基准资源执行页面渲染操作，以完成所述首页页面的加载。
7.如权利要求6所述的服务器，其特征在于，所述接收首页页面的加载请求，并根据所述加载请求从所述Web服务器获取所述首页页面加载所需的基准资源的步骤包括：
从所述首页页面的加载请求中提取用于记录客户端页面缓存的本地缓存信息；
根据所述本地缓存信息计算所述首页页面本次加载所需的基准资源；及
根据计算结果从所述Web服务器获取所述首页页面本次加载所需的基准资源。
8.如权利要求6或7所述的服务器，其特征在于，所述对所述基准资源执行页面渲染操作的步骤包括：
获取所述基准资源包含的原始CSS文件；及
查找并删除所述原始CSS文件中的无效的CSS样式，并利用经过所述删除处理的基准资源执行页面渲染操作。
9.如权利要求6或7所述的服务器，其特征在于，所述对所述基准资源执行页面渲染操作，以完成所述首页页面的加载的步骤之后还包括：
获取首页页面的点击指令，并根据所述点击指令获取与所述点击指令匹配的待加载资源；
判断所述待加载资源是否包含第三方库组件；及
当所述待加载资源包含第三方库组件时，通过内容分发网络来引入所述待加载资源中的第三方库组件，及从所述Web服务器获取其余待加载资源。
10.一种计算机可读存储介质，所述计算机可读存储介质存储有首页加载优化系统，所述首页加载优化系统可被至少一个处理器执行，以使所述至少一个处理器执行如权利要求1-5中任一项所述的首页加载优化方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910184612.3A CN110059277A (zh) | 2019-03-12 | 2019-03-12 | 首页加载优化方法、服务器及计算机可读存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910184612.3A CN110059277A (zh) | 2019-03-12 | 2019-03-12 | 首页加载优化方法、服务器及计算机可读存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110059277A true CN110059277A (zh) | 2019-07-26 |
Family
ID=67316940
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910184612.3A Pending CN110059277A (zh) | 2019-03-12 | 2019-03-12 | 首页加载优化方法、服务器及计算机可读存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110059277A (zh) |
Cited By (15)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110636111A (zh) * | 2019-08-22 | 2019-12-31 | 北京达佳互联信息技术有限公司 | 资源打包方法、装置、电子设备及存储介质 |
| CN110795094A (zh) * | 2019-09-19 | 2020-02-14 | 五八有限公司 | 一种页面组件引用方法以及页面组件引用装置 |
| CN111159615A (zh) * | 2019-12-31 | 2020-05-15 | 北大方正集团有限公司 | 网页处理方法和装置 |
| CN111177618A (zh) * | 2019-12-17 | 2020-05-19 | 腾讯科技（深圳）有限公司 | 网站搭建方法、装置、设备及计算机可读存储介质 |
| CN111338688A (zh) * | 2020-02-28 | 2020-06-26 | 平安医疗健康管理股份有限公司 | 数据长效缓存方法、装置、计算机系统及可读存储介质 |
| CN111459497A (zh) * | 2020-04-10 | 2020-07-28 | 深圳市盟天科技有限公司 | 基于webpack的资源包编译方法、系统、服务器和存储介质 |
| CN111506844A (zh) * | 2020-04-08 | 2020-08-07 | 聚好看科技股份有限公司 | 页面处理方法、设备及计算机存储介质 |
| CN111639278A (zh) * | 2020-05-26 | 2020-09-08 | 北京三快在线科技有限公司 | 一种网页加载方法及装置 |
| CN111813470A (zh) * | 2020-06-12 | 2020-10-23 | 北京邮电大学 | 一种初始交互界面优化方法及装置 |
| CN111966936A (zh) * | 2020-08-13 | 2020-11-20 | 苏州浪潮智能科技有限公司 | 一种页面预加载的方法和设备 |
| CN112163175A (zh) * | 2020-10-14 | 2021-01-01 | 南京焦点领动云计算技术有限公司 | 一种网站移动端速度优化方法 |
| CN113343143A (zh) * | 2021-05-24 | 2021-09-03 | 上海万物新生环保科技集团有限公司 | 一种流式加载网页模板的方法及设备 |
| CN113448928A (zh) * | 2021-07-09 | 2021-09-28 | 网易（杭州）网络有限公司 | 文件清理方法、装置、处理器及电子装置 |
| CN113656110A (zh) * | 2021-09-02 | 2021-11-16 | 武汉众邦银行股份有限公司 | 一种前端升级后免清缓存的页面加载方法及装置 |
| CN115167799A (zh) * | 2022-09-06 | 2022-10-11 | 深圳市信润富联数字科技有限公司 | 可视化大屏的快速展示方法、装置、设备及存储介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104796439A (zh) * | 2014-01-16 | 2015-07-22 | 腾讯科技（深圳）有限公司 | 网页推送方法、客户端、服务器及系统 |
| US20170094004A1 (en) * | 2015-09-29 | 2017-03-30 | Apple Inc. | Browser cache management |
| CN108932332A (zh) * | 2018-07-05 | 2018-12-04 | 麒麟合盛网络技术股份有限公司 | 静态资源的加载方法及装置 |
| CN109145236A (zh) * | 2017-06-28 | 2019-01-04 | 艺龙网信息技术（北京）有限公司 | 页面文件处理方法、装置及系统 |
-
2019
- 2019-03-12 CN CN201910184612.3A patent/CN110059277A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104796439A (zh) * | 2014-01-16 | 2015-07-22 | 腾讯科技（深圳）有限公司 | 网页推送方法、客户端、服务器及系统 |
| US20170094004A1 (en) * | 2015-09-29 | 2017-03-30 | Apple Inc. | Browser cache management |
| CN109145236A (zh) * | 2017-06-28 | 2019-01-04 | 艺龙网信息技术（北京）有限公司 | 页面文件处理方法、装置及系统 |
| CN108932332A (zh) * | 2018-07-05 | 2018-12-04 | 麒麟合盛网络技术股份有限公司 | 静态资源的加载方法及装置 |
Non-Patent Citations (1)
| Title |
|---|
| ATHON: "借助webpack对项目进行分析优化", pages 1 - 10, Retrieved from the Internet <URL:https://segmentfault.com/a/1190000014369413> * |
Cited By (23)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110636111A (zh) * | 2019-08-22 | 2019-12-31 | 北京达佳互联信息技术有限公司 | 资源打包方法、装置、电子设备及存储介质 |
| CN110795094A (zh) * | 2019-09-19 | 2020-02-14 | 五八有限公司 | 一种页面组件引用方法以及页面组件引用装置 |
| CN110795094B (zh) * | 2019-09-19 | 2023-10-27 | 五八有限公司 | 一种页面组件引用方法以及页面组件引用装置 |
| CN111177618B (zh) * | 2019-12-17 | 2023-08-11 | 腾讯科技（深圳）有限公司 | 网站搭建方法、装置、设备及计算机可读存储介质 |
| CN111177618A (zh) * | 2019-12-17 | 2020-05-19 | 腾讯科技（深圳）有限公司 | 网站搭建方法、装置、设备及计算机可读存储介质 |
| CN111159615A (zh) * | 2019-12-31 | 2020-05-15 | 北大方正集团有限公司 | 网页处理方法和装置 |
| CN111159615B (zh) * | 2019-12-31 | 2024-01-02 | 新方正控股发展有限责任公司 | 网页处理方法和装置 |
| CN111338688A (zh) * | 2020-02-28 | 2020-06-26 | 平安医疗健康管理股份有限公司 | 数据长效缓存方法、装置、计算机系统及可读存储介质 |
| CN111338688B (zh) * | 2020-02-28 | 2023-12-08 | 深圳平安医疗健康科技服务有限公司 | 数据长效缓存方法、装置、计算机系统及可读存储介质 |
| CN111506844A (zh) * | 2020-04-08 | 2020-08-07 | 聚好看科技股份有限公司 | 页面处理方法、设备及计算机存储介质 |
| CN111459497A (zh) * | 2020-04-10 | 2020-07-28 | 深圳市盟天科技有限公司 | 基于webpack的资源包编译方法、系统、服务器和存储介质 |
| CN111639278B (zh) * | 2020-05-26 | 2024-03-08 | 北京三快在线科技有限公司 | 一种网页加载方法及装置 |
| CN111639278A (zh) * | 2020-05-26 | 2020-09-08 | 北京三快在线科技有限公司 | 一种网页加载方法及装置 |
| CN111813470B (zh) * | 2020-06-12 | 2021-03-23 | 北京邮电大学 | 一种初始交互界面优化方法及装置 |
| CN111813470A (zh) * | 2020-06-12 | 2020-10-23 | 北京邮电大学 | 一种初始交互界面优化方法及装置 |
| CN111966936A (zh) * | 2020-08-13 | 2020-11-20 | 苏州浪潮智能科技有限公司 | 一种页面预加载的方法和设备 |
| CN111966936B (zh) * | 2020-08-13 | 2023-01-06 | 苏州浪潮智能科技有限公司 | 一种页面预加载的方法和设备 |
| CN112163175A (zh) * | 2020-10-14 | 2021-01-01 | 南京焦点领动云计算技术有限公司 | 一种网站移动端速度优化方法 |
| CN113343143A (zh) * | 2021-05-24 | 2021-09-03 | 上海万物新生环保科技集团有限公司 | 一种流式加载网页模板的方法及设备 |
| CN113448928A (zh) * | 2021-07-09 | 2021-09-28 | 网易（杭州）网络有限公司 | 文件清理方法、装置、处理器及电子装置 |
| CN113656110A (zh) * | 2021-09-02 | 2021-11-16 | 武汉众邦银行股份有限公司 | 一种前端升级后免清缓存的页面加载方法及装置 |
| CN113656110B (zh) * | 2021-09-02 | 2024-03-29 | 武汉众邦银行股份有限公司 | 一种前端升级后免清缓存的页面加载方法及装置 |
| CN115167799A (zh) * | 2022-09-06 | 2022-10-11 | 深圳市信润富联数字科技有限公司 | 可视化大屏的快速展示方法、装置、设备及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110059277A (zh) | 首页加载优化方法、服务器及计算机可读存储介质 | |
| Netravali et al. | Polaris: Faster page loads using fine-grained dependency tracking | |
| US20150286739A1 (en) | Html5-protocol-based webpage presentation method and device | |
| EP3518124A1 (en) | Webpage rendering method and related device | |
| CN109213948B (zh) | 网页加载方法、中间服务器和网页加载系统 | |
| EP2721513B1 (en) | Live browser tooling in an integrated development environment | |
| CN111143729B (zh) | 基于单页面应用的优化方法、装置、设备及存储介质 | |
| CN102402518A (zh) | 一种访问网页的方法及装置 | |
| CN113377373A (zh) | 基于解析引擎的页面加载方法、装置、计算机设备及介质 | |
| US20140215306A1 (en) | In-Context Editing of Output Presentations via Automatic Pattern Detection | |
| CN113010827A (zh) | 页面渲染方法、装置、电子设备以及存储介质 | |
| CN110309463B (zh) | 落地页优化方法、装置、计算机存储介质及网络设备 | |
| CN112650905A (zh) | 基于标签的反爬虫方法、装置、计算机设备及存储介质 | |
| Vogel et al. | An in-depth analysis of web page structure and efficiency with focus on optimization potential for initial page load | |
| CN115659087A (zh) | 页面渲染方法、系统、设备、存储介质及程序产品 | |
| CN115202756A (zh) | 基于Vue的组件加载方法、系统和电子设备 | |
| CN115186214A (zh) | 页面配置方法、装置、计算机设备及计算机可读存储介质 | |
| CN114756797A (zh) | 一种页面处理方法、装置、电子设备和存储介质 | |
| US20200252298A1 (en) | Method and System for Efficient Multi Agent Computer Simulation | |
| US8977718B2 (en) | Website redevelopment wrapper | |
| CN113626739B (zh) | 一种网站渲染路径加速优化方法及系统 | |
| CN116009863B (zh) | 前端页面渲染方法、设备及存储介质 | |
| CN113642295B (zh) | 页面排版方法、装置及计算机程序产品 | |
| TWI610183B (zh) | 植基於ajax技術於控管網頁共通部分之運作系統 | |
| CN116166261A (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 |