CN106980497A - 网页网站性能优化方法和装置 - Google Patents

Abstract

本发明公开了一种网页网站性能优化方法和装置。其中，该方法包括：获取优化请求；根据优化请求，提取待优化网站的页面的dom结构；将dom结构封装得到dom结构组件；对dom结构组件中的dom结构进行去掉冗余代码、生成向上兼容或向下兼容的语义化代码、去除行内样式的操作，生成处理后dom脚本。本发明解决了现有技术中对于web网站的一些老旧项目二次开发或重新升级造成的时间、人力和财力的耗费巨大的技术问题。

Description

网页网站性能优化方法和装置

技术领域

本发明涉及计算机互联网领域，具体而言，涉及一种网页网站性能优化方法和装置。

背景技术

针对web技术开发，现有的一些解决方案都是针对未开发时提出的，对于一些老旧项目的解决，当下开发中对前端开发和网站对网站性能和seo优化的要求越来越高，这些老旧项目在项目开发时由于当时的技术环境影响，网站可能不够完善，如果二次开发或者推翻重做，既费时间，又耗资源，需要开发不同平台的App以及服务器端开发，费时费钱，内容需要持续更新，还需要考虑手机等操作系统的升级后产生的兼容问题，重复的网站维护和重复的内容管理导致高昂的维护成本。

针对上述现有技术中对于web网站的一些老旧项目二次开发或重新升级造成的时间、人力和财力的耗费巨大的问题，目前尚未提出有效的解决方案。

发明内容

本发明提供一种网页网站性能优化方法和装置，以至少解决现有技术中对于web网站的一些老旧项目二次开发或重新升级造成的时间、人力和财力的耗费巨大的技术问题。

根据本发明实施例的一个方面，提供了一种网页网站性能优化方法，包括：获取优化请求；根据优化请求，提取待优化网站的页面的dom结构；将dom结构封装得到dom结构组件；对dom结构组件中的dom结构进行去掉冗余代码、生成向上兼容或向下兼容的语义化代码、去除行内样式的操作，生成处理后dom脚本。

优选的是，获取优化请求之后，还包括：提取待优化网站的页面的页面内容信息；生成处理后dom脚本之后，还包括：根据处理后dom脚本、页面内容信息和预设关键词中的至少一项，得到搜索引擎优化信息。

在上述任一方案中优选的是，获取优化请求之后，还包括：根据至少一种媒介类型以及媒介类型对应的样式规则，使用CSS媒介查询方式生成媒介适配代码。

在上述任一方案中优选的是，获取优化请求之后，还包括：基于webpack，根据待优化网站的页面的引用信息，生成js文件；以及对待优化网站的页面的图片进行转换格式、合并或压缩处理。

优选的是，获取优化请求之后，还包括：将待优化网站的代码进行gzip静态资源压缩。

根据本发明实施例的另一方面，还提供了一种网页网站性能优化装置，包括：获取模块，用于获取优化请求；提取模块，用于根据优化请求，提取待优化网站的页面的dom结构；封装模块，用于将dom结构封装得到dom结构组件；处理模块，用于对dom结构组件中的dom结构进行去掉冗余代码、生成向上兼容或向下兼容的语义化代码、去除行内样式的操作，生成处理后dom脚本。

在上述任一方案中优选的是，提取模块还用于提取待优化网站的页面的页面内容信息；装置，还包括：搜索引擎优化模块，用于在处理模块生成处理后dom脚本后，根据处理后dom脚本、页面内容信息和预设关键词，得到搜索引擎优化信息。

在上述任一方案中优选的是，装置还包括：媒介适配模块，用于在获取模块获取优化请求后，根据至少一种媒介类型以及媒介类型对应的样式规则，使用CSS媒介查询方式生成媒介适配代码。

优选的是，装置还包括：文件生成模块，用于在获取模块获取优化请求后，基于webpack，根据待优化网站的页面的引用信息，生成js文件；图片处理模块，用于在获取模块获取优化请求后，对待优化网站的页面的图片进行转换格式、合并或压缩处理。

优选的是，装置还包括：压缩模块，用于在获取模块获取优化请求后，将待优化网站的代码进行gzip静态资源压缩。

按照本发明的网页网站性能优化方法和装置，通过获取优化请求；根据优化请求，提取待优化网站的页面的dom结构；将dom结构封装得到dom结构组件；对dom结构组件中的dom结构进行去掉冗余代码、生成向上兼容或向下兼容的语义化代码、去除行内样式的操作，生成处理后dom脚本，做到了一次开发即可兼容多平台，对老旧项目的改造更快，省去重新开发和人力和财力，减少开发周期，实现高效快速迭代，在不动源代码的情况下，只修改升级脚本来实现产品的更新迭代，实现代码的完美的升级和优化，与时俱进，无需频繁更新升级，即可获取最新页面内容展示以及多种个性化定制，满足更多用户需求，加大用户留存率，更加适应现代化的营销环境，在享受云端优化加速的情况下，适合中小企业官网、媒体社区、电商平台等，可以在内网部署，基于企业私有网络环境，能够更加方便企业统一运维，同时也适合政企门户、企业级应用(如OA、ERP、CRM等)，能够为公司或者产品人带来快速高效的营收，不仅能显著提高企业网站的销售转化率，而且能大幅度地节省企业发、维护以及推广网站的费用，进而解决了现有技术中对于web网站的一些老旧项目二次开发或重新升级造成的时间、人力和财力的耗费巨大的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例1的网页网站性能优化方法的示意图；以及

图2是根据本发明实施例2的网页网站性能优化装置的示意图。

具体实施方式

为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例1

根据本实施例，提供了一种网页网站性能优化方法的方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的网页网站性能优化方法，如图1所示，该方法包括如下步骤：

步骤S102，获取优化请求。

具体的，可以在待优化的网站上设置一个类似于“一键优化”的插件，用户通过运行该插件，即可发出优化请求。

步骤S104，根据优化请求，提取待优化网站的页面的dom结构。

具体的，可以根据脚本的独有算法，通过分析待优化网站的页面内容，来提取待优化网站的页面的dom结构。

步骤S106，将dom结构封装得到dom结构组件。

具体的，可以利用WebComponent组件来生成相对标准化的非侵入式的一个组件。

步骤S108，对dom结构组件中的dom结构进行去掉冗余代码、生成向上兼容或向下兼容的语义化代码、去除行内样式的操作，生成处理后dom脚本。

具体的，可以利用自身UI框架来对dom结构组件中的dom结构进行处理，最终生成自适应和兼容多平台的新的dom结构，其中，新的dom结构中包括处理后dom脚本，可以针对不同的要求生成向上兼容或向下兼容的语义化代码，去掉行内样式后，生成的也就是行业样式文件。

在本发明实施例中，通过获取优化请求；根据优化请求，提取待优化网站的页面的dom结构；将dom结构封装得到dom结构组件；对dom结构组件中的dom结构进行去掉冗余代码、生成向上兼容或向下兼容的语义化代码、去除行内样式的操作，生成处理后dom脚本，做到了一次开发即可兼容多平台，对老旧项目的改造更快，省去重新开发和人力和财力，减少开发周期，实现高效快速迭代，在不动源代码的情况下，只修改升级脚本来实现产品的更新迭代，实现代码的完美的升级和优化，与时俱进，无需频繁更新升级，即可获取最新页面内容展示以及多种个性化定制，满足更多用户需求，加大用户留存率，更加适应现代化的营销环境，在享受云端优化加速的情况下，适合中小企业官网、媒体社区、电商平台等，可以在内网部署，基于企业私有网络环境，能够更加方便企业统一运维，同时也适合政企门户、企业级应用(如OA、ERP、CRM等)，能够为公司或者产品人带来快速高效的营收，不仅能显著提高企业网站的销售转化率，而且能大幅度地节省企业发、维护以及推广网站的费用，进而解决了现有技术中对于web网站的一些老旧项目二次开发或重新升级造成的时间、人力和财力的耗费巨大的技术问题。

在一可选的实施例中，步骤S102中获取优化请求之后，还包括：提取待优化网站的页面的页面内容信息；因此在步骤S108中生成处理后dom脚本之后，还包括：根据处理后dom脚本、页面内容信息和预设关键词中的至少一项，得到搜索引擎优化信息。

具体的，本发明实施例中使用SEO技术，即搜索引擎优化技术，根据生成的处理后dom脚本和从待优化网站的页面抓取的页面内容信息，再结合自身网站寻找的一些关键词，即可自动找到网上排名靠前的网站，将它们的标题(Title)和相关描述(description)拷贝和整理，即可形成合适待优化网站的标题和描述，之后形成链接，并增加一些同类网站的友情链接。

可选的，搜素引擎优化信息可以包括：待优化网站对应的互联网内容提供商信息待优化网站在搜索引擎中的收录量、待优化网站在搜索引擎中的收录诊断参数、待优化网站的安全标数据、搜索引擎的站长平台入口的链接以及至少一个第三方SEO产品入口的链接。

在一可选的实施例中，步骤S102中获取优化请求之后，还包括：根据至少一种媒介类型以及媒介类型对应的样式规则，使用CSS媒介查询方式生成媒介适配代码。

具体的，上述实施例可以实现判断媒介(对象)类型来实现不同的展现，让CSS可以更精确作用于不同的媒介类型，同一媒介的不同条件(分辨率、色数等等)，通过不同的媒体类型和条件定义样式表规则(即媒介类型对应的样式规则)，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

在一可选的实施例中，步骤S102中获取优化请求之后，还包括：基于webpack，根据待优化网站的页面的引用信息，生成js文件；以及对待优化网站的页面的图片进行转换格式、合并或压缩处理。

具体的，webpack是一款模块加载器兼打包工具，它能把各种资源，例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理，支持amd、commjs等规范，可以根据页面引用程度，提炼出不同的js文件，剔除重复代码，优化代码，并自动检测代码。

具体的，在对图片进行处理时，基于图片的实际大小和尺寸进行处理，例如可以将一些小的图片转为base64格式或者合并成一张图片，对于较大的图片则可进行压缩处理。

在一可选的实施例中，步骤S102中获取优化请求之后，还包括：将待优化网站的代码进行gzip静态资源压缩。

具体的，web系统中免不了要使用大量的JavaScript和css文件，如开源的JavaScript框架prototype、jQuery、extjs-core等等，这些js框架，少都有几百K，使用中很容易导致系统反映缓慢，为了提高js、css文件的下载速度，从而提高页面的响应速度，需要减小文件的大小，减少文件的大小已经有了不少的js压缩工具可以做到，相较于常规的js压缩工具，gzip静态压缩的技术是最高效而且低风险的方式。如果使用js压缩工具压缩js、css文件，会存在不少的问题，而要解决这些问题，必须付出不少的人力资源。因为通常一些旧的项目，或者一些只考虑在IE中使用的web系统，在写js代码的时候，有不少不规范的地方，如在语句后忘了打“；”号，ie可以通过，其它一些浏览器却不认；js压缩后，会导致甚至在ie里面也无法运行。要解决这些js压缩后的问题，必须进行严格的测试，而往往都很难发现具体错在哪里，最终很有可能花费了大量的时间去排错。而使用gzip静态压缩技术，却绝对不会存在这些问题，而且压缩率比js压缩还要高许多，由于现在的浏览器都已经完全支持gzip技术(如微软的IE、火狐firefox、苹果的safari、谷歌的chrome等)，所以也不需要担心浏览器对gzip的支持问题。

可选的，将待优化网站的代码进行gzip静态资源压缩时可以对代码进行合并和混淆，之后由服务器端进行gzip压缩，在一种可选的实施例中，对原有web系统的gzip静态压缩处理方法可以为：将web系统中的*.js、*.css文件预先通过gzip.exe压缩保存成*.jsgz、*.cssgz文件，将web系统中引用js、css文件的地方转换为引用jsgz、cssgz文件；客户端请求jsgz、cssgz文件时，服务器通过过滤器设置header,将所有以jsgz、cssgz结尾的文件的请求增加设置“header Content-Encoding＝gzip”的响应头。

实施例2

根据本发明实施例，提供了一种网页网站性能优化装置的产品实施例，图2是根据本产品实施例的网页网站性能优化装置，如图2所示，该装置包括获取模块、提取模块、封装模块和处理模块。

其中，获取模块，用于获取优化请求；提取模块，用于根据优化请求，提取待优化网站的页面的dom结构；封装模块，用于将dom结构封装得到dom结构组件；处理模块，用于对dom结构组件中的dom结构进行去掉冗余代码、生成向上兼容或向下兼容的语义化代码、去除行内样式的操作，生成处理后dom脚本。

在本实施例中，通过获取模块获取优化请求，提取模块根据优化请求，提取待优化网站的页面的dom结构，封装模块将dom结构封装得到dom结构组件，由处理模块对dom结构组件中的dom结构进行去掉冗余代码、生成向上兼容或向下兼容的语义化代码、去除行内样式的操作，生成处理后dom脚本，做到了一次开发即可兼容多平台，对老旧项目的改造更快，省去重新开发和人力和财力，减少开发周期，实现高效快速迭代，在不动源代码的情况下，只修改升级脚本来实现产品的更新迭代，实现代码的完美的升级和优化，与时俱进，无需频繁更新升级，即可获取最新页面内容展示以及多种个性化定制，满足更多用户需求，加大用户留存率，更加适应现代化的营销环境，在享受云端优化加速的情况下，适合中小企业官网、媒体社区、电商平台等，可以在内网部署，基于企业私有网络环境，能够更加方便企业统一运维，同时也适合政企门户、企业级应用(如OA、ERP、CRM等)，能够为公司或者产品人带来快速高效的营收，不仅能显著提高企业网站的销售转化率，而且能大幅度地节省企业发、维护以及推广网站的费用，进而解决了现有技术中对于web网站的一些老旧项目二次开发或重新升级造成的时间、人力和财力的耗费巨大的技术问题。

在一可选的实施例中，提取模块还用于提取待优化网站的页面的页面内容信息；装置，还包括：搜索引擎优化模块，用于在处理模块生成处理后dom脚本后，根据处理后dom脚本、页面内容信息和预设关键词，得到搜索引擎优化信息。

在一可选的实施例中，装置还包括：媒介适配模块，用于在获取模块获取优化请求后，根据至少一种媒介类型以及媒介类型对应的样式规则，使用CSS媒介查询方式生成媒介适配代码。

在一可选的实施例中，装置还包括：文件生成模块，用于在获取模块获取优化请求后，基于webpack，根据待优化网站的页面的引用信息，生成js文件；以及图片处理模块，用于在获取模块获取优化请求后，对待优化网站的页面的图片进行转换格式、合并或压缩处理。

在一可选的实施例中，装置还包括：压缩模块，用于在获取模块获取优化请求后，将待优化网站的代码进行gzip静态资源压缩。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (10)

1.一种网页网站性能优化方法，包括：

获取优化请求；

根据所述优化请求，提取待优化网站的页面的dom结构；

将所述dom结构封装得到dom结构组件；

对所述dom结构组件中的所述dom结构进行去掉冗余代码、生成向上兼容或向下兼容的语义化代码、去除行内样式的操作，生成处理后dom脚本。

2.根据权利要求1所述的方法，其特征在于，在所述获取优化请求之后，还包括：

提取所述待优化网站的页面的页面内容信息；

在所述生成处理后dom脚本之后，还包括：

根据所述处理后dom脚本、所述页面内容信息和预设关键词中的至少一项，得到搜索引擎优化信息。

3.根据权利要求1所述的方法，其特征在于，获取优化请求之后，还包括：

根据至少一种媒介类型以及所述媒介类型对应的样式规则，使用CSS媒介查询方式生成媒介适配代码。

4.根据权利要求1所述的方法，其特征在于，在所述获取优化请求之后，还包括：

基于webpack，根据所述待优化网站的页面的引用信息，生成js文件；以及对所述待优化网站的页面的图片进行转换格式、合并或压缩处理。

5.根据权利要求1所述的方法，其特征在于，获取优化请求之后，还包括：

将所述待优化网站的代码进行gzip静态资源压缩。

6.一种网页网站性能优化装置，包括：

获取模块，用于获取优化请求；

提取模块，用于根据所述优化请求，提取待优化网站的页面的dom结构；

封装模块，用于将所述dom结构封装得到dom结构组件；

处理模块，用于对所述dom结构组件中的所述dom结构进行去掉冗余代码、生成向上兼容或向下兼容的语义化代码、去除行内样式的操作，生成处理后dom脚本。

7.根据权利要求6所述的装置，其特征在于，所述提取模块还用于提取所述待优化网站的页面的页面内容信息；

所述装置，还包括：

搜索引擎优化模块，用于在所述处理模块生成所述处理后dom脚本后，根据所述处理后dom脚本、所述页面内容信息和预设关键词，得到搜索引擎优化信息。

8.根据权利要求6所述的装置，其特征在于，所述装置还包括：

媒介适配模块，用于在所述获取模块获取所述优化请求后，根据至少一种媒介类型以及所述媒介类型对应的样式规则，使用CSS媒介查询方式生成媒介适配代码。

9.根据权利要求6所述的装置，其特征在于，所述装置还包括：

文件生成模块，用于在所述获取模块获取所述优化请求后，基于webpack，根据所述待优化网站的页面的引用信息，生成js文件；

图片处理模块，用于在所述获取模块获取所述优化请求后，对所述待优化网站的页面的图片进行转换格式、合并或压缩处理。

10.根据权利要求6所述的装置，其特征在于，所述装置还包括：

压缩模块，用于在所述获取模块获取所述优化请求后，将所述待优化网站的代码进行gzip静态资源压缩。