CN105045645B - 网页加载方法、装置及系统 - Google Patents

网页加载方法、装置及系统 Download PDF

Info

Publication number
CN105045645B
CN105045645B CN201510608661.7A CN201510608661A CN105045645B CN 105045645 B CN105045645 B CN 105045645B CN 201510608661 A CN201510608661 A CN 201510608661A CN 105045645 B CN105045645 B CN 105045645B
Authority
CN
China
Prior art keywords
resource
web page
main body
module
file
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.)
Active
Application number
CN201510608661.7A
Other languages
English (en)
Other versions
CN105045645A (zh
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.)
Alibaba China Co Ltd
Original Assignee
Guangzhou Shenma Mobile Information 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 Guangzhou Shenma Mobile Information Technology Co Ltd filed Critical Guangzhou Shenma Mobile Information Technology Co Ltd
Priority to CN201510608661.7A priority Critical patent/CN105045645B/zh
Priority to CN201610836641.XA priority patent/CN106354873B/zh
Publication of CN105045645A publication Critical patent/CN105045645A/zh
Application granted granted Critical
Publication of CN105045645B publication Critical patent/CN105045645B/zh
Priority to US15/272,039 priority patent/US10749927B2/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
    • 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
    • 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
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/04—Protocols specially adapted for terminals or networks with limited capabilities; specially adapted for terminal portability
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications
    • H04L67/01—Protocols
    • H04L67/06—Protocols specially adapted for file transfer, e.g. file transfer protocol [FTP]
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
    • G06F16/33—Querying
    • G06F16/332—Query formulation
    • G06F16/3322—Query formulation using system suggestions
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/445—Program loading or initiating
    • G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
    • G06F9/44526—Plug-ins; Add-ons
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L67/00—Network arrangements or protocols for supporting network services or applications

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Software Systems (AREA)
  • Data Mining & Analysis (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请提供了一种网页加载方法、装置及系统，其中一种方法包括：加载由服务器发送的网页资源；其中，每个模块资源的JS文件均设置于所述主体资源之后；在所述网页资源中加载到每个模块时，在所述每个模块资源中提取运行JS文件所需的JS资源，并将所述JS资源注册到预先建立的函数运行池中；在确定所述主体资源加载完成后，将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中。本申请将原本在加载主体资源过程中需要执行的业务逻辑，设置在主体资源加载完成之后再执行；即提前执行主体资源显示首屏页面的程序，延后执行各个模块运行JS文件的程序，所以本申请可以提高首屏首屏页面展现效率。

Description

网页加载方法、装置及系统
技术领域
本申请涉及网络技术领域，尤其涉及网页加载方法、装置及系统。
背景技术
随着互联网技术的飞速发展，互联网的网页内容越来越多。随着网页内容的增多，对开发人员的开发效率也提出更高的要求。目前，一个网页基本包括三个部分，头部、主体和尾部；可以理解的是，与网页对应的网页资源也分为三个部分：头部资源、主体资源和尾部资源。其中，主体为网页的主要部分，该部分也是技术人员主要开发的部分；即，技术人员需要对与主体对应的主体资源进行开发。
为了提高网页主体的开发效率，业内通常采用的技术手段为将主体模块化，即将主体划分为多个模块，例如，网页上的天气模块、搜索模块、音乐模块等；这使得每个技术人员可以单独负责一个模块，从而可以提高主体的开发效率，这使得一个主体上具有一个或多个模块。在主体包含多个模块的情况下，可以理解的是，与主体对应的主体资源中同样包括各个模块的模块资源。
在实际应用中，浏览器会加载服务器发送的网页资源，从而显示网页内容。目前，浏览器会采用由上至下的方式加载网页资源，即先加载网页资源的头部资源，在加载网页资源的主体资源，最后加载网页资源的尾部资源。在加载主体资源的过程中，仍然按照由上至下的加载方式，先加载排列靠前的资源再加载排列靠后的资源，直到所有的主体资源均加载完毕。
浏览器在加载主体资源中的模块资源时，会加载模块资源所包括的三种类型的文件：独立功能模板文件、CSS文件以及JS文件；在三种类型的文件均加载完成之后，再继续加载该模块资源后面的其它主体资源。
但是，在一个模块资源中，在独立功能模板文件和CSS文件加载完成之后，即可显示出模块资源对应的网页内容；而运行JS文件仅仅是完善该模块所能实现的功能而已。即各个模块资源的JS文件是否执行完成与显示网页内容无关，并且运行各个模块资源的JS文件的速率较慢；这导致浏览器需要花费资源和时间先执行各个模块资源的JS文件，才能够显示网页内容，即各个模块资源的JS文件会阻碍网页内容的渲染。
针对网页的首屏页面而言，最重要的是首屏页面的展现效率，即浏览器可以快速显示网页的全部内容。但是，在根据浏览器目前的加载网页资源的方式来看，浏览器需要花费较长的时间才能显示出网页的首屏页面，这降低了首屏页面的展现效率。
因此现在需要一种网页加载方式，来提高网页首屏页面的展现效率。
发明内容
本申请提供了一种网页加载方法、装置及系统，使用本申请可以能够提高网页的首屏展现效率。
为了实现上述目的，本申请采用以下技术手段：
一种网页加载方法，包括：
加载由服务器发送的网页资源；其中，所述网页资源包括头部资源、主体资源和尾部资源，所述主体资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；
在所述网页资源中加载到每个模块资源时，在所述每个模块资源中提取运行JS文件所需的JS资源，并将所述JS资源注册到预先建立的函数运行池中；
在确定所述主体资源加载完成后，将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中。
优选的，所述确定所述主体资源加载完成，包括：
在所述主体资源加载完成后，触发一个加载完成事件；
在检测到所述加载完成事件后，确定所述主体资源加载完成。
优选的，在将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中之后，还包括：
清空所述函数运行池。
优选的，在所述加载由服务器发送的网页资源之前，还包括：
接收用户输入的网页地址；其中，所述网页地址与所述网页资源对应；
向所述服务器发送所述网页地址。
一种网页加载方法，包括：
接收浏览器发送的网页地址；
计算所述网页地址所需的网页资源；所述网页资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；
将所述网页资源发送至所述浏览器。
一种网页加载装置，包括：
加载单元，用于加载由服务器发送的网页资源；其中，所述网页资源包括头部资源、主体资源和尾部资源，所述主体资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；
注册单元，用于在所述网页资源中加载到每个模块资源时，在所述每个模块资源中提取运行JS文件所需的JS资源，并将所述JS资源注册到预先建立的函数运行池中；
确定单元，用于确定所述主体资源加载完成；
注入单元，用于在所述主体资源加载完成后，将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中。
优选的，所述确定单元具体用于：
在所述主体资源加载完成后，触发一个加载完成事件；在检测到所述加载完成事件后，确定所述主体资源加载完成。
优选的，还包括：
清空单元，用于在将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中之后，清空所述函数运行池。
优选的，还包括：
第一接收单元，用于接收用户输入的网页地址；其中，所述网页地址与所述网页资源对应；
第一发送单元，用于向所述服务器发送所述网页地址。
一种网页加载装置，包括：
第二接收单元，用于接收浏览器发送的网页地址；
计算单元，用于计算所述网页地址所需的网页资源；所述网页资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；
第二发送单元，用于将所述网页资源发送至所述浏览器。
一种网页加载系统，包括：
浏览器和服务器；
其中，所述浏览器，用于加载由服务器发送的网页资源；其中，所述网页资源包括头部资源、主体资源和尾部资源，所述主体资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；在所述网页资源中加载到每个模块资源时，在所述每个模块资源中提取运行JS文件所需的JS资源，并将所述JS资源注册到预先建立的函数运行池中；在确定所述主体资源加载完成后，将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中；
所述服务器，用于接收浏览器发送的网页地址；计算所述网页地址所需的网页资源；所述网页资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；将所述网页资源发送至所述浏览器。由以上内容可以看出，本申请具有以下有益效果：
本申请将原本设置每个模块资源内部的JS文件，改为设置在网页资源的主体资源之后。由于网页资源采用由上至下的加载方式，所以，浏览器在加载网页资源的过程为，先加载头部资源，再加载主体资源，在主体资源加载完成之后，再运行每个模块内部的JS文件，最后加载尾部资源。
由于主体资源包含首屏页面的主要显示内容，因此在主体资源加载完毕之后，即可显示出网页的首屏页面。然后，浏览器在再加载各个模块资源的JS文件，以完善各个模块的具体功能。
即，本申请将原本在加载主体资源过程中需要执行的业务逻辑，设置在主体资源加载完成之后再执行；即提前执行主体资源显示首屏页面的程序，延后执行各个模块运行JS文件的程序，所以本申请可以提高首屏页面展现效率。并且，本申请没有增加额外的资源请求开销，便可加速首屏页面的展现，从而可以提高网页性能。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本申请实施例公开的一种网页加载系统的结构示意图；
图2为本申请实施例公开的一种网页加载方法的流程图；
图3为本申请实施例公开的又一种网页加载方法的流程图；
图4为现有技术中主体资源的示意图；
图5为本申请实施例公开的一种网页加载方法中主体资源的示意图；
图6为本申请实施例公开的一种网页加载方法中主体资源的示意图；
图7为本申请实施例公开的一种网页加载装置的结构图；
图8为本申请实施例公开的又一种网页加载装置的结构图；
图9为本申请实施例公开的又一种网页加载装置的结构图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
在介绍本申请的具体实施例之前，首先介绍网页的相关情况：
一个网页分可以为三个部分：头部、主体和尾部。服务器在获得网页地址后，可以在数据库中查询与网页地址对应的网页资源，即头部资源、主体资源和尾部资源。其中，头部资源主要作用为显示公司或网站标志性的内容，比如，企业LOGO、企业名称等信息；尾部资源主要作用为显示企业的联系方式、ICP备案等信息；主体资源的主要作用为显示网页的主要内容。
由于主体资源的作用为显示网页的主要内容，所以，在网页资源中主体资源占有重要作用。在浏览器加载网页资源的过程中，如果主体资源加载完成，则一个网页的大体内容则显示完成。
为了提高技术人员开发网页的效率，在网页的主体一般有多个模块，每个模块均有自己的模块资源。每个模块资源主要包括有独立功能模板、CSS文件以及JS文件。其中，本申请所指的CSS文件是模块中以.css为后缀的文件；JS文件是以.js后缀的文件。
在每个模块中的CSS(Cascading Style Sheet，层叠样式表单)文件，主要用来定义一个HTML或一类HTML标记的显示样式。JS文件为用javascript脚本语言编写的、用于执行模块主要功能的软件程序。例如，一个超链接字符串；在实现这个超链接字符串的过程中，CSS文件主要显示字符串的字体(宋体、楷体或仿宋体等)，JS文件的作用为字符串添加超链接。
如图1所示，本申请提供了一种网页加载系统，所述系统包括：
服务器100和浏览器200；服务器100和浏览器200之间采用无线方式通信。
浏览器200即为安装在终端上实现上网冲浪的客户端，用户可以使用浏览器200查询自己所需的信息。用户可以在浏览器200的地址栏中输入网页地址，以便浏览器200将该网页地址发送至服务器100，请求获取该网页地址对应的网页资源。
服务器100可以接收浏览器200发送的网页地址，并抓取该网页地址对应的网页资源，并将网页资源发送至浏览器200，以供浏览器200加载网页资源，从而可以显示网页资源至用户。
如图2所示，本申请提供了一种网页加载方法，应用于图1所示的服务器。所述方法包括以下步骤：
步骤S201：接收浏览器发送的网页地址。
服务器实时接收浏览器发送的网页地址，网页地址可以表示用户希望获取的网页资源。例如，用户输入www.taobao.com，则表示用户现在希望查看淘宝网的首屏页面。
步骤S202：计算所述网页地址所需的网页资源；所述网页资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后。
网页资源中可以包含有多个模块资源，各个模块资源的JS文件会阻碍首屏页面的渲染。为了解决这个问题，服务器在构建网页资源时，在确定主体资源之后，将主体资源中每个模块资源的JS文件提取出来，放置在主体资源之后；以便浏览器在加载网页资源时，可以先加载主体资源，在主体资源加载完成之后，再加载每个模块资源的JS文件。
步骤S203：将所述网页资源发送至所述浏览器。
服务器将按步骤S202计算得到的网页资源发送至浏览器，供浏览器进行加载并显示至用户。
图2所示的实施例为服务器端执行的过程，下面介绍浏览器端执行的过程。如图3所示，本申请提供一种网页加载方法，应用于图1所示的浏览器。所述方法具体包括以下步骤：
步骤S301：加载由服务器发送的网页资源；其中，所述网页资源包括头部资源、主体资源和尾部资源，所述主体资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后。
浏览器可以接收服务器发送的网页资源，网页资源的主体资源中除了与模块对应的模块资源之外还有其它资源；模块资源穿插在其它资源中间，所有资源均按照由上至下的方式排列。并且，各个模块资源的JS文件，设置在主体资源之后。
浏览器在加载网页资源时，采用由上至下的加载方式。即，先加载头部资源、再加载主体资源、再加载排列在主体资源之后的各个模块资源的JS文件，最后加载尾部资源。被加载资源可以显示在网页上，未被加载的资源在网页上显示空白网页。
以主体资源为例，如图4所示，主体资源包括：模块资源A、模块资源B和模块资源C，其它资源包括资源1、资源2和资源3；模块资源A、模块资源B和模块资源C的JS文件分别为JS文件A、JS文件B和JS文件C。由于主体资源中资源1排列靠前，则首先加载资源1，资源1在加载完成后，则会显示在网页上。其它未加载的内容，则未显示在网页上。
在浏览器加载主体资源的过程中，当浏览器加载到模块资源时则执行步骤S302。在步骤S302执行完毕之后，继续按顺序加载未加载的资源，直到主体资源被加载完毕为止，然后进入步骤S303。
例如，沿用上述举例，浏览器在加载资源1之后，则会加载模块A，此时则执行步骤S302的相关内容。在步骤S302执行完毕之后，继续加载资源2，在网页上显示资源2对应的内容。资源2下方为模块资源B，则重复执行步骤S302，在步骤S302执行结束之后，继续加载模块资源C，重复执行步骤S302；最后加载资源3从而完成主体资源的加载，进入步骤S303。
步骤S302：在所述网页资源中加载到每个模块资源时，在所述每个模块资源中提取运行JS文件所需的JS资源，并将所述JS资源注册到预先建立的函数运行池中。
本步骤针对每个模块的执行过程均为一致的，所以仅对一个模块的执行过程进行详细说明，其它模块的执行过程不再赘述。
每个模块对应的模块资源可以分为两部分：一部分资源为后续运行JS文件所需的资源，这部分资源可以称为JS资源；一部分为运行JS文件不需要使用的资源，这部分资源称为其它资源。
由于每个模块资源的JS文件设置在主体资源之后，所以在加载主体资源时，不执行各个模块资源的JS文件。但是，运行各个模块JS文件还是存储在各个模块对应的模块资源中。为了在主体资源加载完毕之后，可以运行模块资源的JS文件；所以，在浏览器加载到模块时，在模块对应的模块资源中提取运行JS文件所需要的JS资源；并将JS资源注册到预先建立的函数运行池中。其中，函数运行池为浏览器预先建立的，该函数运行池可以是对象、数组等各种可以存储函数变量的数据结构。
例如，在浏览器加载到需要运行的模块时，该模块向函数运行池中注册该模块需要运行的函数名、参数、上下文等。比如，网页中有模块A和模块B两个模块。当浏览器加载到模块A和模块B时，该模块A和模块B依照网页加载的顺序依次提取JS参数，JS参数可以为JS文件的函数名称、参数、上下文和其他参数等。
JS文件函数名 参数 上下文 其他参数
functionA paramsA contextA otherA
functionB paramsB contextB otherB
由于每个模块均需要本步骤，所以，在加载网页资源的过程中，每个模块的JS资源均被注册到函数运行池中，从而使得函数运行池包括每个模块的JS资源。
由于模块的JS资源已注册到函数运行池中，加载该模块时，不需要运行JS资源，仅需加载该模块对应模块资源中的其它资源(运行JS文件不需要的资源)。这部分资源可以是CSS文件对应的资源，在加载CSS文件对应资源之后，可以显示出模块的界面，但是具体功能无法使用，需等待运行JS文件的JS资源之后，才能够完善模块的功能。
例如，一个超链接字符串；在实现这个超链接字符串的过程中，CSS文件主要显示字符串的字体(宋体、楷体或仿宋体等)，JS文件的作用为字符串添加超链接。如果仅运行CSS文件，则仅显示规定字体的字符串，而字符串还不具有超链接功能。即本申请的技术效果为先显示出字符串，以便让用户看到有一个直观感受，再为字符串添加超链接，以完善字符串的具体功能。
步骤S303：在确定所述主体资源加载完成后，将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中。
在所述主体资源加载完成后，触发一个加载完成事件；当浏览器检测到所述加载完成事件后，确定所述主体资源加载完成。如果检测到主体资源加载完毕，则说明首屏页面已经展现完毕。此时可以将函数运行池中每个模块的JS资源，注入到每个JS文件中，那么每个JS文件则可以加载已注入的模块资源。
即，向真正的JS文件注入JS资源，使原本应当在网页中间执行的业务逻辑，在首屏页面加载完毕之后再执行。此时，运行各个模块资源的JS文件时，虽然依旧会阻塞浏览器的渲染，但是由于网页的首屏页面(即网页的主要可见内容)已经渲染完毕，所以，可以方便用户对网页整体内容的感知。而JS文件延后执行，即完善模块具体功能的操作(执行人机交互操作的功能)延后执行；从而可以提高首屏页面的展现效率。
本申请在浏览器加载到模块时，为了保证首屏页面的展现效率，暂时不执行模块内部的JS文件。而是，将运行JS文件所需的模块资源注册到预先建立的函数运行池中，以便在主体资源加载完毕之后，再统一运行各个模块资源的JS文件。
换言之，本申请将原本在加载主体资源过程中执行的程序，延后到主体资源加载完毕之后再执行。将主体资源中原本在模块资源之后运行的资源，提前到模块资源的JS文件之前运行。由于主体资源包含网页的主要显示内容，在主体资源加载完毕之后，网页的首屏页面也就展现完毕。本申请由于延后模块资源的JS文件的加载过程，提前主体资源的加载过程，所以本申请可以提高网页的首屏展现效率。
可以理解的是，在函数运行池中的JS资源被JS模块加载完毕之后，可以清空函数运行池，以便保证之前加载过的模块资源不被重复运行。
从以上内容可以看出本申请具有以下有益效果：
本申请将原本设置每个模块资源内部的JS文件，改为设置在网页资源的主体资源之后。由于网页资源采用由上至下的加载方式，所以，浏览器在加载网页资源的过程为，先加载头部资源，再加载主体资源，在主体资源加载完成之后，再运行每个模块内部的JS文件，最后加载尾部资源。
由于主体资源包含首屏页面的主要显示内容，因此在主体资源加载完毕之后，即可显示出网页的首屏页面。然后，浏览器在再加载各个模块资源的JS文件，以完善各个模块的具体功能。
即，本申请将原本在加载主体资源过程中需要执行的业务逻辑，设置在主体资源加载完成之后再执行；即提前执行主体资源显示首屏页面的程序，延后执行各个模块运行JS文件的程序，所以本申请可以提高首屏页面展现效率。并且，本申请没有增加额外的资源请求开销，便可加速首屏页面的展现，从而可以提高网页性能。
为了更加清楚表示本申请和现有技术的区别，下面介绍现有技术和本申请中网页资源的示意图。以主体资源中包括模块资源A和模块资源B为例，参见图5为目前主体资源的示意图，从图示中可以看出主体资源包含一个公共CSS文件、框架JS文件以及模块资源A和模块资源B。
以模块资源A为例，模块资源A中包含模块资源A自身的CSS文件A、JS文件A、模块资源1(运行JS文件所不需要的其它资源)以及JS资源A(运行JS文件所需要的资源)。模块资源B的构造与模块资源A一样，在此不再赘述。在图5所示的实施例中，开发人员仅需要关注模块资源A和模块资源B即可，从而可以提高开发效率。
如图6所示，为本申请中主体资源的示意图。从图示中可以看出主体资源包含一个公共CSS文件、框架JS文件以及模块资源A和模块资源B。模块资源A和模块资源B中的JS文件A和JS文件B设置在主体资源之后，以便可以在执行完成主体资源之后，再运行模块资源A的JS文件A和模块资源B的JS文件B。
从图5和图6可以看出：本申请将原本设置于模块资源内部的JS文件放置于主体资源之后，从而实现提高首屏页面展现效率的目的。
与图2所示的实施例相对应，如图7所示，本申请提供一种网页加载装置，包括：
第二接收单元71，用于接收浏览器发送的网页地址；
计算单元72，用于计算所述网页地址所需的网页资源；所述网页资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；
第二发送单元73，用于将所述网页资源发送至所述浏览器。
与图3所示的实施例相对应，如图8所示，本申请提供一种网页加载装置，包括：
加载单元81，用于加载由服务器发送的网页资源；其中，所述网页资源包括头部资源、主体资源和尾部资源，所述主体资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；
注册单元82，用于在所述网页资源中加载到每个模块资源时，在所述模块资源中提取运行JS文件所需的JS资源，并将所述JS资源注册到预先建立的函数运行池中；
确定单元83，用于在确定所述主体资源加载完成；
其中，所述确定单元83具体用于：在所述主体资源加载完成后，触发一个加载完成事件；在检测到所述加载完成事件后，确定所述主体资源加载完成。
注入单元84，用于在所述主体资源加载完成后，将所述函数运行池中每个模块的JS资源注入到与之对应的JS文件中。
如图9所示，本申请提供网页加载装置，还包括：
清空单元91，用于在将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中之后，清空所述函数运行池。
第一接收单元92，用于接收用户输入的网页地址；其中，所述网页地址与所述网页资源对应；
第一发送单元93，用于向所述服务器发送所述网页地址。
从以上内容可以看出本申请具有以下有益效果：
本申请应用于浏览器加载具有模块的网页资源的过程，在模块资源中JS文件的运行效率较慢，所以本申请将原本设置每个模块内部的JS文件，改为设置在网页资源的主体资源之后。由于网页资源采用由上至下的加载方式，所以，浏览器在加载网页资源的过程为，在主体资源加载完成之后，再运行每个模块内部的JS文件。在网页中主体资源对应网页的首屏页面；所以本申请可以达到的技术效果为：在显示网页的首屏页面之后(在主体资源加载完成之后)，再运行各个模块资源的JS文件(完善各个模块的具体功能)。
本申请将原本在加载主体资源过程中需要执行的业务逻辑，设置在主体资源加载完成之后再执行；即提前执行主体资源显示首屏页面的程序，延后执行各个模块运行JS文件的程序，所以本申请可以提高首屏页面展现效率。并且，本申请没有增加额外的资源请求开销，便可加速首屏页面展现，从而可以提高网页性能。
参见图1，本申请还提供了一种网页加载系统，包括：
浏览器200和服务器100；
其中，所述浏览器200，用于加载由服务器100发送的网页资源；其中，所述网页资源包括头部资源、主体资源和尾部资源，所述主体资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；在所述网页资源中加载到每个模块资源时，在所述每个模块资源中提取运行JS文件所需的JS资源，并将所述JS资源注册到预先建立的函数运行池中；在确定所述主体资源加载完成后，将所述函数运行池中每个模块的JS资源注入到与之对应的JS文件中。
所述服务器100，用于接收浏览器200发送的网页地址；计算所述网页地址所需的网页资源；所述网页资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；将所述网页资源发送至所述浏览器200。
本实施例方法所述的功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算设备可读取存储介质中。基于这样的理解，本申请实施例对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该软件产品存储在一个存储介质中，包括若干指令用以使得一台计算设备(可以是个人计算机，服务器，移动计算设备或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。
本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。
对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (11)

1.一种网页加载方法，其特征在于，包括：
加载由服务器发送的网页资源；其中，所述网页资源包括头部资源、主体资源和尾部资源，所述主体资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；
在所述网页资源中加载到每个模块资源时，在所述每个模块资源中提取运行JS文件所需的JS资源，并将所述JS资源注册到预先建立的函数运行池中；
在确定所述主体资源加载完成后，将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中。
2.如权利要求1所述的方法，其特征在于，所述确定所述主体资源加载完成，包括：
在所述主体资源加载完成后，触发一个加载完成事件；
在检测到所述加载完成事件后，确定所述主体资源加载完成。
3.如权利要求1所述的方法，其特征在于，在将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中之后，还包括：
清空所述函数运行池。
4.如权利要求1所述的方法，其特征在于，在所述加载由服务器发送的网页资源之前，还包括：
接收用户输入的网页地址；其中，所述网页地址与所述网页资源对应；
向所述服务器发送所述网页地址。
5.一种网页加载方法，其特征在于，包括：
接收浏览器发送的网页地址；
计算所述网页地址所需的网页资源；所述网页资源包括至少一个模块资源，在确定主体资源之后，将所述主体资源中模块资源的JS文件提取出来，放置在所述主体资源之后，以使所述网页资源中的每个模块资源的JS文件均设置于所述主体资源之后；
将计算得到的网页资源发送至所述浏览器。
6.一种网页加载装置，其特征在于，包括：
加载单元，用于加载由服务器发送的网页资源；其中，所述网页资源包括头部资源、主体资源和尾部资源，所述主体资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；
注册单元，用于在所述网页资源中加载到每个模块资源时，在所述每个模块资源中提取运行JS文件所需的JS资源，并将所述JS资源注册到预先建立的函数运行池中；
确定单元，用于确定所述主体资源加载完成；
注入单元，用于在所述主体资源加载完成后，将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中。
7.如权利要求6所述的装置，其特征在于，所述确定单元具体用于：
在所述主体资源加载完成后，触发一个加载完成事件；在检测到所述加载完成事件后，确定所述主体资源加载完成。
8.如权利要求6所述的装置，其特征在于，还包括：
清空单元，用于在将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中之后，清空所述函数运行池。
9.如权利要求6所述的装置，其特征在于，还包括：
第一接收单元，用于接收用户输入的网页地址；其中，所述网页地址与所述网页资源对应；
第一发送单元，用于向所述服务器发送所述网页地址。
10.一种网页加载装置，其特征在于，包括：
第二接收单元，用于接收浏览器发送的网页地址；
计算单元，用于计算所述网页地址所需的网页资源；所述网页资源包括至少一个模块资源，在确定主体资源之后，将所述主体资源中模块资源的JS文件提取出来，放置在所述主体资源之后，以使所述网页资源中的每个模块资源的JS文件均设置于所述主体资源之后；
第二发送单元，用于将计算得到的网页资源发送至所述浏览器。
11.一种网页加载系统，其特征在于，包括：
浏览器和服务器；
其中，所述浏览器，用于加载由服务器发送的网页资源；其中，所述网页资源包括头部资源、主体资源和尾部资源，所述主体资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；在所述网页资源中加载到每个模块资源时，在所述每个模块资源中提取运行JS文件所需的JS资源，并将所述JS资源注册到预先建立的函数运行池中；在确定所述主体资源加载完成后，将所述函数运行池中每个模块资源的JS资源注入到与之对应的JS文件中；
所述服务器，用于接收浏览器发送的网页地址；计算所述网页地址所需的网页资源；所述网页资源包括至少一个模块资源，并且，每个模块资源的JS文件均设置于所述主体资源之后；将所述网页资源发送至所述浏览器。
CN201510608661.7A 2015-09-22 2015-09-22 网页加载方法、装置及系统 Active CN105045645B (zh)

Priority Applications (3)

Application Number Priority Date Filing Date Title
CN201510608661.7A CN105045645B (zh) 2015-09-22 2015-09-22 网页加载方法、装置及系统
CN201610836641.XA CN106354873B (zh) 2015-09-22 2015-09-22 网页加载方法、装置及系统
US15/272,039 US10749927B2 (en) 2015-09-22 2016-09-21 Webpage loading method, apparatus and system

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201510608661.7A CN105045645B (zh) 2015-09-22 2015-09-22 网页加载方法、装置及系统

Related Child Applications (1)

Application Number Title Priority Date Filing Date
CN201610836641.XA Division CN106354873B (zh) 2015-09-22 2015-09-22 网页加载方法、装置及系统

Publications (2)

Publication Number Publication Date
CN105045645A CN105045645A (zh) 2015-11-11
CN105045645B true CN105045645B (zh) 2016-08-17

Family

ID=54452209

Family Applications (2)

Application Number Title Priority Date Filing Date
CN201510608661.7A Active CN105045645B (zh) 2015-09-22 2015-09-22 网页加载方法、装置及系统
CN201610836641.XA Active CN106354873B (zh) 2015-09-22 2015-09-22 网页加载方法、装置及系统

Family Applications After (1)

Application Number Title Priority Date Filing Date
CN201610836641.XA Active CN106354873B (zh) 2015-09-22 2015-09-22 网页加载方法、装置及系统

Country Status (2)

Country Link
US (1) US10749927B2 (zh)
CN (2) CN105045645B (zh)

Families Citing this family (13)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105045645B (zh) 2015-09-22 2016-08-17 广州神马移动信息科技有限公司 网页加载方法、装置及系统
CN105488175B (zh) * 2015-12-01 2019-02-12 福建天晴数码有限公司 一种提高页面内容显示速度的方法及系统
CN105608152A (zh) * 2015-12-17 2016-05-25 无锡天脉聚源传媒科技有限公司 一种网页资源异步加载的方法及装置
CN106445809B (zh) * 2016-08-30 2019-04-05 北京华恒铭圣科技发展有限责任公司 一种获取网页加载首屏时延方法
CN108345473A (zh) * 2017-01-24 2018-07-31 阿里巴巴集团控股有限公司 一种应用程序的网页加载的方法、装置及电子设备
CN109144599B (zh) * 2017-06-27 2021-09-24 上海木鸡网络科技有限公司 函数加载方法及装置、计算机可读存储介质、终端
CN109145236A (zh) * 2017-06-28 2019-01-04 艺龙网信息技术（北京）有限公司 页面文件处理方法、装置及系统
CN107291941A (zh) * 2017-07-10 2017-10-24 郑州云海信息技术有限公司 一种加载页面的方法和装置
CN108108442A (zh) * 2017-12-21 2018-06-01 电子科技大学 一种优化网页浏览的方法
CN108804514A (zh) * 2018-04-25 2018-11-13 网宿科技股份有限公司 一种网页加载方法、服务器和网页加载系统
CN108920653A (zh) * 2018-07-03 2018-11-30 武汉斗鱼网络科技有限公司 一种页面生成方法、装置、服务器及存储介质
CN110020325B (zh) * 2018-08-17 2023-04-11 深圳壹账通智能科技有限公司 页面加载方法、装置、设备及可读存储介质
CN110347446B (zh) * 2019-07-16 2022-11-25 创新先进技术有限公司 一种页面资源加载方法及系统

Family Cites Families (15)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20030163372A1 (en) * 2001-12-07 2003-08-28 Kolsy Mohammed H. Delivering content and advertisement
US8806327B2 (en) * 2005-08-15 2014-08-12 Iii Holdings 1, Llc System and method for displaying unrequested information within a web browser
US9104775B2 (en) * 2007-10-16 2015-08-11 Yahoo! Inc. Method for presenting a web page
US9477497B2 (en) * 2008-09-26 2016-10-25 Juniper Networks, Inc. Methods for determining resource dependency and systems thereof
CN102487403B (zh) * 2010-12-03 2014-06-11 腾讯科技（深圳）有限公司 由服务器端执行js的方法和装置
US8516360B2 (en) * 2011-08-24 2013-08-20 Qualcomm Innovation Center, Inc. Controlled parallel compilation and execution of JavaScripts
CN102693280B (zh) * 2012-04-28 2014-08-13 广州市动景计算机科技有限公司 网页浏览方法、WebApp框架、执行JavaScript方法及装置、移动终端
US9323829B2 (en) * 2013-03-13 2016-04-26 The Institute Of Electrical And Electronics Engineers, Incorporated Identification of concepts and associated processing
CN104102643B (zh) * 2013-04-03 2017-09-22 阿里巴巴集团控股有限公司 一种进行页面快照的方法和装置
US8990357B2 (en) * 2013-07-29 2015-03-24 Cloudflare, Inc. Method and apparatus for reducing loading time of web pages
CN104978176B (zh) * 2014-04-10 2019-03-08 腾讯科技（北京）有限公司 应用程序接口调用方法、装置及计算机可读存储介质
CN104239441A (zh) * 2014-09-01 2014-12-24 可牛网络技术（北京）有限公司 网页加载控制方法和装置
CN104484383B (zh) * 2014-12-10 2017-11-14 北京国双科技有限公司 Js文件处理方法和装置
CN105786924B (zh) * 2014-12-25 2020-03-31 广州市动景计算机科技有限公司 网页夜间模式处理方法、装置及移动终端
CN105045645B (zh) 2015-09-22 2016-08-17 广州神马移动信息科技有限公司 网页加载方法、装置及系统

Also Published As

Publication number Publication date
CN105045645A (zh) 2015-11-11
US20170085676A1 (en) 2017-03-23
CN106354873B (zh) 2019-12-20
US10749927B2 (en) 2020-08-18
CN106354873A (zh) 2017-01-25

Similar Documents

Publication Publication Date Title
CN105045645B (zh) 网页加载方法、装置及系统
CN107729475B (zh) 网页元素采集方法、装置、终端与计算机可读存储介质
CN107992458B (zh) 表格规则的生成方法和装置、存储介质以及电子设备
WO2018102764A1 (en) Page information personalization method, apparatus and system
CN108595583A (zh) 动态图表类页面数据爬取方法、装置、终端及存储介质
CN109254773A (zh) 骨架页面生成方法、装置、设备和存储介质
CN104408204A (zh) 网页页面链接地址的获取方法和装置
CN102411614A (zh) 图像搜索结果的显示
WO2015094825A1 (en) Section based reorganization of document components
CN109445775B (zh) 一键活动内嵌代码方法、装置及计算机可读存储介质
US11030385B2 (en) Enhanced preview technology for application add-ins
CN106897251A (zh) 富文本展示方法及装置
CN109740041B (zh) 网页爬取方法、装置、存储介质和计算机设备
CN106897053A (zh) 一种代码发布方法与装置
CN103377039B (zh) 一种网页游戏开发、解析方法、一种编辑器以及解析装置
US10255249B1 (en) Previewing electronic book content within third-party websites
CN102163203A (zh) 网页下载的方法和装置
CN105630524A (zh) 网页文本解析方法、装置和移动终端
CN105912311A (zh) 直观提示支付金额的方法及装置
US8839251B2 (en) Automating sequential cross-application data transfer operations
CN106202100A (zh) 页面的加载方法及装置
CN102870118A (zh) 用户行为的获取方法、设备及系统
CN108304190A (zh) 网络店铺生成方法及装置
US10545640B1 (en) Previewing electronic content within third-party websites
US20170255475A1 (en) Automatic execution of objects in a user interface

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C10 Entry into substantive examination
SE01 Entry into force of request for substantive examination
C14 Grant of patent or utility model
GR01 Patent grant
TR01 Transfer of patent right

Effective date of registration: 20200608

Address after: 310052 room 508, floor 5, building 4, No. 699, Wangshang Road, Changhe street, Binjiang District, Hangzhou City, Zhejiang Province

Patentee after: Alibaba (China) Co.,Ltd.

Address before: 510627 Guangdong city of Guangzhou province Whampoa Tianhe District Road No. 163 Xiping Yun Lu Yun Ping square B radio tower 12 layer self unit 01

Patentee before: GUANGZHOU SHENMA MOBILE INFORMATION TECHNOLOGY Co.,Ltd.

TR01 Transfer of patent right