CN109857966A - 一种浏览器动态加载网页资源的优化方法及浏览器 - Google Patents

Abstract

本发明公开了一种浏览器动态加载网页资源的优化方法及浏览器，涉及网络浏览器领域，包括：为浏览器加载的页面添加一个包括图片地址信息和过期时间的动态图片列表；浏览器需动态加载图片时，若动态图片列表中存在该图片且未过期，则直接加载；否则从服务器下载该图片并加入动态图片列表中。本发明的浏览器动态加载网页资源的优化方法及浏览器，可消除浏览器动态加载网页资源时视觉效果出现的停顿感，显著提升了用户体验。

Description

一种浏览器动态加载网页资源的优化方法及浏览器

技术领域

本发明涉及网络浏览器领域，具体涉及一种浏览器动态加载网页资源的优化方法及浏览器。

背景技术

浏览器是一种将指定网页数据进行显示，并能根据用户输入实现用户和网页交互的工具，它几乎是目前使用率最高的客户端软件了。浏览器的核心是渲染引擎，也就是浏览器内核，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释和实现方式也有不同，因此同一网页在不同的内核的浏览器里的显示效果也可能不同。对浏览器的显示效果和性能做一些优化，达到尽可能好的用户体验，是每一个浏览器开发者的追求和目标。

一般浏览器中都会设置浏览器支持缓存，这样可以将访问过的页面和资源保存起来，便于后续再次访问时直接读取缓存，不需要再向服务器请求，这是常见的浏览器支持缓存时静态加载图片的流程。

但是，在一些情况下，由于页面写法的限制，代码会写成动态加载图片等网页资源的方式，这种图片资源加载，即使将浏览器设置为支持缓存，也会每次都向服务器请求下载图片资源，但是服务器上的该资源一直都不会修改。比如IPTV播放页面中常见的暂停图标显示，其中暂停图标就是通过图片标签的innerHTML属性进行设置的，这个属性描述的HTML图片标签对应的图片总是以动态方式加载的。大多数浏览器对这种图片动态加载的流程的做法是：每次加载图片时，向服务端发起请求，即使设置浏览器为支持缓存，仍然会忽略本地缓存。其中第一次向服务器请求后，图片会下载到本地缓存起来。解析图片响应信息，会发现带有max-age或Etag信息，通过解析这些字段可以获取此图片的过期时间。第二次及以后请求服务器时，由于在这样的使用场景下，图片资源在服务器上一般是没有修改的，所以第二次及以后总是返回304Not Modified，表示图片未更新，并且不下载图片资源，从缓存获取图片显示。但是第二次向服务器请求的时间延迟会导致页面播放时实时显示的暂停画面与需要请求的暂停图片显示呈现时间差，用户体验不好。表现就是用户按下暂停键，播放界面已经暂停，但是暂停图标延迟一会后才显示出来。

在此使用场景下，由于播放界面有视频暂停和页面显示的对比，图标加载延迟的现象显而易见，会显著导致用户体验降低。

发明内容

针对现有技术中存在的缺陷，本发明的目的在于提供一种浏览器动态加载网页资源的优化方法及浏览器，可消除浏览器动态加载网页资源时视觉效果出现的停顿感，显著提升了用户体验。

为达到以上目的，本发明采取的技术方案是：

一种浏览器动态加载网页资源的优化方法，包括：

为浏览器加载的页面添加一个包括图片地址信息和过期时间的动态图片列表；

浏览器需动态加载图片时，若动态图片列表中存在该图片且未过期，则直接加载；否则从服务器下载该图片并加入动态图片列表中。

在上述技术方案的基础上，在添加动态图片列表前，初始化浏览器并设置其支持缓存。

在上述技术方案的基础上，当浏览器收到网页资源加载请求时，判断该请求是否为页面的动态加载图片请求，如是执行加载或下载动作；否则按浏览器默认加载流程加载该网页资源。

在上述技术方案的基础上，浏览器检测到加载图片资源请求时，判断该图片是否在本地缓存，如该图片在本地缓存且在动态图片列表中可获取该动态图片地址，直接加载本地缓存；如该图片未在本地缓存，则下载图片到本地缓存并显示。

在上述技术方案的基础上，在下载图片到本地缓存并显示后，还包括：解析并从服务器获取图片过期时间；在获取图片过期时间后，查找动态图片列表添加或更新图片信息。

在上述技术方案的基础上，在未能从服务器获取图片过期时间时，查找动态图片列表添加或更新图片信息，将该图片的过期时间设置为默认值。

在上述技术方案的基础上，如该图片在本地缓存且在动态图片列表中无法获取该动态图片地址时，根据动态图片列表中该动态图片过期时间，判断图片是否过期，如未过期，直接加载本地缓存图片；如已过期，重新下载图片到本地缓存并显示。

在上述技术方案的基础上，还包括：

设置并发线程，在添加动态图片列表后，按预设间隔时间检测所述动态图片列表中各图片过期时间，并根据检测结果更新动态图片列表。

在上述技术方案的基础上，根据检测结果更新动态图片列表具体包括：按预设间隔时间逐一判断所述动态图片列表中图片是否过期，图片过期时，重新向服务器请求下载该图片并保存到本地，获取并更新图片过期时间；在无法获取到图片过期时间时，将图片过期时间设置为默认值。

本发明还提供一种浏览器，包括：

浏览器内核，其用于在浏览器加载页面时，解析该页面，并为该页面添加包括图片地址信息和过期时间的动态图片列表；设置并发线程，使用所述并发线程根据图片过期时间检测结果更新动态图片列表；

解析模块，其用于按预设间隔时间解析并获取所述动态图片列表中各图片过期时间；

获取模块，其用于当浏览器动态加载图片时，获取动态图片加载地址；

加载模块，其用于根据动态图片列表中的动态图片加载地址，直接加载本地缓存图片。

与现有技术相比，本发明的优点在于：

(1)本发明实施例中的浏览器动态加载网页资源的优化方法通过重设动态网页资源特别是图片资源加载的逻辑，在现有的浏览器网页资源加载流程的基础上增加了动态图片加载优先判断本地缓存是否过期和设置图片过期时间，以及定期采用线程下载已经过期图片的流程，使加载原有资源时可优先从缓存读取，图片显示较快，可消除浏览器动态加载网页资源时视觉效果出现的停顿感，显著提升了用户体验。

(2)本发明实施例中的浏览器动态加载网页资源的优化方法通过优先读取本地缓存，根据图片过期时间判断是否向服务器请求，避免重复的服务器请求，减小网络耗时操作，提高图片等网页资源的显示速度。

(3)本发明实施例中的浏览器动态加载网页资源的优化方法通过将一般浏览器中动态加载图片时每次向服务器请求的流程，优化为优先从本地缓存加载，本地无缓存再向服务器器请求，并且定期向服务器请求更新此图片，既能提高图片显示速度，又能保证本地缓存图片与服务器保持一致。

附图说明

图1为本发明实施例浏览器动态加载网页资源的优化方法中页面图片动态加载请求流程图；

图2为本发明实施例浏览器动态加载网页资源的优化方法中页面图片动态加载时并发线程的流程图。

具体实施方式

以下结合附图及实施例对本发明作进一步详细说明。

实施例1

本发明实施例提供一种浏览器动态加载网页资源的优化方法，包括：

初始化浏览器并设置浏览器支持缓存；

在浏览器加载页面时，解析该页面，并为该页面添加包括图片地址信息和过期时间的动态图片列表；

当浏览器动态加载图片时，获取动态图片加载地址，在动态图片列表中查找所述动态图片加载地址，如动态图片列表中存在该动态图片加载地址，直接加载本地缓存图片；如动态图片列表中不存在该动态图片加载地址，在动态图片列表中添加该动态图片加载地址。

实施例2

本发明实施例提供一种浏览器动态加载网页资源的优化方法，其与实施例1基本相同，区别在于，还包括：

当浏览器收到网页资源加载请求时，判断该请求是否为页面的动态加载图片请求，如是执行加载或下载动作；否则按浏览器默认加载流程加载该网页资源。

实施例3

本发明实施例提供一种浏览器动态加载网页资源的优化方法，其与实施例2基本相同，区别在于：

在检测到的网页资源加载请求为加载图片资源请求时，首先判断该图片是否在本地缓存，如该图片在本地缓存且在动态图片列表中可获取该动态图片地址，直接加载本地缓存；如该图片未在本地缓存，则下载图片到本地缓存并显示。

为了进一步优化加载方法，防止由于图片过期导致的步骤执行错误或加载错误，在上述步骤后，还可以对加载请求对应的动态图片进行解析并从服务器获取图片过期时间；在获取图片过期时间后，查找动态图片列表添加或更新图片信息。

实施例4

参见图1所示，本发明实施例提供一种浏览器动态加载网页资源的优化方法，其具体流程如下：

步骤101、初始化浏览器，将浏览器设置为支持缓存；

步骤102、加载某页面，将页面资源信息保存起来，新建页面动态加载图片列表；

步骤103、判断加载内容是否为动态加载图片请求，如是，转至步骤104；当页面加载其他资源时，按浏览器默认的加载流程加载；

步骤104、如果是页面的动态图片加载请求，获取此动态图片地址；

步骤105、判断图片是否存在本地缓存，如本地无此图片缓存，转至步骤106；如本地有此图片缓存，转至步骤110；

步骤106、从服务器下载图片到本地缓存并显示；

步骤107、判断是否可解析服务器信息获取此图片的过期时间信息，如是转至步骤108；如否转至步骤109；

步骤108、在动态图片列表中查找到该图片，添加或者更新该图片的过期时间信息到此页面的动态图片列表信息，结束。

步骤109、在动态图片列表中查找到该图片，添加或者更新该图片对应的动态图片列表信息，将动态图片列表中此图片过期时间设为0，结束。

步骤110、判断动态图片列表中是否有此图片信息，如果有转至步骤111，如果没有转至步骤113；

步骤111、判断图片是否已过期，如已过期转至步骤106，如未过期转至步骤112；

步骤112、直接加载本地缓存显示，结束。

步骤113、先加载本地缓存显示，然后将图片信息添加到动态图片列表，将动态图片列表中此图片过期时间设为0，结束。

实施例5

本发明实施例提供一种浏览器动态加载网页资源的优化方法，其与实施例4基本相同，区别在于，还包括：设置并发线程，使用所述并发线程在添加包括图片地址信息和过期时间的动态图片列表后，按预设间隔时间检测所述动态图片列表中各图片过期时间，并根据检测结果更新动态图片列表。预设时间可根据工作人员经验进行设定，其设置时应保障不应过小，以减轻系统运行负载，同时也应小于绝大多数图片的过期时间，保障列表中图片的及时更新。

其中，按预设间隔时间检测所述动态图片列表中各图片过期时间，并根据检测结果更新动态图片列表的流程具体包括：

按预设间隔时间逐一判断所述动态图片列表中图片是否过期；

在图片过期时，重新向服务器请求下载该图片并保存到本地；

获取并更新图片过期时间；在无法获取到图片过期时间时，将图片过期时间设置为默认值。例如，可将此处更新过的图片的过期时间设置为0，确保列表中动态图片再本地能一直有未过期的缓存可以使用。

参见图2所示，一个本发明实施例中的并发线程的工作流程如下：

S201、按预设间隔时间逐一判断所述动态图片列表中图片是否过期，如已过期转至步骤S202；如未过期，跳过该图片判断下一图片；

S202、重新向服务器请求下载该图片并保存到本地；

S203、判断是否可解析及获取到图片过期时间，如是转至步骤S204，如否，转至步骤S205；

S204、更新动态图片列表中该图片的过期时间，结束。

S205、将动态图片列表中该图片过期时间设置为0，结束。

实施例6

本发明实施例提供一种浏览器，包括：

浏览器内核，其用于初始化浏览器并设置浏览器支持缓存；在浏览器加载页面时，解析该页面，并为该页面添加包括图片地址信息和过期时间的动态图片列表；设置并发线程，使用所述并发线程根据图片过期时间检测结果更新动态图片列表；解析模块，其用于按预设间隔时间解析并获取所述动态图片列表中各图片过期时间；获取模块，其用于当浏览器动态加载图片时，获取动态图片加载地址；加载模块，其用于根据动态图片列表中的动态图片加载地址，直接加载本地缓存图片。

本发明不局限于上述实施方式，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围之内。本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术。

Claims (10)

1.一种浏览器动态加载网页资源的优化方法，其特征在于，包括：

为浏览器加载的页面添加一个包括图片地址信息和过期时间的动态图片列表；

浏览器需动态加载图片时，若动态图片列表中存在该图片且未过期，则直接加载；否则从服务器下载该图片并加入动态图片列表中。

2.如权利要求1所述的浏览器动态加载网页资源的优化方法，其特征在于：

在添加动态图片列表前，初始化浏览器并设置其支持缓存。

3.如权利要求1所述的浏览器动态加载网页资源的优化方法，其特征在于：

当浏览器收到网页资源加载请求时，判断该请求是否为页面的动态加载图片请求，如是执行加载或下载动作；否则按浏览器默认加载流程加载该网页资源。

4.如权利要求1所述的浏览器动态加载网页资源的优化方法，其特征在于：

浏览器检测到加载图片资源请求时，判断该图片是否在本地缓存，如该图片在本地缓存且在动态图片列表中可获取该动态图片地址，直接加载本地缓存；如该图片未在本地缓存，则下载图片到本地缓存并显示。

5.如权利要求4所述的浏览器动态加载网页资源的优化方法，其特征在于，在下载图片到本地缓存并显示后，还包括：

解析并从服务器获取图片过期时间；

在获取图片过期时间后，查找动态图片列表添加或更新图片信息。

6.如权利要求5所述的浏览器动态加载网页资源的优化方法，其特征在于：

在未能从服务器获取图片过期时间时，查找动态图片列表添加或更新图片信息，将该图片的过期时间设置为默认值。

7.如权利要求4所述的浏览器动态加载网页资源的优化方法，其特征在于：

如该图片在本地缓存且在动态图片列表中无法获取该动态图片地址时，根据动态图片列表中该动态图片过期时间，判断图片是否过期，如未过期，直接加载本地缓存图片；如已过期，重新下载图片到本地缓存并显示。

8.如权利要求1所述的浏览器动态加载网页资源的优化方法，其特征在于，还包括：

设置并发线程，在添加动态图片列表后，按预设间隔时间检测所述动态图片列表中各图片过期时间，并根据检测结果更新动态图片列表。

9.如权利要求8所述的浏览器动态加载网页资源的优化方法，其特征在于，根据检测结果更新动态图片列表具体包括：

按预设间隔时间逐一判断所述动态图片列表中图片是否过期，图片过期时，重新向服务器请求下载该图片并保存到本地，获取并更新图片过期时间；在无法获取到图片过期时间时，将图片过期时间设置为默认值。

10.一种浏览器，其特征在于，包括：

浏览器内核，其用于在浏览器加载页面时，解析该页面，并为该页面添加包括图片地址信息和过期时间的动态图片列表；设置并发线程，使用所述并发线程根据图片过期时间检测结果更新动态图片列表；

解析模块，其用于按预设间隔时间解析并获取所述动态图片列表中各图片过期时间；

获取模块，其用于当浏览器动态加载图片时，获取动态图片加载地址；

加载模块，其用于根据动态图片列表中的动态图片加载地址，直接加载本地缓存图片。