html资源加载流程,浏览器目标资源文件加载方法与流程

本发明属于Web浏览器应用，尤其是涉及单页面应用(Single Page Application)这种需要客户端浏览器大量加载目标资源文件的应用。

背景技术：

随着基于浏览器的Web应用快速发展，原来需要客户端下载安装包安装执行的本地应用也逐步改为复杂的单页面应用(Single Page Application)，这种应用的特点是客户端从一个HTML启动，从Web服务器下载大量的JavaScript代码和目标资源文件在浏览器上执行，由于单页面应用设计特点，往往需要加载目标资源文件(HTML模板、CSS、图片、字库)等数量众多，初始加载时间很长。

以上方式具有几个明显的弱点需要改善：

1)目标资源文件众多，HTML页面同时发出多个请求，容易阻塞浏览器，导致记载时间显著增加。

2)容易受到浏览器缓存管理策略影响，即使服务器内容更新但浏览器依然在使用旧的目标资源文件。

3)HTML需要嵌入大量的资源标签，降低加载效能。

技术实现要素：

有鉴于现有技术中的上述缺陷，本发明提供了一种浏览器目标资源文件加载方法。

本发明中的浏览器目标资源文件加载方法，包括：从远端下载经发布的目标资源文件；根据目标资源文件进行DOM渲染。

优选地，从远端下载经发布的目标资源文件包括：检查本地数据库是否存在与目标资源文件相对应的历史资源文件；如果不存在，则下载完整的目标资源文件。

优选地，从远端下载经发布的目标资源文件还包括：如果存在对应的历史资源文件，则比较目标资源文件与历史资源文件的摘要信息，并在摘要信息未发生变化时将历史资源文件作为目标资源文件，以供插入DOM进行渲染。

优选地，从远端下载经发布的目标资源文件还包括：如果摘要信息发生变化，则判定为所述不存在。

优选地，从远端下载经发布的目标资源文件还包括：从远端下载根据目标资源文件制作的摘要信息，其中，所述摘要信息包括大小、时间、和校验码。

优选地，所述摘要信息采用Hash算法制作。

优选地，所述目标资源文件配置为经打包压缩后发布，且所述目标资源文件根据系统功能模组及更新策略的不同而被划分为不同的压缩文件分别打包发布。

优选地，所述目标资源文件被打包压缩成zip形式。

优选地，所述目标资源文件以压缩文件的形式保存在远端，当目标资源文件被浏览器下载到本地后保存在本地数据库中备用。

优选地，所述历史资源文件的缓存管理策略与浏览器的文件存储规则不同。

本发明将众多的目标资源文件在服务器端打包、压缩成为一个目标资源文件，实现多文件一次性下载，由客户端程序的加载器下载后再插入浏览器DOM，同时可自定义维护缓存策略，这样可自主控制的缓存过期及更新策略，不会受到浏览器缓存清理的限制。

附图说明

图1是本发明的流程图。

具体实施方式

为使本领域技术人员更好的理解本发明的技术方案，下面结合附图和具体实施方式对本发明作详细说明。

本发明提供了一种浏览器目标资源文件加载方法，包括：

首先，从远端下载经后发布的目标资源文件(可以是预先经过打包压缩的文件，下文以打包压缩的目标资源文件为例进行示例性说明)；目标资源文件包括HTML,CSS等目标资源文件，以实现多文件的一次性下载。优选地，所述目标资源文件以压缩文件的形式保存在远端，当目标资源文件被浏览器下载到本地后保存在本地数据库中备用，其中，作为优选方式，可以作为历史资源文件重复使用(历史资源文件将在下文中详细说明)，这样将以上目标资源文件缓存在浏览器的本地数据库中以后重复访问无需下载。优选地，所述目标资源文件被打包压缩成zip形式。

然后，根据目标资源文件进行DOM渲染。

在实施时，可将浏览器渲染页面所需目标资源文件如HTML模板、CSS样式表以ZIP压缩文件形式在server端打包并压缩保存，浏览器下载后保存在本地数据库中重复使用。

优选地，所述历史资源文件的缓存管理策略与浏览器的文件存储规则不同，旨在使得所述历史资源文件采用自定义的缓存管理策略而不受浏览器自身规则的约束。本发明将众多的目标资源文件在服务器端打包、压缩成为一个目标资源文件，实现多文件一次性下载，由客户端程序的加载器下载后再插入浏览器DOM，同时可自定义维护缓存策略，这样可自主控制的缓存过期及更新策略，不会受到浏览器缓存清理的限制。

经过上述处理，可以将一个大型单页面应用的几百个HTML/CSS目标资源文件压缩一次下载重复使用，显著减少目标资源文件的请求次数，可以将首页加载请求减少到仅仅下载js/图片等常规请求，显著降低首页加载时间。

优选地，从远端下载经打包压缩后发布的目标资源文件包括：检查本地数据库是否存在与目标资源文件相对应的历史资源文件；如果不存在，则立即下载完整的目标资源文件。

优选地，从远端下载经打包压缩后发布的目标资源文件还包括：如果存在对应的历史资源文件，则首先从远端下载目标资源文件的摘要信息，然后比较目标资源文件与历史资源文件的摘要信息，并在摘要信息未发生变化时直接历史资源文件作为目标资源文件解压，以供插入DOM进行渲染。

优选地，所述打包发布的目标资源文件根据系统功能模组及更新策略的不同而被划分为不同的压缩文件分别打包发布。同时，优选地，从远端下载经打包压缩后发布的目标资源文件还包括：如果摘要信息发生变化，则重新下载发生变化的目标资源文件至本地数据库解压，以供插入DOM进行渲染。目标资源文件可通过校验码方式检查版本变化并及时下载更新。这样，可以将首页加载请求减少到仅仅下载某一种资源，例如js/图片等常规请求，显著降低首页加载时间。

优选地，从远端下载经打包压缩后发布的目标资源文件还包括：从远端下载根据目标资源文件制作的摘要信息，其中，所述摘要信息包括大小、时间、和校验码。优选地，所述摘要信息采用Hash算法制作。

下面，以一个实施例对本发明进行更加详细的说明。

1.程序发布阶段：

1)将所有代码经过预处理，将所有目标资源文件精简打包为一个文件并以zip形式压缩，常规的HTML、CSS等文本文件可以压缩到1/4大小。

2)将目标资源文件根据Hash算法制作摘要信息文件(fingerprint)注明大小、时间、校验码。

3)根据系统功能模组及更新策略的不同将资源划分为不同ZIP文件分别打包发布。

2.客户端下载执行阶段

1)浏览器首先从远端下载摘要信息文件(fingerprint)了解目标资源文件的更新状态。

2)检查自己本地数据库是否存在资源打包文件，如果没有则立即下载完整资源压缩文件。

如果存在历史资源文件则比较摘要信息，如果没有变化则无需重新下载，直接解压缩，插入DOM开始渲染。如果有变化则重新下载更新后保存到本地数据库，同时解压缩，再开始渲染。

以上实施例仅为本发明的示例性实施例，不用于限制本发明，本发明的保护范围由权利要求书限定。本领域技术人员可以在本发明的实质和保护范围内，对本发明做出各种修改或等同替换，这种修改或等同替换也应视为落在本发明的保护范围内。