浏览器应用加载页面首屏的方法和装置制造方法及图纸

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

The method and device of browser application loading the first screen of page

【技术实现步骤摘要】
浏览器应用加载页面首屏的方法和装置
本专利技术涉及网络前端,尤其涉及一种浏览器应用加载页面首屏的方法和装置。
技术介绍
随着互联网技术的发展和移动终端的普及,人们越来越习惯于从网络上获取各类信息。在这其中,浏览器应用,尤其是安装在移动终端上的各类浏览器APP或是带有浏览器功能的APP,成为了人们获取资讯的常用工具。在浏览器应用打开Web页面的过程中,尤其是使用显示区域受限的移动终端(例如,智能手机)上安装的浏览器APP打开一个页面时,其页面性能是由页面首屏的渲染速度决定的。由前端渲染的页面需要下载首屏数据,执行JavaScript脚本来解析首屏数据,再将解析出各种标签,插入到页面HTML文档里。浏览器内核接着解析排版HTML文档,并发起首屏图片请求,对加载回的图片进行解码,渲染页面,由此用户能够看到页面首屏。由于动态数据需要经由网络下载,因此通常耗时需要600ms以上。执行JavaScript脚本渲染首屏也比较耗时。在JavaScript的解析和运行性能较差的中低端智能手机上,JavaScript解析速度约为1M/s,而首屏的J本文档来自技高网...

【技术保护点】
1.一种浏览器应用加载页面首屏的方法,包括:/n响应于用户加载目标页面的请求,在本地存储中存储了待显示的所述目标页面的页面信息的情况下,从本地存储中获取所述页面信息以进行渲染,并且网络请求所述目标页面的首屏信息;/n将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较;以及/n在所述首屏信息存在更新的情况下,浏览器内核使用更新的所述首屏信息继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏。/n

【技术特征摘要】
1.一种浏览器应用加载页面首屏的方法,包括:
响应于用户加载目标页面的请求,在本地存储中存储了待显示的所述目标页面的页面信息的情况下,从本地存储中获取所述页面信息以进行渲染,并且网络请求所述目标页面的首屏信息;
将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较;以及
在所述首屏信息存在更新的情况下,浏览器内核使用更新的所述首屏信息继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏。


2.如权利要求1所述的方法,其中,网络请求所述目标页面的首屏信息包括:
网络请求所述目标页面的首屏动态数据。


3.如权利要求2所述的方法,其中,所述首屏动态数据是json格式的数据。


4.如权利要求2所述的方法,其中,将网络请求得到的所述首屏信息与存储的所述目标页面信息相比较包括:
对网络请求得到的所述首屏信息与存储的所述目标页面信息进行dom-diff处理以找出更新的DOM树节点。


5.如权利要求2所述的方法,其中,在所述首屏信息存在更新的情况下,浏览器内核使用更新的所述首屏信息继续对所述目标页面首屏的渲染并显示渲染完成的目标页面首屏包括:
基于所述首屏动态数据找出更新的DOM树节点并加以修改;
渲染修改的DOM树节点;以及
显示渲染完成的目标页面首屏。


6.如权利要求1所述的方法,还包括:
响应于用户加载目标页面的请求,在本地存储中未存储待显示的所述目标页面的页面信息的情况下,获取所述目标页面的完整页面信息,进行渲染和显示,并在所述本地存储中存储所述完整页面信息。


7.如权利要求1所述的方法,还包括:
浏览器内核在确认所述首屏信息不存在更新的情况下,显示使用所述页面信息渲染完成的目标页面首屏。


8.如权利要求1所述的方法,其中,所述目标页面是如下的至少一项:
前端渲染页面;
服务器端渲染页面;以及
至少部分同构页面。


9.如权利要求1所述的方法,其中,所述本地存储是所述浏览器应用专门开辟的本地存储。


10.一种浏览器应用加载页面首屏的装置,包括:
页面显示单元,用于响应于用户加载目标页面的请求,在本地存储中存储了待显示的所述目标页面的页面信息的情况下,从本地存储中获取所述页面信息以进行渲染;
信息请求单元,用于响应于用户...

【专利技术属性】
技术研发人员:刘翔
申请(专利权)人:阿里巴巴集团控股有限公司
类型:发明
国别省市:开曼群岛;KY

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1