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

摘 要 ：随着互联网和电子商务的发展,人们对网站的要求越来越高,网站流量越来越大,页面组件也越来越多,这就使得网站响应速度变慢,为了提高网站的前端性能,本文首先对网站前端的相关开发技术进行分析,然后研究了网站前端开发技术对网站性能的影响,最后根据这些影响提出网站前端开发应遵循的技术规范.

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

1.网站前端开发技术分析

1.1 HTML语言

HTML（Hypertext Markup Language）是指超文本标记语言,是制作网页必须使用的语言,也是构成网页文件的主要语言.HTML语言是一种标记语言,由一系列的标记组成,他通过标记来格式化各种页面元素,某个标记可以使他所标记的内容具有某种格式或特征,从而使得页面可以按照需要的格式呈现.

HTML网页文件需要在网页浏览器中打开,这种程序需要网页浏览器解释执行,各种网页浏览器都可以完美的支持HTML语言,所以用HTML语言制作的网页可以供使用各种浏览器的用户浏览.

1.2 CSS样式表

随着Inter应用越来越普及,对Inter程序的要求越来越高,而Inter程序一般都是做成网站形式,所以就对网站制作技术有了更高的要求,CSS就是为了弥补HTML 的不足而出现的.CSS（Cascading Style Sheet）是指层叠样式表,他不是一种语言,由一系列的属性组成,他通过属性来格式化各种页面元素,某些属性可以使他所作用的内容具有某些格式或特征,从而使得页面可以按照需要的格式呈现.

在网页中嵌入CSS代码有三种方法：①直接在需要使用CSS样式的标记中添加CSS代码.②在STYLE标记中添加CSS代码.③在外部样式表文件中添加CSS代码.

1.3 客户端脚本语言

HTML和CSS都是进行页面布局的技术,他们只能对页面进行格式化,要想使页面具有动态效果、能够与用户交互,就需要在页面上编写程序,这就促使了客户端脚本语言的出现.客户端脚本语言是编写嵌入到网页中的一段一段独立程序的编程语言.客户端脚本语言有JaScript和VBScript两种,目前常用的客户端脚本语言是由Netscape公司开发的JaScript.通过在网页上嵌入由JaScript编写的程序,可以使得页面内容或格式根据设置的条件或用户的操作发生变化,从而实现页面的动态效果.

在网页中嵌入客户端脚本有三种方法：①直接在需要使用脚本的标记中添加脚本.②在SCRIPT标记中添加脚本.③在外部脚本文件中添加脚本.

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

2.1 HTML语言对网站性能的影响

2.1.1 HTML文档大小

用HTML语言编写的网页保存起来是一个以“”为扩展名的文本文件,一般把它称作HTML文档.该文件会占用一定的存储空间,当用户请求该文件时,该文件需要被从怎么写作器端下载到客户端,这就需要占用网络带宽,下载过程需要一定的时间.在相同网速下,HTML文档越小,下载所需要的时间就越短,用户的等待时间就越短,网站前端性能就越好.

2.1.2 网页图片的数量

为了美观,网页上都需要使用图片,图片是通过HTML语言的“IMG”标记插入的,但是图片文件本身并不在HTML文档中,而是一个单独的图片文件,通过“IMG”标记调用到页面上.因此,当用户请求一个HTML文档时,HTML文档本身和网页上调用的图片文件是被分别下载到客户端的,每一个单独文件的下载都需要一个HTTP请求,每一个HTTP请求连接的建立都需要时间.所以,一个页面上图片越多,所需要的HTTP请求数量就越多,下载所需要的额外时间越长.

2.1.3 网页图片缓存

HTML文档中调用的图片可以被浏览器缓存到客户端,当用户再次请求同一个HTML文档时,这些被缓存的图片就不需要再次下载,从而减少HTTP请求的数量,同时减少HTTP响应的大小,进而减少用户的等待时间,提高网站前端的性能.

2.2 CSS样式表对网站性能的影响

2.2.1 样式表的数量

一般在一个HTML文档中可以加载多个样式表文件,类似于HTML文档中引用的图片,当用户请求一个HTML文档时,HTML文档和样式表文件被分别下载到客户端,每一个文件的下载都需要一个HTTP请求,每一个HTTP请求连接的建立都需要时间.所以,一个HTML文档中样式表越少,所需要的HTTP请求数量就越少,下载所需要的额外时间越短.

2.2.2 样式表缓存

HTML文档中加载的样式表文件可以被浏览器缓存到客户端,当用户再次请求同一个HTML文档时,这些被缓存的样式表文件就不需要再次下载,从而减少HTTP请求的数量,同时减少HTTP响应的大小,进而减少用户的等待时间,提高网站前端的性能.

2.2.3 样式表位置

HTML文档中对样式表文件的加载既可以放在文档的顶部,也可以放在文档的底部,将样式表文件的加载放在文档的底部会阻止页面的逐步呈现,而将样式表文件的加载放在文档的顶部会使页面逐步呈现.而页面的逐步呈现可以避免出现屏幕空白,为用户提供可视化回馈,用户可以立即看到页面的部分内容,从而使用户在感觉上觉得网页的加载速度变快.

2.2.4 CSS表达式

CSS表达式是动态设置CSS属性的一种方法,IE5之后的浏览器都支持这种方式,其通过expression方法将JaScript表达式的值设置为CSS属性的值,其用法如下：

CSS属性：expression（JaScript表达式）

在页面呈现、页面大小改变、页面滚动或鼠标在页面上移动时,CSS表达式都要重新求值,这种对CSS表达式的重复求值需要消耗一定的系统资源,需要一定的时间,这就使得CSS表达式的性能比较底下,在页面中使用CSS表达式就会降低网站前端的性能. 2.3 客户端脚本对网站性能的影响

2.3.1 客户端脚本的数量

一般在一个HTML文档中可以加载多个客户端脚本文件,类似于样式表的数量,当用户请求一个HTML文档时,HTML文档和客户端脚本文件被分别下载到客户端,每一个单独文件的下载都需要一个HTTP请求,每一个HTTP请求连接的建立都需要时间.所以,一个HTML文档中客户端脚本越多,所需要的HTTP请求数量就越多,下载所需要的额外时间越长.

2.3.2 客户端脚本缓存

HTML文档中加载的客户端脚本文件可以被浏览器缓存到客户端,当用户再次请求同一个HTML文档时,这些被缓存的客户端脚本文件就不需要再次下载,从而减少HTTP请求的数量,同时减少HTTP响应的大小,进而减少用户的等待时间,提高网站前端的性能.

2.3.3 客户端脚本位置

HTML文档中对客户端脚本文件的加载既可以放在文档的顶部,也可以放在文档的底部,将客户端脚本文件的加载放在文档的顶部会带来两个方面的问题.一是脚本的执行会阻止页面组件的并行下载,这使得页面组件的下载速度变慢；二是这会阻止脚本以下的内容的逐步呈现,造成屏幕空白,从而使用户在感觉上觉得网页的加载速度变慢.

2.3.4 客户端脚本大小

客户端脚本文件是一个以“js”为扩展名的文本文件,当用户请求使用客户端脚本文件的HTML文档时,客户端脚本文件会被从怎么写作器端下载到客户端,下载过程需要一定的时间.客户端脚本文件越小,下载所需要的时间就越短,用户的等待时间就越短,网站前端性能就越好.

3.网站前端开发应遵循的技术规范

3.1 HTML语言方面应遵循的技术规范

3.1.1 压缩HTML文档

HTML文档越小,网站前端的性能越好,那么我们就可以对HTML文档进行压缩,使在网络上传输的HTML文档变小,从而节约HTML文档的下载时间,提高网站前端性能.从HTTP1.1开始,Web浏览器和怎么写作器就开始支持压缩,常用的压缩方法是gzip.

3.1.2 合并图片

网页上图片的数量越少,一个页面上HTTP请求的数量就越少,网站前端的性能就越高.我们可以通过合并页面上的图片来达到减少网页上图片数量的目的,常用的合并图片的方法有图片地图和CSS Sprites两种.

3.1.3 对图片使用缓存

将网页中的图片在其第一次被访问时缓存在客户端可以减少HTTP请求的数量,提高网站前端的性能.Web怎么写作器可以使用expires头指定图片的有效期,Web浏览器可以在图片的有效期内使用缓存在客户端的图片,而不用重新从怎么写作器端下载该图片.

3.2 CSS样式表方面应遵循的技术规范

3.2.1 合并样式表文件

网页上样式表文件的数量越少,一个页面上HTTP请求的数量就越少,网站前端的性能就越高.我们可以通过合并页面上的样式表文件来达到减少网页上样式表文件数量的目的.

3.2.2 对样式表文件使用缓存

将样式表文件缓存在客户端可以减少HTTP请求的数量,提高网站前端的性能.Web怎么写作器可以使用expires头指定样式表文件的有效期,Web浏览器可以在样式表文件的有效期内使用缓存在客户端的样式表文件,而不用重新从怎么写作器端下载该样式表文件.

3.2.3 将样式表文件放在顶部

页面的逐步呈现可以避免出现屏幕空白,用户可以立即看到页面的部分内容,从而使用户觉得网页的加载速度变快.我们可以将样式表文件放在页面的顶部,从而使页面逐步呈现.

3.2.4 避免CSS表达式

CSS表达式的重新求值会降低网站前端的性能,我们可以通过避免在网页中使用CSS表达式来提高网站前端的性能,可以通过一次性表达式或事件处理器来代替CSS表达式.

3.3 客户端脚本方面应遵循的技术规范

3.3.1 合并脚本文件

网页上脚本文件的数量越少,一个页面上HTTP请求的数量就越少,网站前端的性能就越高.我们可以通过合并页面上的脚本文件来达到减少网页上脚本文件数量的目的.

3.3.2 对脚本文件使用缓存

将脚本文件缓存在客户端可以减少HTTP请求的数量,提高网站前端的性能.Web怎么写作器可以使用expires头指定脚本文件的有效期,Web浏览器可以在脚本文件的有效期内使用缓存在客户端的脚本文件,而不用重新从怎么写作器端下载该脚本文件.

3.3.3 将脚本放在底部

将脚本放在页面底部可以避免脚本阻止页面组件的并行下载和页面的逐步呈现,从而提高页面组件的下载速度,缩短页面的加载时间,提高网站前端的性能.

3.3.4 精简JaScript

为了使JaScript文件尽量小,可以通过精简的方式来移除代码中注释、空白字符等不必要的字符,进而缩短加载时间,提高性能.常用的精简JaScript文件代码的工具有Jin和ShrinkSafe两个.