一种基于延时加载的页面快速响应方法及装置制造方法及图纸

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

【技术实现步骤摘要】
一种基于延时加载的页面快速响应方法及装置
本专利技术涉及计算机
，特别是一种基于延时加载的页面快速响应方法及装置。
技术介绍
在互联网时代，网站是必不可少的角色。要从形形色色的网站中脱颖而出，最重要的是用户体验。当一个页面业务越来越繁重的时候，难免会堆积很多文件，浏览器需要下载、解析和渲染，这个时间将会耗费相当久的时间。据调查研究表明，用户能容忍网页响应时间为3秒。也就是3秒内没有给用户感官上的响应，用户将会放弃这个网站，可见页面快速响应是至关重要的。由于复杂页面包含大量脚本和样式文件，以及需要加载大量业务数据等情况，整个页面从请求到完整展示给客户端，往往需要数秒甚至更长的时间。因此，如何提供提高页面快速响应的速度已成为本领域从业人员亟待解决的技术问题。
技术实现思路
为了解决上述现有技术的不足，本专利技术公开了一种基于延时加载的页面快速响应方法及装置，目的是减少页面文件的下载时间，缩短文件的解析和渲染时间，使得在尽快的时间内为用户呈现出页面元素，加快页面响应速度，改善用户体验。为实现上述技术目的，达到上述技术效果，本专利技术公开了一种基于延时加载的页面快速响应方法，所述方法包括如下步骤：对页面元素进行解析，将页面元素划分为框架元素和数据元素，创建该页面的文档对象模型DOM树；响应用户点击页面的操作，遍历所述DOM树的所有节点，首先进行框架元素加载；进行首次页面渲染，为用户呈现框架页面；将数据元素加载至页面上；进行二次页面渲染，显示最终页面。进一步地，所述的框架元素压缩合并后存放于公共CND环境。进一步地，所述的框架元素包括在解析HTML页面的整个过程中都会用到的公共JS文件、公共样式文件和第三方插件。进一步地，所述的框架元素加载采用预加载，在同一时间段内进行预加载的框架元素的文件数目不大于6。进一步地，所述的预加载采取动态加载的方式，在前一个文件加载完成后再加载依赖它的下一个文件。进一步地，所述的数据元素包括根据客户需求展现在页面上的业务相关数据和非公共样式文件。进一步地，所述的数据元素加载至页面是通过加载器进行延时和按需异步加载，或者通过在框架页面上使用iframe进行单独业务的处理。进一步地，所述的数据元素加载与所述的首次页面渲染同步进行，互不影响。进一步地，所述的二次页面渲染可以根据数据元素异步加载的情况进行多次渲染。本专利技术还公开了一种基于延时加载的页面快速响应装置，包括页面解析装置、第一数据加载装置、第一页面渲染装置、第二数据加载装置和第二页面渲染装置，其中，页面解析装置用于对页面元素进行解析，将页面元素划分为框架元素和数据元素，创建该页面的文档对象模型DOM树；第一数据加载装置用于响应用户点击页面的操作，遍历所述DOM树的所有节点，首先进行框架元素加载；第一页面渲染装置用于进行首次页面渲染，为用户呈现框架页面；第二数据加载装置用于将数据元素加载至页面上；第二页面渲染装置用于进行二次页面渲染，显示最终页面。本专利技术具有以下有益效果：（1）本专利技术通过在刷新页面时，首先加载框架元素，框架元素文件存放于cdn中，并进行压缩合并，尽可能地减少页面文件的下载时间。（2）本专利技术通过对压缩后的文件进行动态预加载，在前一个文件加载完成后再加载依赖它的下一个文件，实现文件的并行下载以及解决js的阻塞，很好的解决了文件下载以及文件依赖的问题；并且本专利技术的技术方案在同一时间段内进行预加载的文件数目不大于6，以此来实现减少文件的解析和渲染时间。（3）本专利技术通过首先加载框架元素，再异步加载数据元素，而且数据元素的加载并不影响框架页面的渲染，使得在尽可能短的时间内为用户呈现页面元素，增强用户对页面的接受程度和等待耐心，改善用户体验。（4）本专利技术可以使用户响应时间控制在一秒以内。附图说明图1为本专利技术的页面快速响应方法的流程框架图。图2为本专利技术的页面快速响应装置的结构框架图。元件符号说明1：基于延时加载的页面快速响应装置，11：页面解析装置，12：第一数据加载装置，13：第一页面渲染装置，14：第二数据加载装置，15：第二页面渲染装置，S1~S5：步骤。具体实施方式为了使本专利技术的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本专利技术进行进一步详细说明。实施例1本实施例1公开了一种基于延时加载的页面快速响应方法，如图1所示，该方法包括如下步骤：S1：对页面元素进行解析，将页面元素划分为框架元素和数据元素，创建该页面的文档对象模型DOM树。框架元素压缩合并后存放于公共CND环境。框架元素包括在解析HTML页面的整个过程中都会用到的公共JS文件、公共样式文件和第三方插件。数据元素包括根据客户需求展现在页面上的业务相关数据和非公共样式文件。例如，在一个页面上，公共JS文件包括jquery-1.8.3.min.js、jsjuicer-min.js、json.js，公共样式文件包括theme.less、common.css、style.css，第三方插件包括jquery.treeview.js、formValidator.js、dtree.js，业务相关数据包括订单列表、客户详情、事务列表，非公共样式文件包括trade.css、print.css、trade_front.js、trade_back.js、archive_front.js、archive_back.js。S2：响应用户点击页面的操作，遍历所述DOM树的所有节点，首先进行框架元素加载。框架元素加载采用预加载，在本实施例中，dns预加载实现方式如下：<linkrel="dns-prefetch"href="//g.alicdn.com">。对于框架元素中不是需要马上处理的业务但又需要在该页面加载的文件，数据元素加载可以通过如下步骤：<linkrel="preload"href="url"as="style"><linkrel="preload"href="url"as="script">使用preload作为rel属性的属性值。这种做法将把<link>元素塞入一个预加载器中，这个预加载器也将用于其它所需的任意类型的资源。为了完成基本的配置，还需要通过href和as属性指定需要被预加载资源的资源路径及其类型。但是预加载没有顺序可言，但是很多情况下JS文件之间是有依赖关系的。这时可以采取动态加载的方式，在前一个文件加载完成后再加载依赖它的下一个文件。例如，可以在页面中动态加入<script>标签，或者通过文件加载器Labjs，它能够实现文件的并行下载，解决js的阻塞，很好的解决了文件下载以及文件依赖的问题。在同一时间段内进行预加载的框架元素的文件数目不大于6，减少文件的解析和渲染时间。S3：进行首次页面渲染，为用户呈现框架页面。在尽可能短的时间内为用户呈现页面元素，例如导航等页面元素，增强用户对页面的接受程度和等待耐心，改善用户体验。S4：将数据元素加载至页面上。数据元素加载至页面是通过加载器进行延时和按需异步加载，或者通过在框架页面上使用iframe进行单独业务的处理。数据元素加载与首次页面渲染同步进行，互不影响。S5：进行二本文档来自技高网...

【技术保护点】
1.一种基于延时加载的页面快速响应方法，其特征在于，所述方法包括如下步骤：对页面元素进行解析，将页面元素划分为框架元素和数据元素，创建该页面的文档对象模型DOM树；响应用户点击页面的操作，遍历所述DOM树的所有节点，首先进行框架元素加载；进行首次页面渲染，为用户呈现框架页面；将数据元素加载至页面上；进行二次页面渲染，显示最终页面。

【技术特征摘要】
1.一种基于延时加载的页面快速响应方法，其特征在于，所述方法包括如下步骤：对页面元素进行解析，将页面元素划分为框架元素和数据元素，创建该页面的文档对象模型DOM树；响应用户点击页面的操作，遍历所述DOM树的所有节点，首先进行框架元素加载；进行首次页面渲染，为用户呈现框架页面；将数据元素加载至页面上；进行二次页面渲染，显示最终页面。2.如权利要求1所述的一种基于延时加载的页面快速响应方法，其特征在于，所述的框架元素压缩合并后存放于公共CND环境。3.如权利要求2所述的一种基于延时加载的页面快速响应方法，其特征在于，所述的框架元素包括在解析HTML页面的整个过程中都会用到的公共JS文件、公共样式文件和第三方插件。4.如权利要求3所述的一种基于延时加载的页面快速响应方法，其特征在于，所述的框架元素加载采用预加载，在同一时间段内进行预加载的框架元素的文件数目不大于6。5.如权利要求4所述的一种基于延时加载的页面快速响应方法，其特征在于，所述的预加载采取动态加载的方式，在前一个文件加载完成后再加载依赖它的下一个文件。6.如权利要求1所述的一种基于延时加载的页面快速响应方法，其特征在于，所述的数据元素包...

【专利技术属性】
技术研发人员：陈碧勇，方敏，吕晔，
申请(专利权)人：厦门南讯软件科技有限公司，
类型：发明
国别省市：福建,35