网站前端技术及其对网站性能的影响研究

陈捷

摘要：网站前端开发技术的应用直接影响着网站性能，为了保障这些技术在实际应用过程中都能发挥出预期作用，该文将首先在第一部分内容中对现阶段常用的几类网站前端开发技术进行介绍，进而在此基础上研究这些技术对网站性能所产生的影响，最后一部分则基于这些内容提出了网站前端技术应用过程中需要注意的几点问题。

关键词：网站前端技术;网站性能;影响

中图分类号：TP311     文献标识码：A

文章编号：1009-3044（2019）15-0068-02

隨着计算机技术、网络技术等的不断发展，网站性能已经成为决定网站能否应对大量流量、满足用户各项功能需求的关键，为了从这一方面满足用户及行业需求，从网站前端开发技术的应用对网站性能展开研究是非常有必要的。结合现状来说，网站前端开发技术主要包含HIML、CSS、客户端脚本语言等，而这些技术的应用都会在不同程度上对网站性能产生一定影响，为了更进一步保障网站性能可以满足用户需求，并提升其自身竞争力，技术人员必须能针对上述技术在实际开发过程中的应用进行研究。为了确保这一工作的开展成效能够达到预期，本文将在后续内容中结合这些技术的定义和特点展开详细论述。

1网站前端开发技术介绍

1.1HTML

HTML即超文本标记语言，对于本文所讨论的问题来说，这种语言是网页的主要构成部分，在实际应用过程中，这一语言主要通过不同的标记来对网页中的不同内容进行区分，最后通过浏览器对HTML语言的解释和执行完成向用户显示网页内容的过程。

1.2 CSS

CSS即层叠样式表，CSS与HTML的区别主要在于后者属于一种语言，而CSS是由一系列的属性组成的，在这些不同属性的作用之下，网页中对应的页面元素将被格式化，进而依照不同格式来显示出网页内容。在实际应用过程中，CSS代码既可以直接添加到标记之中，也可以在STYLE标记中添加或在外部样式表文件中添加。

1.3客户端脚本语言

脚本语言是在网页实现与用户交互这一功能的关键，而HTML及CSS的应用实际上都是静态的，只能以某种选择好的格式来展示页面内容，在脚本语言的辅助之下，这一问题将能得到很好的解决。从定义上来说，脚本语言就是嵌入到网页中的一段独立的程序。以现阶段最为常用的脚本语言JavaScript为例，这一语言能根据用户操作的不同而显示出不同的内容，即动态效果。与CSS类似，将JavaScript嵌入到网页中的方法也有三种：直接添加、在SCRIPT标记中添加、在外部脚本文件中添加。图一为HTML、CSS、JavaScript三者之间的关系。

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

2.1HTML对网站性能的影响

1）HTML文件的大小决定着用户打开网页时的等待时间。使用HTML编写的网页实际上是一个以.html为后缀的文件，而当用户输入网址试图打开这一网页时，那么就需要从服务器将这一文件下载到客户端后进行显示。显然，文件越小，请求后需要等待的时间就更短，反之，用户则需要等待更长时间，对于本文所讨论的网站性能来说，响应速度则是衡量其性能的主要因素之一。

2）页面中图片的数量决定着网站的响应速度。当用户发出请求之后，HTML文档与图片实际上是分别被下载的，而每一个单独文件的下载都需要建立一个新的HTTP连接，也就是说，图片数量越多，HTTP连接的数量也就越多，网站响应时间自然会在原有基础上有所增长，但同时，这些被调用的图是可以被缓存到客户端的，当用户下一次访问网页时，等待时间就会相应缩短。

2.2CSS对网站性能的影响

与上文中的内容类似，当一个HTML文档中存在多个样式表时，那么HTML文档下载过程中就需要针对每一个样式表文件建立不同的HTTP连接，这样的特性必然会对网站性能产生影响。同样的，CSS样式表文件也可以被浏览器缓存到客户端，进而加快再次访问网页时的响应速度。

除了数量之外，样式表文件的位置也会对网站性能产生影响。若将样式表文件的加载放在HTML文档顶部，那么页面就可以逐步呈现，避免空白页面的出现，反之，页面无法在加载过程中逐步呈现，空白页面就很有可能导致用户在观感上认为页面加载时间变长。

2.3客户端脚本语言对网站性能的影响

脚本文件数量仍是影响网页响应速度的主要因素之一，但与图片、CSS样式表等文件类似，浏览器也可以将脚本文件缓存到客户端之中，进而缩短用户等待时间。除此之外，脚本文件的加载在HTML文档中的位置也会对网站性能产生影响，若将此类文件的加载放在文档顶部，那么脚本文件的加载就会阻止页面其他组件的下载，同时，页面也不能逐步呈现，在用户等待过程中出现空白页面，网页的加载速度将会因此而大幅降低。

3网站前端技术在实际开发过程中的应用策略

3.1对HTML的应用策略

结合上文中的内容，为了避免HTML对网站性能产生负面影响，相关技术人员应注意以下几点问题：1）对HTML文档进行压缩。这一点主要是为了在原有基础之上节约从服务器端下载HTML文档所需要的时间，现阶段常用的压缩方法为gzip。2）合并图片。为了减少加载大量图片时建立多个HTTP连接所耗费的时间，技术人员可以利用CSS Sprites来将图片合并起来。3）缓存图片。即在第一次访问网页时就缓存网页中的图片，进而针对这些图片利用expires头设置有效期，在有效期内访问这一网页时使用缓存好的图片，网页响应时间自然能得到有效缩短。

3.2对CSS的应用策略

1）样式表的合并和缓存。样式表数量越少，对应网页HTTP请求的数量也会有所缩减，进而达到提升网站性能的目的。另一方面，与图片的缓存类似，依然可以采用expires头来缓存CSS文件，只要在有效期内，访问这一网页就不用再次从服务器端下载该样式表文件。2）在HTML文档顶端加载CSS样式表，这一设置可以避免空白页面的出现，进而以逐步呈现的形式将网页显示在浏览器中，用户所感受到的加载时间自然会有所缩短。

3.3对客户端脚本语言的应用策略

1）脚本文件的合并和缓存。对脚本文件的处理与上文中的内容类似，技术人员仍可以利用expires头来将脚本文件缓存到客户端，进而指定对应脚本文件的有效期，在有效期内不需要重复执行脚本文件下载操作。2）脚本文件加载的位置。应将脚本文件的加载放在HTML文档底部，进而实现逐步显示并提升加载速度。3）对JavaScript进行精简。这一点主要是为了进一步降低脚本文件大小，通过移除脚本文件中的注释、空白字符等都能达到这样的效果，而在JSMin、ShrinkSafe等软件的辅助之下，脚本文件的大小将能得到进一步压缩。

4 结束语

综上所述，在对HTML、CSS、客户端脚本语言等对网站性能的影响进行分析的基础之上，本文主要从这些内容出发对利用这些技术进行网站前端开发时应注意的问题做了深入探讨。在后续发展过程中，相关技术人员及单位必须能进一步将网站性能重视起来，并通过各类技术的应用来不断提升网站性能，以此来保障网站能在功能上更好地满足用户需求。

参考文献：

[1] 闫志英.浅析Web前端开发技术[J].无线互联科技，2016（2）.

[2] 曾媛.学术社交网站前端性能的分析及优化[D].广州：华南师范大学，2016.

[3] 黄杰.基于网站的性能优化与内存数据系统的设计与实现[D]. 合肥：合肥工业大学，2016.

[4] 李宝林.浅析网站性能优化技术[J].电子设计工程，2014，22（2）.

[5] 李强，杨岿，吴天吉.基于Asp.net的网站开发前端技术优化研究[J].软件导刊，2013，12（5）.

[6] 包韶平.面向前端的网站性能优化方法与工具研究[J].科技风，2009（9）.

【通联编辑：梁书】