[发明专利]一种应用于浏览器的首屏性能优化方法

说明书

技术领域

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

背景技术

页面性能优化是通过各种方式让页面更快的呈现在用户面前，现有技术中通过合并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；