[发明专利]浏览器应用加载页面首屏的方法和装置

说明书

提出了一种浏览器应用加载页面首屏的方法，包括：响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，从本地存储中获取所述页面信息以进行渲染，并且网络请求所述目标页面的首屏信息；将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较；以及在首屏信息存在更新的情况下，浏览器内核使用更新的首屏信息继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏。由此，本发明通过前端主动缓存页面关键信息，将基于缓存信息的页面渲染与上述关键信息的异步更新和差异处理并行化，从而在保证页面动态特性的情况下，极大地提升了页面首屏的加载性能，优化了用户的使用体验。

技术领域

本发明涉及网络前端，尤其涉及一种浏览器应用加载页面首屏的方法和装置。

背景技术

随着互联网技术的发展和移动终端的普及，人们越来越习惯于从网络上获取各类信息。在这其中，浏览器应用，尤其是安装在移动终端上的各类浏览器APP或是带有浏览器功能的APP，成为了人们获取资讯的常用工具。

在浏览器应用打开Web页面的过程中，尤其是使用显示区域受限的移动终端(例如，智能手机)上安装的浏览器APP打开一个页面时，其页面性能是由页面首屏的渲染速度决定的。由前端渲染的页面需要下载首屏数据，执行JavaScript脚本来解析首屏数据，再将解析出各种标签，插入到页面HTML文档里。浏览器内核接着解析排版HTML文档，并发起首屏图片请求，对加载回的图片进行解码，渲染页面，由此用户能够看到页面首屏。

由于动态数据需要经由网络下载，因此通常耗时需要600ms以上。执行JavaScript脚本渲染首屏也比较耗时。在JavaScript的解析和运行性能较差的中低端智能手机上，JavaScript解析速度约为1M/s，而首屏的JavaScript一般都会超过300K，这使得首屏渲染时间通常需要300ms以上。由此，会使得用户在每次打开一个新的页面时都会经历长时间的等待过程，严重影响用户的使用体验。

为此，需要一种能够提升首屏性能的方案。

发明内容

为了解决如上至少一个问题，本发明通过前端主动缓存页面关键信息，将基于缓存信息的页面渲染与上述关键信息的异步更新和差异处理并行化，使得在保证页面动态特性的情况下，极大地提升了页面首屏的加载性能，从而优化了用户的使用体验。

在本发明的一个方面，提出了一种浏览器应用加载页面首屏的方法，包括：响应于用户加载目标页面的请求，在本地存储中存储了待显示的所述目标页面的页面信息的情况下，从本地存储中获取所述页面信息以进行渲染，并且网络请求所述目标页面的首屏信息；将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较；以及在所述首屏信息存在更新的情况下，浏览器内核使用更新的所述首屏信息继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏。由此，通过在基于本地存储的页面信息进行渲染的同时，网络获取首屏信息并在需要时进行更新，能够保证页面的动态特性并且大大缩短首屏显示所需的时间。

优选地，网络请求所述目标页面的首屏信息包括：网络请求所述目标页面的首屏动态数据。由此在网址没有改变的情况下，页面动态更新的通常仅包括页面内容，而非页面框架，因此动态数据就足以涵盖首屏的全部变化，由此避免不必要的网络流量并提升首屏显示速度。

优选地，所述首屏动态数据可以是json格式的数据，从而方便后续的比较处理。

优选地，将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较包括：对网络请求得到的所述首屏信息与存储的所述目标页面信息进行dom-diff处理以找出更新的DOM树节点。由此，通过dom-diff机制实现页面变更的快速比对。