一种前端页面加载的方法及系统的制作方法
【专利摘要】本发明所提供的一种前端页面加载的方法及系统，通过首先将页面资源进行分类，对分类出的页面资源设置加载的优先级顺序，在加载前一类别的页面资源时，预先在后台获取后一类别的页面资源，使在前一类别的页面资源加载完成后，后一类别的页面资源在后台已经加载完成或者已经加载了一部分，从而减少了在前端页面进行加载时响应的时间，并且加载的优先级顺序可以根据用户的需求进行设置，因此本发明所述方法及系统为用户在访问页面时提供方便。
【专利说明】一种前端页面加载的方法及系统
【技术领域】
[0001]本发明涉及移动通信领域，尤其涉及的是一种前端页面加载的方法及系统。
【背景技术】
[0002]受互联网带宽的限制，互联网产品在加载大量前端资源文件时，用户需要等待比较长的时间。通常在面临这种情况时，都是在加载大量前端资源文件时将页面分块布局，将整体页面渲染分成多块，以减少用户在页面第一屏的等待时间。但页面整体加载时间并没有减少，用户仍然能看到页面正在加载中。另一种做法，就是降低页面效果，比如压缩图片、减少动画效果等，这种做法的确能减少用户的等待时间，但是用户看到的页面效果就比预想的效果要差一些了。
[0003]因此，现有技术有待于进一步的改进。
【发明内容】
[0004]鉴于上述现有技术中的不足之处，本发明的目的在于为用户提供一种前端页面加载的方法及系统，以解决现有技术中前端页面加载响应较慢的问题。
[0005]本发明解决技术问题所采用的技术方案如下:
一种前端页面加载的方法，其中，包括:
A、预先对前端页面资源进行分类，并设置不同类别页面资源加载的优先级顺序；
B、接收用户请求加载前端页面的指令，加载页面整体分块框架及运行加载组件；
C、所述加载组件根据预先设置的加载的优先级顺序依次加载页面资源，并在加载前一类别页面资源的同时，预加载后一分类的页面资源，直到整个页面的页面资源加载完成。
[0006]所述前端页面加载的方法，其中，所述步骤C中还包括:
Cl、所述加载组件在加载前一类别的页面资源同时，获取后一类别的页面资源，若获取失败，则根据预先设置的加载的优先级顺序，获取下一个类别的页面资源。
[0007]所述前端页面加载的方法，其中，所述步骤C还包括:
C2、对获取后一类别的页面资源的时间进行定时，当时间超时，则判定获取失败。
[0008]所述前端页面加载的方法，其中，所述步骤A中设置加载的优先级顺序为页面展示的先后顺序。
[0009]所述前端页面加载的方法，其中，所述步骤A中设置加载的优先级顺序为用户浏览页面时的使用到的应用程序的链接顺序。
[0010]一种前端页面加载的系统，其中，包括以下模块:
加载设置模块，用于预先对前端页面资源进行分类，并设置不同类别页面资源加载的优先级顺序；
加载开启模块，用于接收用户请求加载前端页面的指令，加载页面整体分块框架及运行加载组件；
加载处理模块，用于根据预先设置的加载的优先级顺序依次加载页面资源，并在加载前一类别页面资源的同时，预加载后一分类的页面资源，直到整个页面的页面资源加载完成。
[0011]所述前端页面加载的系统，其中，所述加载处理模块还包括:资源获取单元；
所述资源获取单元，用于在加载前一类别的页面资源同时，获取后一类别的页面资源，
若获取失败，则根据预设设置的加载的优先级顺序，获取下一个类别的页面资源。
[0012]所述前端页面加载的系统，其中，所述加载处理模块还包括:定时单元；
所述定时单元，用于对获取后一类别的页面资源的时间进行定时，当时间超时，则判定获取失败。
[0013]所述前端页面加载的系统，其中，所述加载设置模块中设置加载的优先级顺序为页面展示的先后顺序。
[0014]所述前端页面加载的系统，其中，所述加载设置模块中设置加载的优先级顺序为用户浏览页面时的使用到的应用程序的链接顺序。
[0015]有益效果，本发明所提供的一种前端页面加载的方法及系统，通过首先将页面资源进行分类，对分类出的页面资源设置加载的优先级顺序，在加载前一类别的页面资源时，预先在后台获取后一类别的页面资源，使在前一类别的页面资源加载完成后，后一类别的页面资源在后台已经加载完成或者已经加载了一部分，从而减少了在前端页面进行加载时响应的时间，并且加载的优先级顺序可以根据用户的需求进行设置，因此本发明所述方法及系统为用户在访问页面时候提供方便。
【专利附图】
【附图说明】
[0016]图1是本发明前端页面加载的方法步骤流程图。
[0017]图2是本发明前端页面加载的系统原理结构示意图。
【具体实施方式】
[0018]为使本发明的目的、技术方案及优点更加清楚、明确，以下参照附图并举实施例对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用于解释本发明，并不用于限定本发明。
[0019]本发明提供了一种前端页面加载的方法，如图1所示，所述方法包括以下步骤:
S1、预先对前端页面资源进行分类，并设置不同类别页面资源加载的优先级顺序。
[0020]具体的，在本步骤中通过对加载组件进行设置来实现页面资源加载的优先级顺序。
[0021]优选的,所述加载组件是使用javascript语言编写而成的，当然也可以使用其他程序语言来实现。
[0022]在进行页面资源加载的优先级顺序时，可以有以下两种不同的设置方法:
第一种，在进行前端页面资源加载时，可以设置成根据页面展示的先后顺序来设置加载的优先级顺序。
[0023]当将加载组件设置成上述加载方法时，则前端页面根据主流屏幕分辨率来对页面进行分屏，在每一屏开始的位置预埋锚点，当用户滚屏时可以感知到用户的动作。具体加载时，则优先加载样式文件渲染页面展示效果；其次加载第一屏必须的图片、脚本文件。从而达到用户在页面中首先是看到页面效果，其次是交互，所以，页面效果渲染展示是放在第一位的。
[0024]第二种，在进行前端页面资源加载时，设置加载的优先级顺序为用户浏览页面时的使用到的应用程序的链接顺序。
[0025]当用户点击前端页面中的某个应用程序的功能进行使用时，与该功能相关的后继功能、资源文件是确定的，可以在加载组件中进行设置，只加载后继相关功能的资源文件，也即是可以根据与该应用程序相关的链接顺序来进行页面资源加载的优先级顺序的加载。
[0026]S2、接收用户请求加载前端页面的指令，加载页面整体分块框架及运行加载组件。
[0027]接收到用户发出的加载页面的指令后，首先加载页面的整体分块框架，并运行加载组件，所述加载组件根据上述步骤SI中预先设置出的加载优先级顺序进行页面加载。
[0028]S3、所述加载组件根据预先设置的加载的优先级顺序依次加载页面资源，并在加载前一类别页面资源的同时，预加载后一分类的页面资源，直到整个页面的页面资源加载完成。
[0029]加载组件根据预先设置的优先级顺序加载页面资源，并在加载前一类别页面资源的同时，在后台获取与后一分类的页面资源相关的资源文件，进行后一分类的页面资源的预加载。
[0030]由于进行后一分类的页面资源加载时，有可能当用户浏览前一类页面资源时，后一类页面资源已经在后台加载完成，当用户可以直接浏览到后一类页面资源，也有可能用户在进行后一类页面资源浏览时，后一类页面资源在后台还没有加载完成，但是在后台预加载的方式比当用户浏览到后一类页面资源时在进行后一类页面资源的加载缩短了加载的时间，减少了用户的浏览等待时间。
[0031]所述前端页面加载的方法，其中，所述步骤S3中还包括:
531、所述加载组件在加载前一类别的页面资源同时，获取后一类别的页面资源，若获取失败，则根据预设设置的加载的优先级顺序，获取下一个类别的页面资源。
[0032]所述前端页面加载的方法，其中，所述步骤S3还包括:
532、对获取后一类别的页面资源的时间进行定时，当时间超时，则判定获取失败。
[0033]为了对本发明所述方法进行更加详细的说明，下面举例说明:
假设前端页面根据主流屏幕分辨率可以分为5屏内容:第I屏共200K，第2屏共160K，第3屏共250K，第4屏共120K，第5屏共220K。同时，假设用户网速50K/秒，那么一次性加载完成的时间为19秒。
[0034]由于在用户在等待页面响应时，若在2秒之内给客户响应被用户认为是“非常有吸引力”的用户体验；在5秒之内响应客户被认为“比较不错”;在10秒内给用户响应被认为“糟糕”;如果超过10秒还没有得到响应，那么大多用户会认为这次请求是失败的，因此如果按照传统的方式对上述前端页面进行加载，用户将认为对该网页的请求是失败的。
[0035]下面说明使用本发明所述方法进行前端页面的实施例。
[0036]1、用户访问产品网站，发出加载前端页面的指令。
[0037]2、接收到用户发出的加载前端页面的指令后，用户浏览器先加载前端页面A整体分块框架以及智能加载程序(30K)。
[0038]3、加载组件根据动态配置加载技术加载“第I屏(200K)”，响应时间4秒；“第I屏”加载完成后，用户端显示效果正常。【比较不错】
4、用户在“第I屏”中使用产品时，加载组件根据加载的优先级顺序从服务器智能预加载“第2屏”指定资源文件。
[0039]获取资源文件过程中，出现获取某个资源文件超时的情况，智能判断程序自动根据配置策略，获取下一个资源文件，以保证在用户使用下一屏前加载尽量多的资源文件，减少用户使用下一屏时的等待时间。
[0040]5、用户使用完第I屏后，浏览到第2屏时，正常情况下“第2屏(160K)”的资源文件都已经加载到用户端，用户浏览到“第2屏”无需等待。【非常有吸引力】
用户浏览完“第I屏”后，浏览到“第2屏”，最坏的情况下，响应时间为3.2秒。【比较不错】
6、同理，用户浏览完“第2屏”后，浏览到“第3屏”，正常情况下无需等待。【非常有吸引力】
同理，用户浏览完“第2屏”后，浏览到“第3屏”，最坏的情况下，响应时间为5秒。【比较不错】
7、以此类推，加载完成全部的页面资源。
[0041]从上述实施例可以看出，所述方法在不降低用户产品使用效果的前提下，大大提高了对前端页面响应的速度。
[0042]在本发明所述方法的基础上，本发明还提供了一种前端页面加载的系统，如图2所示，所述系统包括以下模块:
加载设置模块10，用于预先对前端页面资源进行分类，并设置不同类别页面资源加载的优先级顺序；其功能如上述步骤Si所述。
[0043]加载开启模块20，用于接收用户请求加载前端页面的指令，加载页面整体分块框架及运行加载组件；其功能如上述步骤S2所述。
[0044]加载处理模块30，用于根据预先设置的加载的优先级顺序依次加载页面资源，并在加载前一类别页面资源的同时，预加载后一分类的页面资源，直到整个页面的页面资源加载完成，其功能如上述步骤S3所述。
[0045]所述加载处理模块还包括:资源获取单元；
所述资源获取单元，用于在加载前一类别的页面资源同时，获取后一类别的页面资源，若获取失败，则根据预设设置的加载的优先级顺序，获取下一个类别的页面资源。
[0046]所述加载处理模块还包括:定时单元；
所述定时单元，用于对获取后一类别的页面资源的时间进行定时，当时间超时，则判定获取失败。
[0047]所述加载设置模块中设置加载的优先级顺序为页面展示的先后顺序，还可以设置加载的优先级顺序为用户浏览页面时的使用到的应用程序的链接顺序。
[0048]有益效果，本发明所提供的一种前端页面加载的方法及系统，通过首先将页面资源进行分类，对分类出的页面资源设置加载的优先级顺序，在加载前一类别的页面资源时，预先在后台获取后一类别的页面资源，使在前一类别的页面资源加载完成后，后一类别的页面资源在后台已经加载完成或者已经加载了一部分，从而减少了在前端页面进行加载时响应的时间，并且加载的优先级顺序可以根据用户的需求进行设置，因此本发明所述方法及系统为用户在访问页面时候提供方便。
[0049] 可以理解的是，对本领域普通技术人员来说，可以根据本发明的技术方案及其发明构思加以等同替换或改变，而所有这些改变或替换都应属于本发明所附的权利要求的保护范围。
【权利要求】
1.一种前端页面加载的方法，其特征在于，包括: A、预先对前端页面资源进行分类，并设置不同类别页面资源加载的优先级顺序； B、接收用户请求加载前端页面的指令，加载页面整体分块框架及运行加载组件； C、所述加载组件根据预先设置的加载的优先级顺序依次加载页面资源，并在加载前一类别页面资源的同时，预加载后一分类的页面资源，直到整个页面的页面资源加载完成。
2.根据权利要求1所述前端页面加载的方法，其特征在于，所述步骤C中还包括: Cl、所述加载组件在加载前一类别的页面资源同时，获取后一类别的页面资源，若获取失败，则根据预先设置的加载的优先级顺序，获取下一个类别的页面资源。
3.根据权利要求2所述前端页面加载的方法，其特征在于，所述步骤C还包括: C2、对获取后一类别的页面资源的时间进行定时，当时间超时，则判定获取失败。
4.根据权利要求2所述前端页面加载的方法，其特征在于，所述步骤A中设置加载的优先级顺序为页面展示的先后顺序。
5.根据权利要求2所述前端页面加载的方法，其特征在于，所述步骤A中设置加载的优先级顺序为用户浏览页面时的使用到的应用程序的链接顺序。
6.—种前端页面加载的系统,其特征在于,包括以下模块: 加载设置模块，用于预先对前端页面资源进行分类，并设置不同类别页面资源加载的优先级顺序； 加载开启模块，用于接收用户请求加载前端页面的指令，加载页面整体分块框架及运行加载组件； 加载处理模块，用于根据预先设置的加载的优先级顺序依次加载页面资源，并在加载前一类别页面资源的同时，预加载后一分类的页面资源，直到整个页面的页面资源加载完成。
7.根据权利要求6所述前端页面加载的系统，其特征在于，所述加载处理模块还包括:资源获取单元； 所述资源获取单元，用于在加载前一类别的页面资源同时，获取后一类别的页面资源，若获取失败，则根据预设设置的加载的优先级顺序，获取下一个类别的页面资源。
8.根据权利要求6所述前端页面加载的系统，其特征在于，所述加载处理模块还包括:定时单元； 所述定时单元，用于对获取后一类别的页面资源的时间进行定时，当时间超时，则判定获取失败。
9.根据权利要求7所述前端页面加载的系统，其特征在于，所述加载设置模块中设置加载的优先级顺序为页面展示的先后顺序。
10.根据权利要求7所述前端页面加载的系统，其特征在于，所述加载设置模块中设置加载的优先级顺序为用户浏览页面时的使用到的应用程序的链接顺序。
【文档编号】G06F9/445GK104166569SQ201410402103
【公开日】2014年11月26日 申请日期:2014年8月15日 优先权日:2014年8月15日
【发明者】陈炽昌, 汪凌, 胡磊, 袁永强, 邱友雄 申请人:北京彩云动力教育科技有限公司