网页加载速度提升方法及相关装置制造方法及图纸

本发明专利技术涉及互联网领域，公开了一种网页加载速度提升方法及相关装置，通过获取目标资源的标签信息，并将所述目标资源的标签信息对应的统一资源定位符存放至所述目标资源对应的预设属性中；创建预设观察函数，并在目标页面监听DOMContentLoaded事件；在满足触发条件时，所述DOMContentLoaded事件被触发，通过所述预设观察函数对所述目标资源对应的预设属性进行遍历以获得遍历结果；根据所述遍历结果确认可视资源，并将所述可视资源对应的所述统一资源定位符赋值到所述可视资源的目标属性中以进行对所述可视资源的加载，在网页的加载过程中通过监控可视资源的变更，对需要加载的资源进行加载，实现了提升网页加载速度的技术效果。效果。效果。

【技术实现步骤摘要】
网页加载速度提升方法及相关装置


[0001]本专利技术涉及互联网领域，尤其涉及一种网页加载速度提升方法及相关装置。

技术介绍

[0002]随着科技发展的进步，人们的生活越来越离不开互联网。一直以来，网页加载速度在很大程度上取决于图片、视频资源的数量和大小。当网页的图片、视频资源越多，理论上网页的加载速度越慢。因此，如何提升网页加载性能和速度、节省流量、节省用户等待的时间，从而达到提升用户体验、减轻服务器压力的目的成为了亟待解决的技术问题。
[0003]上述内容仅用于辅助理解本专利技术的技术方案，并不代表承认上述内容是现有技术。

技术实现思路

[0004]本专利技术的主要目的在于提供一种网页加载速度提升方法及相关装置，旨在解决如何提升网页加载速度的技术问题。
[0005]为实现上述目的，本专利技术提供一种网页加载速度提升方法，所述方法包括以下步骤：
[0006]获取目标资源的标签信息，并将所述目标资源的标签信息对应的统一资源定位符存放至所述目标资源对应的预设属性中；
[0007]创建预设观察函数，并在目标页面监听DOMContentLoaded事件；
[0008]在满足触发条件时，所述DOMContentLoaded事件被触发，通过所述预设观察函数对所述目标资源对应的预设属性进行遍历以获得遍历结果；
[0009]根据所述遍历结果确认可视资源，并将所述可视资源对应的所述统一资源定位符赋值到所述可视资源的目标属性中以进行对所述可视资源的加载。
[0010]可选地，所述获取目标资源的标签信息，并将所述目标资源的标签信息对应的统一资源定位符存放至所述目标资源对应的预设属性中包括：
[0011]获取目标资源的标签信息，所述目标资源包括：需要优化加载的图片和/或视频；
[0012]将所述目标资源的标签信息对应的URL链接存放至所述目标资源对应的预设属性中。
[0013]可选地，所述创建预设观察函数，并在目标页面监听DOMContentLoaded事件包括：
[0014]在document.addEventListener方法内创建观察函数IntersectionObserver；
[0015]根据所述观察函数IntersectionObserver对应的监听参数在目标页面监听DOMContentLoaded事件。
[0016]可选地，所述在满足触发条件时，所述DOMContentLoaded事件被触发，通过所述预设观察函数对所述目标资源对应的预设属性进行遍历以获得遍历结果包括：
[0017]在所述目标页面中，HTML文档被完全加载和解析完成时，所述DOMContentLoaded事件被触发；
[0018]通过所述预设观察函数对所述目标资源对应的预设属性进行遍历并获得遍历结果。
[0019]可选地，所述根据所述遍历结果确认可视资源，并将所述可视资源对应的所述统一资源定位符赋值到所述可视资源的目标属性中以进行对所述可视资源的加载包括：
[0020]在所述遍历结果中根据是否进入视口作为判定条件，若在所述遍历结果中存在进入视口的资源，则将所述资源判定为可视资源；
[0021]将所述可视资源对应的所述统一资源定位符赋值到所述可视资源的目标属性中以对所述可视资源进行加载。
[0022]可选地，所述将所述可视资源对应的所述统一资源定位符赋值到所述可视资源的目标属性中以对所述可视资源进行加载包括：
[0023]将所述可视资源对应的统一资源定位符赋值到所述可视资源的src属性中；
[0024]根据所述可视资源的scr属性完成对所述可视资源的加载。
[0025]可选地，所述根据所述遍历结果确认可视资源，并将所述可视资源对应的所述统一资源定位符赋值到所述可视资源的目标属性中以进行对所述可视资源的加载之后，还包括：
[0026]解除对所述可视资源的监听；
[0027]判定是否还有需要加载的目标资源，若有，则继续在所述目标页面监听所述DOMContentLoaded事件；
[0028]若无，则将所述可视资源的目标属性中的统一资源定位符进行清空。
[0029]此外，为实现上述目的，本专利技术还提出一种网页加载速度提升装置，所述网页加载速度提升装置包括：
[0030]资源获取模块，用于获取目标资源的标签信息，并将所述目标资源的标签信息对应的统一资源定位符存放至所述目标资源对应的预设属性中；
[0031]资源监听模块，用于创建预设观察函数，并在目标页面监听DOMContentLoaded事件；
[0032]资源遍历模块，用于在满足触发条件时，所述DOMContentLoaded事件被触发，通过所述预设观察函数对所述目标资源对应的预设属性进行遍历以获得遍历结果；
[0033]资源加载模块，用于根据所述遍历结果确认可视资源，并将所述可视资源对应的所述统一资源定位符赋值到所述可视资源的目标属性中以进行对所述可视资源的加载。
[0034]此外，为实现上述目的，本专利技术还提出一种网页加载速度提升设备，所述网页加载速度提升设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页加载速度提升生成程序，所述网页加载速度提升程序配置为实现如上文所述的网页加载速度提升方法的步骤。
[0035]此外，为实现上述目的，本专利技术还提出一种存储介质，所述存储介质上存储有网页加载速度提升程序，所述网页加载速度提升程序被处理器执行时实现如上文所述的网页加载速度提升生成方法的步骤。
[0036]本专利技术通过获取目标资源的标签信息，并将所述目标资源的标签信息对应的统一资源定位符存放至所述目标资源对应的预设属性中；创建预设观察函数，并在目标页面监听DOMContentLoaded事件；在满足触发条件时，所述DOMContentLoaded事件被触发，通过所
述预设观察函数对所述目标资源对应的预设属性进行遍历以获得遍历结果；根据所述遍历结果确认可视资源，并将所述可视资源对应的所述统一资源定位符赋值到所述可视资源的目标属性中以进行对所述可视资源的加载，在网页的加载过程中通过监控可视资源的变更，对需要加载的资源进行加载，比通过浏览器的滚动条的位置信息获取浏览器当前视窗的方法要简洁，实现难度也更小，实现了提升网页加载速度的技术效果。
附图说明
[0037]图1是本专利技术实施例方案涉及的硬件运行环境的网页加载速度提升设备的结构示意图；
[0038]图2为本专利技术网页加载速度提升方法第一实施例的流程示意图；
[0039]图3为本专利技术网页加载速度提升方法第二实施例的流程示意图
[0040]图4为本专利技术网页加载速度提升装置第一实施例的结构框图。
[0041]本专利技术目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
具体实施方式
[0042]应当理解，此处所描述的具体实施例仅用以解释本专利技术，并不用于限定本本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页加载速度提升方法，其特征在于，所述网页加载速度提升方法包括：获取目标资源的标签信息，并将所述目标资源的标签信息对应的统一资源定位符存放至所述目标资源对应的预设属性中；创建预设观察函数，并在目标页面监听DOMContentLoaded事件；在满足触发条件时，所述DOMContentLoaded事件被触发，通过所述预设观察函数对所述目标资源对应的预设属性进行遍历以获得遍历结果；根据所述遍历结果确认可视资源，并将所述可视资源对应的所述统一资源定位符赋值到所述可视资源的目标属性中以进行对所述可视资源的加载。2.根据权利要求1所述的网页加载速度提升方法，其特征在于，所述获取目标资源的标签信息，并将所述目标资源的标签信息对应的统一资源定位符存放至所述目标资源对应的预设属性中包括：获取目标资源的标签信息，所述目标资源包括：需要优化加载的图片和/或视频；将所述目标资源的标签信息对应的URL链接存放至所述目标资源对应的预设属性中。3.根据权利要求1所述的网页加载速度提升方法，其特征在于，所述创建预设观察函数，并在目标页面监听DOMContentLoaded事件包括：在document.addEventListener方法内创建观察函数IntersectionObserver；根据所述观察函数IntersectionObserver对应的监听参数在目标页面监听DOMContentLoaded事件。4.根据权利要求1所述的网页加载速度提升方法，其特征在于，所述在满足触发条件时，所述DOMContentLoaded事件被触发，通过所述预设观察函数对所述目标资源对应的预设属性进行遍历以获得遍历结果包括：在所述目标页面中，HTML文档被完全加载和解析完成时，所述DOMContentLoaded事件被触发；通过所述预设观察函数对所述目标资源对应的预设属性进行遍历并获得遍历结果。5.根据权利要求1所述的网页加载速度提升方法，其特征在于，所述根据所述遍历结果确认可视资源，并将所述可视资源对应的所述统一资源定位符赋值到所述可视资源的目标属性中以进行对所述可视资源的加载包括：在所述遍历结果中根据是否进入视口作为判定条件，若在所述遍历结果中存在进入...

【专利技术属性】
技术研发人员：刘旭，
申请(专利权)人：深圳市大头兄弟科技有限公司，
类型：发明
国别省市：