预览网页的方法及系统

暂无

预览网页的方法及系统\n技术领域\n[0001] 本发明涉及网页浏览技术领域，更为具体地，涉及一种预览网页的方法及系统。\n背景技术\n[0002] 互联网的兴起给我们的工作和生活方式带来了全新的体验。互联网具有的互联性、开放性和共享信息的特点，使信息的传播方式不再只是局限于传统的纸媒，人们还可以通过网页获取想要了解的资讯信息。\n[0003] 在浏览网页的过程中，当浏览完一页需要跳转到下一页时，用户点击下一页的链接后，并不能立即看到下一页网页的内容，而是需要浏览器把下一页的内容进行加载后，用户才能看到。因此，当浏览器在执行加载下一页网页内容的过程中，用户就只能等待，这无疑会造成时间的浪费，并且用户体验也不佳。\n[0004] 目前，虽然有部分的浏览器已经具有了通过“下一**”（譬如“下一页”）进行智能预读，以及通过“后台打开”一个网页进行后台预先加载一个网页来实现快速预加载，减少用户等待，来实现可以快速预览网页的目的。由于在预加载时，后台加载的是整个网页，而很多情况下，预加载的网页，却未必是用户喜欢的，因此，用户可能看了几句之后就会放弃继续浏览，但此时整个网页都已经加载完毕，从而造成了“无效加载”以及用户等待时间的浪费。\n发明内容\n[0005] 鉴于上述问题，本发明的目的是提供一种预览网页的方法及系统，以达到节省用户等待时间的目的。\n[0006] 根据本发明的一个方面，提供一种预览网页的方法，包括：\n[0007] 根据网页预览触发指令向中间件服务器发出网页预览请求；\n[0008] 所述中间件服务器根据所述网页预览请求加载请求预览的网页链接的主文档，并对所述主文档进行排版；\n[0009] 部分截取排版后的主文档并按照移动终端屏幕大小进行等比缩放生成预览图片供移动终端显示。\n[0010] 其中，所述网页预览触发指令根据对所述网页链接的双指长按动作而产生。\n[0011] 其中，对所述主文档进行排版具体包括，对所述主文档的第一预设区域进行排版。\n[0012] 其中，部分截取排版后的主文档并按照移动终端屏幕大小进行等比缩放生成预览图片具体包括，根据网页主体内容确定主文档的第二预设区域；根据所述主文档的第二预设区域部分截取排版后的主文档生成网页主体内容截图；按照移动终端屏幕大小对所述网页主体内容截图进行等比缩放生成预览图片。\n[0013] 其中，在将所述部分截取的图片等比缩小后，先对所述等比缩小的图片进行压缩和/或降低图片质量的处理，然后将所述处理后的图片返回给所述移动终端浏览器。\n[0014] 另一方面，本发明还提供一种预览网页的系统，包括：\n[0015] 预览请求单元，用于根据网页预览触发指令向中间件服务器发出网页预览请求；\n[0016] 排版单元，用于根据所述预览请求加载请求预览的网页链接的主文档，并对所述主文档进行排版；\n[0017] 预览图片生成单元，用于部分截取排版后的主文档并按照移动终端屏幕大小进行等比缩放生成预览图片；\n[0018] 显示单元，用于显示所述预览图片。\n[0019] 利用上述根据本发明的预览网页的方法及系统，在真正加载网页前，中间件服务器只加载主DOM的内容并排版，部分截取排版后的主文档并按照移动终端屏幕大小进行等比缩放生成预览图片，让用户提前预览网页的前小部分，用户可依此来决定是否对网页进行全网页加载，从而达到节省用户等待时间的目的。\n[0020] 为了实现上述以及相关目的，本发明的一个或多个方面包括后面将详细说明并在权利要求中特别指出的特征。下面的说明以及附图详细说明了本发明的某些示例性方面。\n然而，这些方面指示的仅仅是可使用本发明的原理的各种方式中的一些方式。此外，本发明旨在包括所有这些方面以及它们的等同物。\n附图说明\n[0021] 通过参考以下结合附图的说明及权利要求书的内容，并且随着对本发明的更全面理解，本发明的其它目的及结果将更加明白及易于理解。在附图中：\n[0022] 图1为根据本发明实施例的预览网页的方法流程示意图；\n[0023] 图2为根据本发明实施例的预览网页的系统方框示意图；\n[0024] 图3A、图3B、图3C为根据本发明实施例的预览网页的移动终端显示效果图；\n[0025] 在所有附图中相同的标号指示相似或相应的特征或功能。\n具体实施方式\n[0026] 以下将结合附图对本发明的具体实施例进行详细描述。\n[0027] 本发明实施例基于客户端/服务器架构的移动浏览器，由于现有的网页预览在预加载时，中间件服务器会在加载整个网页完成后才能够提供给用户预览，从而造成用户等待时间的浪费。针对上述问题，本发明利用中间件服务器向网站服务器获取主文档，然后中间件服务器将要预览的网页的前一小部分网页主体内容生成图片并压缩，返回给移动终端浏览器，使用户不必完成整个网页的加载就可以提前预览网页的前小部分，从而用户依此决定是否对网页进行全网页加载，避免“无效加载”，达到节省用户等待时间的目的。\n[0028] 需要说明的是，本发明中涉及的移动终端主要指手机等利用移动终端浏览器和移动互联网进行网络访问的终端。\n[0029] 为了详细说明本发明提供的预览网页的方法，图1示出了根据本发明实施例的预览网页的方法流程示意图。\n[0030] 如图1所示，本发明提供的预览网页的方法包括：\n[0031] S110：根据网页预览触发指令向中间件服务器发出网页预览请求；\n[0032] S120：所述中间件服务器根据所述网页预览请求加载请求预览的网页链接的主文档，并对所述主文档进行排版；\n[0033] S130：部分截取排版后的主文档并按照移动终端屏幕大小进行等比缩放生成预览图片供移动终端显示。\n[0034] 在步骤S110中，所述网页预览触发指令根据对所述网页链接的双指长按动作而产生。\n[0035] 在步骤S120中，所述中间件服务器只对所述主文档的第一预设区域进行排版。第一预设区域可由服务提供商或用户自己进行设定，所述中间件服务器并不需要对整个主文档进行排版，只需要完成供步骤S130截取的文档部分的排版即可，在满足这个条件的前提下，中间件服务器排版的主文档数据越少，用户预览网页的速度就越快。在本发明的一个优选实施例中，所述第一预设区域是从网页顶端开始的二分之一处，也可以是从网页顶端开始的三分之一处。\n[0036] 由于中间件服务器的处理能力远远高于移动终端，因此，主文档的加载和排版都在中间件服务器进行，能够减轻移动终端的数据处理负担。\n[0037] 在步骤S130中，部分截取排版后的主文档并按照移动终端屏幕大小进行等比缩放生成预览图片具体包括，根据网页主体内容确定主文档的第二预设区域；根据所述主文档的第二预设区域部分截取排版后的主文档生成网页主体内容截图；按照移动终端屏幕大小对所述网页主体内容截图进行等比缩放生成预览图片。\n[0038] 第二预设区域是可以展现网页主体内容的部分，其可大致展示网页主体内容的原貌。在本发明的一个实施例中，第二预设区域是从网页顶端开始的x像素*y像素的矩形区域，其中x代表横向坐标，其取值小于等于第一预设区域的宽度，y代表纵向坐标，其取值小于等于第一预设区域的长度。所截图的部分即x像素*y像素的矩形区域展现了网页主体内容部分的大致原貌。\n[0039] 并且由于移动终端显示屏的显示空间有限，因此，部分截取排版后的网页生成的图片有可能也不适于移动终端浏览器的显示，将部分截取的图片以固定的比例或者相应移动终端的需求等比缩放，比如将480*800按比例缩小为48*80等，能够便于移动终端浏览器在接收到图片后无需任何后续处理即可直接显示，进一步提高快速预览的效率。\n[0040] 如图3A、图3B、图3C所示为根据本发明实施例的预览网页的移动终端显示效果图。\n在移动终端浏览器向中间件服务器发出预览请求的同时，在网页上会弹出一个小视窗，在该网页加载未完成时，视窗中显示“加载中”，当网页加载完成后，视窗内显示的就是加载的网页内容，当移动终端浏览器接收完成链接的预览图片后，就会在该视窗中进行显示，用户此时即可对请求预览的网页进行快速预览了。\n[0041] 需要说明的是，具体的缩放比例是根据待浏览网页和移动终端的屏幕大小的比率设置的，为了让移动终端上显示的预览图片不至于过小或过大，可根据人眼舒适度对该比率进行调节，该缩放比例值的大小并不用于限制本发明的保护范围。\n[0042] 另外，在部分截取排版后的主文档生成图片并等比缩放后，还可以先对所部分截取的图片进行压缩和/或降低图片质量等处理，然后将处理后的图片返回给移动终端浏览器进行显示，以便节省用户的流量支出，更好地实现快速预览的目的。\n[0043] 本发明实施例中，中间件服务器加载的仅是网页链接的主文档（主DOM），而不会加载DOM中的外部CSS、外部JS和外部图片。因此，其资源加载量的size比全网页资源加载量的size少得多，可以非常迅速地完成加载，并且将部分截取排版后的网页生成的图片先进行等比缩放，然后再返回给客户端，能够节省一些流量，在相同带宽下加载更快，更有利于网页的快速预览。\n[0044] 同时，由于是由中间件服务器去网站服务器加载网页链接的主文档，利用的是更快速的有线宽带，其网速更稳定且速度更快，可以非常迅速地在几十到几百毫秒之间完成，因此能够进一步节省加载的时间，达到快速预览的目的。\n[0045] 此外，本发明的实施例中网页的主文档也称主DOM，是指http网页文档的主要部分，是一个http主请求的数据，不包括引用的外部CSS文件、外部javascript文件以及外部image文件。例如，\n[0046] 1）主文档中不包括html里的head标签里引用的外部css文件，；\n[0047] 2）主文档中不包括html文档中引用的外部javascript文件，；\n[0048] 3）主文档中不包括网页中的引用图片，。\n[0049] 也就是说，DOM（Document Object Model，文档对象模型）可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。即，这是表示和处理一个HTML或XML文档的常用方式。而加载主DOM（主文档）就是只加载DOM的主要部分，而不加载DOM中的外部CSS、外部JS和外部图片等对网页快速预览效果没有实质性影响的部分。\n[0050] 但是，由于排版的需要，主文档（主DOM）中包含文档内CSS（即直接写在文档中的CSS），因此，对主文档的排版可以展现网页大部分的原貌，能够达到用户预览网页的需求。\n[0051] 通过图1的流程图可以看出，本发明提供的预览网页的方法，通过中间件服务器加载的只是网页链接的主文档的内容，而没有加载其他的内容，并且在加载主文档后快速返回网页链接对应的网页前一小部分截图内容，即返回部分网页主文档的截图内容，然后再通过浏览器显示给用户进行预览，实现提前对网页进行快速预览，达到节省用户等待时间的目的。\n[0052] 由于中间件服务器只将要预览的网页的前小部分生成图片，且经过等比缩小、压缩等处理，因此size进一步减少，移动终端浏览器可以在较短的时间内将截图抓取下来。由于只是显示截图，移动终端浏览器的客户端减少了像普通网页那样的解析、排版和渲染的过程，因此进一步节省了网页加载的时间，使用户可以对该网页的内容进行快速预览。\n[0053] 在用户方面，由于预览的只是该网页链接的小部分内容截图，不需要花费太多的等待时间，因此，用户可根据此部分内容来判断是否有必要进行全页加载。如果用户对此内容感兴趣，则可再对网页进行全页加载；如果用户对此内容不感兴趣，则就没必要对网页进行全页加载，从而避免无效加载的情况出现，从而节省用户的等待时间。\n[0054] 另外，需要说明的是，本发明提供的预览网页的方法适用于title较长的文字链接，例如title在6个中文字以上的文字链接，此类型的网页一般主体内容不会有太大变化，因此通过快速预览，可以让用户提前预览网页的前小部分内容，用户也可依此来决定是否进行全网页加载。而对于title较短的文字链接，其一般是专题或者网页模块，里面的内容经常变化或者更新，那么对此种网页进行快速预览就没有太大的意义。\n[0055] 在本发明中，用户通过长按网页链接或者通过其他方便的交互方式，触发移动终端浏览器的快速网页预览功能。在本发明的一个示例中，用户通过双指长按目标文字链接（即网页链接），触发快速网页预览功能。也就是说，网页预览触发指令为对网页链接的双指长按动作。\n[0056] 当快速网页预览功能被触发后，移动终端浏览器向中间件服务器发出网页预览请求，中间件服务器根据所述网页预览请求加载请求预览的网页链接的主文档，加载网页前，按预定规则识别并提取部分元素，即只加载网页链接主文档的内容并整理。其中，在中间件服务器加载请求预览的网页链接的主文档的过程中，中间件服务器向网站服务器请求加载网页链接的主文档，然后中间件服务器对所加载的网页链接的主文档进行排版。\n[0057] 当对主文档进行快速排版后，截取网页的前一小部分内容生成图片并等比缩放后，然后将等比缩放后的图片返回给移动终端浏览器，移动终端浏览器通过弹出的小视窗显示压缩后的图片。\n[0058] 与上述方法相对应，本发明提供一种预览网页的系统，图2示出了根据本发明实施例的预览网页的系统方框示意图。\n[0059] 如图2所示，本发明提供的预览网页的系统200包括预览请求单元210、排版单元\n220、预览图片生成单元230和显示单元240。\n[0060] 其中，预览请求单元210用于根据网页预览触发指令向中间件服务器发出网页预览请求；排版单元220用于根据所述预览请求加载请求预览的网页链接的主文档，并对所述主文档进行排版；预览图片生成单元230用于部分截取排版后的主文档并按照移动终端屏幕大小进行等比缩放生成预览图片；显示单元240用于显示所述预览图片。\n[0061] 另外，本发明提供的预览网页的系统还包括预览触发单元（图中未示出），用于根据对网页链接的双指长按触发移动终端浏览器的网页预览。\n[0062] 其中，预览触发单元，用于根据对所述网页链接的双指长按动作生成所述网页预览触发指令。\n[0063] 所述排版单元，用于对所述主文档的第一预设区域进行排版。\n[0064] 所述预览图片生成单元还包括，\n[0065] 第二预设区域确定单元，用于根据网页主体内容确定主文档的第二预设区域；\n[0066] 网页主体内容截图单元，用于根据所述主文档的第二预设区域部分截取排版后的主文档生成网页主体内容截图；\n[0067] 等比缩放单元，用于按照移动终端屏幕大小对所述网页主体内容截图进行等比缩放生成预览图片。\n[0068] 为了增强用户的浏览体验，同时不影响用户的其他操作，在移动终端浏览器显示处理后的图片的过程中，可以通过弹出的小视窗的方式进行显示，以提示用户该小视窗是为了便于用户预先浏览部分网页内容而出现的。\n[0069] 本发明提供的预览网页的方法及系统，通过利用中间件服务器向网站服务器获取主文档，并且只将网页的部分（一般是前一小部分）内容以截图的形式经过缩小、压缩等处理后返回给移动终端浏览器，因此节省了网页加载以及用户等待的时间。\n[0070] 如上参照附图以示例的方式描述了根据本发明的预览网页的方法及系统。但是，本领域技术人员应当理解，对于上述本发明所提出的预览网页的方法及系统，还可以在不脱离本发明内容的基础上做出各种改进。因此，本发明的保护范围应当由所附的权利要求书的内容确定。