CN108629032A - 一种基于延时加载的页面快速响应方法及装置 - Google Patents

一种基于延时加载的页面快速响应方法及装置 Download PDF

Info

Publication number
CN108629032A
CN108629032A CN201810439381.1A CN201810439381A CN108629032A CN 108629032 A CN108629032 A CN 108629032A CN 201810439381 A CN201810439381 A CN 201810439381A CN 108629032 A CN108629032 A CN 108629032A
Authority
CN
China
Prior art keywords
page
load
frame
elements
fast response
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN201810439381.1A
Other languages
English (en)
Inventor
陈碧勇
方敏
吕晔
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xiamen Nan Xun Software Technology Co Ltd
Original Assignee
Xiamen Nan Xun Software Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Xiamen Nan Xun Software Technology Co Ltd filed Critical Xiamen Nan Xun Software Technology Co Ltd
Priority to CN201810439381.1A priority Critical patent/CN108629032A/zh
Publication of CN108629032A publication Critical patent/CN108629032A/zh
Pending legal-status Critical Current

Links

Landscapes

  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

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

Description

一种基于延时加载的页面快速响应方法及装置
技术领域
本发明涉及计算机技术领域,特别是一种基于延时加载的页面快速响应方法及装置。
背景技术
在互联网时代,网站是必不可少的角色。要从形形色色的网站中脱颖而出,最重要的是用户体验。当一个页面业务越来越繁重的时候,难免会堆积很多文件,浏览器需要下载、解析和渲染,这个时间将会耗费相当久的时间。据调查研究表明,用户能容忍网页响应时间为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预加载实现方式如下:<link rel="dns-prefetch" href="//g.alicdn.com">。
对于框架元素中不是需要马上处理的业务但又需要在该页面加载的文件,数据元素加载可以通过如下步骤:
<link rel="preload" href="url" as="style">
<link rel="preload" href="url" as="script">
使用preload作为rel属性的属性值。这种做法将把<link> 元素塞入一个预加载器中,这个预加载器也将用于其它所需的任意类型的资源。为了完成基本的配置,还需要通过href和as 属性指定需要被预加载资源的资源路径及其类型。
但是预加载没有顺序可言,但是很多情况下JS文件之间是有依赖关系的。这时可以采取动态加载的方式,在前一个文件加载完成后再加载依赖它的下一个文件。例如,可以在页面中动态加入<script>标签,或者通过文件加载器Labjs,它能够实现文件的并行下载,解决js的阻塞,很好的解决了文件下载以及文件依赖的问题。
在同一时间段内进行预加载的框架元素的文件数目不大于6,减少文件的解析和渲染时间。
S3:进行首次页面渲染,为用户呈现框架页面。在尽可能短的时间内为用户呈现页面元素,例如导航等页面元素,增强用户对页面的接受程度和等待耐心,改善用户体验。
S4:将数据元素加载至页面上。数据元素加载至页面是通过加载器进行延时和按需异步加载,或者通过在框架页面上使用iframe进行单独业务的处理。数据元素加载与首次页面渲染同步进行,互不影响。
S5:进行二次页面渲染,显示最终页面。二次页面渲染可以根据数据元素异步加载的情况进行多次渲染。
实施例2
本实施例2公开了一种基于延时加载的页面快速响应装置1,如图2所示,包括页面解析装置11、第一数据加载装置12、第一页面渲染装置13、第二数据加载装置14和第二页面渲染装置15。
页面解析装置11用于对页面元素进行解析,将页面元素划分为框架元素和数据元素,创建该页面的文档对象模型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。
第一数据加载装置12用于响应用户点击页面的操作,遍历所述DOM树的所有节点,首先进行框架元素加载。框架元素加载采用预加载,在本实施例中,dns预加载实现方式如下:<link rel="dns-prefetch" href="//g.alicdn.com">。
对于框架元素中不是需要马上处理的业务但又需要在该页面加载的文件,数据元素加载可以通过如下步骤:
<link rel="preload" href="url" as="style">
<link rel="preload" href="url" as="script">
使用preload作为rel属性的属性值。这种做法将把<link> 元素塞入一个预加载器中,这个预加载器也将用于其它所需的任意类型的资源。为了完成基本的配置,还需要通过href和as 属性指定需要被预加载资源的资源路径及其类型。
但是预加载没有顺序可言,但是很多情况下JS文件之间是有依赖关系的。这时可以采取动态加载的方式,在前一个文件加载完成后再加载依赖它的下一个文件。例如,可以在页面中动态加入<script>标签,或者通过文件加载器Labjs,它能够实现文件的并行下载,解决js的阻塞,很好的解决了文件下载以及文件依赖的问题。
在同一时间段内进行预加载的框架元素的文件数目不大于6,减少文件的解析和渲染时间。
第一页面渲染装置13用于进行首次页面渲染,为用户呈现框架页面。在尽可能短的时间内为用户呈现页面元素,例如导航等页面元素,增强用户对页面的接受程度和等待耐心,改善用户体验。
第二数据加载装置14用于将数据元素加载至页面上。数据元素加载至页面是通过加载器进行延时和按需异步加载,或者通过在框架页面上使用iframe进行单独业务的处理。数据元素加载与首次页面渲染同步进行,互不影响。
第二页面渲染装置15用于进行二次页面渲染,显示最终页面。二次页面渲染可以根据数据元素异步加载的情况进行多次渲染。
综上,本发明通过在刷新页面时,首先加载框架元素,框架元素文件存放于cdn中,并进行压缩合并,尽可能地减少页面文件的下载时间;通过对压缩后的文件进行动态预加载,在前一个文件加载完成后再加载依赖它的下一个文件,实现文件的并行下载以及解决js的阻塞,很好的解决了文件下载以及文件依赖的问题,并且本发明的技术方案在同一时间段内进行预加载的文件数目不大于6,以此来实现减少文件的解析和渲染时间;通过首先加载框架元素,再异步加载数据元素,而且数据元素的加载并不影响框架页面的渲染,使得在尽可能短的时间内为用户呈现页面元素,增强用户对页面的接受程度和等待耐心,改善用户体验。采用本发明的页面快速响应方法或装置可以使用户响应时间控制在一秒以内。
以上,仅为本发明较佳的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到的变化或替换,都应涵盖在本发明的保护范围之内。

Claims (10)

1.一种基于延时加载的页面快速响应方法,其特征在于,所述方法包括如下步骤:
对页面元素进行解析,将页面元素划分为框架元素和数据元素,创建该页面的文档对象模型DOM树;
响应用户点击页面的操作,遍历所述DOM树的所有节点,首先进行框架元素加载;
进行首次页面渲染,为用户呈现框架页面;
将数据元素加载至页面上;
进行二次页面渲染,显示最终页面。
2.如权利要求1所述的一种基于延时加载的页面快速响应方法,其特征在于,所述的框架元素压缩合并后存放于公共CND环境。
3.如权利要求2所述的一种基于延时加载的页面快速响应方法,其特征在于,所述的框架元素包括在解析HTML页面的整个过程中都会用到的公共JS文件、公共样式文件和第三方插件。
4.如权利要求3所述的一种基于延时加载的页面快速响应方法,其特征在于,所述的框架元素加载采用预加载,在同一时间段内进行预加载的框架元素的文件数目不大于6。
5.如权利要求4所述的一种基于延时加载的页面快速响应方法,其特征在于,所述的预加载采取动态加载的方式,在前一个文件加载完成后再加载依赖它的下一个文件。
6.如权利要求1所述的一种基于延时加载的页面快速响应方法,其特征在于,所述的数据元素包括根据客户需求展现在页面上的业务相关数据和非公共样式文件。
7.如权利要求1所述的一种基于延时加载的页面快速响应方法,其特征在于,所述的数据元素加载至页面是通过加载器进行延时和按需异步加载,或者通过在框架页面上使用iframe进行单独业务的处理。
8.如权利要求7所述的一种基于延时加载的页面快速响应方法,其特征在于,所述的数据元素加载与所述的首次页面渲染同步进行,互不影响。
9.如权利要求8所述的一种基于延时加载的页面快速响应方法,其特征在于,所述的二次页面渲染可以根据数据元素异步加载的情况进行多次渲染。
10.一种基于延时加载的页面快速响应装置,其特征在于,包括页面解析装置、第一数据加载装置、第一页面渲染装置、第二数据加载装置和第二页面渲染装置,其中,
页面解析装置用于对页面元素进行解析,将页面元素划分为框架元素和数据元素,创建该页面的文档对象模型DOM树;
第一数据加载装置用于响应用户点击页面的操作,遍历所述DOM树的所有节点,首先进行框架元素加载;
第一页面渲染装置用于进行首次页面渲染,为用户呈现框架页面;
第二数据加载装置用于将数据元素加载至页面上;
第二页面渲染装置用于进行二次页面渲染,显示最终页面。
CN201810439381.1A 2018-05-09 2018-05-09 一种基于延时加载的页面快速响应方法及装置 Pending CN108629032A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201810439381.1A CN108629032A (zh) 2018-05-09 2018-05-09 一种基于延时加载的页面快速响应方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201810439381.1A CN108629032A (zh) 2018-05-09 2018-05-09 一种基于延时加载的页面快速响应方法及装置

Publications (1)

Publication Number Publication Date
CN108629032A true CN108629032A (zh) 2018-10-09

Family

ID=63692477

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201810439381.1A Pending CN108629032A (zh) 2018-05-09 2018-05-09 一种基于延时加载的页面快速响应方法及装置

Country Status (1)

Country Link
CN (1) CN108629032A (zh)

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109343908A (zh) * 2018-10-19 2019-02-15 网宿科技股份有限公司 一种延迟加载js脚本的方法和装置
CN109857971A (zh) * 2019-02-01 2019-06-07 天津字节跳动科技有限公司 页面渲染方法和装置
CN109977331A (zh) * 2019-03-04 2019-07-05 东软集团股份有限公司 控制页面资源执行的方法及装置
CN110321506A (zh) * 2019-07-04 2019-10-11 广州小鹏汽车科技有限公司 网页页面数据加载方法、装置、计算机设备和存储介质
CN112115399A (zh) * 2020-09-02 2020-12-22 北京一亩田新农网络科技有限公司 基于css的改变页面主题的方法、装置、电子设备和计算机可读介质
CN113495839A (zh) * 2020-04-08 2021-10-12 百度在线网络技术(北京)有限公司 测试页面的生成方法、装置、电子设备和存储介质
CN114546534A (zh) * 2022-02-28 2022-05-27 百果园技术(新加坡)有限公司 一种应用页面启动方法、装置、设备及介质
CN110321504B (zh) * 2019-06-18 2023-09-22 平安医疗健康管理股份有限公司 一种页面处理方法及装置

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103886036A (zh) * 2014-03-06 2014-06-25 百度在线网络技术(北京)有限公司 一种用于呈现页面的方法和装置
CN104239441A (zh) * 2014-09-01 2014-12-24 可牛网络技术(北京)有限公司 网页加载控制方法和装置
CN104573025A (zh) * 2015-01-12 2015-04-29 北京京东尚科信息技术有限公司 一种提高页面加载速度的方法及***
US20150193401A1 (en) * 2014-01-06 2015-07-09 Samsung Electronics Co., Ltd. Electronic apparatus and operating method of web-platform
CN105843814A (zh) * 2015-01-14 2016-08-10 阿里巴巴集团控股有限公司 一种页面生成方法、装置及***
CN106294594A (zh) * 2016-07-29 2017-01-04 东软集团股份有限公司 页面渲染方法及装置

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20150193401A1 (en) * 2014-01-06 2015-07-09 Samsung Electronics Co., Ltd. Electronic apparatus and operating method of web-platform
CN103886036A (zh) * 2014-03-06 2014-06-25 百度在线网络技术(北京)有限公司 一种用于呈现页面的方法和装置
CN104239441A (zh) * 2014-09-01 2014-12-24 可牛网络技术(北京)有限公司 网页加载控制方法和装置
CN104573025A (zh) * 2015-01-12 2015-04-29 北京京东尚科信息技术有限公司 一种提高页面加载速度的方法及***
CN105843814A (zh) * 2015-01-14 2016-08-10 阿里巴巴集团控股有限公司 一种页面生成方法、装置及***
CN106294594A (zh) * 2016-07-29 2017-01-04 东软集团股份有限公司 页面渲染方法及装置

Cited By (9)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109343908A (zh) * 2018-10-19 2019-02-15 网宿科技股份有限公司 一种延迟加载js脚本的方法和装置
CN109857971A (zh) * 2019-02-01 2019-06-07 天津字节跳动科技有限公司 页面渲染方法和装置
CN109977331A (zh) * 2019-03-04 2019-07-05 东软集团股份有限公司 控制页面资源执行的方法及装置
CN110321504B (zh) * 2019-06-18 2023-09-22 平安医疗健康管理股份有限公司 一种页面处理方法及装置
CN110321506A (zh) * 2019-07-04 2019-10-11 广州小鹏汽车科技有限公司 网页页面数据加载方法、装置、计算机设备和存储介质
CN113495839A (zh) * 2020-04-08 2021-10-12 百度在线网络技术(北京)有限公司 测试页面的生成方法、装置、电子设备和存储介质
CN112115399A (zh) * 2020-09-02 2020-12-22 北京一亩田新农网络科技有限公司 基于css的改变页面主题的方法、装置、电子设备和计算机可读介质
CN114546534A (zh) * 2022-02-28 2022-05-27 百果园技术(新加坡)有限公司 一种应用页面启动方法、装置、设备及介质
CN114546534B (zh) * 2022-02-28 2023-11-24 百果园技术(新加坡)有限公司 一种应用页面启动方法、装置、设备及介质

Similar Documents

Publication Publication Date Title
CN108629032A (zh) 一种基于延时加载的页面快速响应方法及装置
US10015226B2 (en) Methods for making AJAX web applications bookmarkable and crawlable and devices thereof
US20190320035A1 (en) Method and Apparatus for Automatically Optimizing the Loading of Images in a Cloud-Based Proxy Service
US10284671B2 (en) Dynamic bundling of web components for asynchronous delivery
CN102662766B (zh) 基于Web Element机制的微博与社交网络信息同步***与方法
CN107590145A (zh) 一种页面静态资源的处理方法和装置
KR20120053086A (ko) 컴퓨터 네트워크를 통해 전달되는 문서들의 비헤비어를 수정하기 위한 기술들
CN104426985B (zh) 显示网页的方法、装置及***
CN106339414A (zh) 网页渲染方法及装置
CN102799636A (zh) 移动终端显示网页的方法及***
CN109428877B (zh) 一种用于通过用户设备访问业务***的方法和装置
US11562037B2 (en) Crawlability of single page applications
US11190563B2 (en) Parallel execution of request tracking and resource delivery
US20080059584A1 (en) Method and apparatus for sharing resource addresses
CN106790276A (zh) 一种基于浏览器协议的跨浏览器数据交互方法和装置
CN103716319B (zh) 一种Web访问优化的装置和方法
Shroff et al. Critical rendering path optimizations to reduce the web page loading time
US20150033114A1 (en) Curating chat transcripts into webpages
CN107404515A (zh) 异步http请求的处理方法及装置
CN103440340A (zh) 一种导航网页内容显示方法及装置
CN103885988B (zh) 输出内容的方法及装置、内容输出***
CN105808727A (zh) 基于html5的网站跨屏适配技术架构和适配方法
US20170031884A1 (en) Automated dependency management based on page components
CN101772196A (zh) 处理移动终端发送的信息的方法和***以及代理服务器
CN109933382B (zh) 基于owa服务的在线ppt文件预览工具

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
CB02 Change of applicant information

Address after: 361101 1-3F, Zone D, innovation building, software park, Xiamen Torch High tech Zone, Xiamen City, Fujian Province

Applicant after: Xiamen Nanxun Co.,Ltd.

Address before: 361008 Fujian province Xiamen software park two sunrise Road No. 22 unit 401

Applicant before: XIAMEN NASCENT SOFTWARE TECHNOLOGY CO.,LTD.

CB02 Change of applicant information
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
RJ01 Rejection of invention patent application after publication

Application publication date: 20181009

RJ01 Rejection of invention patent application after publication