Web前端开发技术对网站性能的影响

当前，信息技术的发展速度是有目共睹的，人们的生产、生活都很难离开互联网。只有具备强大的性能，在大量用户访问网页时，网站才能稳定地向用户提供优质的服务。针对这一需求，人们必须从Web前端开发技术角度出发，进一步提升网站性能。当前，Web前端开发拥有3种比较重要的支柱性语言，它们分别是HTML、CSS以及客户脚本语言，网站性能的好坏在很大程度上受到它们的影响，因此必须在Web前端开发过程中对其进行深入的研究和剖析。为了保证研发工作能够真正达到预期效果，本文分析了这些技术的概念及其具体特征。

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站建设、做网站、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的新民网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

1 Web前端开发技术概述

1.1 HTML

HTML是指超文本标记语言，一般来说，此种语言是一个网页的重要组成部分。通常情况下，该种语言的主要作用是通过各种类型的标记，进一步区分网页中不同类型的内容，最后系统终端会对HTML的请求进行解析，并根据需求向用户显示相应的网页内容。

1.2 CSS

CSS翻译为中文的意思是“层叠样式表”，它是由一些不同的属性构成的，在多种属性的共同影响下，Web中相应的页面元素会根据实际情况自动进行格式化，并且根据不同的格式会显示出不同的网页内容。在网页运行过程中，CSS一般具有三种添加方式：一是简单直接地添加到各类相应的标记中；二是有选择性地在STYLE标记中添加；三是在外部样式表文件中进行添加。

1.3 客户端脚本语言

简单来说，脚本语言在一定程度上决定了网页的实现和用户交互，上文提到的HTML和CSS通常都是静态的，它们的功能比较单一，仅仅只能通过一种已经提前选择好的格式来显示出相应的网页内容，有时不能很好地呈现出预期效果，但是脚本语言可以解决这些问题。概括来说，脚本语言实际上是一段完全独立于其他内容的简单程序。目前，行业内认可度最高的脚本语言要数JavaScript（简称“JS”），它的自动化程度比较高，可以随着用户操作的改变，显示出不同类型的内容，其被称为动态效果。和上文提到的CSS一样，JavaScript一般具有三种嵌入方式：一是简单直接地添加到各类相应的标记中；二是有选择性地在STYLE标记中添加；三是在外部样式表文件中进行添加。图1是HTML、CSS、JavaScript三种语言的相互关系。

2 Web前端开发技术对网站性能的影响

2.1 HTML对网站性能的影响

互联网的加载速度取决于HTML文件的大小，一般来说，采用HTML编写的网页后面都有一个统一的后缀，即.html，当互联网输入网址后，终端服务器会根据指令需求把文件下载下来，并通过客户端显示出来[1]。因此，文件越小，网页的加载速度越快，反之则越慢。要想提升网站的性能，人们必须考虑到网页的响应速度。

另外，网页中图片数量的多少也会影响网站的加载速度。需要注意的是，当用户输入网址后，网页中的HT-ML文档和图片并不是同时被下载下来的，而是通过分别下载的方式进行加载，每个文件在下载时都要和HTTP建立一个连接，因此图片的增多会导致HTTP的连接数增多，使得网站加载速度变慢[2]。当然，这些图能够被系统识别自动保存到客户端中，也就是说，当用户再一次访问该网页时，就不需要再重新加载这些图片，那么网页加载速度也会变快。

2.2 CSS对网站性能的影响

与前者相似，文档中的样式表在网页加载过程中也要与HTTP分别建立不同的连接，这样一来，网页的加载速度也会随着连接的增多而变慢，从而影响整个网站的性能。当然，这些CSS样式表是能够被系统识别并自动保存到客户端的，也就是说，当用户再一次访问该网页时，就不需要重新加载这些样式表，那么网页加载速度也会变快。

除此之外，样式表文件的位置也或多或少影响网站性能。假如样式表文件根据相关要求被放置于HTML文档的最前端，这样各个网页会按照顺序依次出现，防止网页中间突然出现空白页[3]。相反，网页很难在加载过程中按序依次出现，这样就会使用户误以为页面的加载时

2.3 客户端脚本语言如何影响网站性能

脚本文件的多少同样会影响网页加载速度。和上文提到的图片、CSS文件相同，脚本文件也能够被系统识别并自动保存到客户端，也就是说，当用户再一次访问该网页时，就不需要重新加载这些脚本文件，网页加载速度会变快。此外，脚本文件的位置也会或多或少影响网站性能。假如脚本文件根据相关要求被放置于HTML文档的最前端，这样各个网页会按照顺序依次出现，防止网页中间突然出现空白页。相反，网页就很难在加载过程中按序依次出现，这样就会使用户误以为页面的加载时间增长[4]。

3 Web前端开发技术在具体研发过程中的运用策略

3.1 HTML语言应当遵守技术标准

3.1.1 缩减HTML文档。

通过前文的分析可以看出，Web前端的性能会随着HTML文档的缩小而变好，文档越小，加载速度越快。自HTTP1.1起，各个网站的浏览器和服务器都可以根据需要进行压缩，使用频率最高的方法要数gzip[5]。

3.1.2 减少图片。

Web前端的性能会随着图片数量的减少而变好。为了加快网站加载速度，设计者可以采用合并图片的方式来减少图片数量。目前行业内认可度较高的方式主要有图片地图以及CSS Sprites。

3.1.3 自动缓存网页图片。

研究发现，在第一次访问网页时，绝大多数网站的图片都够被系统识别并自动保存到客户端，也就是说，当用户再一次访问该网页时，就不需要重新加载这些图片[6]。在网站服务器中，人们可以通过Expires指令设定图片保存时间，在保存有效期内，用户再次访问网站可以不用重新下载图片。

3.2 CSS样式表应当遵守技术标准

3.2.1 缩减样式表文件。

样式表文件的多少会影响网站的性能，样式表文件越少，加载速度越快，因此设计者可以采用合并样式表的方式来减少其数量，从而提升网站的性能。

3.2.2 自动缓存样式表文件。

绝大多数网站中的样式表在第一次访问网页时都能被系统识别并自动保存到客户端，也就是说，当用户再一次访问该网页时，就不需要重新加载这些样式表[7]。在网站服务器中，人们可以通过Expires指令设定样式表的保存时间，在保存有效期内，用户再次访问网站可以不用重新下载这些样式表文件。

3.2.3 将样式表文件放置于网站最前端。

网页按照客户指定的顺序依次出现能够防止显示屏出现空白，客户能够根据需求依次看到相应的内容，使客户认为网页速度并不慢。所以，样式表文件应当放置于网站最前端，确保网页能够依次出现。

3.2.4 尽量不使用CSS表达式。

通常，CSS表达式的再一次求值会自然而然地导致Web前端性能降低，所以不到迫不得已，人们应当尽量不使用CSS表达式，必要时应当采用一次性表达式或事件处理器来替代[8]。

3.3 客户端脚本方面应当遵守技术标准

3.3.1 减少脚本文件。

脚本文件的多少会影响网站性能，脚本文件越少，加载速度越快，因此设计者可以采用合并脚本文件的方式来减少其数量，从而提升网站性能。

3.3.2 自动缓存脚本文件。

在第一次访问网页时，绝大多数网站中的脚本文件都能被系统识别并自动保存到客户端，也就是说，当用户再一次访问该网页时，就不需要重新加载这些脚本文件。在网站服务器中，人们可以通过Expires指令设定脚本文件的保存时间，在保存有效期内，用户再次访问网站不用重新下载这些脚本文件。

3.3.3 将脚本文件放置于网站最底部。

与前两者不同的是，脚本文件应当放置于网站最底部，防止脚本阻止网页组建的并行下载，确保网页能够按序依次出现，缩减网页加载时间，进一步提高网站性能[9]。

3.3.4 精简JavaScript。

通常情况下，程序设计者会采用精简的方法来删除代码中一些可有可无的注释和字符，从而缩减JavaScript文件，确保网站的性能得以提升。