CN110609729A - 一种基于cmspweb的页面监听滚动渲染方法 - Google Patents
一种基于cmspweb的页面监听滚动渲染方法 Download PDFInfo
- Publication number
- CN110609729A CN110609729A CN201910915077.4A CN201910915077A CN110609729A CN 110609729 A CN110609729 A CN 110609729A CN 201910915077 A CN201910915077 A CN 201910915077A CN 110609729 A CN110609729 A CN 110609729A
- Authority
- CN
- China
- Prior art keywords
- page
- cmspweb
- scroll
- data
- rendering method
- 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
Links
- 238000009877 rendering Methods 0.000 title claims abstract description 38
- 238000000034 method Methods 0.000 title claims abstract description 29
- 238000012544 monitoring process Methods 0.000 title claims abstract description 18
- 238000005096 rolling process Methods 0.000 title claims abstract description 13
- 230000001960 triggered effect Effects 0.000 claims description 8
- 238000005516 engineering process Methods 0.000 claims description 6
- 230000000694 effects Effects 0.000 claims description 4
- 238000004904 shortening Methods 0.000 abstract description 2
- 238000013515 script Methods 0.000 description 5
- 238000010276 construction Methods 0.000 description 2
- 230000001351 cycling effect Effects 0.000 description 2
- 238000010992 reflux Methods 0.000 description 2
- 230000002776 aggregation Effects 0.000 description 1
- 238000004220 aggregation Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000007547 defect Effects 0.000 description 1
- 239000003973 paint Substances 0.000 description 1
- 230000008707 rearrangement Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
本发明特别涉及一种基于CMSPWEB的页面监听滚动渲染方法。该基于CMSPWEB的页面监听滚动渲染方法，通过CMSPWEB控制台自动监听用户对页面的滚动操作，分批次请求服务加载数据，生成多个DOM节点实现异步渲染页面，进而减轻浏览器和服务器压力。该基于CMSPWEB的页面监听滚动渲染方法，能够自动监听用户对页面的滚动操作分批次请求服务加载数据，然后渲染HTLMDOM，减轻了浏览器和服务器压力，解决了大量数据更新或频繁刷新页面时渲染时间过长，页面渲染迟缓的问题，有效缩减了用户等待数据加载渲染页面的时间，提高了用户体验。
Description
技术领域
本发明涉及页面渲染技术领域，特别涉及一种基于CMSPWEB的页面监听滚动渲染方法。
背景技术
CMSP(浪潮云消息服务引擎)是云和大数据时代的一种高性能消息中间件，以云服务和集群方式对外提供高性能和高可靠的消息队列服务，支撑大数据采集、汇聚、交换，大数据实时处理和微服务处理架构。
目前CMSPWEB控制台做数据监控页面时，需要前端页面渲染显示后台返回的数据，第一次渲染页面时，需要生成HTML DOM渲染页面信息。
常用的HTML页面渲染过程，包括HTML构建DOM树，构建渲染树，布局渲染树和绘制渲染树几个部分。具体来说，包括以下步骤：
第一步，解析HTML文件，创建DOM树，所述DOM树由HTML文件中的标签排列组成；
第二步，解析CSS，生成CSSOM，CSS对象模型；
第三步，DOM和CSS合并，构建渲染树(render tree)；
其中，渲染树(render tree)是在DOM树中加入CSS或HTML中的style样式而形成的，而且渲染树(render tree)只包含需要显示在页面中的DOM元素，像<head>元素或display属性值为none的元素都不在渲染树中。
第四步，布局(layout)和绘制(paint)，重绘(repaint)和重排(reflow/回流)。
在浏览器还没接收到完整的HTML文件时，页面渲染就开始了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。
其中，重绘(repaint)是指根据元素的新属性重新绘制，使元素呈现新的外观；
重排(reflow/回流)是指当渲染树中的一部分因为元素的规模尺寸、布局、隐藏等改变而需要重新构建；
重排(reflow/回流)必定会引发重绘(repaint)，但重绘(repaint)却不一定会引发重排(reflow/回流)。与布局无关的元素属性操作将只引起重绘，否则将同时引起重绘(repaint)和重排(reflow/回流)。
可能引起重绘(repaint)、重排(reflow/回流)的行为如下：
(1)添加、删除元素(回流+重绘)；
(2)隐藏元素：display:none(回流+重绘)；visibility:hidden(只重绘，不回流)；
(3)移动元素：改变top,left(不一定引起回流)；将元素移动到另一个父元素中(回流+重绘)等；
(4)改变style：布局相关属性如padding,border-width,font-size(回流+重绘)；布局无关属性(只重绘，不回流)；
(5)用户操作：改变浏览器大小，改变浏览器的字体大小等(回流+重绘)。
但是，在第一步中，自上而下对HTML文件进行解析，遇到任何样式(link、style)和脚本(script)都会阻塞，包括以下几种情况：
(1)CSS加载不会阻塞HTML文件的解析，但会阻塞DOM的渲染；
(2)CSS加载会阻塞后面JS语句的执行；
(3)JS会阻塞HTML的解析和渲染；
(4)没有延迟(defer)和异步(async)标签的脚本(script)会立即加载并执行；
(5)有异步(async)标签的JS，JS的加载执行和HTML的解析和渲染并行；
(6)有延迟(defer)标签的JS，JS的加载和HTML的解析和渲染并行，但会在HTML解析完成后执行，在触发DOMContentLoaded事件前执行；
DOMContentLoaded事件和onload事件的区别：DOMContentLoaded事件在HTML解析完毕后执行，loload事件在页面完全加载完成后执行(包括样式和图片)。
目前常用的监听资源加载，包括以下四种方式：
1、window.onload＝function(){....}；
2、window.addEventListener("load",function(){....})；
3、document.body.onload＝function(){....}；
4、<body onload＝"load()">。
目前这种方式存在的问题是当控制台后台返回数据量大时，导致控制台页面渲染时间长。如果用户频繁刷新页面或者频繁更新数据时，可能会造成控制台页面渲染时间过长，用户使用体检差。
基于上述情况，本发明提出了一种基于CMSPWEB的页面监听滚动渲染方法。
发明内容
本发明为了弥补现有技术的缺陷，提供了一种简单高效的基于CMSPWEB的页面监听滚动渲染方法。
本发明是通过如下技术方案实现的：
一种基于CMSPWEB的页面监听滚动渲染方法，其特征在于：通过CMSPWEB控制台自动监听用户对页面的滚动操作，分批次请求服务加载数据，生成多个DOM节点实现异步渲染页面，进而减轻浏览器和服务器压力。
用户在查看更新页面信息时，无需考虑数据量的大小，直接在CMSPWEB控制台页面上滚动视图即可获取新的视图信息。
为了使页面出现滚动视图效果，在网页上创建一个HTMLDOM模板和使用后台返回的数组list(列表)数据，循环数据生成多个DOM节点，每个DOM节点对应数组中的一条数据。
在滚动视图页面通过滚动鼠标或者下拉滚动条获取视图的相对浏览器窗口位置，当视图相对于之前的位置达到设置的变量阈值时触发查询服务，根据查询结果数据生成DOM节点。
所述变量阈值由用户根据实际需求设定。
更优的，变量阈值设置为10，当页面滚动时滚动条相对于之前的位置变化大于等于10时就会触发查询服务。
触发查询服务后，以CMSPWEB控制台获取到的监听信息为查询条件得到查询结果数据数组list，CMSPWEB控制台根据查询结果数据循环生成DOM节点，并将生成的DOM节点插入到当前页面末尾位置供CMSPWEB控制台使用。
利用JavaScript技术中创建DOM节点的方法生成DOM节点，利用JavaScript技术中操作DOM节点的方法将生成的DOM节点插入到当前页面末尾位置供CMSPWEB控制台使用。
本发明的有益效果是：该基于CMSPWEB的页面监听滚动渲染方法，能够自动监听用户对页面的滚动操作分批次请求服务加载数据，然后渲染HTLMDOM，减轻了浏览器和服务器压力，解决了大量数据更新或频繁刷新页面时渲染时间过长，页面渲染迟缓的问题，有效缩减了用户等待数据加载渲染页面的时间，提高了用户体验。
具体实施方式
为了使本发明所要解决的技术问题、技术方案及有益效果更加清楚明白，以下结合实施例，对本发明进行详细的说明。应当说明的是，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
该基于CMSPWEB的页面监听滚动渲染方法，通过CMSPWEB控制台自动监听用户对页面的滚动操作，分批次请求服务加载数据，生成多个DOM节点实现异步渲染页面，进而减轻浏览器和服务器压力。
用户在查看更新页面信息时，无需考虑数据量的大小，直接在CMSPWEB控制台页面上滚动视图即可获取新的视图信息。
为了使页面出现滚动视图效果，在网页上创建一个HTMLDOM模板和使用后台返回的数组list(列表)数据，循环数据生成多个DOM节点，每个DOM节点对应数组中的一条数据。
在滚动视图页面通过滚动鼠标或者下拉滚动条获取视图的相对浏览器窗口位置，当视图相对于之前的位置达到设置的变量阈值时触发查询服务，根据查询结果数据生成DOM节点。
所述变量阈值由用户根据实际需求设定。
更优的，变量阈值设置为10，当页面滚动时滚动条相对于之前的位置变化大于等于10时就会触发查询服务。
触发查询服务后，以CMSPWEB控制台获取到的监听信息为查询条件得到查询结果数据数组list，CMSPWEB控制台根据查询结果数据循环生成DOM节点，并将生成的DOM节点插入到当前页面末尾位置供CMSPWEB控制台使用。
利用JavaScript技术中创建DOM节点的方法生成DOM节点，利用JavaScript技术中操作DOM节点的方法将生成的DOM节点插入到当前页面末尾位置供CMSPWEB控制台使用。
以上所述的实施例，只是本发明具体实施方式的一种，本领域的技术人员在本发明技术方案范围内进行的通常变化和替换都应包含在本发明的保护范围内。
Claims (8)
1.一种基于CMSPWEB的页面监听滚动渲染方法，其特征在于：通过CMSPWEB控制台自动监听用户对页面的滚动操作，分批次请求服务加载数据，生成多个DOM节点实现异步渲染页面，进而减轻浏览器和服务器压力。
2.根据权利要求1所述的基于CMSPWEB的页面监听滚动渲染方法，其特征在于：用户在查看更新页面信息时，无需考虑数据量的大小，直接在CMSPWEB控制台页面上滚动视图即可获取新的视图信息。
3.根据权利要求2所述的基于CMSPWEB的页面监听滚动渲染方法，其特征在于：为了使页面出现滚动视图效果，在网页上创建一个HTMLDOM模板和使用后台返回的数组list数据，循环数据生成多个DOM节点，每个DOM节点对应数组中的一条数据。
4.根据权利要求3所述的基于CMSPWEB的页面监听滚动渲染方法，其特征在于：在滚动视图页面通过滚动鼠标或者下拉滚动条获取视图的相对浏览器窗口位置，当视图相对于之前的位置达到设置的变量阈值时触发查询服务，根据查询结果数据生成DOM节点。
5.根据权利要求4所述的基于CMSPWEB的页面监听滚动渲染方法，其特征在于：所述变量阈值由用户根据实际需求设定。
6.根据权利要求5所述的基于CMSPWEB的页面监听滚动渲染方法，其特征在于：更优的，变量阈值设置为10，当页面滚动时滚动条相对于之前的位置变化大于等于10时就会触发查询服务。
7.根据权利要求4所述的基于CMSPWEB的页面监听滚动渲染方法，其特征在于：触发查询服务后，以CMSPWEB控制台获取到的监听信息为查询条件得到查询结果数据数组list，CMSPWEB控制台根据查询结果数据循环生成DOM节点，并将生成的DOM节点插入到当前页面末尾位置供CMSPWEB控制台使用。
8.根据权利要求7所述的基于CMSPWEB的页面监听滚动渲染方法，其特征在于：利用JavaScript技术中创建DOM节点的方法生成DOM节点，利用JavaScript技术中操作DOM节点的方法将生成的DOM节点插入到当前页面末尾位置供CMSPWEB控制台使用。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910915077.4A CN110609729A (zh) | 2019-09-26 | 2019-09-26 | 一种基于cmspweb的页面监听滚动渲染方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910915077.4A CN110609729A (zh) | 2019-09-26 | 2019-09-26 | 一种基于cmspweb的页面监听滚动渲染方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN110609729A true CN110609729A (zh) | 2019-12-24 |
Family
ID=68893178
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910915077.4A Pending CN110609729A (zh) | 2019-09-26 | 2019-09-26 | 一种基于cmspweb的页面监听滚动渲染方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110609729A (zh) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111367406A (zh) * | 2020-02-20 | 2020-07-03 | 百度在线网络技术（北京）有限公司 | 一种小程序窗口的下拉刷新方法、装置、设备和介质 |
| CN112235621A (zh) * | 2020-10-10 | 2021-01-15 | Vidaa美国公司 | 一种可视区域的显示方法及显示设备 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101777069A (zh) * | 2010-01-04 | 2010-07-14 | 山东浪潮齐鲁软件产业股份有限公司 | 一种构建支持大数据量高性能浏览器列表组件的方法 |
| US20110221766A1 (en) * | 2010-03-09 | 2011-09-15 | Designmade Co., Ltd. | Method for printing a captured screen of web pages |
| CN103699313A (zh) * | 2012-09-27 | 2014-04-02 | 腾讯科技（深圳）有限公司 | 一种拖动刷新数据的方法和装置 |
| CN103853729A (zh) * | 2012-11-29 | 2014-06-11 | 腾讯科技（深圳）有限公司 | 页面加载方法及其系统 |
-
2019
- 2019-09-26 CN CN201910915077.4A patent/CN110609729A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101777069A (zh) * | 2010-01-04 | 2010-07-14 | 山东浪潮齐鲁软件产业股份有限公司 | 一种构建支持大数据量高性能浏览器列表组件的方法 |
| US20110221766A1 (en) * | 2010-03-09 | 2011-09-15 | Designmade Co., Ltd. | Method for printing a captured screen of web pages |
| CN103699313A (zh) * | 2012-09-27 | 2014-04-02 | 腾讯科技（深圳）有限公司 | 一种拖动刷新数据的方法和装置 |
| CN103853729A (zh) * | 2012-11-29 | 2014-06-11 | 腾讯科技（深圳）有限公司 | 页面加载方法及其系统 |
Non-Patent Citations (2)
| Title |
|---|
| 周峰等: "高效的Web性能提升机制研究", 《鸡西大学学报》 * |
| 张生荣: "JS实现滚动条触底加载更多", 《HTTPS://WWW.ZHANGSHENGRONG.COM/P/9MNIO5YVAJ/》 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111367406A (zh) * | 2020-02-20 | 2020-07-03 | 百度在线网络技术（北京）有限公司 | 一种小程序窗口的下拉刷新方法、装置、设备和介质 |
| CN111367406B (zh) * | 2020-02-20 | 2023-08-18 | 百度在线网络技术（北京）有限公司 | 一种小程序窗口的下拉刷新方法、装置、设备和介质 |
| CN112235621A (zh) * | 2020-10-10 | 2021-01-15 | Vidaa美国公司 | 一种可视区域的显示方法及显示设备 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106991154B (zh) | 网页渲染方法、装置、终端及服务器 | |
| US10726195B2 (en) | Filtered stylesheets | |
| US20190251143A1 (en) | Web page rendering method and related device | |
| CN106570098B (zh) | 页面刷新的方法及装置 | |
| US10936795B2 (en) | Techniques for use of snapshots with browsing transitions | |
| US7921353B1 (en) | Method and system for providing client-server injection framework using asynchronous JavaScript and XML | |
| CN106294658B (zh) | 网页快速展示方法和装置 | |
| US20150286739A1 (en) | Html5-protocol-based webpage presentation method and device | |
| CN110209966B (zh) | 一种网页刷新方法、网页系统及电子设备 | |
| US20140215314A9 (en) | Method for rearranging web page | |
| US20130219263A1 (en) | Web site design system integrating dynamic layout and dynamic content | |
| CN111639289A (zh) | 一种网页加载方法及装置 | |
| CN112667330B (zh) | 一种页面显示方法及计算机设备 | |
| US8516041B1 (en) | Pre-fetching asynchronously requested content | |
| WO2015196822A1 (zh) | 一种网页适应屏幕排版方法及装置 | |
| US9679075B1 (en) | Efficient delivery of animated image files | |
| CN110609729A (zh) | 一种基于cmspweb的页面监听滚动渲染方法 | |
| US20080282150A1 (en) | Finding important elements in pages that have changed | |
| CN113434138B (zh) | 信息显示方法、装置和电子设备 | |
| US11151314B2 (en) | Extensible grid layout | |
| CN114254222A (zh) | 一种统计单页应用的可交互时间的方法、装置及电子设备 | |
| US9158743B1 (en) | Grid layout control for network site design | |
| CN115659087B (zh) | 页面渲染方法、设备及存储介质 | |
| CN108664191B (zh) | 系统访问方法及装置 | |
| CN114547495B (zh) | 一种页面加载方法、装置、设备及可读存储介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| 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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20191224 |