[发明专利]一种基于延时加载的页面快速响应方法及装置

说明书

本发明涉及计算机技术领域，公开了一种基于延时加载的页面快速响应方法，方法包括如下步骤：对页面元素进行解析，将页面元素划分为框架元素和数据元素，创建该页面的文档对象模型DOM树；响应用户点击页面的操作，遍历所述DOM树的所有节点，首先进行框架元素加载；进行首次页面渲染，为用户呈现框架页面；将数据元素加载至页面上；进行二次页面渲染，显示最终页面。本发明减少了页面文件的下载时间，也缩短了文件的解析和渲染时间，使得在尽快的时间内为用户呈现出页面元素。

技术领域

本发明涉及计算机技术领域，特别是一种基于延时加载的页面快速响应方法及装置。

背景技术

在互联网时代，网站是必不可少的角色。要从形形色色的网站中脱颖而出，最重要的是用户体验。当一个页面业务越来越繁重的时候，难免会堆积很多文件，浏览器需要下载、解析和渲染，这个时间将会耗费相当久的时间。据调查研究表明，用户能容忍网页响应时间为3秒。也就是3秒内没有给用户感官上的响应，用户将会放弃这个网站，可见页面快速响应是至关重要的。由于复杂页面包含大量脚本和样式文件，以及需要加载大量业务数据等情况，整个页面从请求到完整展示给客户端，往往需要数秒甚至更长的时间。因此，如何提供提高页面快速响应的速度已成为本领域从业人员亟待解决的技术问题。

发明内容

为了解决上述现有技术的不足，本发明公开了一种基于延时加载的页面快速响应方法及装置，目的是减少页面文件的下载时间，缩短文件的解析和渲染时间，使得在尽快的时间内为用户呈现出页面元素，加快页面响应速度，改善用户体验。

为实现上述技术目的，达到上述技术效果，本发明公开了一种基于延时加载的页面快速响应方法，所述方法包括如下步骤：

对页面元素进行解析，将页面元素划分为框架元素和数据元素，创建该页面的文档对象模型DOM树；

响应用户点击页面的操作，遍历所述DOM树的所有节点，首先进行框架元素加载；

进行首次页面渲染，为用户呈现框架页面；

将数据元素加载至页面上；

进行二次页面渲染，显示最终页面。

进一步地，所述的框架元素压缩合并后存放于公共CND环境。

进一步地，所述的框架元素包括在解析HTML页面的整个过程中都会用到的公共JS文件、公共样式文件和第三方插件。

进一步地，所述的框架元素加载采用预加载，在同一时间段内进行预加载的框架元素的文件数目不大于6。

进一步地，所述的预加载采取动态加载的方式，在前一个文件加载完成后再加载依赖它的下一个文件。

进一步地，所述的数据元素包括根据客户需求展现在页面上的业务相关数据和非公共样式文件。

进一步地，所述的数据元素加载至页面是通过加载器进行延时和按需异步加载，或者通过在框架页面上使用iframe进行单独业务的处理。

进一步地，所述的数据元素加载与所述的首次页面渲染同步进行，互不影响。

进一步地，所述的二次页面渲染可以根据数据元素异步加载的情况进行多次渲染。

本发明还公开了一种基于延时加载的页面快速响应装置，包括页面解析装置、第一数据加载装置、第一页面渲染装置、第二数据加载装置和第二页面渲染装置，其中，

页面解析装置用于对页面元素进行解析，将页面元素划分为框架元素和数据元素，创建该页面的文档对象模型DOM树；

第一数据加载装置用于响应用户点击页面的操作，遍历所述DOM树的所有节点，首先进行框架元素加载；

第一页面渲染装置用于进行首次页面渲染，为用户呈现框架页面；