[发明专利]一种浏览器动态加载网页资源的优化方法及浏览器

说明书

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

技术领域

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

背景技术

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

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

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

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

发明内容

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

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

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

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

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

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

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

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