网页显示处理方法及装置的制造方法
【专利摘要】本发明公开了一种网页显示处理方法，包括：截获服务器返回给客户端的第一HTML数据；判断所述第一HTML数据中是否存在图片，并确定所述图片的像素面积是否大于预设阈值；若所述第一HTML数据中图片的像素面积大于所述阈值，则根据预置的配置处理策略对所述第一HTML数据中的所述图片进行处理，得到第二HTML数据；将所述第二HTML数据发送至所述客户端上进行网页显示。本发明还公开了一种网页显示处理装置。本发明提升了网页处理效率及网页内容显示速度。
【专利说明】
网页显示处理方法及装置
技术领域
[0001]本发明涉及通信技术领域，尤其涉及网页显示处理方法及装置。
【背景技术】
[0002]现有网页中，为更丰富网页显示内容，提高网页的表达能力，因而相应会在网页中加入除文字外的其他网页元素，比如图片、视频等，而这类网页元素中，图片所占比例最大，同时图片的表达能力也更直接。但另一方面，若网页中图片过多(特别是大图片)则会影响网页的加载效率及显示速度，因此，在提高网页表达能力的同时，还需进一步考虑如何提高网页的显示处理效率及速度。
【发明内容】
[0003]本发明的主要目的在于如何在提高网页表达能力的同时，进一步提高网页的显示处理效率及速度的技术问题。
[0004]为实现上述目的，本发明提供一种网页显示处理方法，所述网页显示处理方法包括:
[0005]截获服务器返回给客户端的第一HTML数据；
[0006]判断所述第一HTML数据中是否存在图片，并确定所述图片的像素面积是否大于预设阈值；
[0007]若所述第一HTML数据中图片的像素面积大于所述阈值，则根据预置的配置处理策略对所述第一 HTML数据中的所述图片进行处理，得到第二 HTML数据；
[0008]将所述第二 HTML数据发送至所述客户端上进行网页显示。
[0009]优选地，所述截获服务器返回给客户端的第一HTML数据之后包括:
[0010]判断所述第一HTML数据中是否存在压缩数据；
[0011 ]若存在，则对所述压缩数据进行解压。
[0012]优选地，所述根据预置的配置处理策略对所述第一HTML数据中的所述图片进行处理包括:
[0013]当所述配置处理策略为图片替换策略时，采用指定图片替换所述图片;或，将所述图片所对应的缩略图替换所述图片，其中，采用异步执行方式生成所述图片所对应的缩略图并缓存。
[0014]优选地，所述根据预置的配置处理策略对所述第一HTML数据中的所述图片进行处理包括:
[0015]当所述配置处理策略为延时显示策略时，在所述第一HTML数据中插入预置延时代码，以供所述客户端延时加载所述图片。
[0016]优选地，所述根据预置的配置处理策略对所述第一HTML数据中的所述图片进行处理包括:
[0017]当所述配置处理策略为基于用户行为的显示策略时，对所述图片的显示触发方式进行设置，其中，图片的显示触发方式至少包括点击图片触发和/或鼠标停留在图片上触发。
[0018]进一步地，为实现上述目的，本发明还提供一种网页显示处理装置，所述网页显示处理装置包括:
[0019]截获模块，用于截获服务器返回给客户端的第一HTML数据；
[0020]判断模块，用于判断所述第一HTML数据中是否存在图片，并确定所述图片的像素面积是否大于预设阈值；
[0021]图片处理模块，用于若所述第一HTML数据中图片的像素面积大于所述阈值，则根据预置的配置处理策略对所述第一 HTML数据中的所述图片进行处理，得到第二 HTML数据；
[0022]转发模块，用于将所述第二HTML数据发送至所述客户端上进行网页显示。
[0023]优选地，所述判断模块还用于:
[0024]判断所述第一HTML数据中是否存在压缩数据；
[0025]若存在，则对所述压缩数据进行解压。
[0026]优选地，所述图片处理模块具体用于:
[0027]当所述配置处理策略为图片替换策略时，采用指定图片替换所述图片;或，将所述图片所对应的缩略图替换所述图片，其中，采用异步执行方式生成所述图片所对应的缩略图并缓存。
[0028]优选地，所述图片处理模块具体用于:
[0029]当所述配置处理策略为延时显示策略时，在所述第一HTML数据中插入预置延时代码，以供所述客户端延时加载所述图片。
[0030]优选地，所述图片处理模块具体用于:
[0031]当所述配置处理策略为基于用户行为的显示策略时，对所述图片的显示触发方式进行设置，其中，图片的显示触发方式至少包括点击图片触发和/或鼠标停留在图片上触发。
[0032]本发明中，在网页在客户端显示之前，截获服务器所返回的HTML数据，并进行检查，以对该HTML数据中满足预设条件的图片数据进行预处理，最后再将预处理后的HTML数据转发至客户端进行显示，从而以此提升网页显示处理效率及显示速度。
【附图说明】
[0033]图1为本发明网页显示处理方法第一实施例的流程示意图；
[0034]图2为本发明网页显示处理方法中网页显示处理架构示意图；
[0035]图3为本发明网页显示处理方法第二实施例的流程示意图；
[0036]图4为本发明网页显示处理装置一实施例的功能模块示意图。
[0037]本发明目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。
【具体实施方式】
[0038]应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。
[0039]参照图1，图1为本发明网页显示处理方法第一实施例的流程示意图。本实施例中，所述网页显示处理方法包括:
[0040]步骤SlO，截获服务器返回给客户端的第一HTML数据；
[0041]本实施例中，客户端用于处理用户通过浏览器所提交的网页获取请求，而服务器则用于处理该网格员获取请求，同时将对应的HTML数据返回给客户端。网页显示处理装置则需要截获服务器返回给客户端的第一 HTML数据，进而对第一 HTML数据进行处理，如图2所示的网页显示处理架构示意图。
[0042]本实施例中，网页显示处理装置可以是上网行为管理设备、负载均衡器、缓存服务器、流量管理设备等，但不限于此类设备，只要能够代理HTTP服务即可。
[0043]步骤S20，判断所述第一HTML数据中是否存在图片，并确定所述图片的像素面积是否大于预设阈值；
[0044]本实施例中，具体通过HTML标签(〈image〉标签)，确定第一HTML数据中是否存在图片。通常，HTML中的图片都会显示其分辨率，因此，可根据分辨率计算并确定图片的像素面积是否大于预设阈值，像素面积越大，则图片越大，对应加载该图片的时间也越长，也即网页中显示该图片的速度越慢。本实施例中对于图片大小阈值的设置不限，具体根据实际需要进行设置。
[0045]步骤S30，若所述第一HTML数据中图片的像素面积大于所述阈值，则根据预置的配置处理策略对所述第一 HTML数据中的所述图片进行处理，得到第二 HTML数据；
[0046]步骤S40，将所述第二 HTML数据发送至所述客户端上进行网页显示。
[0047]本实施例中，当检测到满足条件的图片时，需要根据预置的配置处理策略，对该图片进行相应处理，并得到处理该图片后所对应的第二 HTML数据。
[0048]本实施例中，对于配置处理策略的设置不限，例如删除图片等。当完成对图片的相应处理后，网页显示处理装置还需进一步将处理该图片后所对应的第二 HTML数据转发至客户端上进行网页显示。
[0049]另外，需要进一步说明的是，若截取到的第一HTML数据中不包含图片，则直接将第一 HTML数据返回给客户端进行网页显示，从而有针对性地处理图片，提升网页显示速度。
[0050]本实施例中，在网页在客户端显示之前，网页显示处理装置截获服务器所返回的HTML数据，并进行检查，以对该HTML数据中满足预设条件的图片数据进行预处理，最后再将预处理后的HTML数据转发至客户端进行显示，从而以此提升网页显示处理效率及显示速度。
[0051]参照图3，图3为本发明网页显示处理方法第二实施例的流程示意图。本实施例与上述方法第一实施例的区别在于，本实施例中，上述步骤SlO之后包括:
[0052]步骤SOl，判断所述第一HTML数据中是否存在压缩数据；
[0053]步骤S02，若存在，则对所述压缩数据进行解压。
[0054]本实施例中，考虑到服务器所返回的HTML数据中可能包含有压缩数据(比如对大型图片进行压缩)的特殊情况，因此，需要先对HTML数据进行解压缩处理，然后再对包括解压数据在内的所有HTML数据进行图片查询遍历，若遍历到满足条件的图片，则进行相应处理，最后再转发至客户端进行显示，从而以此提升网页显示处理效率及显示速度。
[0055]进一步可选的，在本发明网页显示处理方法一实施例中，上述步骤S30具体包括:
[0056](I)当所述配置处理策略为图片替换策略时，采用指定图片替换所述图片;或，将所述图片所对应的缩略图替换所述图片，其中，采用异步执行方式生成所述图片所对应的缩略图并缓存；
[0057]本实施例中，配置处理策略具体采用图片替换策略，具体包括缩略图策略与固定图策略。
[0058]缩略图策略将会对大图片生成一个小的缩略图，一般为32*32，图片大小在Ik以下，生成缩略图的过程为采用异步执行，并且缩略图可以缓存下来。然后把HTML的MG标签的SRC地址替换成缩略图地址，比如在原地址后面加上?thumbnail以便客户端下次请求时，网页显示处理装置能识别出是请求缩略图。由于缩略图分辨率一般是原图的十几分之一，所以客户端的浏览器在显示缩略图时，会拉升显示，显示出来的效果即是一个模糊的效果，而在用户看来很像一个未完全加载完的图片一样，但不影响页面的显示效果。
[0059]而固定图策略同上一个缩略图替换策略类似，只不过不替换成缩略图，而是替换成一个统一小图，比如可以对广告图片统一替换成一个小图，上有提示文字广告正在加载中”，或者提示:“请点击显示此广告”。
[0060](2)当所述配置处理策略为延时显示策略时，在所述第一HTML数据中插入预置延时代码，以供所述客户端延时加载所述图片；
[0061]本实施例中，延时显示策略具体为:通过在HTML页面中插入一段脚本JS代码，该JS代码在HTML页面的body加载完成或者指定延迟的时间后再执行，同时，在执行该JS代码时遍历所有的IMG大图节点，把IMG的大图重新加载，而这时给予用户体验就是大图加载完变清晰了。
[0062](3)当所述配置处理策略为基于用户行为的显示策略时，对所述图片的显示触发方式进行设置，其中，图片的显示触发方式至少包括点击图片触发和/或鼠标停留在图片上触发。
[0063]本实施例中，基于用户行为的显示策略具体为:只有在用户点击，或者鼠标经过该图片区域时时，才把大图片显示出来，否则只显示替换后的缩略图或者固定图片。此时，给用户的体验就是图片按需加载，对于用户想看的图片才加载，不想看的图片就不需要加载，从而节省网络流量以及显示时间。
[0064]参照图4，图4为本发明网页显示处理装置一实施例的功能模块示意图。本实施例中，所述网页显示处理装置包括:
[0065]截获模块10，用于截获服务器返回给客户端的第一HTML数据；
[0066]本实施例中，客户端用于处理用户通过浏览器所提交的网页获取请求，而服务器则用于处理该网格员获取请求，同时将对应的HTML数据返回给客户端。网页显示处理装置则需要截获服务器返回给客户端的第一 HTML数据，进而对第一 HTML数据进行处理，如图2所示的网页显示处理架构示意图。
[0067]本实施例中，网页显示处理装置可以是上网行为管理设备、负载均衡器、缓存服务器、流量管理设备等，但不限于此类设备，只要能够代理HTTP服务即可。
[0068]判断模块20，用于判断所述第一HTML数据中是否存在图片，并确定所述图片的像素面积是否大于预设阈值；
[0069]本实施例中，判断模块20通过HTML标签(〈image〉标签)，确定第一HTML数据中是否存在图片。通常，HTML中的图片都会显示其分辨率，因此，可根据分辨率计算并确定图片的像素面积是否大于预设阈值，像素面积越大，则图片越大，对应加载该图片的时间也越长，也即网页中显示该图片的速度越慢。本实施例中对于图片大小阈值的设置不限，具体根据实际需要进行设置。
[0070]图片处理模块30，用于若所述第一HTML数据中图片的像素面积大于所述阈值，则根据预置的配置处理策略对所述第一 HTML数据中的所述图片进行处理，得到第二 HTML数据；
[0071]转发模块40，用于将所述第二HTML数据发送至所述客户端上进行网页显示。
[0072]本实施例中，当检测到满足条件的图片时，图片处理模块30根据预置的配置处理策略，对该图片进行相应处理，并得到处理该图片后所对应的第二 HTML数据。
[0073]本实施例中，对于配置处理策略的设置不限，例如删除图片等。当完成对图片的相应处理后，网页显示处理装置还需进一步将处理该图片后所对应的第二 HTML数据转发至客户端上进行网页显示。
[0074]本实施例中，在网页在客户端显示之前，网页显示处理装置截获服务器所返回的HTML数据，并进行检查，以对该HTML数据中满足预设条件的图片数据进行预处理，最后再将预处理后的HTML数据转发至客户端进行显示，从而以此提升网页显示处理效率及显示速度。
[0075]进一步可选的，在本发明网页显示处理装置一实施例中，所述判断模块20还用于:判断所述第一 HTML数据中是否存在压缩数据;若存在，则对所述压缩数据进行解压。
[0076]本实施例中，考虑到服务器所返回的HTML数据中可能包含有压缩数据(比如对大型图片进行压缩)的特殊情况，因此，需要先对HTML数据进行解压缩处理，然后再对包括解压数据在内的所有HTML数据进行图片查询遍历，若遍历到满足条件的图片，则进行相应处理，最后再转发至客户端进行显示，从而以此提升网页显示处理效率及显示速度。
[0077]进一步可选的，在本发明网页显示处理装置另一实施例中，所述图片处理模块具体用于:
[0078](I)当所述配置处理策略为图片替换策略时，采用指定图片替换所述图片;或，将所述图片所对应的缩略图替换所述图片，其中，采用异步执行方式生成所述图片所对应的缩略图并缓存；
[0079]本实施例中，配置处理策略具体采用图片替换策略，具体包括缩略图策略与固定图策略。
[0080]缩略图策略将会对大图片生成一个小的缩略图，一般为32*32，图片大小在Ik以下，生成缩略图的过程为采用异步执行，并且缩略图可以缓存下来。然后把HTML的MG标签的SRC地址替换成缩略图地址，比如在原地址后面加上?thumbnail以便客户端下次请求时，网页显示处理装置能识别出是请求缩略图。由于缩略图分辨率一般是原图的十几分之一，所以客户端的浏览器在显示缩略图时，会拉升显示，显示出来的效果即是一个模糊的效果，而在用户看来很像一个未完全加载完的图片一样，但不影响页面的显示效果。
[0081]而固定图策略同上一个缩略图替换策略类似，只不过不替换成缩略图，而是替换成一个统一小图，比如可以对广告图片统一替换成一个小图，上有提示文字广告正在加载中”，或者提示:“请点击显示此广告”。
[0082](2)当所述配置处理策略为延时显示策略时，在所述第一HTML数据中插入预置延时代码，以供所述客户端延时加载所述图片；
[0083]本实施例中，延时显示策略具体为:通过在HTML页面中插入一段脚本JS代码，该JS代码在HTML页面的body加载完成或者指定延迟的时间后再执行，同时，在执行该JS代码时遍历所有的IMG大图节点，把IMG的大图重新加载，而这时给予用户体验就是大图加载完变清晰了。
[0084](3)当所述配置处理策略为基于用户行为的显示策略时，对所述图片的显示触发方式进行设置，其中，图片的显示触发方式至少包括点击图片触发和/或鼠标停留在图片上触发。
[0085]本实施例中，基于用户行为的显示策略具体为:只有在用户点击，或者鼠标经过该图片区域时时，才把大图片显示出来，否则只显示替换后的缩略图或者固定图片。此时，给用户的体验就是图片按需加载，对于用户想看的图片才加载，不想看的图片就不需要加载，从而节省网络流量以及显示时间。
[0086]以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。
【主权项】
1.一种网页显示处理方法，其特征在于，所述网页显示处理方法包括: 截获服务器返回给客户端的第一 HTML数据；判断所述第一 HTML数据中是否存在图片，并确定所述图片的像素面积是否大于预设阈值； 若所述第一 HTML数据中图片的像素面积大于所述阈值，则根据预置的配置处理策略对所述第一 HTML数据中的所述图片进行处理，得到第二 HTML数据； 将所述第二 HTML数据发送至所述客户端上进行网页显示。2.如权利要求1所述的网页显示处理方法，其特征在于，所述截获服务器返回给客户端的第一 HTML数据之后包括: 判断所述第一 HTML数据中是否存在压缩数据； 若存在，则对所述压缩数据进行解压。3.如权利要求1所述的网页显示处理方法，其特征在于，所述根据预置的配置处理策略对所述第一 HTML数据中的所述图片进行处理包括: 当所述配置处理策略为图片替换策略时，采用指定图片替换所述图片;或，将所述图片所对应的缩略图替换所述图片，其中，采用异步执行方式生成所述图片所对应的缩略图并缓存。4.如权利要求1所述的网页显示处理方法，其特征在于，所述根据预置的配置处理策略对所述第一 HTML数据中的所述图片进行处理包括: 当所述配置处理策略为延时显示策略时，在所述第一HTML数据中插入预置延时代码，以供所述客户端延时加载所述图片。5.如权利要求1所述的网页显示处理方法，其特征在于，所述根据预置的配置处理策略对所述第一 HTML数据中的所述图片进行处理包括: 当所述配置处理策略为基于用户行为的显示策略时，对所述图片的显示触发方式进行设置，其中，图片的显示触发方式至少包括点击图片触发和/或鼠标停留在图片上触发。6.—种网页显示处理装置，其特征在于，所述网页显示处理装置包括: 截获模块，用于截获服务器返回给客户端的第一 HTML数据； 判断模块，用于判断所述第一HTML数据中是否存在图片，并确定所述图片的像素面积是否大于预设阈值； 图片处理模块，用于若所述第一 HTML数据中图片的像素面积大于所述阈值，则根据预置的配置处理策略对所述第一 HTML数据中的所述图片进行处理，得到第二 HTML数据； 转发模块，用于将所述第二 HTML数据发送至所述客户端上进行网页显示。7.如权利要求6所述的网页显示处理装置，其特征在于，所述判断模块还用于: 判断所述第一 HTML数据中是否存在压缩数据； 若存在，则对所述压缩数据进行解压。8.如权利要求6所述的网页显示处理装置，其特征在于，所述图片处理模块具体用于: 当所述配置处理策略为图片替换策略时，采用指定图片替换所述图片;或，将所述图片所对应的缩略图替换所述图片，其中，采用异步执行方式生成所述图片所对应的缩略图并缓存。9.如权利要求6所述的网页显示处理装置，其特征在于，所述图片处理模块具体用于: 当所述配置处理策略为延时显示策略时，在所述第一HTML数据中插入预置延时代码，以供所述客户端延时加载所述图片。10.如权利要求6所述的网页显示处理装置，其特征在于，所述图片处理模块具体用于:当所述配置处理策略为基于用户行为的显示策略时，对所述图片的显示触发方式进行设置，其中，图片的显示触发方式至少包括点击图片触发和/或鼠标停留在图片上触发。
【文档编号】G06F17/30GK106055647SQ201610377690
【公开日】2016年10月26日
【申请日】2016年5月31日
【发明人】张锐
【申请人】深圳市永兴元科技有限公司