CN109684576A - 网页资源懒加载监控方法、装置、设备及存储介质 - Google Patents
网页资源懒加载监控方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN109684576A CN109684576A CN201811539136.4A CN201811539136A CN109684576A CN 109684576 A CN109684576 A CN 109684576A CN 201811539136 A CN201811539136 A CN 201811539136A CN 109684576 A CN109684576 A CN 109684576A
- Authority
- CN
- China
- Prior art keywords
- page
- picture
- browser
- load
- monitoring
- 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
- 238000012544 monitoring process Methods 0.000 title claims abstract description 79
- 238000000034 method Methods 0.000 title claims abstract description 43
- 238000003860 storage Methods 0.000 title claims abstract description 19
- 230000002159 abnormal effect Effects 0.000 claims abstract description 52
- 238000009877 rendering Methods 0.000 claims abstract description 22
- 238000001514 detection method Methods 0.000 claims abstract description 8
- 230000036541 health Effects 0.000 claims description 65
- 238000013507 mapping Methods 0.000 claims description 19
- 238000012806 monitoring device Methods 0.000 claims description 15
- 230000006870 function Effects 0.000 claims description 7
- 235000013399 edible fruits Nutrition 0.000 claims 1
- 238000011161 development Methods 0.000 abstract description 3
- 230000018109 developmental process Effects 0.000 abstract 1
- 238000010586 diagram Methods 0.000 description 10
- 238000004891 communication Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 5
- 230000000007 visual effect Effects 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 230000036316 preload Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000013515 script Methods 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 230000008859 change Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 230000003247 decreasing effect Effects 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 239000000284 extract Substances 0.000 description 1
- 238000007689 inspection Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 230000014759 maintenance of location Effects 0.000 description 1
- 238000013178 mathematical model Methods 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 238000012216 screening Methods 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F21/50—Monitoring users, programs or devices to maintain the integrity of platforms, e.g. of processors, firmware or operating systems
- G06F21/55—Detecting local intrusion or implementing counter-measures
- G06F21/554—Detecting local intrusion or implementing counter-measures involving event detection and direct action
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F2221/00—Indexing scheme relating to security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F2221/21—Indexing scheme relating to G06F21/00 and subgroups addressing additional information or applications relating to security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F2221/2119—Authenticating web pages, e.g. with suspicious links
Landscapes
- Engineering & Computer Science (AREA)
- Computer Security & Cryptography (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Computer Hardware Design (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明涉及网页开发，公开一种网页资源懒加载监控方法、装置、设备及存储介质，该方法包括：获取浏览器当前展示页面对应的页面地址，检测页面地址是否属于预设监控页面地址，若属于则对浏览器进行页面渲染以获取浏览器已加载的所有图片，对图片进行筛选以获取待检测图片并检测待检测图片是否显示于所述当前展示页面中，若否则判定所述待检测图片为异常加载图片并生成异常加载报告，由于本发明是在检测到页面地址属于预设监控页面地址时，通过对浏览器进行页面渲染获取已加载的所有图片，然后从中筛选并检测出异常加载图片再根据异常加载图片生成异常加载报告，从而能够有效的对网页资源的懒加载进行监控，提高了用户的网络体验。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种网页资源懒加载监控方法、装置、设备及存储介质。
背景技术
Lazyload，即懒加载(也称惰性加载)，具有延迟加载的特性，是一种常见前端性能优化方式。其主要用途是减少前端资源的加载量，即当网页页面滚动到相应的地方，对应位置的内容才进行加载显示，减少浏览器的负担。但实际应用中，随着开发人员的变动或者依赖变动，一些lazyload功能原本正常的网站，就会产生异常，加载一些并不需要加载的资源，导致浏览器负担加大，没有真正的起到懒加载的效果。因此，如何有效的对网页资源的懒加载进行监控，优化网页页面性能，就成为一个亟待解决的问题。
上述内容仅用于辅助理解本发明的技术方案，并不代表承认上述内容是现有技术。
发明内容
本发明的主要目的在于提供了一种网页资源懒加载监控方法、装置、设备及存储介质，旨在解决现有技术无法对无人车进行安全有效调度的技术问题。
为实现上述目的，本发明提供了一种网页资源懒加载监控方法，所述方法包括以下步骤：
获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址；
若属于，则对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片；
对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中；
若否，则判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告。
优选地，所述获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址的步骤，包括：
获取浏览器当前展示页面对应的页面地址，从所述页面地址中提取对应的访问域名；
在映射关系中查找所述访问域名对应的页面监控白名单，所述映射关系中存放有访问域名与页面监控白名单之间的对应关系；
检测所述页面地址是否属于所述页面监控白名单预设监控页面地址中的其中之一。
优选地，所述对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片的步骤，包括：
在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源；
将所述前端框架以及所述预加载页面资源发送至所述浏览器，以使所述浏览器基于所述前端框架对所述预加载页面资源进行加载，并获取加载完成时所述浏览器中已加载的所有图片。
优选地，所述在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源的步骤，包括：
在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板；
获取所述文档对象模板中每个文档对象对应的对象属性，并根据所述对象属性获取对应的预加载页面资源。
优选地，所述对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中的步骤，包括：
获取所述图片的图片大小，将所述图片大小与预设图片阈值进行比较，并根据比较结果将所述图片大小超过所述预设图片阈值的图片作为待检测图片；
调用预置JavaScript函数检测所述待检测图片是否显示于所述当前展示页面中。
优选地，所述根据所述异常加载图片生成异常加载报告的步骤，包括：
统计所述异常加载图片的图片数量，以及所述浏览器已加载的所有图片对应的图片总数；
根据所述图片数量和所述图片总数确定所述异常加载图片在已加载的所有图片中的占比；
根据所述占比获取所述当前展示页面的页面健康等级，并基于所述页面健康等级和所述异常加载图片生成异常加载报告。
优选地，所述根据所述占比获取所述当前展示页面的页面健康等级，并基于所述页面健康等级和所述异常加载图片生成异常加载报告的步骤，包括：
根据预先划分的页面健康程度范围确定所述占比所属的目标范围；
在预先构建的页面健康程度范围与页面健康等级的映射关系表中查找所述目标范围对应的页面健康等级；
检测所述页面健康等级是否高于预设预警等级，若高于则根据所述页面健康等级和所述异常加载图片生成异常加载报告。
此外，为实现上述目的，本发明还提出一种网页资源懒加载监控装置，所述装置包括：
地址检测模块，用于获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址；
图片加载模块，用于在所述页面地址属于所述预设监控页面地址时，对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片；
图片检测模块，用于对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中；
报告生成模块，用于在所述待检测图片未显示于所述当前展示页面中时，判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告。
此外，为实现上述目的，本发明还提出一种网页资源懒加载监控设备，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页资源懒加载监控程序，所述网页资源懒加载监控程序配置为实现如上文所述的网页资源懒加载监控方法的步骤。
此外，为实现上述目的，本发明还提出一种存储介质，所述存储介质上存储有网页资源懒加载监控程序，所述网页资源懒加载监控程序被处理器执行时实现如上文所述的网页资源懒加载监控方法的步骤。
本发明通过获取浏览器当前展示页面对应的页面地址，检测页面地址是否属于预设监控页面地址，若属于则对浏览器进行页面渲染以获取浏览器已加载的所有图片，对图片进行筛选以获取待检测图片并检测待检测图片是否显示于所述当前展示页面中，若否则判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告，由于本发明是在检测到浏览器当前展示页面对应的页面地址属于预设监控页面地址时，然后通过对浏览器进行页面渲染获取浏览器已加载的所有图片，并从中筛选并检测出异常加载图片，再根据异常加载图片生成异常加载报告，从而能够有效的对网页资源的懒加载进行监控，优化网页页面性能，也提高了用户的网络体验。
附图说明
图1是本发明实施例方案涉及的硬件运行环境的网页资源懒加载监控设备的结构示意图；
图2为本发明网页资源懒加载监控方法第一实施例的流程示意图；
图3为本发明网页资源懒加载监控方法第二实施例的流程示意图；
图4为本发明网页资源懒加载监控方法第三实施例的流程示意图；
图5为本发明网页资源懒加载监控装置第一实施例的结构框图。
本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
参照图1，图1为本发明实施例方案涉及的硬件运行环境的网页资源懒加载监控设备结构示意图。
如图1所示，该网页资源懒加载监控设备可以包括：处理器1001，例如中央处理器(Central Processing Unit，CPU)，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真(WIreless-FIdelity，WI-FI)接口)。存储器1005可以是高速的随机存取存储器(RandomAccess Memory，RAM)存储器，也可以是稳定的非易失性存储器(Non-Volatile Memory，NVM)，例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。
本领域技术人员可以理解，图1中示出的结构并不构成对网页资源懒加载监控设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。
如图1所示，作为一种存储介质的存储器1005中可以包括操作系统、数据存储模块、网络通信模块、用户接口模块以及网页资源懒加载监控程序。
在图1所示的网页资源懒加载监控设备中，网络接口1004主要用于与网络服务器进行数据通信；用户接口1003主要用于与用户进行数据交互；本发明网页资源懒加载监控设备中的处理器1001、存储器1005可以设置在网页资源懒加载监控设备中，所述网页资源懒加载监控设备通过处理器1001调用存储器1005中存储的网页资源懒加载监控程序，并执行本发明实施例提供的网页资源懒加载监控方法。
本发明实施例提供了一种网页资源懒加载监控方法，参照图2，图2为本发明网页资源懒加载监控方法第一实施例的流程示意图。
本实施例中，所述网页资源懒加载监控方法包括以下步骤：
步骤S10：获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址；
需要说明的是，本发明方法的执行主体可以是浏览器或者浏览器对应的后台服务器(以下简称服务器)。所述页面地址即浏览器当前展示页面对应的统一资源定位符(Uniform Resource Locator，URL)或请求URL。此外，在执行本步骤之前，开发人员可预先对需要进行懒加载监控的页面地址进行设定，以获取所述预设页面监控地址。
可理解的是，实际应用中同一个服务器可能会同时接收到多个浏览器客户端发送的页面加载请求，而通常情况下不同的页面加载请求所携带的页面地址(请求URL)都不相同，但事实上不同的页面地址可能具有相同的访问域名，例如页面地址“https://www.baidu.com/123”和https://www.baidu.com/234对应的访问域名均为www.baidu.com，因此，为保证服务器在接收到页面加载请求时，在较短的时间内实现对页面地址是否需要被进行懒加载监控的快速检测，本实施例中开发人员可在服务器侧预先设置一个页面监控白名单，然后将同一域名所有需要进行懒加载监控的页面地址都保存到所述页面监控白名单中，再建立一个访问域名与页面监控白名单之间的对应关系(即所述映射关系)以简化所述页面监控白名单的获取流程，实现对所述页面监控白名单的快速获取。在所述映射关系中，所述访问域名为映射端源，所述页面监控白名单为目标端源。
具体的，本步骤中服务器可通过获取浏览器当前展示页面对应的页面地址，从所述页面地址中提取对应的访问域名；在映射关系中查找所述访问域名对应的页面监控白名单，所述映射关系中存放有访问域名与页面监控白名单之间的对应关系；然后检测所述页面地址是否属于所述页面监控白名单预设监控页面地址中的其中之一。
步骤S20：若属于，则对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片；
应理解的是，所谓页面渲染，就是根据描述或者定义构建数学模型，通过模型生成图像的过程。浏览器的渲染引擎就是能够将超级文本标记语言(HTML)/层叠样式表(CSS)/直译式脚本语言(JavaScript)转换成图像结果的模块，其输入是URL对应的各种资源，输出是可视化的图像。
在具体实现中，若服务器检测到浏览器当前展示页面中包含的页面地址属于所述预设监控页面地址，则通过页面渲染技术对所述浏览器进行页面渲染，从而获取浏览器在加载当前展示页面时，所加载的所有页面图片。
步骤S30：对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中；
需要说明的是，所述显示于所述当前展示页面中是指显示于浏览器的当前可视界面，不包含不在用户视野内的可视界面下拉页面。
应理解的是，懒加载其主要目的是减少前端的资源加载量，以降低浏览器的运行负担，而为了避免服务器对浏览器当前加载的每一张图片都进行检测，导致服务器工作量增加，本实施例中服务器将对获取到的所有已加载图片进行筛选以选出在资源加载中占有较大加载量的图片，剔除对资源加载量影响较小的图片，而从进一步降低服务器的工作量。
在具体实现中，服务器可根据所述图片的图片属性(例如图片大小、格式等)对所述图片进行筛选以获取待检测图片，然后通过调用预置JavaScript函数检测所述待检测图片是否显示于所述当前展示页面中。
进一步地，本实施例中为确保筛选出的待检测图片具有较高的可靠度，本实施例优选通过已加载图片的图片大小进行图片筛选，具体的，服务器可获取所述图片的图片大小，将所述图片大小与预设图片阈值进行比较，并根据比较结果将所述图片大小超过所述预设图片阈值的图片作为待检测图片；调用预置JavaScript函数检测所述待检测图片是否显示于所述当前展示页面中。
此外，需要说明的是，所述预设图片阈值的具体数值可以是由开发人员预先设定的固定值(例如1M、5M、10M等)，也可以是服务器根据浏览器当前所有已加载的图片对应的图片大小总和，通过公式“预设图片阈值＝(图片大小总和/已加载的图片数量)1/2”来确定的非固定值，例如服务器检测到图片大小总和为10240千字节(Kilobyte，Kb)，已加载的图片数量为10张，则预设图片阈值＝(10240/10)1/2＝32Kb。
步骤S40：若否，则判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告。
在具体实现中，服务器在检测到所述待检测图片未显示于所述当前展示页面中时，判定所述待检测图片为异常加载图片，并根据所述异常加载图片的数量或其在所有已加载图片中的占比生成异常加载报告，并将所述异常加载报告推送至相关开发人员。
本实施例通过获取浏览器当前展示页面对应的页面地址，检测页面地址是否属于预设监控页面地址，若属于则对浏览器进行页面渲染以获取浏览器已加载的所有图片，对图片进行筛选以获取待检测图片并检测待检测图片是否显示于所述当前展示页面中，若否则判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告，由于本实施例是在检测到浏览器当前展示页面对应的页面地址属于预设监控页面地址时，然后通过对浏览器进行页面渲染获取浏览器已加载的所有图片，并从中筛选并检测出异常加载图片，再根据异常加载图片生成异常加载报告，从而能够有效的对网页资源的懒加载进行监控，优化网页页面性能，也提高了用户的网络体验。
参考图3，图3为本发明网页资源懒加载监控方法第二实施例的流程示意图。
基于上述第一实施例，在本实施例中，所述步骤S20包括：
步骤S201：在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源；
应理解的是，所述前端框架主要包括面向互联网体验的万维网，也称全球广域网(World Wide Web，web)开发框架，即，用户体验环境(User Experien ce Environment，UEE)框架。所述文档对象模板，也称文档对象模型(Docum ent Object Model，DOM)在网页中，组织页面(或文档)的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。通常情况下，一个网页的页面初始内容中包括所述前端框架以及至少一个DOM。
在具体实现中，开发人员可通过将需要进行资源加载的页面对应的页面地址与该页面对应的前端框架和文档对象模板关联后保存至相应的数据库中，以便于后续服务器在获取到页面地址时，从数据库中快速获取对应的前端框架以及文档对象模板。所述预加载页面资源包括与所述文档对象模板相匹配的页面模板和页面元数据。本步骤中，服务器可通过在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板；然后获取所述文档对象模板中每个文档对象对应的对象属性，并根据所述对象属性获取对应的预加载页面资源。
步骤S202：将所述前端框架以及所述预加载页面资源发送至所述浏览器，以使所述浏览器基于所述前端框架对所述预加载页面资源进行加载，并获取加载完成时所述浏览器中已加载的所有图片。
可理解的是，浏览器在对预加载页面资源进行加载时，可将HTML、可扩展标记语言(eXtensible Markup Language，XML)文档及图片等内容解析成树形的数据结构，将CSS解析成树形的数据结构，然后将DOM和CSSOM(CSS对象模型)合并后生成Render Tree(渲染树)，再基于Render Tree计算出每个节点在页面中的位置，按照算出来的规则，通过显卡把内容绘制到页面上。
在具体实现中，可通过接收服务器发送的所述前端框架以及所述预加载页面资源进行页面渲染。具体的，浏览器可通过预先设置的Javascript脚本在所述前端框架的基础上对所述预加载页面资源进行加载，并获取加载完成时，浏览器中已加载的所有图片。
本实施例通过在预设数据库中查找页面地址对应的前端框架以及文档对象模板，并获取文档对象模板对应的预加载页面资源；将前端框架以及预加载页面资源发送至浏览器，以使浏览器基于前端框架对预加载页面资源进行加载，并获取加载完成时浏览器中已加载的所有图片，实现了对浏览器加载的所有图片的准确获取，保证了页面资源懒加载监控的准确性和可靠性。
参考图4，图4为本发明网页资源懒加载监控方法第三实施例的流程示意图。
基于上述各实施例，在本实施例中，所述步骤S40中根据所述异常加载图片生成异常加载报告的步骤，可具体包括：
步骤S401：统计所述异常加载图片的图片数量，以及所述浏览器已加载的所有图片对应的图片总数；
应理解的是，为了能够让开发人员对网页资源的懒加载情况有一个比较直观的了解，本实施例中考虑通过异常加载图片的图片数量(例如异常加载的图片数量超过某一设定阈值)，又或者是异常加载的图片数量在所有已加载的图片中的占比来衡量页面懒加载的健康等级或程度。
在具体实现中，服务器可统计获取所述异常加载图片的图片数量，以及浏览器中已经加载的所有图片的图片总数。
步骤S402：根据所述图片数量和所述图片总数确定所述异常加载图片在已加载的所有图片中的占比；
在获取到异常加载图片的图片数量和已加载的所有图片的图片总数后，服务器即可根据公式“占比＝图片数量/图片总数”来确定浏览器当前展示页面中异常加载图片在已加载的所有图片中的占比，从而根据该占比来衡量页面懒加载的健康等级或程度。
步骤S403：根据所述占比获取所述当前展示页面的页面健康等级，并基于所述页面健康等级和所述异常加载图片生成异常加载报告。
需要说明的是，本实施例中，开发人员可预先根据实际工作经验对页面懒加载的页面健康等级进行划分，并为不同的页面健康等级进行页面健康程度范围配置，例如将页面健康等级划分为健康、亚健康、非健康，将健康等级的页面健康程度范围配置为0～15％，将亚健康等级的页面健康程度范围配置为16％～35％，将非健康等级的页面健康程度范围配置为36～100％。
进一步地，开发人员还可以从划分好的页面健康等级中选取一个预警等级来对当前展示页面的页面健康等级进行评估，即检测页面健康等级是否高于预设预警等级，若高于则根据页面健康等级和异常加载图片来生成异常加载报告。
在具体实现中，服务器可根据预先划分的页面健康程度范围确定所述占比所属的目标范围；然后在预先构建的页面健康程度范围与页面健康等级的映射关系表中查找所述目标范围对应的页面健康等级；检测所述页面健康等级是否高于预设预警等级，若高于则根据所述页面健康等级和所述异常加载图片生成异常加载报告。例如，若服务器计算出异常加载图片的占比为40％，则可根据预先划分的页面健康程度范围确定该占比所属的目标范围为“36～100％”，并根据预先构建的页面健康程度范围与页面健康等级的映射关系表查找该目标范围对应的页面健康等级为“非健康”高于预设预警等级“亚健康”，此时需要根据确定出的页面健康等级和检测到的异常加载图片来生成异常加载报告。
本实施例通过统计所述异常加载图片的图片数量以及浏览器已加载的所有图片对应的图片总数；根据图片数量和图片总数确定异常加载图片在已加载的所有图片中的占比；根据占比获取当前展示页面的页面健康等级，并基于页面健康等级和异常加载图片生成异常加载报告，能够准确有效地衡量页面懒加载的健康程度，使得开发人员对其有一个更加直观的了解，便于后续对页面进行性能优化。
此外，本发明实施例还提出一种存储介质，所述存储介质上存储有网页资源懒加载监控程序，所述网页资源懒加载监控程序被处理器执行时实现如上文所述的网页资源懒加载监控方法的步骤。
参照图5，图5为本发明网页资源懒加载监控装置第一实施例的结构框图。
如图5所示，本发明实施例提出的网页资源懒加载监控装置包括：
地址检测模块501，用于获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址；
图片加载模块502，用于在所述页面地址属于所述预设监控页面地址时，对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片；
图片检测模块503，用于对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中；
报告生成模块504，用于在所述待检测图片未显示于所述当前展示页面中时，判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告。
本实施例通过获取浏览器当前展示页面对应的页面地址，检测页面地址是否属于预设监控页面地址，若属于则对浏览器进行页面渲染以获取浏览器已加载的所有图片，对图片进行筛选以获取待检测图片并检测待检测图片是否显示于所述当前展示页面中，若否则判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告，由于本实施例是在检测到浏览器当前展示页面对应的页面地址属于预设监控页面地址时，然后通过对浏览器进行页面渲染获取浏览器已加载的所有图片，并从中筛选并检测出异常加载图片，再根据异常加载图片生成异常加载报告，从而能够有效的对网页资源的懒加载进行监控，优化网页页面性能，也提高了用户的网络体验。
基于本发明上述网页资源懒加载监控装置第一实施例，提出本发明网页资源懒加载监控装置的第二实施例。
在本实施例中，所述地址检测模块501，还用于获取浏览器当前展示页面对应的页面地址，从所述页面地址中提取对应的访问域名；在映射关系中查找所述访问域名对应的页面监控白名单，所述映射关系中存放有访问域名与页面监控白名单之间的对应关系；检测所述页面地址是否属于所述页面监控白名单预设监控页面地址中的其中之一。
进一步地，所述图片加载模块502，还用于在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源；将所述前端框架以及所述预加载页面资源发送至所述浏览器，以使所述浏览器基于所述前端框架对所述预加载页面资源进行加载，并获取加载完成时所述浏览器中已加载的所有图片。
进一步地，所述图片加载模块502，还用于在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板；获取所述文档对象模板中每个文档对象对应的对象属性，并根据所述对象属性获取对应的预加载页面资源。
进一步地，所述图片检测模块503，还用于获取所述图片的图片大小，将所述图片大小与预设图片阈值进行比较，并根据比较结果将所述图片大小超过所述预设图片阈值的图片作为待检测图片；调用预置JavaScript函数检测所述待检测图片是否显示于所述当前展示页面中。
进一步地，所述报告生成模块504，还用于统计所述异常加载图片的图片数量，以及所述浏览器已加载的所有图片对应的图片总数；根据所述图片数量和所述图片总数确定所述异常加载图片在已加载的所有图片中的占比；根据所述占比获取所述当前展示页面的页面健康等级，并基于所述页面健康等级和所述异常加载图片生成异常加载报告。
进一步地，所述报告生成模块504，还用于根据预先划分的页面健康程度范围确定所述占比所属的目标范围；在预先构建的页面健康程度范围与页面健康等级的映射关系表中查找所述目标范围对应的页面健康等级；检测所述页面健康等级是否高于预设预警等级，若高于则根据所述页面健康等级和所述异常加载图片生成异常加载报告。
本发明网页资源懒加载监控装置的其他实施例或具体实现方式可参照上述各方法实施例，此处不再赘述。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如只读存储器/随机存取存储器、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (10)
1.一种网页资源懒加载监控方法，其特征在于，所述方法包括：
获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址；
若属于，则对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片；
对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中；
若否，则判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告。
2.如权利要求1所述的方法，其特征在于，所述获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址的步骤，包括：
获取浏览器当前展示页面对应的页面地址，从所述页面地址中提取对应的访问域名；
在映射关系中查找所述访问域名对应的页面监控白名单，所述映射关系中存放有访问域名与页面监控白名单之间的对应关系；
检测所述页面地址是否属于所述页面监控白名单预设监控页面地址中的其中之一。
3.如权利要求1或2所述的方法，其特征在于，所述对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片的步骤，包括：
在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源；
将所述前端框架以及所述预加载页面资源发送至所述浏览器，以使所述浏览器基于所述前端框架对所述预加载页面资源进行加载，并获取加载完成时所述浏览器中已加载的所有图片。
4.如权利要求3所述的方法，其特征在于，所述在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源的步骤，包括：
在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板；
获取所述文档对象模板中每个文档对象对应的对象属性，并根据所述对象属性获取对应的预加载页面资源。
5.如权利要求1所述的方法，其特征在于，所述对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中的步骤，包括：
获取所述图片的图片大小，将所述图片大小与预设图片阈值进行比较，并根据比较结果将所述图片大小超过所述预设图片阈值的图片作为待检测图片；
调用预置JavaScript函数检测所述待检测图片是否显示于所述当前展示页面中。
6.如权利要求1所述的方法，其特征在于，所述根据所述异常加载图片生成异常加载报告的步骤，包括：
统计所述异常加载图片的图片数量，以及所述浏览器已加载的所有图片对应的图片总数；
根据所述图片数量和所述图片总数确定所述异常加载图片在已加载的所有图片中的占比；
根据所述占比获取所述当前展示页面的页面健康等级，并基于所述页面健康等级和所述异常加载图片生成异常加载报告。
7.如权利要求6所述的方法，其特征在于，所述根据所述占比获取所述当前展示页面的页面健康等级，并基于所述页面健康等级和所述异常加载图片生成异常加载报告的步骤，包括：
根据预先划分的页面健康程度范围确定所述占比所属的目标范围；
在预先构建的页面健康程度范围与页面健康等级的映射关系表中查找所述目标范围对应的页面健康等级；
检测所述页面健康等级是否高于预设预警等级，若高于则根据所述页面健康等级和所述异常加载图片生成异常加载报告。
8.一种网页资源懒加载监控装置，其特征在于，所述装置包括：
地址检测模块，用于获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址；
图片加载模块，用于在所述页面地址属于所述预设监控页面地址时，对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片；
图片检测模块，用于对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中；
报告生成模块，用于在所述待检测图片未显示于所述当前展示页面中时，判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告。
9.一种网页资源懒加载监控设备，其特征在于，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页资源懒加载监控程序，所述网页资源懒加载监控程序配置为实现如权利要求1至7中任一项所述的网页资源懒加载监控方法的步骤。
10.一种存储介质，其特征在于，所述存储介质上存储有网页资源懒加载监控程序，所述网页资源懒加载监控程序被处理器执行时实现如权利要求1至7任一项所述的网页资源懒加载监控方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811539136.4A CN109684576A (zh) | 2018-12-14 | 2018-12-14 | 网页资源懒加载监控方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811539136.4A CN109684576A (zh) | 2018-12-14 | 2018-12-14 | 网页资源懒加载监控方法、装置、设备及存储介质 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109684576A true CN109684576A (zh) | 2019-04-26 |
Family
ID=66186166
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811539136.4A Pending CN109684576A (zh) | 2018-12-14 | 2018-12-14 | 网页资源懒加载监控方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109684576A (zh) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110688282A (zh) * | 2019-09-25 | 2020-01-14 | 北京博睿宏远数据科技股份有限公司 | 网页性能数据的监测、监测任务分发方法及装置 |
| CN110837613A (zh) * | 2019-10-25 | 2020-02-25 | 陈奕博 | 一种前端编程优化图片懒加载方法 |
| CN111143729A (zh) * | 2019-12-11 | 2020-05-12 | 中国平安财产保险股份有限公司 | 基于单页面应用的优化方法、装置、设备及存储介质 |
| CN111352872A (zh) * | 2020-02-20 | 2020-06-30 | 北京字节跳动网络技术有限公司 | 执行引擎、数据处理方法、装置、电子设备和介质 |
| CN111399732A (zh) * | 2020-03-13 | 2020-07-10 | 深圳市珍爱云信息技术有限公司 | 网页截图方法、装置、计算机设备和存储介质 |
| CN111783002A (zh) * | 2020-06-30 | 2020-10-16 | 北京达佳互联信息技术有限公司 | 网页数据加载方法、装置、电子设备及存储介质 |
| CN112395521A (zh) * | 2019-08-19 | 2021-02-23 | 腾讯科技（武汉）有限公司 | 页面处理方法、装置、电子设备及计算机可读存储介质 |
| CN113986603A (zh) * | 2021-12-28 | 2022-01-28 | 深圳市明源云科技有限公司 | 页面加载异常原因的确定方法、装置及存储介质 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104008155A (zh) * | 2014-05-22 | 2014-08-27 | 北京金山网络科技有限公司 | 资源控制方法、装置和电子设备 |
| CN104573023A (zh) * | 2015-01-12 | 2015-04-29 | 天津车之家科技有限公司 | 一种网页图片检查方法、装置及计算设备 |
| CN106339226A (zh) * | 2016-08-26 | 2017-01-18 | 南威软件股份有限公司 | 一种网页页面的展示方法和页面展示插件 |
| CN108334517A (zh) * | 2017-01-20 | 2018-07-27 | 华为技术有限公司 | 一种网页渲染方法及相关设备 |
| CN108804171A (zh) * | 2018-03-30 | 2018-11-13 | 广东睿江云计算股份有限公司 | 一种简便的网页懒加载方法 |
-
2018
- 2018-12-14 CN CN201811539136.4A patent/CN109684576A/zh active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104008155A (zh) * | 2014-05-22 | 2014-08-27 | 北京金山网络科技有限公司 | 资源控制方法、装置和电子设备 |
| CN104573023A (zh) * | 2015-01-12 | 2015-04-29 | 天津车之家科技有限公司 | 一种网页图片检查方法、装置及计算设备 |
| CN106339226A (zh) * | 2016-08-26 | 2017-01-18 | 南威软件股份有限公司 | 一种网页页面的展示方法和页面展示插件 |
| CN108334517A (zh) * | 2017-01-20 | 2018-07-27 | 华为技术有限公司 | 一种网页渲染方法及相关设备 |
| CN108804171A (zh) * | 2018-03-30 | 2018-11-13 | 广东睿江云计算股份有限公司 | 一种简便的网页懒加载方法 |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112395521A (zh) * | 2019-08-19 | 2021-02-23 | 腾讯科技（武汉）有限公司 | 页面处理方法、装置、电子设备及计算机可读存储介质 |
| CN112395521B (zh) * | 2019-08-19 | 2023-05-16 | 腾讯科技（武汉）有限公司 | 页面处理方法、装置、电子设备及计算机可读存储介质 |
| CN110688282A (zh) * | 2019-09-25 | 2020-01-14 | 北京博睿宏远数据科技股份有限公司 | 网页性能数据的监测、监测任务分发方法及装置 |
| CN110688282B (zh) * | 2019-09-25 | 2023-01-24 | 北京博睿宏远数据科技股份有限公司 | 网页性能数据的监测、监测任务分发方法及装置 |
| CN110837613A (zh) * | 2019-10-25 | 2020-02-25 | 陈奕博 | 一种前端编程优化图片懒加载方法 |
| CN111143729A (zh) * | 2019-12-11 | 2020-05-12 | 中国平安财产保险股份有限公司 | 基于单页面应用的优化方法、装置、设备及存储介质 |
| CN111143729B (zh) * | 2019-12-11 | 2023-09-15 | 中国平安财产保险股份有限公司 | 基于单页面应用的优化方法、装置、设备及存储介质 |
| CN111352872A (zh) * | 2020-02-20 | 2020-06-30 | 北京字节跳动网络技术有限公司 | 执行引擎、数据处理方法、装置、电子设备和介质 |
| CN111399732A (zh) * | 2020-03-13 | 2020-07-10 | 深圳市珍爱云信息技术有限公司 | 网页截图方法、装置、计算机设备和存储介质 |
| CN111783002A (zh) * | 2020-06-30 | 2020-10-16 | 北京达佳互联信息技术有限公司 | 网页数据加载方法、装置、电子设备及存储介质 |
| CN113986603A (zh) * | 2021-12-28 | 2022-01-28 | 深圳市明源云科技有限公司 | 页面加载异常原因的确定方法、装置及存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109684576A (zh) | 网页资源懒加载监控方法、装置、设备及存储介质 | |
| CN106503134B (zh) | 浏览器跳转至应用程序的数据同步方法及装置 | |
| US20150254219A1 (en) | Method and system for injecting content into existing computerized data | |
| CN104750471A (zh) | 一种基于浏览器的web页面性能检测与采集分析插件以及方法 | |
| CN105868256A (zh) | 处理用户行为数据的方法和系统 | |
| CN107918575B (zh) | 一种页面状态的监控方法及装置 | |
| CN102855318A (zh) | 网页预加载方法与系统 | |
| CN112182444B (zh) | 数据渲染系统、方法及电子设备 | |
| US20230327942A1 (en) | Data detection method and apparatus, electronic device, computer storage medium, and computer program product | |
| CN106528659A (zh) | 浏览器跳转至应用程序的控制方法及装置 | |
| CN103544272A (zh) | 一种在浏览器中显示图片的方法和装置 | |
| CN111814086A (zh) | 一种用于对网页进行截图方法和系统 | |
| CN104166741A (zh) | 网页浏览分析处理方法及装置 | |
| CN110309463B (zh) | 落地页优化方法、装置、计算机存储介质及网络设备 | |
| CN112463568A (zh) | 业务仿真测试方法、装置及电子设备 | |
| CN107526748B (zh) | 一种识别用户点击行为的方法和设备 | |
| CN111694550A (zh) | 一种页面显示控制方法、装置及系统 | |
| CN106991099A (zh) | 一种基于页面访问的阅读线生成方法及系统 | |
| CN103544288A (zh) | 浏览器网页加载控制方法及装置 | |
| CN113535587A (zh) | 目标应用检测方法、装置及计算机设备 | |
| US10095791B2 (en) | Information search method and apparatus | |
| CN105955980B (zh) | 一种文件下载设备和方法 | |
| CN117040799A (zh) | 页面拦截规则生成、页面访问控制方法、装置及电子设备 | |
| CN110708270B (zh) | 异常链接检测方法以及装置 | |
| CN110210221A (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 | ||
| WD01 | Invention patent application deemed withdrawn after publication | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Application publication date: 20190426 |