网站前端技术及其对网站性能影响探究.docVIP

网站前端技术及其对网站性能影响探究 随着互联网和电子商务的发展，人们对网站的要求 越来越高，网站流量越来越大，页面组件也越来越多，这就 使得网站响应速度变慢，为了提高网站的前端性能，本文首 先对网站前端的相关开发技术进行分析，然后研究了网站前 端开发技术对网站性能的影响，最后根据这些影响提出网站 前端开发应遵循的技术规范。 关键词：网站前端网站前端技术网站前端性能 1网站前端开发技术分析 语言 (Hypertext Markup Language)是指超文本标记 语言，是制作网页必须使用的语言，也是构成网页文件的主 要语言。 语言是一种标记语言，由一系列的标记组成， 他通过标记来格式化各种页面元素，某个标记可以使他所标 记的内容具有某种格式或特征，从而使得页面可以按照需要 的格式呈现。 网页文件需要在网页浏览器中打开，这种程序需要 网页浏览器解释执行，各种网页浏览器都可以完美的支持 语言，所以用 语言制作的网页可以供使用各种浏 览器的用户浏览。 2 CSS样式表 随着Internet应用越来越普及，对Internet程序的要 求越来越高，而Internet程序一般都是做成网站形式，所 以就对网站制作技术有了更高的要求，CSS就是为了弥补 的不足而出现的。CSS (Cascading Style Sheet)是 指层叠样式表，他不是一种语言，由一系列的属性组成，他 通过属性来格式化各种页面元素，某些属性可以使他所作用 的内容具有某些格式或特征，从而使得页面可以按照需要的 格式呈现。 在网页中嵌入CSS代码有三种方法：①直接在需要使用 CSS样式的标记中添加CSS代码。②在STYLE标记中添加CSS 代码。③在外部样式表文件中添加CSS代码。 1.3客户端脚本语言 和CSS都是进行页面布局的技术，他们只能对页面 进行格式化，要想使页面具有动态效果、能够与用户交互， 就需要在页面上编写程序，这就促使了客户端脚本语言的出 现。客户端脚本语言是编写嵌入到网页中的一段一段独立程 序的编程语言。客户端脚本语言有JavaScript和VBScript 两种，目前常用的客户端脚本语言是由Netscape公司开发 的JavaScripto通过在网页上嵌入由JavaScript编写的程 序，可以使得页面内容或格式根据设置的条件或用户的操作 发生变化，从而实现页面的动态效果。 在网页中嵌入客户端脚本有三种方法：①直接在需要使 用脚本的标记中添加脚本。②在SCRIPT标记中添加脚本。 ③在外部脚本文件中添加脚本。 2网站前端开发技术对网站性能的影响 语言对网站性能的影响 1. 1 文档大小 用 语言编写的网页保存起来是一个以“ ”为 扩展名的文本文件，一般把它称作 文档。该文件会占 用一定的存储空间，当用户请求该文件时，该文件需要被从 服务器端下载到客户端，这就需要占用网络带宽，下载过程 需要一定的时间。在相同网速下， 文档越小，下载所需 要的时间就越短，用户的等待时间就越短，网站前端性能就 越好。 2.1.2网页图片的数量 为了美观，网页上都需要使用图片，图片是通过 语言的“IMG”标记插入的，但是图片文件本身并不在 文档中，而是一个单独的图片文件，通过“IMG”标记调用 到页面上。因此，当用户请求一个 文档时， 文档 本身和网页上调用的图片文件是被分别下载到客户端的，每 一个单独文件的下载都需要一个HTTP请求，每一个HTTP请 求连接的建立都需要时间。所以，一个页面上图片越多，所 需要的HTTP请求数量就越多，下载所需要的额外时间越长。 1. 3网页图片缓存 文档中调用的图片可以被浏览器缓存到客户端，当 用户再次请求同一个 文档时，这些被缓存的图片就不 需要再次下载，从而减少HTTP请求的数量，同时减少HTTP 响应的大小，进而减少用户的等待时间，提高网站前端的性 能。 CSS样式表对网站性能的影响 2. 1样式表的数量 一般在一个 文档中可以加载多个样式表文件，类 似于 文档中引用的图片，当用户请求一个 文档时， 文档和样式表文件被分别下载到客户端，每一个文件的 下载都需要一个HTTP请求，每一个HTTP请求连接的建立都 需要时间。所以，一个 文档中样式表越少，所需要的 HTTP请求数量就越少，下载所需要的额外时间越短。 2.2.2样式表缓存 文档中加载的样式表文件可以被浏览器缓存到客 户端，当用户再次请求同一个 文档时，这些被缓存的 样式表文件就不需要再次下载，从而减少HTTP请求的数量， 同时减少HTTP响应的大小，进而减少用户的等待时间，提 高网站前端的性能。 2.2.3样式表位置 文档中对样式表文件的加载既可以放在文档的顶 部，也可以放在文档的底部，将样式表文件的加载放在文档的鹿部会阻止页面的逐步呈