网页加载方法、装置及系统的制作方法_2

文档序号:9326731阅读:来源:国知局
的程序,所以本申请可以提高首屏页面展现效率。并且,本申请没有增加额外的资源 请求开销,便可加速首屏页面的展现,从而可以提高网页性能。
【附图说明】
[0050] 为了更清楚地说明本申请实施例或现有技术中的技术方案,下面将对实施例或现 有技术描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本 申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以 根据这些附图获得其他的附图。
[0051] 图1为本申请实施例公开的一种网页加载系统的结构示意图;
[0052] 图2为本申请实施例公开的一种网页加载方法的流程图;
[0053] 图3为本申请实施例公开的又一种网页加载方法的流程图;
[0054] 图4为现有技术中主体资源的示意图;
[0055] 图5为本申请实施例公开的一种网页加载方法中主体资源的示意图;
[0056] 图6为本申请实施例公开的一种网页加载方法中主体资源的示意图;
[0057] 图7为本申请实施例公开的一种网页加载装置的结构图;
[0058] 图8为本申请实施例公开的又一种网页加载装置的结构图;
[0059] 图9为本申请实施例公开的又一种网页加载装置的结构图。
【具体实施方式】
[0060] 下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完 整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于 本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他 实施例,都属于本申请保护的范围。
[0061] 在介绍本申请的具体实施例之前,首先介绍网页的相关情况:
[0062] -个网页分可以为三个部分:头部、主体和尾部。服务器在获得网页地址后,可以 在数据库中查询与网页地址对应的网页资源,即头部资源、主体资源和尾部资源。其中,头 部资源主要作用为显示公司或网站标志性的内容,比如,企业LOGO、企业名称等信息;尾部 资源主要作用为显示企业的联系方式、ICP备案等信息;主体资源的主要作用为显示网页 的主要内容。
[0063] 由于主体资源的作用为显示网页的主要内容,所以,在网页资源中主体资源占有 重要作用。在浏览器加载网页资源的过程中,如果主体资源加载完成,则一个网页的大体内 容则显不完成。
[0064] 为了提高技术人员开发网页的效率,在网页的主体一般有多个模块,每个模块均 有自己的模块资源。每个模块资源主要包括有独立功能模板、CSS文件以及JS文件。其中, 本申请所指的CSS文件是模块中以.css为后缀的文件JS文件是以.js后缀的文件。
[0065] 在每个模块中的CSS (Cascading Style Sheet,层叠样式表单)文件,主要用来定 义一个HTML或一类HTML标记的显示样式。JS文件为用javascript脚本语言编写的、用于 执行模块主要功能的软件程序。例如,一个超链接字符串;在实现这个超链接字符串的过程 中,CSS文件主要显示字符串的字体(宋体、楷体或仿宋体等),JS文件的作用为字符串添 加超链接。
[0066] 如图1所示,本申请提供了一种网页加载系统,所述系统包括:
[0067] 服务器100和浏览器200 ;服务器100和浏览器200之间采用无线方式通信。
[0068] 浏览器200即为安装在终端上实现上网冲浪的客户端,用户可以使用浏览器200 查询自己所需的信息。用户可以在浏览器200的地址栏中输入网页地址,以便浏览器200 将该网页地址发送至服务器100,请求获取该网页地址对应的网页资源。
[0069] 服务器100可以接收浏览器200发送的网页地址,并抓取该网页地址对应的网页 资源,并将网页资源发送至浏览器200,以供浏览器200加载网页资源,从而可以显示网页 资源至用户。
[0070] 如图2所示,本申请提供了一种网页加载方法,应用于图1所示的服务器。所述方 法包括以下步骤:
[0071] 步骤S201 :接收浏览器发送的网页地址。
[0072] 服务器实时接收浏览器发送的网页地址,网页地址可以表示用户希望获取的网页 资源。例如,用户输入WWW. taobao. com,则表示用户现在希望查看淘宝网的首屏页面。
[0073] 步骤S202 :计算所述网页地址所需的网页资源;所述网页资源包括至少一个模块 资源,并且,每个模块资源的JS文件均设置于所述主体资源之后。
[0074] 网页资源中可以包含有多个模块资源,各个模块资源的JS文件会阻碍首屏页面 的渲染。为了解决这个问题,服务器在构建网页资源时,在确定主体资源之后,将主体资源 中每个模块资源的JS文件提取出来,放置在主体资源之后;以便浏览器在加载网页资源 时,可以先加载主体资源,在主体资源加载完成之后,再加载每个模块资源的JS文件。
[0075] 步骤S203 :将所述网页资源发送至所述浏览器。
[0076] 服务器将按步骤S202计算得到的网页资源发送至浏览器,供浏览器进行加载并 显示至用户。
[0077] 图2所示的实施例为服务器端执行的过程,下面介绍浏览器端执行的过程。如图 3所示,本申请提供一种网页加载方法,应用于图1所示的浏览器。所述方法具体包括以下 步骤:
[0078] 步骤S301 :加载由服务器发送的网页资源;其中,所述网页资源包括头部资源、主 体资源和尾部资源,所述主体资源包括至少一个模块资源,并且,每个模块资源的JS文件 均设置于所述主体资源之后。
[0079] 浏览器可以接收服务器发送的网页资源,网页资源的主体资源中除了与模块对应 的模块资源之外还有其它资源;模块资源穿插在其它资源中间,所有资源均按照由上至下 的方式排列。并且,各个模块资源的JS文件,设置在主体资源之后。
[0080] 浏览器在加载网页资源时,采用由上至下的加载方式。即,先加载头部资源、再加 载主体资源、再加载排列在主体资源之后的各个模块资源的JS文件,最后加载尾部资源。 被加载资源可以显示在网页上,未被加载的资源在网页上显示空白网页。
[0081] 以主体资源为例,如图4所示,主体资源包括:模块资源A、模块资源B和模块资源 C,其它资源包括资源1、资源2和资源3 ;模块资源A、模块资源B和模块资源C的JS文件 分别为JS文件A、JS文件B和JS文件C。由于主体资源中资源1排列靠前,则首先加载资 源1,资源1在加载完成后,则会显示在网页上。其它未加载的内容,则未显示在网页上。
[0082] 在浏览器加载主体资源的过程中,当浏览器加载到模块资源时则执行步骤S302。 在步骤S302执行完毕之后,继续按顺序加载未加载的资源,直到主体资源被加载完毕为 止,然后进入步骤S303。
[0083] 例如,沿用上述举例,浏览器在加载资源1之后,则会加载模块A,此时则执行步骤 S302的相关内容。在步骤S302执行完毕之后,继续加载资源2,在网页上显示资源2对应 的内容。资源2下方为模块资源B,则重复执行步骤S302,在步骤S302执行结束之后,继续 加载模块资源C,重复执行步骤S302 ;最后加载资源3从而完成主体资源的加载,进入步骤 S303〇
[0084] 步骤S302 :在所述网页资源中加载到每个模块资源时,在所述每个模块资源中提 取运行JS文件所需的JS资源,并将所述JS资源注册到预先建立的函数运行池中。
[0085] 本步骤针对每个模块的执行过程均为一致的,所以仅对一个模块的执行过程进行 详细说明,其它模块的执行过程不再赘述。
[0086] 每个模块对应的模块资源可以分为两部分:一部分资源为后续运行JS文件所需 的资源,这部分资源可以称为JS资源;一部分为运行JS文件不需要使用的资源,这部分资 源称为其它资源。
[0087] 由于每个模块资源的JS文件设置在主体资源之后,所以在加载主体资源时,不执 行各个模块资源的JS文件。但是,运行各个模块JS文件还
当前第2页1 2 3 4 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1