一种对WEB前端网页进行性能优化的方法、装置和存储介质与流程

一种对web前端网页进行性能优化的方法、装置和存储介质
技术领域
1.本发明涉及互联网应用技术领域，尤其涉及一种对web前端网页进行性能优化的方法、装置和存储介质。


背景技术：

2.随着当前互联网技术的高速发展，互联网行业发展规模越来越大，互联网技术已经融入到人们的日常生活中，人们对于互联网技术的需求也在不断增加。为了满足不断扩大的时长需求，需要对web前端网页的性能进行不断地优化。
3.对于企业来说，希望用尽可能少的资源，为更多的网站用户提供更好的浏览体验和更稳定的服务；但是对于用户而言，使他们停留在网页上继续浏览网站内容的关键因素就是网站上提供了用户所需内容且网站网页加载速度快、用户体验感强。当前网页中时常出现页面加载速度慢、图片加载不完整等问题，如何对web前端网页进行性能优化是当前亟需解决的问题。


技术实现要素：

4.为解决上述技术问题，本发明提供了一种对web前端网页进行性能优化的方法和装置。
5.本发明的一种对web前端网页进行性能优化的方法的技术方案如下：
6.对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，得到第一优化网页；
7.对所述第一优化网页依次采用网页图片处理技术和网页内容优化法进行处理，得到第二优化网页；
8.获取并对所述第二优化网页中的代码进行合并与压缩，根据合并与压缩的代码得到最终优化网页。
9.本发明的一种对web前端网页进行性能优化的方法的有益效果如下：
10.本发明通过获取对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，得到第一优化网页，对第一优化网页依次采用网页图片处理技术和网页内容优化法进行处理，得到第二优化网页，获取并对第二优化网页中的代码进行合并与压缩，根据合并与压缩的代码得到最终优化网页，因此，本技术通过上述方法克服了目前web前端网页页面加载慢以及图片加载不完整等问题，通过对网页前端界面、网页以及代码等内容进行优化处理，为用户提供了一种界面加载速度快、代码简洁以及占用空间少的web前端网页，给用户带来了更加快速稳定的服务与体验。
11.在上述方案的基础上，本发明的一种对web前端网页进行性能优化的方法还可以做如下改进。
12.进一步，所述对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，得到第一优化网页，具体包括：
13.利用所述html优化法对所述原始web前端网页的空白字符进行删除，并将所述原始web前端网页的绝对路径替换为相对路径，并将所述原始web前端网页的文字用标签进行表示以及将所述原始web前端网页中的iframe标签进行替换的方式对所述原始web前端网页进行优化，得到第一部分优化网页；
14.利用所述css优化法将所述第一部分优化网页中的css文件放入head标签，并对所述css文件中存在的相同样式进行提取并精简，得到第二部分优化网页；
15.利用所述javascript优化法对所述第二部分优化网页进行优化处理，得到所述第一优化网页。
16.采用上述进一步方案的有益效果是：对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，实现了对前端网页中部分代码的优化，通过对代码进行简洁优化，增加了用户的体验感。
17.进一步，所述网页图片处理技术包括css sprites技术和图片懒加载技术，则所述对所述第一优化网页依次采用网页图片处理技术和网页内容优化法进行处理，得到第二优化网页，具体包括：
18.利用所述css sprites技术对所述第一优化网页的原始图片进行整合，并对整合得到的大图中的各个所述原始图片进行定位并加载，得到第一图片处理网页；
19.利用所述图片懒加载技术将所述第一图片处理网页的图片链接设置为空白，直至待加载图片进入可视窗口时，将所述待加载图片在所述第一图片处理网页中显示，并得到所述第二图片处理网页；
20.利用所述网页内容优化法对所述第二图片处理网页的html链接增加预加载功能，并将所述第二图片处理网页的内容进行缓存处理，得到所述第二优化网页。
21.采用上述进一步方案的有益效果是：通过对第一优化网页中的图片和内容进行优化处理，实现了对前端网页中部分图片链接、网页内容以及各属性值的优化，在上述方案的基础上，进一步提高了网页的加载速度，减少了运行时间。
22.本发明的一种对web前端网页进行性能优化的装置的技术方案如下：
23.包括：第一优化模块，第二优化模块，处理模块；
24.所述第一优化模块用于：对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，得到第一优化网页；
25.所述第二优化模块用于：对所述第一优化网页依次采用网页图片处理技术和网页内容优化法进行处理，得到第二优化网页；
26.所述处理模块用于：获取并对所述第二优化网页中的代码进行合并与压缩，根据合并与压缩的代码得到最终优化网页。
27.本发明的一种对web前端网页进行性能优化的装置的有益效果如下：
28.本发明通过获取对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，得到第一优化网页，对第一优化网页依次采用网页图片处理技术和网页内容优化法进行处理，得到第二优化网页，获取并对第二优化网页中的代码进行合并与压缩，根据合并与压缩的代码得到最终优化网页，因此，本技术通过上述方法克服了目前web前端网页性能不足的问题，通过对网页前端界面、网页以及代码等内容进行优化，为用户提供了一种界面加载速度快、代码简洁以及占用空间少的web前端网页，给用户
带来了更加快速稳定的服务与体验。
29.在上述方案的基础上，本发明的一种对web前端网页进行性能优化的装置还可以做如下改进。
30.进一步，所述第一优化模块具体用于：
31.利用所述html优化法对所述原始web前端网页的空白字符进行删除，并将所述原始web前端网页的绝对路径替换为相对路径，并将所述原始web前端网页的文字用标签进行表示以及将所述原始web前端网页中的iframe标签进行替换的方式对所述原始web前端网页进行优化，得到第一部分优化网页；
32.利用所述css优化法将所述第一部分优化网页中的css文件放入head标签，并对所述css文件中存在的相同样式进行提取并精简，得到第二部分优化网页；
33.利用所述javascript优化法对所述第二部分优化网页进行优化处理，得到所述第一优化网页。
34.采用上述进一步方案的有益效果是：对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，实现了对前端网页中部分代码的优化，通过对代码进行简洁优化，增加了用户的体验感。
35.进一步，所述第二优化模块具体用于：
36.利用所述css sprites技术对所述第一优化网页的原始图片进行整合，并对整合得到的大图中的各个所述原始图片进行定位并加载，得到第一图片处理网页；
37.利用所述图片懒加载技术将所述第一图片处理网页的图片链接设置为空白，直至待加载图片进入可视窗口时，将所述待加载图片在所述第一图片处理网页中显示，并得到所述第二图片处理网页；
38.利用所述网页内容优化法对所述第二图片处理网页的html链接增加预加载功能，并将所述第二图片处理网页的内容进行缓存处理，得到所述第二优化网页。
39.采用上述进一步方案的有益效果是：通过对第一优化网页中的图片和内容进行优化处理，实现了对前端网页中部分图片链接、网页内容以及各属性值的优化，在上述方案的基础上，进一步提高了网页的加载速度，减少了运行时间。
40.本发明的一种存储介质的技术方案如下：
41.存储介质中存储有指令，当计算机读取所述指令时，使所述计算机执行如上述任一项所述的一种对web前端网页进行性能优化的方法的步骤。
42.本发明的一种电子设备的技术方案如下：
43.包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时，使所述计算机执行如上述任一项所述的一种对web前端网页进行性能优化的方法的步骤。
附图说明
44.图1为本发明实施例的一种对web前端网页进行性能优化的方法的流程示意图；
45.图2为本发明实施例的一种对web前端网页进行性能优化的装置的结构示意图。
具体实施方式
46.如图1所示，本发明实施例的一种对web前端网页进行性能优化的方法，包括如下步骤：
47.s1、对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，得到第一优化网页；
48.s2、对所述第一优化网页依次采用网页图片处理技术和网页内容优化法进行处理，得到第二优化网页；
49.s3、获取并对所述第二优化网页中的代码进行合并与压缩，根据合并与压缩的代码得到最终优化网页。
50.本实施例中的技术方案通过获取对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，得到第一优化网页，对第一优化网页依次采用网页图片处理技术和网页内容优化法进行处理，得到第二优化网页，获取并对第二优化网页中的代码进行合并与压缩，根据合并与压缩的代码得到最终优化网页，因此，本技术通过上述方法克服了目前web前端网页性能不足的问题，通过对网页前端界面、网页以及代码等内容进行优化，为用户提供了一种界面加载速度快、代码简洁以及占用空间少的web前端网页，给用户带来了更加快速稳定的服务与体验。
51.其中，依次采用html优化法、css优化法和javascript优化法进行处理具体操作为：对原始web前端网页采用html优化法进行优化后，再采用css优化法进行优化，最后采用javascript优化法进行优化。
52.其中，在进行网页优化之前，通过使用浏览器的开发者工具查看前端页面各部分内容加载的时间，便于优化过程结束之后直观地比较优化过程前后的性能和效果。
53.其中，s3通过提取并对第二优化网页的代码合并与压缩具体过程包括：使用html
‑
minifier工具分别对上述步骤优化方法结束完后的html、css、javascript等代码进行压缩，并使用nodejs实现文件的合并。
54.具体地，以某购物网站为例，首先使用开发者工具查看前端页面各部分内容加载的时间，并依次html优化法、css优化法和javascript优化法进行处理，得到第一优化网页；对第一优化网页依次采用网页图片处理技术和网页内容优化法进行处理，得到第二优化网页；获取并对所述第二优化网页中的代码进行合并与压缩，根据合并与压缩的代码得到最终优化网页。
55.较优地，在上述技术方案中，所述s1包括：
56.s11、利用所述html优化法对所述原始web前端网页的空白字符进行删除，并将所述原始web前端网页的绝对路径替换为相对路径，并将所述原始web前端网页的文字用标签进行表示以及将所述原始web前端网页中的iframe标签进行替换的方式对所述原始web前端网页进行优化，得到第一部分优化网页；
57.s12、利用所述css优化法将所述第一部分优化网页中的css文件放入head标签，并对所述css文件中存在的相同样式进行提取并精简，得到第二部分优化网页；
58.s13、利用所述javascript优化法对所述第二部分优化网页进行优化处理，得到所述第一优化网页。
59.其中，以某购物网站为例，s11中利用html优化法的在具体优化步骤包括：(1)、原
代码中使用了大量额定标签以及复杂的嵌套关系导致文档中出现空白字符的现象，为了减少html文档的大小，将购物网站原始web前端网页中的代码中的空白字符删除。
60.(2)、将购物网站中的原始web前端网页中的代码中的绝对路径换成相对路径。具体地：使用相对路径，将购物网站原始前端页面代码中的各种路径，例如css和javascript文件来源，图片引入以及网页地址链接等，将其原先使用绝对路径换成相对路径<％＝request.getcontextpath()％>来查找位置，以达到优化前端网页的目的。
61.(3)通过html标签语义化，将前端网页中的一大段的文字用<p>标签表示，列表用<ul>或者<ol>表示，使得在网络不好时样式文件不能及时加载，网页的框架也能有序的显示出来。
62.(4)替换iframe标签，将原始web前端网页的代码中出现的iframe标签用div和css样式来替换；
63.上述(1)
‑
(4)的方法为并列关系，具体实施时可使用其中的一种或多种方法，且使用的顺序不分先后。
64.通过上述html优化法对原始web前端网页进行优化后得到第一优化网页，以便后续优化的进行。
65.s12中的css优化法具体优化过程包括：将购物网站前端网页css文件存放到网页代码的head标签中，使得css文件在页面刚开始加载就下载并且解析出来，和其他文件一起对前端页面进行渲染显示；再提取网页代码中的重复样式和替换@import方式引入文件，将css文件中相同的样式进行提取成为单独的类再引用，同时还将原始购物网站的前端页面代码中的@import换成link标签，使得css文件更加精简，代码量更少。
66.s13中的javascript优化法具体优化过程包括：将javascript文件放在html文件底部，并将原先的操作dom使用document.write给页面生成内容换成innerhtml赋值，再使用s+＝s1+s2+...+sn的方式连接字符串，达到购物网站的优化；其中s表示原先的字符串，s1，s2，...，sn表示n个字符串各自对应的字符串的内容。
67.通过上述s11
‑
s13的步骤，实现了原始web前端网页的部分优化过程，得到第一优化网页，得到了精简优化后的网页，提高了运行速度。
68.较优地，在上述技术方案中，所述网页图片处理技术包括css sprites技术和图片懒加载技术，则所述s2包括：
69.s21、利用所述css sprites技术对所述第一优化网页的原始图片进行整合，并对整合得到的大图中的各个所述原始图片进行定位并加载，得到第一图片处理网页；
70.s22、利用所述图片懒加载技术将所述第一图片处理网页的图片链接设置为空白，直至待加载图片进入可视窗口时，将所述待加载图片在所述第一图片处理网页中显示，并得到所述第二图片处理网页；
71.s23、利用所述网页内容优化法对所述第二图片处理网页的html链接增加预加载功能，并将所述第二图片处理网页的内容进行缓存处理，得到所述第二优化网页。
72.其中，s21中的css sprites技术是将原始购物网站的前端页面用到的图片利用ireworks工具整合成一张大图的文件，再利用css中的background
‑
position属性对这张大图中的各个小图片进行定位，使得页面上的图片一次性加载完毕。
73.s22中的图片懒加载技术具体包括：将img标签中的src链接设为同一张空白图片，
并且将其真正的图片地址存储在img标签的自定义属性中，直到拉动滚动条，图片元素进入可视窗口时，自定义属性中的地址存储到src属性中。
74.s23中的网络内容优化法主要包括使用预先获取方法，将购物网站html中的链接属性上增加rel＝"prefetch"的属性和属性值，使得进入网页之前对应每个链接的url地址、css、图片和脚本都会被预先获取；并添加expires、cache
‑
control报文头，对于静态内容添加expires，将静态内容设为永不过期，对于动态内容应用cache
‑
control，让浏览器根据条件来发送请求。依次通过上述s21
‑
s23的方法对第一优化网页进行优化，得到第二优化网页。
75.如图2所示，本发明实施例的一种对web前端网页进行性能优化的装置200，其特征在于，包括：第一优化模块210，第二优化模块220，处理模块230；
76.所述第一优化模块210用于：对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，得到第一优化网页；
77.所述第二优化模块220用于：对所述第一优化网页依次采用网页图片处理技术和网页内容优化法进行处理，得到第二优化网页；
78.所述处理模块230用于：获取并对所述第二优化网页中的代码进行合并与压缩，根据合并与压缩的代码得到最终优化网页。
79.本实施例中的技术方案通过获取对原始web前端网页依次采用html优化法、css优化法和javascript优化法进行处理，得到第一优化网页，对第一优化网页依次采用网页图片处理技术和网页内容优化法进行处理，得到第二优化网页，获取并对第二优化网页中的代码进行合并与压缩，根据合并与压缩的代码得到最终优化网页，因此，本技术通过上述方法克服了目前web前端网页页面内容加载慢以及图片加载不完整等问题，通过对网页前端界面、网页以及代码等内容进行优化，为用户提供了一种界面加载速度快、代码简洁以及占用空间少的web前端网页，给用户带来了更加快速稳定的服务与体验。
80.较优地，在上述技术方案中，所述第一优化模块210具体用于：
81.利用所述html优化法对所述原始web前端网页的空白字符进行删除，并将所述原始web前端网页的绝对路径替换为相对路径，并将所述原始web前端网页的文字用标签进行表示以及将所述原始web前端网页中的iframe标签进行替换的方式对所述原始web前端网页进行优化，得到第一部分优化网页；
82.利用所述css优化法将所述第一部分优化网页中的css文件放入head标签，并对所述css文件中存在的相同样式进行提取并精简，得到第二部分优化网页；
83.利用所述javascript优化法对所述第二部分优化网页进行优化处理，得到所述第一优化网页。
84.较优地，在上述技术方案中，所述网页图片处理技术包括css sprites技术和图片懒加载技术，则所述第二优化模块220具体用于：
85.利用所述css sprites技术对所述第一优化网页的原始图片进行整合，并对整合得到的大图中的各个所述原始图片进行定位并加载，得到第一图片处理网页；
86.利用所述图片懒加载技术将所述第一图片处理网页的图片链接设置为空白，直至待加载图片进入可视窗口时，将所述待加载图片在所述第一图片处理网页中显示，并得到所述第二图片处理网页；
87.利用所述网页内容优化法对所述第二图片处理网页的html链接增加预加载功能，并将所述第二图片处理网页的内容进行缓存处理，得到所述第二优化网页。
88.上述关于本发明的一种对web前端网页进行性能优化的装置200中的各参数和各个模块实现相应功能的步骤，可参考上文中关于一种对web前端网页进行性能优化的方法的实施例中的各参数和步骤，在此不做赘述。
89.本发明实施例提供的一种存储介质，包括：存储介质中存储有指令，当计算机读取所述指令时，使所述计算机执行如上述任一项所述的一种对web前端网页进行性能优化的方法的步骤，具体可参考上文中一种对web前端网页进行性能优化的方法的实施例中的各参数和步骤，在此不做赘述。
90.计算机存储介质例如：优盘、移动硬盘等。
91.本发明实施例提供的一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时，使所述计算机执行如上述任一项所述的一种对web前端网页进行性能优化的方法的步骤，具体可参考上文中一种对web前端网页进行性能优化的方法的实施例中的各参数和步骤，在此不做赘述。
92.所属技术领域的技术人员知道，本发明可以实现为方法、装置、存储介质和电子设备。
93.因此，本发明可以具体实现为以下形式，即：可以是完全的硬件、也可以是完全的软件(包括固件、驻留软件、微代码等)，还可以是硬件和软件结合的形式，本文一般称为“电路”、“模块”或“系统”。此外，在一些实施例中，本发明还可以实现为在一个或多个计算机可读介质中的计算机程序产品的形式，该计算机可读介质中包含计算机可读的程序代码。可以采用一个或多个计算机可读的介质的任意组合。计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质。计算机可读存储介质例如可以是一一但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机存取存储器(ram)，只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、光纤、便携式紧凑磁盘只读存储器(cd
‑
rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本文件中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。尽管上面已经示出和描述了本发明的实施例，可以理解的是，上述实施例是示例性的，不能理解为对本发明的限制，本领域的普通技术人员在本发明的范围内可以对上述实施例进行变化、修改、替换和变型。