网页资源懒加载监控方法、装置、设备及存储介质制造方法及图纸

本发明专利技术涉及网页开发，公开一种网页资源懒加载监控方法、装置、设备及存储介质，该方法包括：获取浏览器当前展示页面对应的页面地址，检测页面地址是否属于预设监控页面地址，若属于则对浏览器进行页面渲染以获取浏览器已加载的所有图片，对图片进行筛选以获取待检测图片并检测待检测图片是否显示于所述当前展示页面中，若否则判定所述待检测图片为异常加载图片并生成异常加载报告，由于本发明专利技术是在检测到页面地址属于预设监控页面地址时，通过对浏览器进行页面渲染获取已加载的所有图片，然后从中筛选并检测出异常加载图片再根据异常加载图片生成异常加载报告，从而能够有效的对网页资源的懒加载进行监控，提高了用户的网络体验。

Monitoring Method, Device, Equipment and Storage Medium for Lazy Loading of Web Resources

The invention relates to web page development, and discloses a monitoring method, device, device and storage medium for lazy loading of web page resources. The method includes acquiring the page address corresponding to the current display page of the browser, detecting whether the page address belongs to the preset monitoring page address, and rendering the page of the browser to obtain all the images loaded by the browser, and sifting the pictures. Select to obtain the picture to be detected and detect whether the picture to be detected is displayed on the current display page, if not determine that the picture to be detected is an abnormal loading picture and generate an abnormal loading report, because the invention detects that the page address belongs to the preset monitoring page address, obtains all the loaded pictures by page rendering through the browser, and then filters them out. The abnormal loading pictures are detected and the abnormal loading reports are generated according to the abnormal loading pictures, which can effectively monitor the lazy loading of web resources and improve the user's network experience.

【技术实现步骤摘要】
网页资源懒加载监控方法、装置、设备及存储介质
本专利技术涉及计算机
，尤其涉及一种网页资源懒加载监控方法、装置、设备及存储介质。
技术介绍
Lazyload，即懒加载(也称惰性加载)，具有延迟加载的特性，是一种常见前端性能优化方式。其主要用途是减少前端资源的加载量，即当网页页面滚动到相应的地方，对应位置的内容才进行加载显示，减少浏览器的负担。但实际应用中，随着开发人员的变动或者依赖变动，一些lazyload功能原本正常的网站，就会产生异常，加载一些并不需要加载的资源，导致浏览器负担加大，没有真正的起到懒加载的效果。因此，如何有效的对网页资源的懒加载进行监控，优化网页页面性能，就成为一个亟待解决的问题。上述内容仅用于辅助理解本专利技术的技术方案，并不代表承认上述内容是现有技术。
技术实现思路
本专利技术的主要目的在于提供了一种网页资源懒加载监控方法、装置、设备及存储介质，旨在解决现有技术无法对无人车进行安全有效调度的技术问题。为实现上述目的，本专利技术提供了一种网页资源懒加载监控方法，所述方法包括以下步骤：获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址；若属于，则对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片；对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中；若否，则判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告。优选地，所述获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址的步骤，包括：获取浏览器当前展示页面对应的页面地址，从所述页面地址中提取对应的访问域名；在映射关系中查找所述访问域名对应的页面监控白名单，所述映射关系中存放有访问域名与页面监控白名单之间的对应关系；检测所述页面地址是否属于所述页面监控白名单预设监控页面地址中的其中之一。优选地，所述对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片的步骤，包括：在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源；将所述前端框架以及所述预加载页面资源发送至所述浏览器，以使所述浏览器基于所述前端框架对所述预加载页面资源进行加载，并获取加载完成时所述浏览器中已加载的所有图片。优选地，所述在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源的步骤，包括：在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板；获取所述文档对象模板中每个文档对象对应的对象属性，并根据所述对象属性获取对应的预加载页面资源。优选地，所述对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中的步骤，包括：获取所述图片的图片大小，将所述图片大小与预设图片阈值进行比较，并根据比较结果将所述图片大小超过所述预设图片阈值的图片作为待检测图片；调用预置JavaScript函数检测所述待检测图片是否显示于所述当前展示页面中。优选地，所述根据所述异常加载图片生成异常加载报告的步骤，包括：统计所述异常加载图片的图片数量，以及所述浏览器已加载的所有图片对应的图片总数；根据所述图片数量和所述图片总数确定所述异常加载图片在已加载的所有图片中的占比；根据所述占比获取所述当前展示页面的页面健康等级，并基于所述页面健康等级和所述异常加载图片生成异常加载报告。优选地，所述根据所述占比获取所述当前展示页面的页面健康等级，并基于所述页面健康等级和所述异常加载图片生成异常加载报告的步骤，包括：根据预先划分的页面健康程度范围确定所述占比所属的目标范围；在预先构建的页面健康程度范围与页面健康等级的映射关系表中查找所述目标范围对应的页面健康等级；检测所述页面健康等级是否高于预设预警等级，若高于则根据所述页面健康等级和所述异常加载图片生成异常加载报告。此外，为实现上述目的，本专利技术还提出一种网页资源懒加载监控装置，所述装置包括：地址检测模块，用于获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址；图片加载模块，用于在所述页面地址属于所述预设监控页面地址时，对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片；图片检测模块，用于对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中；报告生成模块，用于在所述待检测图片未显示于所述当前展示页面中时，判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告。此外，为实现上述目的，本专利技术还提出一种网页资源懒加载监控设备，所述设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页资源懒加载监控程序，所述网页资源懒加载监控程序配置为实现如上文所述的网页资源懒加载监控方法的步骤。此外，为实现上述目的，本专利技术还提出一种存储介质，所述存储介质上存储有网页资源懒加载监控程序，所述网页资源懒加载监控程序被处理器执行时实现如上文所述的网页资源懒加载监控方法的步骤。本专利技术通过获取浏览器当前展示页面对应的页面地址，检测页面地址是否属于预设监控页面地址，若属于则对浏览器进行页面渲染以获取浏览器已加载的所有图片，对图片进行筛选以获取待检测图片并检测待检测图片是否显示于所述当前展示页面中，若否则判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告，由于本专利技术是在检测到浏览器当前展示页面对应的页面地址属于预设监控页面地址时，然后通过对浏览器进行页面渲染获取浏览器已加载的所有图片，并从中筛选并检测出异常加载图片，再根据异常加载图片生成异常加载报告，从而能够有效的对网页资源的懒加载进行监控，优化网页页面性能，也提高了用户的网络体验。附图说明图1是本专利技术实施例方案涉及的硬件运行环境的网页资源懒加载监控设备的结构示意图；图2为本专利技术网页资源懒加载监控方法第一实施例的流程示意图；图3为本专利技术网页资源懒加载监控方法第二实施例的流程示意图；图4为本专利技术网页资源懒加载监控方法第三实施例的流程示意图；图5为本专利技术网页资源懒加载监控装置第一实施例的结构框图。本专利技术目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。具体实施方式应当理解，此处所描述的具体实施例仅用以解释本专利技术，并不用于限定本专利技术。参照图1，图1为本专利技术实施例方案涉及的硬件运行环境的网页资源懒加载监控设备结构示意图。如图1所示，该网页资源懒加载监控设备可以包括：处理器1001，例如中央处理器(CentralProcessingUnit，CPU)，通信总线1002、用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口(如无线保真(WIreless-FIdelity，WI-FI)接口)。存储器1005可以是高速的随机存取存储器(RandomAccessMemory，RAM)存储器，也可以是稳定的非易失性存储器(Non-VolatileM本文档来自技高网...

【技术保护点】
1.一种网页资源懒加载监控方法，其特征在于，所述方法包括：获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址；若属于，则对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片；对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中；若否，则判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告。

【技术特征摘要】
1.一种网页资源懒加载监控方法，其特征在于，所述方法包括：获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址；若属于，则对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片；对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中；若否，则判定所述待检测图片为异常加载图片，并根据所述异常加载图片生成异常加载报告。2.如权利要求1所述的方法，其特征在于，所述获取浏览器当前展示页面对应的页面地址，检测所述页面地址是否属于预设监控页面地址的步骤，包括：获取浏览器当前展示页面对应的页面地址，从所述页面地址中提取对应的访问域名；在映射关系中查找所述访问域名对应的页面监控白名单，所述映射关系中存放有访问域名与页面监控白名单之间的对应关系；检测所述页面地址是否属于所述页面监控白名单预设监控页面地址中的其中之一。3.如权利要求1或2所述的方法，其特征在于，所述对所述浏览器进行页面渲染以获取所述浏览器已加载的所有图片的步骤，包括：在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源；将所述前端框架以及所述预加载页面资源发送至所述浏览器，以使所述浏览器基于所述前端框架对所述预加载页面资源进行加载，并获取加载完成时所述浏览器中已加载的所有图片。4.如权利要求3所述的方法，其特征在于，所述在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板，并获取所述文档对象模板对应的预加载页面资源的步骤，包括：在预设数据库中查找所述页面地址对应的前端框架以及文档对象模板；获取所述文档对象模板中每个文档对象对应的对象属性，并根据所述对象属性获取对应的预加载页面资源。5.如权利要求1所述的方法，其特征在于，所述对所述图片进行筛选以获取待检测图片，检测所述待检测图片是否显示于所述当前展示页面中的步骤，包括：获取所述图片的图片大小，将所述图片大小与预设图片阈值进行比较，并根据比较结果将所述图片大小超过所述预设图片阈值的图片作为待检测图片；调用预置JavaScr...

【专利技术属性】
技术研发人员：杨军，冯佳慧，
申请(专利权)人：平安城市建设科技深圳有限公司，
类型：发明
国别省市：广东,44