CN112214703A - 网页加载方法、装置、计算机可读存储介质和计算机设备 - Google Patents
网页加载方法、装置、计算机可读存储介质和计算机设备 Download PDFInfo
- Publication number
- CN112214703A CN112214703A CN201910619693.5A CN201910619693A CN112214703A CN 112214703 A CN112214703 A CN 112214703A CN 201910619693 A CN201910619693 A CN 201910619693A CN 112214703 A CN112214703 A CN 112214703A
- Authority
- CN
- China
- Prior art keywords
- browser
- characteristic
- webpage
- missing
- script
- 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.)
- Granted
Links
- 238000011068 loading method Methods 0.000 title claims abstract description 110
- 238000013515 script Methods 0.000 claims abstract description 162
- 238000001514 detection method Methods 0.000 claims abstract description 124
- 230000008439 repair process Effects 0.000 claims abstract description 53
- 238000000034 method Methods 0.000 claims abstract description 51
- 238000004590 computer program Methods 0.000 claims description 13
- 239000002699 waste material Substances 0.000 abstract description 12
- 230000008569 process Effects 0.000 description 9
- 239000003795 chemical substances by application Substances 0.000 description 7
- 238000010586 diagram Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 5
- 230000007547 defect Effects 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 4
- 238000007796 conventional method Methods 0.000 description 3
- 230000000903 blocking effect Effects 0.000 description 2
- 230000001934 delay Effects 0.000 description 2
- 238000011161 development Methods 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 230000007812 deficiency Effects 0.000 description 1
- 238000012217 deletion Methods 0.000 description 1
- 230000037430 deletion Effects 0.000 description 1
- 238000002347 injection Methods 0.000 description 1
- 239000007924 injection Substances 0.000 description 1
- 238000012966 insertion method Methods 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 239000000243 solution Substances 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 239000000126 substance Substances 0.000 description 1
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
- G06F16/972—Access to data in other repository systems, e.g. legacy data or dynamic Web page generation
-
- 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
- G06F16/986—Document structures and storage, e.g. HTML extensions
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
本申请涉及一种网页加载方法、装置、计算机可读存储介质和计算机设备,该方法包括:当通过浏览器加载网页时,在本地对浏览器进行特性检测,根据检测结果中浏览器缺失的特性,从服务器上获取支持缺失的特性的特性修补脚本文件。加载特性修补脚本文件,以使浏览器正常加载网页。本申请在本地对浏览器进行特性检测,检测出浏览器加载该网页所缺失的特性,根据所缺失的特性针对性地从服务器上对应获取特性修补脚本文件即可。然后,先加载特性修补脚本文件对浏览器的缺失特性进行修补,保证了修补后的浏览器能够正常加载该网页。对于部分不存在缺失特性或只缺少部分特性的浏览器,不会加载多余的文件,从而避免了流量的浪费和无谓的等待延迟。
Description
技术领域
本申请涉及计算机技术领域,特别是涉及一种网页加载方法、装置、计算机可读存储介质和计算机设备。
背景技术
随着计算机的普及和互联网技术的迅速发展,用户越来越多地通过上网来获取信息。例如,通过浏览器来打开网页进行上网以获取信息。然而不同厂家的浏览器对于javascript的语法特性支持程度不一,因此导致同一个网页可能在某些浏览器中不能正常运行、甚至出现白屏的情况。因此,亟需提出一种新的网页加载方法,避免网页加载过程中出现故障,保障网页的正常访问。
发明内容
基于此,有必要针对传统的网页加载方法经常出现故障、不能保障网页的正常访问的技术问题,提供一种网页加载方法、装置、计算机可读存储介质和计算机设备。
一种网页加载方法,包括:
当通过浏览器加载网页时,在本地对所述浏览器进行特性检测得到检测结果;
根据所述检测结果中所述浏览器缺失的特性,从服务器上获取支持所述缺失的特性的特性修补脚本文件;
加载所述特性修补脚本文件,以使所述浏览器正常加载所述网页。
一种网页加载装置,所述装置包括:
特性检测模块,用于当通过浏览器加载网页时,在本地对所述浏览器进行特性检测得到检测结果;
特性修补脚本文件获取模块,用于根据所述检测结果中所述浏览器缺失的特性,从服务器上获取支持所述缺失的特性所对应的特性修补脚本文件;
网页加载模块,用于加载所述特性修补脚本文件以使所述浏览器正常加载所述网页。
一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时,使得所述处理器执行如上所述方法的步骤。
一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如上所述方法的步骤。
上述网页加载方法、装置、计算机可读存储介质和计算机设备,当通过浏览器加载网页时,在本地对浏览器进行特性检测得到检测结果,根据检测结果中浏览器缺失的特性,从服务器上获取支持缺失的特性的特性修补脚本文件。加载特性修补脚本文件,以使浏览器正常加载网页。传统的方法,不会在本地对浏览器进行特性检测,因此当通过浏览器加载网页时,不管本地的浏览器是否缺失某一特性,都会下载全部的特性修补脚本文件来对浏览器的缺失特性进行修补。显然,对于部分不存在缺失特性或只缺少部分特性的浏览器,加载了多余的文件,造成了流量的浪费和无谓的等待延迟。本申请对于在本地对浏览器进行特性检测,检测出浏览器加载该网页所缺失的特性,根据所缺失的特性针对性地从服务器上对应获取支持缺失的特性的特性修补脚本文件即可。然后,先加载特性修补脚本文件对浏览器的缺失特性进行修补,从而保证了修补后的浏览器能够正常加载该网页。对于部分不存在缺失特性或只缺少部分特性的浏览器,不会加载多余的文件,从而避免了流量的浪费和无谓的等待延迟。
附图说明
图1为一个实施例中网页加载方法的应用环境图;
图2为一个实施例中网页加载方法的流程示意图;
图3为另一个实施例中网页加载方法的流程示意图;
图4为再一个实施例中网页加载方法的流程示意图;
图5为图2中根据所述检测结果中所述浏览器缺失的特性,从服务器上获取支持所述缺失的特性的特性修补脚本文件方法的流程示意图;
图6为一个具体的实施例中网页加载方法的流程示意图;
图7为一个实施例中网页加载装置的结构框图;
图8为另一个实施例中网页加载装置的结构框图;
图9为一个实施例中计算机设备的结构框图。
具体实施方式
为了使本申请的目的、技术方案及优点更加清楚明白,以下结合附图及实施例,对本申请进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本申请,并不用于限定本申请。
图1为一个实施例中网页加载方法的应用环境图。参照图1,该网页加载方法应用于网页加载***。该网页加载***包括终端110和服务器120。终端110和服务器120通过网络连接。终端110具体可以是台式终端或移动终端,移动终端具体可以是手机、平板电脑、笔记本电脑等中的至少一种。服务器120可以用独立的服务器或者是多个服务器组成的服务器集群来实现。该网页加载方法包括:当通过浏览器加载网页时,在本地对浏览器进行特性检测得到检测结果。根据检测结果中浏览器缺失的特性,从服务器上获取支持缺失的特性的特性修补脚本文件。加载特性修补脚本文件,以使浏览器正常加载网页。
JavaScript脚本代码可以简称为JS脚本代码,JS脚本代码只有在支持这些新语言特性和浏览器接口的浏览器中才能够运行,否则需要在JS脚本代码中加入支持这些新语言特性和浏览器接口的兼容列表转化的兼容代码才能够运行。这些兼容代码可以称之为修补文件或补丁文件,即Polyfill文件。Polyfill文件指的是补丁或兼容插件,Polyfill文件可以对浏览器的缺失特性进行修补,从而使得修补后的浏览器可以正常加载该网页。
如图2所示,在一个实施例中,提供了一种网页加载方法。本实施例主要以该方法应用于上述图1中的终端110来举例说明,浏览器安装在终端110中。参照图2,该网页加载方法具体包括如下步骤:
S202,当通过浏览器加载网页时,在本地对浏览器进行特性检测得到检测结果。
由于浏览器版本更新周期较长,以及不同的浏览器厂商的实现方式存在不同之处,导致网页开发所采用的JS(JavaScript)的一些新语言特性未能在所有浏览器上实现完整支持。因此,当通过浏览器加载网页时,因为浏览器不支持某一特性而造成浏览器出现白屏的现象,影响用户的正常使用。
因此,当在终端上通过浏览器加载网页时,在本地对浏览器进行特性检测得到检测结果。具体的,由网页的开发者根据网页加载中所需要使用到的特性来确定对浏览器的哪些特性进行检测。主要是在本地对浏览器对于JavaScript的特性的支持程度进行特性检测,得到检测结果。检测结果中包含浏览器支持JavaScript的特性及浏览器不支持JavaScript的特性即缺失特性。
S204,根据检测结果中浏览器缺失的特性,从服务器上获取支持缺失的特性的特性修补脚本文件。
网页的开发者预先在服务器上部署该网页在浏览器中加载所需要使用到的特性修补脚本文件即Polyfill文件。Polyfill文件指的是补丁或兼容插件,Polyfill文件可以对浏览器的缺失特性进行修补,从而使得修补后的浏览器可以正常加载该网页。该服务器可以是CDN(Content Delivery Network,内容分发网络)服务器。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。CDN服务器是多台服务器组成的缓存服务器***,提供对互联网服务器加速的功能。
根据检测结果中浏览器缺失的特性,从CDN服务器上就可以直接获取支持缺失的特性的特性修补脚本文件。
S206,加载特性修补脚本文件,以使浏览器正常加载网页。
在从CDN服务器上就可以直接获取支持缺失的特性的特性修补脚本文件之后,且在浏览器加载网页的业务脚本之前,首先加载特性修补脚本文件(Polyfill文件)对浏览器的缺失特性进行修补,然后再加载网页的业务脚本,从而使得修补后的浏览器可以正常加载该网页。
传统的方法中,在浏览器加载网页时,不管浏览器是否需要Polyfill文件都会自动下载所有的Polyfill文件,将Polyfill合集引入到超文本文件(html文件)中。显然,对于不需要Polyfill文件的浏览器和只需要某些特定的Polyfill文件的浏览器,下载Polyfill文件浪费了流量、延迟了等待时间。
本申请实施例中,对于在本地对浏览器进行特性检测,检测出浏览器加载该网页所缺失的特性,根据所缺失的特性针对性地从服务器上对应获取支持缺失的特性的特性修补脚本文件即可。然后,先加载特性修补脚本文件对浏览器的缺失特性进行修补,从而保证了修补后的浏览器能够正常加载该网页。对于部分不存在缺失特性或只缺少部分特性的浏览器,不会加载多余的文件,从而避免了流量的浪费和无谓的等待延迟。
在一个实施例中,如图3所示,提供了一种网页加载方法,还包括:
预先将用于对浏览器进行特性检测的脚本添加至网页的超文本文件中;
当通过浏览器加载网页时,在本地对浏览器进行特性检测得到检测结果,包括:
当通过浏览器加载网页时,在本地运行超文本文件以加载进行特性检测的脚本,对浏览器进行特性检测得到检测结果。
参考图3所示,为另一种网页加载方法的流程图。提供了另一种网页加载方法,具体包括如下步骤:
步骤S302,预先将用于对浏览器进行特性检测的脚本添加至网页的超文本文件中;
步骤S304,当通过浏览器加载网页时,在本地运行超文本文件以加载进行特性检测的脚本,对浏览器进行特性检测得到检测结果。
步骤S306,根据检测结果中浏览器缺失的特性,从服务器上获取支持缺失的特性的特性修补脚本文件;
步骤S308,加载特性修补脚本文件,以使浏览器正常加载网页。
具体的,网页开发者预先将用于对浏览器进行特性检测的脚本添加至网页的超文本文件(html文件)中,从而当通过浏览器加载网页时,浏览器下载html文件后,首先在本地运行html文件以加载进行特性检测的脚本,对浏览器进行特性检测得到检测结果。进行特性检测的脚本是通过对本地的浏览器的全局对象进行特性检测,得到浏览器的全局对象是否具有某种特定的特性。因为特性检测的脚本是由网页开发者添加至网页的超文本文件(html文件)中,所以网页开发者就可以根据不同的网页加载所需要的不同的特性对特性检测的脚本进行设置,使得添加至某种网页的html文件中的特性检测的脚本只需要检测该网页加载所需要的特性即可,每一种网页的html文件中特性检测脚本所检测的缺失特性都可以是不同的。网页开发人员有针对性地开发特性检测脚本,并将特性检测脚本添加至该网页的html文件,提高了检测效率且节约了资源。
检测结果中包含了两种情况,一种情况是浏览器支持所检测的所有特性,另一种情况是浏览器不支持所检测的部分特性或全部特性,这些不支持的特性即为缺失特性。根据检测结果中浏览器缺失的特性,从服务器上获取支持缺失的特性的特性修补脚本文件。因为服务器上预先存储了该网页的html文件中所添加的特性检测的脚本所检测的所有特性对应的特性修补脚本文件(Polyfill文件),所以就可以根据缺失特性直接获取到Polyfill文件对浏览器进行特性修补。Polyfill文件可以是对浏览器的一种或多种缺失特性进行修补的文件。特性修补的方式可以是通过浏览器加载特性修补脚本文件即可完成对浏览器确实特性的修补,修补之后的浏览器就可以正常加载网页。
本申请实施例中,预先将用于对浏览器进行特性检测的脚本添加至网页的超文本文件中,从而当浏览器加载网页时,在本地就可以完成对浏览器缺失特性的检测,不需要向服务器发出请求获取浏览器的版本等信息,再从版本等信息中确定缺失特性。显然,在本地检测缺失特性的方式,不需要借助于远端的服务器就更加快捷方便,减少了等待服务器返回缺失特性的等待延迟、也减少了流量的浪费。
在一个实施例中,当通过浏览器进行网页加载时,在本地运行超文本文件以加载进行特性检测的脚本,对浏览器进行特性检测得到检测结果,包括:
当通过浏览器加载网页时,在本地运行超文本文件以加载进行特性检测的脚本,检查浏览器的全局对象是否具有预设特性;
若判断结果为不具有预设特性,则得出浏览器缺失预设特性;
若判断结果为具有预设特性,则检测预设特性的调用方式是否正确,若不正确则得出浏览器缺失预设特性;
若正确,则得出浏览器的全局对象具有预设特性。
具体的,是全局对象是预定义的对象,作为JavaScript的全局函数和全局属性的占位符。通过使用全局对象,可以访问所有其他预定义的对象、函数和属性。全局对象不是任何对象的属性,所以全局对象没有名称。这里浏览器的全局对象是window对象。预设特性指的是网页开发者添加至网页的html文件中的特性检测脚本对浏览器进行检测的特性,预设特性一般是该网页加载所需要的特性。例如,某一个网页正常加载需要浏览器的全局对象window具有window.promise这个特性,那么在本地运行超文本文件以加载进行特性检测的脚本,检查浏览器的全局对象是否具有window.map这个特性。检测window.map是否为undefined,若是则得出浏览器的全局对象不具有window.map这个特性,window.map即为缺失特性。若检测window.map是否为defined,若是则得出浏览器的全局对象具有window.map这个特性,再进一步检查window.map这个特性的调用方式是否正确,若不正确则得出浏览器缺失window.map这个特性;若正确,则得出浏览器的全局对象具有window.map这个特性。例如,检查window.map这个特性的调用方式newMap([[‘key’,true]])是否会抛出异常来检查浏览器对window.map这个特性的支持程度。
本申请实施例中,通过特性检测的脚本对浏览器进行特性检测的时候,只需要对预设特性进行检测,这些预设特性一般是该网页加载所需要的特性。这样就可以对浏览器进行针对性地检测加载该网页所需要的特性,从而提高检测效率。且在检测过程中,先检测浏览器的全局对象是否具有预设特性,若有该预设特性还进一步检测预设特性的调用方式是否正确,才能得出浏览器的全局对象具有预设特性。同时在本地进行检测,避免了传统方法需要去服务器上获取缺失特性过程中发生的一些篡改导致不能准确地得到缺失特性。综上,本申请实施例中,能够进行精确全面的检测,保证检测结果的准确性。
接上一个实施例中,在得出浏览器的全局对象具有预设特性之后,方法还包括:加载网页的业务脚本以使浏览器正常加载网页。
如图4所示,提供了一种网页加载方法,包括如下步骤:
步骤S402,预先将用于对浏览器进行特性检测的脚本添加至网页的超文本文件中;
步骤S404,当通过浏览器加载网页时,在本地运行超文本文件以加载进行特性检测的脚本,对浏览器进行特性检测得到检测结果;
步骤S406,得出浏览器的全局对象具有预设特性,则加载网页的业务脚本以使浏览器正常加载网页。
具体的,网页开发者预先将用于对浏览器进行特性检测的脚本添加至网页的超文本文件(html文件)中,从而当通过浏览器加载网页时,浏览器下载html文件后,首先在本地运行html文件以加载进行特性检测的脚本,对浏览器进行特性检测得到检测结果。检测结果为浏览器支持所检测的所有特性,则此时不需要去获取Polyfill文件,直接加载网页的业务脚本就可以保证浏览器正常加载网页。html文件中不仅包含特性检测的脚本,还包括网页的业务脚本。
传统的方法中,在浏览器加载网页时,不管浏览器是否需要Polyfill文件都会自动下载所有的Polyfill文件,将Polyfill合集引入到超文本文件(html文件)中。显然,对于不需要Polyfill文件的浏览器,下载Polyfill文件显然浪费了流量、延迟了等待时间。例如,对于本地浏览器加载网页时,可能需要下载Polyfill文件的用户只占比3%,如果不管浏览器是否需要Polyfill文件都会自动下载所有的Polyfill文件,则就有97%的用户多下载了Polyfill文件。显然,这就造成了很大的资源浪费。
本申请实施例中,提供的是一种检测出本地的浏览器不缺失加载某个网页所需要的特性时的情况,则不需要去获取Polyfill文件,直接加载网页的业务脚本就可以保证浏览器正常加载网页。相较于传统方法,大大降低了流量浪费,也降低了等待时间。
一个实施例中,如图5所示,步骤S204,根据检测结果中浏览器缺失的特性,从服务器上获取支持缺失的特性的特性修补脚本文件,包括:
步骤S204a,根据检测结果中浏览器缺失的特性,生成支持缺失的特性的特性修补脚本文件在服务器上的存储地址。
步骤S204b,根据存储地址从服务器获取特性修补脚本文件。
因为网页的开发者预先在服务器上部署了该网页在浏览器中加载所需要使用到的特性修补脚本文件即Polyfill文件,Polyfill文件在服务器上存储就会对应有存储地址。特性修补脚本文件可以根据检测结果中浏览器缺失的特性,生成支持缺失的特性的特性修补脚本文件在服务器上的存储地址。例如,当检测结果中显示浏览器缺失的特性为window.map时,则特性修补脚本文件可以根据浏览器缺失的特性window.map,生成支持缺失的特性的特性修补脚本文件map.js在服务器上的存储地址,如http://xxxx/map.js。其中,xxxx是服务器的地址。根据http://xxxx/map.js,就可以从服务器上获取到特性修补脚本文件map.js。进而浏览器加载特性修补脚本文件map.js就可以对浏览器所缺失的window.map特性进行修补,修补后的浏览器就可以正常加载htlm文件中的业务代码,从而使得浏览器正常加载网页。缺失的特性可以是一个或多个,在此不做限定。
本申请实施例中,特性修补脚本文件不仅可以在本地检测浏览器的缺失特性,还可以根据检测结果中浏览器缺失的特性,生成支持缺失的特性的特性修补脚本文件在服务器上的存储地址。从而,浏览器就可以通过该存储地址去服务器上获取到缺失特性所对应的特性修补脚本文件,下载该特性修补脚本文件至本地,进而浏览器加载特性修补脚本文件就可以对浏览器所缺失的特性进行修补,修补后的浏览器就可以正常加载网页html文件中的业务代码,从而使得浏览器正常加载网页。
一个实施例中,步骤S204,根据所述检测结果中所述浏览器缺失的特性,从服务器上获取支持所述缺失的特性的特性修补脚本文件,还包括:
当检测结果中浏览器缺失的特性为两个及以上时,根据浏览器缺失的特性,生成支持缺失的特性的特性修补脚本文件在服务器上的拼接地址;根据拼接地址从服务器获取拼接后的特性修补脚本文件。
具体的,当检测结果中浏览器缺失的特性为一个时,则根据浏览器缺失的这一个特性,生成支持该缺失的特性的特性修补脚本文件在服务器上的地址。根据该地址从服务器获取该缺失特性对应的特性修补脚本文件。
而当检测结果中浏览器缺失的特性为两个及以上时,则对应有两个及以上特性修补脚本文件。根据浏览器缺失的特性,生成对应的两个及以上特性修补脚本文件在服务器上的拼接地址。拼接地址将每一个所需要的特性修补脚本文件的地址拼接起来,通过访问一次拼接地址就可以获取到所需要的全部特性修补脚本文件。就避免了传统的非拼接地址通过一次地址访问只获取一个特性修补脚本文件,这样就需要进行多次向服务器进行地址访问,造成时间的资源的浪费,以至于增大了浏览器加载网页的时延。
本申请实施例中,当检测结果中浏览器缺失的特性为两个及以上时,将所有缺失特性对应的特性修补脚本文件在服务器上的地址采用拼接的方法得到拼接地址。从而浏览器只需要向服务器发出一次地址访问请求,就可以通过该拼接地址获取到所有的特性修补脚本文件,即多个特性修补脚本文件。因此,大大降低了时间的资源的浪费,进而减小了浏览器加载网页的时延。
一个实施例中,步骤S206,加载特性修补脚本文件以使浏览器正常加载网页,包括:
通过异步加载脚本的方式运行特性修补脚本文件;
运行网页的业务脚本以使浏览器正常加载网页。
具体的,异步加载脚本的方式又叫非阻塞加载,即浏览器在下载执行JS文件的同时,还会继续进行后续页面的处理。异步加载主要有三种方式,第一种叫Script DOMElement,但是这种加载方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。第二种叫onload时的异步加载,这种方法只是把***script的方法放在一个函数里面,然后放在window的onload方法里面执行,这样就解决了阻塞onload事件触发的问题。第三种是其他方法,由于JavaScript的动态性,这些其他方法包括有很多异步加载方法:XHR Injection、XHR Eval、ScriptIn Iframe、Script defer属性、document.write(scripttag)等。
通过异步加载脚本的方式,例如document.write(script标签)将特性修补脚本文件(Polyfill文件)引入到浏览器运行环境中,先于业务代码执行。然后,在运行网页的业务脚本,此时浏览器就可以正常加载该网页。
本申请实施例中,浏览器从服务器上获取了加载网页所需的Polyfill文件之后,通过异步加载脚本的方式运行Polyfill文件,将Polyfill文件引入到浏览器运行环境中,先于业务脚本执行。然后,在运行网页的业务脚本,此时浏览器就可以正常加载该网页。通过异步加载的方式不会阻塞浏览器对html文件的解析,一边解析一边加载polyfill文件,能加速网页的渲染。
如图6所示,为一个具体的实施例中网页加载方法的流程示意图。该网页加载方法具体包括以下步骤:
步骤S602,预先将用于对浏览器进行特性检测的脚本添加至网页的超文本文件中;
步骤S604,当通过浏览器加载网页时,在本地运行超文本文件以加载进行特性检测的脚本,检查浏览器的全局对象是否具有预设特性;
步骤S606,若判断结果为不具有预设特性,则得出浏览器缺失预设特性;
步骤S608,若判断结果为具有预设特性,则进一步检测预设特性的调用方式是否正确,若不正确则进入步骤606,得出浏览器缺失预设特性;
步骤S610,若正确,则得出浏览器的全局对象具有预设特性,加载网页的业务脚本以使浏览器正常加载网页;
步骤S612,当检测结果中浏览器缺失的特性为两个及以上时,根据浏览器缺失的特性,生成支持缺失的特性的特性修补脚本文件在服务器上的拼接地址;
步骤S614,根据拼接地址从服务器获取拼接后的特性修补脚本文件。
步骤S616,通过异步加载脚本的方式运行特性修补脚本文件,将Polyfill文件引入到浏览器运行环境中,先于业务脚本执行;
步骤S618,运行网页的业务脚本以使浏览器正常加载网页。
传统方法中的Polyfill.io方案,是一种基于http请求头中user-agent的解析来判断浏览器缺失特性的方案。其中,浏览器标识符(User-Agent)指的是描述了用户当前浏览器的名称、版本及操作***等信息的标识符。浏览器标识符指示了用户所使用浏览器能够支持的新语言特性和浏览器接口。
浏览器通过向Polyfill.io服务器发出的http请求,解析出user-agent字段中关于浏览器版本、内核类型的信息,来判断当前浏览器缺失的特性有哪些,从而将缺失特性的js脚本返回给浏览器。对每个浏览器进行特性判断都需要向Polyfill.io服务器发出一次http请求,显然对于市场上大部分没有特性缺失的浏览器用户是一种流量浪费。同时每次页面初始化都需要等待Polyfill特性判断请求的返回,增加了页面的加载时间。且使用user-agent判断所得到的结果并不准确,因为http请求头中的user-agent的内容可以被修改,浏览器也会自定义user-agent,所以有时间Polyfill.io服务器不能总是能够识别到user-agent的内容,就会导致浏览器特性判断失败。
表1为浏览器分别通过上述基于本地特性检测的Polyfill加载方法及传统方法中的Polyfill.io方案进行网页加载的结果数据表。
无论在文件加载时间、加载成功率还是特性判断成功率上,本申请提出的基于本地特性检测的Polyfill加载方法都比Polyfill.io方案更优。
本申请实施例中,首先,预先将用于对浏览器进行特性检测的脚本添加至网页的超文本文件中,从而当浏览器加载网页时,在本地就可以完成对浏览器缺失特性的检测,不需要向服务器发出请求获取浏览器的版本等信息,再从版本等信息中确定缺失特性。
其次,通过特性检测的脚本对浏览器进行特性检测的时候,只需要对预设特性进行检测,这些预设特性一般是该网页加载所需要的特性。这样就可以对浏览器进行针对性地检测加载该网页所需要的特性,从而提高检测效率。同时在本地进行检测,避免了传统方法需要去服务器上获取缺失特性过程中发生的一些篡改导致不能准确地得到缺失特性。
最后,通过拼接地址,从而浏览器只需要向服务器发出一次地址访问请求,就可以通过该拼接地址获取到多个特性修补脚本文件。浏览器通过异步加载脚本的方式运行Polyfill文件,将Polyfill文件引入到浏览器运行环境中,先于业务脚本执行。然后,在运行网页的业务脚本,此时浏览器就可以正常加载该网页。整个过程大大降低了时间的资源的浪费,进而减小了浏览器加载网页的时延。
图6为一个实施例中网页加载方法的流程示意图。应该理解的是,虽然图6的流程图中的各个步骤按照箭头的指示依次显示,但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明,这些步骤的执行并没有严格的顺序限制,这些步骤可以以其它的顺序执行。而且,图6中的至少一部分步骤可以包括多个子步骤或者多个阶段,这些子步骤或者阶段并不必然是在同一时刻执行完成,而是可以在不同的时刻执行,这些子步骤或者阶段的执行顺序也不必然是依次进行,而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
在一个实施例中,如图7所示,提供了一种网页加载装置700,包括:特性检测模块702、特性修补脚本文件获取模块704及网页加载模块706。其中,
特性检测模块702,用于当通过浏览器加载网页时,在本地对浏览器进行特性检测得到检测结果;
特性修补脚本文件获取模块704,用于根据检测结果中浏览器缺失的特性,从服务器上获取支持缺失的特性所对应的特性修补脚本文件;
网页加载模块706,用于加载特性修补脚本文件以使浏览器正常加载网页。
在一个实施例中,如图8所示,提供了一种网页加载装置700,还包括:特性检测的脚本添加模块708,用于预先将用于对浏览器进行特性检测的脚本添加至网页的超文本文件中;
特性检测模块702,还用于当通过浏览器加载网页时,在本地运行超文本文件以加载进行特性检测的脚本,对浏览器进行特性检测得到检测结果。
在一个实施例中,特性检测模块702,还用于当通过浏览器加载网页时,在本地运行超文本文件以加载进行特性检测的脚本,检查浏览器的全局对象是否具有预设特性;
若判断结果为不具有预设特性,则得出浏览器缺失预设特性;
若判断结果为具有预设特性,则检测预设特性的调用方式是否正确,若不正确则得出浏览器缺失预设特性;
若正确,则得出浏览器的全局对象具有预设特性。
在一个实施例中,网页加载模块706,用于加载网页的业务脚本以使浏览器正常加载网页。
在一个实施例中,特性修补脚本文件获取模块704,还用于根据检测结果中浏览器缺失的特性,生成支持缺失的特性的特性修补脚本文件在服务器上的存储地址;根据存储地址从服务器获取特性修补脚本文件。
在一个实施例中,特性修补脚本文件获取模块704,还用于当检测结果中浏览器缺失的特性为两个及以上时,根据浏览器缺失的特性,生成支持缺失的特性的特性修补脚本文件在服务器上的拼接地址;根据拼接地址从服务器获取拼接后的特性修补脚本文件。
在一个实施例中,网页加载模块706,还用于通过异步加载脚本的方式运行特性修补脚本文件;运行网页的业务脚本以使浏览器正常加载网页。
图9示出了一个实施例中计算机设备的内部结构图。该计算机设备具体可以是图1中的终端110。如图9所示,该计算机设备包括该计算机设备包括通过***总线连接的处理器、存储器、网络接口、输入装置、显示屏、摄像头、声音采集装置及扬声器。其中,存储器包括非易失性存储介质和内存储器。该计算机设备的非易失性存储介质存储有操作***,还可存储有计算机程序,该计算机程序被处理器执行时,可使得处理器实现上述网页加载方法。该内存储器中也可储存有计算机程序,该计算机程序被处理器执行时,可使得处理器执行上述网页加载方法。计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏,计算机设备的输入装置可以是显示屏上覆盖的触摸层,也可以是计算机设备外壳上设置的按键、轨迹球或触控板,还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解,图9中示出的结构,仅仅是与本申请方案相关的部分结构的框图,并不构成对本申请方案所应用于其上的计算机设备的限定,具体的计算机设备可以包括比图中所示更多或更少的部件,或者组合某些部件,或者具有不同的部件布置。
在一个实施例中,本申请提供的网页加载装置可以实现为一种计算机程序的形式,计算机程序可在如图9所示的计算机设备上运行。计算机设备的存储器中可存储组成该网页加载装置的各个程序模块,比如,图7所示的特性检测模块702、特性修补脚本文件获取模块704及网页加载模块706。各个程序模块构成的计算机程序使得处理器执行本说明书中描述的本申请各个实施例的网页加载方法中的步骤。
例如,图9所示的计算机设备可以通过如图7所示的网页加载装置中的特性检测模块702执行步骤S202。计算机设备可通过特性修补脚本文件获取模块704执行步骤S204。计算机设备可通过网页加载模块706执行步骤S206。
在一个实施例中,提供了一种计算机设备,包括存储器和处理器,存储器存储有计算机程序,计算机程序被处理器执行时,使得处理器执行上述网页加载方法的步骤。此处网页加载方法的步骤可以是上述各个实施例的网页加载方法中的步骤。
在一个实施例中,提供了一种计算机可读存储介质,存储有计算机程序,计算机程序被处理器执行时,使得处理器执行上述网页加载方法的步骤。此处网页加载方法的步骤可以是上述各个实施例的网页加载方法中的步骤。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程,是可以通过计算机程序来指令相关的硬件来完成,的程序可存储于一非易失性计算机可读取存储介质中,该程序在执行时,可包括如上述各方法的实施例的流程。其中,本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用,均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限,RAM以多种形式可得,诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
以上所述实施例的各技术特征可以进行任意的组合,为使描述简洁,未对上述实施例中的各个技术特征所有可能的组合都进行描述,然而,只要这些技术特征的组合不存在矛盾,都应当认为是本说明书记载的范围。
以上所述实施例仅表达了本申请的几种实施方式,其描述较为具体和详细,但并不能因此而理解为对本申请专利范围的限制。应当指出的是,对于本领域的普通技术人员来说,在不脱离本申请构思的前提下,还可以做出若干变形和改进,这些都属于本申请的保护范围。因此,本申请专利的保护范围应以所附权利要求为准。
Claims (10)
1.一种网页加载方法,包括:
当通过浏览器加载网页时,在本地对所述浏览器进行特性检测得到检测结果;
根据所述检测结果中所述浏览器缺失的特性,从服务器上获取支持所述缺失的特性的特性修补脚本文件;
加载所述特性修补脚本文件,以使所述浏览器正常加载所述网页。
2.根据权利要求1所述的方法,其特征在于,所述方法还包括:
预先将用于对所述浏览器进行特性检测的脚本添加至网页的超文本文件中;
所述当通过浏览器加载网页时,在本地对所述浏览器进行特性检测得到检测结果,包括:
当通过浏览器加载网页时,在本地运行所述超文本文件以加载所述进行特性检测的脚本,对所述浏览器进行特性检测得到检测结果。
3.根据权利要求2所述的方法,其特征在于,所述当通过浏览器进行网页加载时,在本地运行所述超文本文件以加载所述进行特性检测的脚本,对所述浏览器进行特性检测得到检测结果,包括:
当通过浏览器加载网页时,在本地运行所述超文本文件以加载所述进行特性检测的脚本,检查所述浏览器的全局对象是否具有预设特性;
若判断结果为不具有所述预设特性,则得出所述浏览器缺失所述预设特性;
若判断结果为具有所述预设特性,则检测所述预设特性的调用方式是否正确,若不正确则得出所述浏览器缺失所述预设特性;
若正确,则得出所述浏览器的全局对象具有所述预设特性。
4.根据权利要求3所述的方法,其特征在于,在得出所述浏览器的全局对象具有所述预设特性之后,所述方法还包括:
加载所述网页的业务脚本以使所述浏览器正常加载所述网页。
5.根据权利要求1所述的方法,其特征在于,所述根据所述检测结果中所述浏览器缺失的特性,从服务器上获取支持所述缺失的特性的特性修补脚本文件,包括:
根据所述检测结果中所述浏览器缺失的特性,生成支持所述缺失的特性的特性修补脚本文件在服务器上的存储地址;
根据所述存储地址从所述服务器获取所述特性修补脚本文件。
6.根据权利要求1所述的方法,其特征在于,所述根据所述检测结果中所述浏览器缺失的特性,从服务器上获取支持所述缺失的特性的特性修补脚本文件,还包括:
当检测结果中所述浏览器缺失的特性为两个及以上时,根据所述浏览器缺失的特性,生成支持所述缺失的特性的特性修补脚本文件在服务器上的拼接地址;
根据所述拼接地址从所述服务器获取拼接后的特性修补脚本文件。
7.根据权利要求1所述的方法,其特征在于,所述加载所述特性修补脚本文件以使所述浏览器正常加载所述网页,包括:
通过异步加载脚本的方式运行所述特性修补脚本文件;
运行所述网页的业务脚本以使所述浏览器正常加载所述网页。
8.一种网页加载装置,其特征在于,所述装置包括:
特性检测模块,用于当通过浏览器加载网页时,在本地对所述浏览器进行特性检测得到检测结果;
特性修补脚本文件获取模块,用于根据所述检测结果中所述浏览器缺失的特性,从服务器上获取支持所述缺失的特性所对应的特性修补脚本文件;
网页加载模块,用于加载所述特性修补脚本文件以使所述浏览器正常加载所述网页。
9.一种计算机可读存储介质,存储有计算机程序,所述计算机程序被处理器执行时,使得所述处理器执行如权利要求1至7中任一项所述方法的步骤。
10.一种计算机设备,包括存储器和处理器,所述存储器存储有计算机程序,所述计算机程序被所述处理器执行时,使得所述处理器执行如权利要求1至7中任一项所述方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910619693.5A CN112214703B (zh) | 2019-07-10 | 2019-07-10 | 网页加载方法、装置、计算机可读存储介质和计算机设备 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN201910619693.5A CN112214703B (zh) | 2019-07-10 | 2019-07-10 | 网页加载方法、装置、计算机可读存储介质和计算机设备 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112214703A true CN112214703A (zh) | 2021-01-12 |
CN112214703B CN112214703B (zh) | 2023-11-07 |
Family
ID=74047398
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN201910619693.5A Active CN112214703B (zh) | 2019-07-10 | 2019-07-10 | 网页加载方法、装置、计算机可读存储介质和计算机设备 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112214703B (zh) |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2022135410A1 (zh) * | 2020-12-25 | 2022-06-30 | 维沃移动通信有限公司 | 加载源文件的方法及装置 |
Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20110161401A1 (en) * | 2009-12-30 | 2011-06-30 | Teradata Us, Inc. | Dynamic resource management |
CN105955980A (zh) * | 2013-05-31 | 2016-09-21 | 北京奇虎科技有限公司 | 一种文件下载设备和方法 |
-
2019
- 2019-07-10 CN CN201910619693.5A patent/CN112214703B/zh active Active
Patent Citations (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20110161401A1 (en) * | 2009-12-30 | 2011-06-30 | Teradata Us, Inc. | Dynamic resource management |
CN105955980A (zh) * | 2013-05-31 | 2016-09-21 | 北京奇虎科技有限公司 | 一种文件下载设备和方法 |
Cited By (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO2022135410A1 (zh) * | 2020-12-25 | 2022-06-30 | 维沃移动通信有限公司 | 加载源文件的方法及装置 |
Also Published As
Publication number | Publication date |
---|---|
CN112214703B (zh) | 2023-11-07 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN107783795B (zh) | 应用程序启动方法、装置、计算机设备和存储介质 | |
CN110874236B (zh) | 一种跨平台应用装置、终端及存储介质 | |
CN108804159B (zh) | javascript模块加载方法及其预处理方法、装置和计算机设备 | |
CN109558320B (zh) | ***测试方法、装置、***、设备及计算机可读存储介质 | |
CN108108219B (zh) | 应用程序运行方法、装置、计算机设备和存储介质 | |
CN107707561B (zh) | 渗透测试方法及装置 | |
WO2020048189A1 (zh) | 图片生成 | |
CN112181532B (zh) | 页面资源加载方法、装置、电子设备和可读存储介质 | |
CN111367595A (zh) | 数据处理方法、程序运行方法、装置及处理设备 | |
CN111431767B (zh) | 多浏览器资源同步方法、装置、计算机设备和存储介质 | |
CN110365776B (zh) | 图片批量下载方法、装置、电子设备及存储介质 | |
CN111026988A (zh) | 一种页面加载的方法、装置、***及计算机设备 | |
CN112214703B (zh) | 网页加载方法、装置、计算机可读存储介质和计算机设备 | |
CN112650689A (zh) | 测试方法、装置、电子设备及存储介质 | |
CN112948267A (zh) | 网页测试方法、网页测试***、存储介质及电子设备 | |
CN110460685B (zh) | 用户唯一标识处理方法、装置、计算机设备和存储介质 | |
CN112446723A (zh) | 确定用户邀请关系的方法、计算机可读存储介质和设备 | |
CN113934954A (zh) | 应用程序中的网页首屏渲染方法及装置 | |
CN110061864B (zh) | 一种域名配置自动化验证的方法和*** | |
CN109934016B (zh) | 应用的签名校验方法、装置及电子设备 | |
CN109324822B (zh) | Pwa项目检测方法、计算机可读存储介质及终端设备 | |
CN112417324A (zh) | 基于Chrome的URL拦截方法、装置及计算机设备 | |
CN111177624A (zh) | 网站前后端通讯方法、装置、计算机设备和存储介质 | |
CN113326080B (zh) | H5页面的加载方法、装置、设备及存储介质 | |
CN113805968B (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 | ||
GR01 | Patent grant | ||
GR01 | Patent grant |