一种Web前端性能优化方法与流程

本发明涉及一种互联网、性能优化、csssprites技术、懒加载技术、计算机应用领域，尤其涉及的是一种web前端性能优化方法。

背景技术：

在web的刚诞生时，它只是被人们看作一个信息发布的平台载体，2005年后，web2.0时代的到来，出现了大量的web应用，网站的前端随之发生了翻天覆地的变化。互联网行业发展越来越好，规模越来越大，使用互联网的人也日益增多，截至2016年年底，全球互联网用户人数将达35亿，相当于全球人口的47％，其中中国互联网用户人数达7.21亿，位居全球第一。web的发展和web用户的增加使得对web前端的性能优化的需求变得格外迫切。对于企业来说，希望用尽可能少的资源，为更多的网站用户提供更好的浏览体验和更稳定的服务；但是对于用户而言，使他们停留在网页上继续浏览网站内容的关键因素就是网站上提供了用户所需内容和网站网页加载速度快、用户体验好。

总而言之，对于web前端的性能好坏的直接评判标准就是网页加载时间的长短，加载同一个网站，加载时间越短说明用户等待是时间越短，也就是前端的性能越好。有数据显示，某网页面加载速度每减少0.1s，收益就会增加1.3％；某搜索引擎加载时间少0.1s，网页的访问流量就会增加2％。不难得出，提高网站加载速度，才能更好满足用户需求，得到更好的收益，因此，如何使前端页面加载速度快、代码更简洁、占用空间少，给用户提供最佳体验效果是本方法中研究的重点问题。

前端就是网页的表现层，它是展示给用户看的内容。应用页面是由文挡、样式表，前端脚本，图片等不同的资源组成。html是一种用于创建网页的超文本标记语言，需要浏览器解析后显示在页面上；css的作用是作为页面样式和布局的语言；js是一种脚本语言，用于页面动态效果的展示，前端和后端的交互很多也依赖于javascript语言。html文档是页面的基础，css完成了页面样式的排版，而js脚本负责页面的行为。

合理的实现前端页面加载速度快、代码更简洁、占用空间少，给用户提供最佳体验效果是web前端的性能优化方法的核心问题。然而，目前由于前端性能不够，造成用户等待加载界面的时间过长，页面加载不完全，页面反应速度慢，网页突然卡死等现象发生。因此，设计一种科学合理的前端性能优化方法迫在眉睫，提出一种解决当前问题的web前端的性能优化方法，使页面加载速度快，用户得到最佳体验效果，解决现有web前端性能中存在的弊端。

前端性能受到很多因素影响，比如没有清理html文档、不恰当放置css、不正确放置javascript、没有优化css性能、没有减少外部http请求、未压缩css,js和html、没有使用cdn和缓存提高速度、没有压缩文件、没有使用轻量级框架，都会使得前端性能处于劣势的位置。在现有前端性能优化的情况下，综合利用互联网、性能优化、csssprites技术和懒加载技术，提出一种合理的前端的性能优化方法，给用户提供最佳的体验效果，给企业带来更大的效益是非常必要的。

因此，通过对web前端性能进行研究分析，发现目前web前端页面加载速度不够快、代码更复杂、占用空间大，没有给用户提供最佳体验效果方面具有较大的缺陷，需要改进。

技术实现要素：

为了克服目前web前端性能的不足，本发明提出前端的性能优化方法，利用html优化、css优化、javascript优化，再利用csssprites技术，提出一种实现前端页面加载速度快、代码更简洁、占用空间少，给用户提供最佳体验效果的一种基于web前端的性能优化方法。

本发明解决其技术问题所采用的技术方案是：

一种基于web前端的性能优化方法，所述方法包括以下步骤：

1)原始前端网页制作，根据前端网页的设计图纸，用最原始的html、css、javascript技术将所有功能实现，打开google浏览器，使用开发者工具，查看前端页面各部分内容加载的时间；

2)html优化，将前端网页html部分进行优化，优化过程如下：

2.1)减少html文档的大小，原始前端页面代码中使用了庞大数量的标签、复杂的嵌套关系导致文档中出现空白字符的现象，将这些空白字符删除；

2.2)使用相对路径，将原始前端页面代码中的各种路径，例如css和javascript文件来源，图片引入以及网页地址链接等，将其原先使用绝对路径换成相对路径<％＝request.getcontextpath()％>来查找位置；

2.3)html标签语义化，将一大段的文字用<p>标签表示，列表用<ul>或者<ol>表示，使得在网络差时样式文件没加载完成，网页的框架也能有序的显示出来；

2.4)替换iframe标签，将原始前端页面代码中出现的iframe标签用div和css样式来替换；

3)css优化，将前端网页css部分进行优化，优化过程如下：

3.1)将css文件放在head标签中，使得css文件在页面刚开始加载就下载并且解析出来，和其他文件一起对前端页面进行渲染显示；

3.2)提取重复样式和替换@import方式引入文件，将css文件中相同的样式进行提取成为单独的类再引用，使得css文件更加精简，代码量更少；将原始前端页面代码中的@import换成link标签；

4)javascript优化，将javascript文件放在html文件底部；将原先的操作dom使用document.write给页面生成内容换成innerhtml赋值；使用s+＝s1+s2+...+sn的方式连接字符串，s表示原先的字符串，s1，s2，...，sn表示n个字符串各自对应的字符串的内容；

5)利用csssprites技术，将原始前端页面用到的图片利用fireworks工具整合成一张大图的文件，再利用css中的”background-position”属性对这张大图中的各个小图片进行定位，使得页面上的图片一次性加载完毕；

6)图片懒加载技术，将img标签中的src链接设为同一张空白图片，并且将其真正的图片地址存储在img标签的自定义属性中，直到拉动滚动条，图片元素进入可视窗口时，自定义属性中的地址存储到src属性中；

7)使用预先获取方法，将网站html中的链接属性上增加rel＝"prefetch"的属性和属性值，使得进入网页之前对应每个链接的url地址、css、图片和脚本都会被预先获取；

8)添加expires、cache-control报文头，对于静态内容添加expires，将静态内容设为永不过期，对于动态内容应用cache-control，让浏览器根据条件来发送请求；

9)资源合并与压缩，使用html-minifier工具分别对上述步骤1)-8)优化完后的html、css、javascript等代码进行压缩，使用nodejs实现文件的合并。

本发明的有益效果主要表现在：本发明前端的性能优化是基于web的对html优化、css优化、javascript优化，html优化包括减少html文档的大小、使用相对路径、html标签语义化、替换iframe标签，css优化包括将css放在顶部、提取重复样式和替换@import方式引入文件，再利用csssprites技术、懒加载技术、资源合并与压缩技术，预先获取方法，最终实现前端页面加载速度快、代码更简洁、内存越小，给用户最佳体验效果的web前端的性能优化方法。

附图说明

图1是一种web前端性能优化方法的流程图；

图2是前端的性能优化前与优化后对比的效果图。

具体实施方式

下面结合附图对本发明做进一步说明。

参照图1和图2，一种web前端性能优化方法，包括以下步骤：

1)原始前端网页制作，根据前端网页的设计图纸，用最原始的html、css、javascript技术将所有功能实现，打开google浏览器，使用开发者工具，查看前端页面各部分内容加载的时间；

2)html优化，将前端网页html部分进行优化，优化过程如下：

2.1)减少html文档的大小，原始前端页面代码中使用了庞大数量的标签、复杂的嵌套关系导致文档中出现空白字符的现象，将这些空白字符删除；

2.2)使用相对路径，将原始前端页面代码中的各种路径，例如css和javascript文件来源，图片引入以及网页地址链接等，将其原先使用绝对路径换成相对路径<％＝request.getcontextpath()％>来查找位置；

2.3)html标签语义化，将一大段的文字用<p>标签表示，列表用<ul>或者<ol>表示，使得在网络差时样式文件没加载完成，网页的框架也能有序的显示出来；

2.4)替换iframe标签，将原始前端页面代码中出现的iframe标签用div和css样式来替换；

3)css优化，将前端网页css部分进行优化，优化过程如下：

3.1)将css文件放在head标签中，使得css文件在页面刚开始加载就下载并且解析出来，和其他文件一起对前端页面进行渲染显示；

3.2)提取重复样式和替换@import方式引入文件，将css文件中相同的样式进行提取成为单独的类再引用，使得css文件更加精简，代码量更少；将原始前端页面代码中的@import换成link标签；

4)javascript优化，将javascript文件放在html文件底部；将原先的操作dom使用document.write给页面生成内容换成innerhtml赋值；使用s+＝s1+s2+...+sn的方式连接字符串，s表示原先的字符串，s1，s2，...，sn表示n个字符串各自对应的字符串的内容；

5)利用csssprites技术，将原始前端页面用到的图片利用fireworks工具整合成一张大图的文件，再利用css中的”background-position”属性对这张大图中的各个小图片进行定位，使得页面上的图片一次性加载完毕；

6)图片懒加载技术，将img标签中的src链接设为同一张空白图片，并且将其真正的图片地址存储在img标签的自定义属性中，直到拉动滚动条，图片元素进入可视窗口时，自定义属性中的地址存储到src属性中；

7)使用预先获取方法，将网站html中的链接属性上增加rel＝"prefetch"的属性和属性值，使得进入网页之前对应每个链接的url地址、css、图片和脚本都会被预先获取；

8)添加expires、cache-control报文头，对于静态内容添加expires，将静态内容设为永不过期，对于动态内容应用cache-control，让浏览器根据条件来发送请求；

9)资源合并与压缩，使用html-minifier工具分别对上述步骤1)-8)优化完后的html、css、javascript等代码进行压缩，使用nodejs实现文件的合并，前端的性能优化前与优化后对比的效果图，如图2所示。

以某购物网站为例，一种web前端性能优化方法，包括以下步骤：

1)购物网站原始前端网页制作，根据购物网站页面的设计图纸，用最原始的html、css、javascript技术将所有功能实现，打开google浏览器，使用开发者工具，查看前端页面各部分内容加载的时间；

2)购物网站的html优化，将购物网站页面html部分进行优化，优化过程如下：

2.1)减少html文档的大小，购物网站原始页面代码中使用了庞大数量的标签、复杂的嵌套关系导致文档中出现空白字符的现象，将这些空白字符删除；

2.2)使用相对路径，将购物网站原始前端页面代码中的各种路径，例如css和javascript文件来源，图片引入以及网页地址链接等，将其原先使用绝对路径换成相对路径<％＝request.getcontextpath()％>来查找位置；

2.3)html标签语义化，将一大段的文字用<p>标签表示，列表用<ul>或者<ol>表示，使得在网络差时样式文件没加载完成，网页的框架也能有序的显示出来；

2.4)替换iframe标签，将原始前端页面代码中出现的iframe标签用div和css样式来替换；

3)购物网站的css优化，将购物网站前端网页css部分进行优化，优化过程如下：

3.1)将css文件放在head标签中，使得css文件在页面刚开始加载就下载并且解析出来，和其他文件一起对前端页面进行渲染显示；

3.2)提取重复样式和替换@import方式引入文件，将css文件中相同的样式进行提取成为单独的类再引用，使得css文件更加精简，代码量更少；将原始购物网站的前端页面代码中的@import换成link标签；

4)购物网站的javascript优化，将javascript文件放在html文件底部；将原先的操作dom使用document.write给页面生成内容换成innerhtml赋值；使用s+＝s1+s2+...+sn的方式连接字符串，s表示原先的字符串，s1，s2，...，sn表示n个字符串各自对应的字符串的内容；

5)利用csssprites技术，将原始购物网站的前端页面用到的图片利用fireworks工具整合成一张大图的文件，再利用css中的”background-position”属性对这张大图中的各个小图片进行定位，使得页面上的图片一次性加载完毕；

6)图片懒加载技术，将img标签中的src链接设为同一张空白图片，并且将其真正的图片地址存储在img标签的自定义属性中，直到拉动滚动条，图片元素进入可视窗口时，自定义属性中的地址存储到src属性中；

7)使用预先获取方法，将购物网站html中的链接属性上增加rel＝"prefetch"的属性和属性值，使得进入网页之前对应每个链接的url地址、css、图片和脚本都会被预先获取；

8)添加expires、cache-control报文头，对于静态内容添加expires，将静态内容设为永不过期，对于动态内容应用cache-control，让浏览器根据条件来发送请求；

9)资源合并与压缩，使用html-minifier工具分别对上述步骤1)-8)优化完后的html、css、javascript等代码进行压缩，使用nodejs实现文件的合并。

以上阐述的是本发明给出的一个实施例展现出来的一个优良结果，显然本发明不仅适合上述实施例，在不偏离本发明基本精神及不超出本发明实质内容所涉及内容的前提下可对其做种种变化加以实施。