CN104765855A - 一种应用于浏览器的首屏性能优化方法 - Google Patents

Abstract

本发明公开了一种应用于浏览器的首屏性能优化方法，涉及通讯领域。该方法包括：S1，开启浏览器，浏览器划分首屏内容区和非首屏内容区，同时，加载首屏内容区的内容；S2，浏览器判断页面滚动条当前位置的参考点与预先设定的非首屏内容区的显示位置点是否建立一对一映射，如果建立，进入S3；如果没有建立，则继续判断；S3，浏览器获取非首屏内容区的唯一序列号和与所述唯一序列号绑定的加载方法，在所述参考点处执行加载方法加载非首屏内容区的内容。本发明解决了现有首屏加载方法中直接将非首屏内容与首屏内容一次性加载造成的页面加载缓慢或页面卡顿的问题。

Description

一种应用于浏览器的首屏性能优化方法

技术领域

本发明涉及通讯领域，尤其涉及一种首屏性能优化方法。

背景技术

页面性能优化是通过各种方式让页面更快的呈现在用户面前，现有技术中通过合并JavaScript或css资源减少请求数来提高页面性能，但是对于首屏页面来说这种方法仍然会下载首屏用不到的资源，直接导致首屏加载速度慢、浪费网络资源的问题和一次性加载太多内容直接造成页面滚动卡顿现象。

发明内容

本发明的目的在于提供一种首屏性能优化方法，从而解决现有技术中存在的前述问题。

为了实现上述目的，本发明所述应用于浏览器的首屏性能优化方法，采用的技术方案如下：

S1，开启浏览器，浏览器划分首屏内容区和非首屏内容区，同时，加载首屏内容区的内容；

所述非首屏内容区的个数为n个，所述n≥1；

S2，浏览器判断页面滚动条当前位置的参考点与预先设定的非首屏内容区的显示位置点是否建立一对一映射，如果建立，进入S3；如果没有建立，则继续判断；

S3，浏览器获取非首屏内容区的唯一序列号和与所述唯一序列号绑定的加载方法，在所述参考点处执行加载方法加载非首屏内容区的内容。

优选地，步骤S1中，首屏内容区的垂直方向显示的最大像素点为768。

优选地，在步骤S1和S2之间还存在以下步骤：

A1，浏览器设定每个非首屏内容区的显示位置点，并将所述显示位置点与页面滚动条滑动的参考点建立一对一映射；

A2，建立每个非首屏内容区的显示位置点和与其对应的非首屏内容区的唯一序列号的绑定连接；

A3，最后建立每个非首屏内容区的唯一序列号与非首屏内容加载方法的绑定连接。

更优选地，在步骤A1，浏览器选择随机建立非首屏内容区的显示位置点与页面滚动条滑动的参考点一对一映射或按照用户需求建立非首屏内容区的显示位置点与页面滚动条滑动的参考点一对一映射。

更优选地，所述用户需求是指按照用户的要求在非首屏内容区显示预先设定的内容，所述内容包括：加载图片、加载JavaScript模块、加载大块的html、加载iframe。

优选地，在步骤S3中，只执行加载一次与所述参考点对应的非首屏内容区的内容。

优选地，步骤S2，具体按照下述方法实现：

B1，页面滚动条滚动；

B2，浏览器获取页面滚动条滚动到的当前位置的参考点；

B2，浏览器判断在内存中存储的预先设定的非首屏内容区的显示位置点与所述参考点是否建立一对一映射，如果建立进入S3，如果没有建立，则返回B2。

优选地，步骤S3，具体按照下述方法实现：

C1，查找并获取与所述显示位置点绑定连接的非首屏内容区的唯一序列号；

C2，查找并调取与唯一序列号绑定连接的非首屏内容区显示内容的加载方法；

C3，执行加载方法，在所述参考点显示非首屏内容区的内容。

本发明的有益效果是：

本发明所述方法在开启浏览器时，仅仅加载首屏内容区内容，随着屏幕滚动逐步加载页面滚动条滚动到的非首屏内容区的内容，解决了现有首屏加载方法中直接将非首屏内容与首屏内容一次性加载造成的页面加载缓慢或页面卡顿的问题。因为首屏页面加载的JavaScript、css和图片这些非首屏内容的文件数量减少，首屏页面中不需要的页面结构减少，所以加载首屏页面的时间减少近一半。同时，在所述方法中可以设定与页面滚动条当前位置的参考点对应的非首屏内容区的内容，因此本发明还可实现按照用户的需求设定非首屏内容区加载的内容，极大地改善了用户体验。

附图说明

图1是实施例中所述应用于浏览器的首屏性能优化方法的流程示意图；

图2是实施例中在步骤S1和S2之间存在步骤的流程示意图；

图3是实施例中步骤S2的流程示意图；

图4是实施例中步骤S3的流程示意图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不用于限定本发明。

实施例

参照图1至图4，本实施例中所述应用于浏览器的首屏性能优化方法，该方法包括：

S1，开启浏览器，浏览器划分首屏内容区和非首屏内容区，同时，加载首屏内容区的内容；

所述非首屏内容区的个数为n个，所述n≥1；

步骤S1中，距离页面顶部为768像素的区域是首屏内容区，本实施例中，首屏内容区的区域像素为1024×768；如本领域技术人员知，浏览器页面加载后，滚动条不做任何滚动，浏览器窗口最顶部的页面区域就是页面顶部，因为1024×768是来自用户屏幕分辨率的统计，使用小于等于1024×768的用户占使用浏览器总用户的55％-80％，所以在这个位置做首屏优化是最合适的。

S2，浏览器判断页面滚动条当前位置的参考点与预先设定的非首屏内容区的显示位置点是否建立一对一映射，如果建立，进入S3；如果没有建立，则继续判断；

S3，浏览器获取非首屏内容区的唯一序列号和与所述唯一序列号绑定的加载方法，在所述参考点处执行加载方法加载非首屏内容区的内容。

在本实施例中，在步骤S1和S2之间还存在以下步骤：

A1，浏览器设定每个非首屏内容区的显示位置点，并将所述显示位置点与页面滚动条滑动的参考点建立一对一映射；

A2，建立每个非首屏内容区的显示位置点和与其对应的非首屏内容区的唯一序列号的绑定连接；

A3，最后建立每个非首屏内容区的唯一序列号与非首屏内容加载方法的绑定连接。

在步骤A1，浏览器选择随机建立非首屏内容区的显示位置点与页面滚动条滑动的参考点一对一映射或根据用户的需求建立非首屏内容区的显示位置点与页面滚动条滑动的参考点一对一映射。其中，所述用户的需求是指按照用户的要求在非首屏内容区显示预先设定的内容，所述内容包括：加载图片、加载JavaScript模块、加载大块的html、加载iframe。

在本实施例中，在步骤S3中，只执行加载一次与所述参考点对应的非首屏内容区的内容，避免多次加载造成页面卡顿。

在本实施例中，步骤S2，具体按照下述方法实现：

B1，页面滚动条滚动；

B2，浏览器获取页面滚动条滚动到的当前位置的参考点；

B2，浏览器判断在内存中存储的预先设定的非首屏内容区的显示位置点与所述参考点是否建立一对一映射，如果建立进入S3，如果没有建立，则返回B2。

在本实施例中，步骤S3，具体按照下述方法实现：

C1，查找并获取与所述显示位置点绑定连接的非首屏内容区的唯一序列号；

C2，查找并调取与唯一序列号绑定连接的非首屏内容区显示内容的加载方法；

C3，执行加载方法，在所述参考点显示非首屏内容区的内容。

汽车之家首页首屏以外的几个iframe、查违章区域的JavaScript模块、非可见的标签页都通过本发明所述后加载的方式加载，呈现首屏时间由1.5秒左右降到1秒左右，极大的改善了用户体验。

通过采用本发明公开的上述技术方案，得到了如下有益的效果：

本发明所述方法在开启浏览器时，仅仅加载首屏内容区内容，随着屏幕滚动逐步加载页面滚动条滚动到的非首屏内容区的内容，解决了现有首屏加载方法中直接将非首屏内容与首屏内容一次性加载造成的页面加载缓慢或页面卡顿的问题。因为首屏页面加载的JavaScript、css和图片这些非首屏内容的文件数量减少，首屏页面中不需要的页面结构减少，所以加载首屏页面的时间减少近一半。同时，在所述方法中可以设定与页面滚动条当前位置的参考点对应的非首屏内容区的内容，因此本发明还可实现按照用户的需求设定非首屏内容区加载的内容，极大地改善了用户体验。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。

Claims (8)

1.一种应用于浏览器的首屏性能优化方法，其特征在于，该方法包括：

S1，开启浏览器，浏览器划分首屏内容区和非首屏内容区，同时，加载首屏内容区的内容；

所述非首屏内容区的个数为n个，所述n≥1；

S2，浏览器判断页面滚动条当前位置的参考点与预先设定的非首屏内容区的显示位置点是否建立一对一映射，如果建立，进入S3；如果没有建立，则继续判断；

S3，浏览器获取非首屏内容区的唯一序列号和与所述唯一序列号绑定的加载方法，在所述参考点处执行加载方法加载非首屏内容区的内容。

2.根据权利要求1所述应用于浏览器的首屏性能优化方法，其特征在于，步骤S1中，首屏内容区的垂直方向显示的最大像素点为768。

3.根据权利要求1所述应用于浏览器的首屏性能优化方法，其特征在于，在步骤S1和S2之间还存在以下步骤：

A1，浏览器设定每个非首屏内容区的显示位置点，并将所述显示位置点与页面滚动条滑动的参考点建立一对一映射；

A2，建立每个非首屏内容区的显示位置点和与其对应的非首屏内容区的唯一序列号的绑定连接；

A3，最后建立每个非首屏内容区的唯一序列号与非首屏内容加载方法的绑定连接。

4.根据权利要求3所述应用于浏览器的首屏性能优化方法，其特征在于，在步骤A1，浏览器选择随机建立非首屏内容区的显示位置点与页面滚动条滑动的参考点一对一映射或按照用户需求建立非首屏内容区的显示位置点与页面滚动条滑动的参考点一对一映射。

5.根据权利要求4所述应用于浏览器的首屏性能优化方法，其特征在于，所述用户需求是指按照用户的要求在非首屏内容区显示预先设定的内容，所述内容包括：加载图片、加载JavaScript模块、加载大块的html、加载iframe。

6.根据权利要求1所述应用于浏览器的首屏性能优化方法，其特征在于，在步骤S3中，只执行加载一次与所述参考点对应的非首屏内容区的内容。

7.根据权利要求1所述应用于浏览器的首屏性能优化方法，其特征在于，步骤S2，具体按照下述方法实现：

B1，页面滚动条滚动；

B2，浏览器获取页面滚动条滚动到的当前位置的参考点；

B2，浏览器判断在内存中存储的预先设定的非首屏内容区的显示位置点与所述参考点是否建立一对一映射，如果建立进入S3，如果没有建立，则返回B2。

8.根据权利要求1所述应用于浏览器的首屏性能优化方法，其特征在于，步骤S3，具体按照下述方法实现：

C1，查找并获取与所述显示位置点绑定连接的非首屏内容区的唯一序列号；

C2，查找并调取与唯一序列号绑定连接的非首屏内容区显示内容的加载方法；

C3，执行加载方法，在所述参考点显示非首屏内容区的内容。