高性能电子商务网站前端设计研究

高性能电子商务网站前端设计研究

随着网络迅速普及和电子商务的快速发展，电子商务网站在许多互联网服务中越来越重要。每个电子商务网站的用户都希望网站中有更多的用户。另一方面，他们必须推广网站，提高网站的流量。另一方面，他们应该增加网站元素的数量，以吸引用户。流量越高，网站对性能的要求越高。网站添加元素的增加会影响网站的性能，这使得这些网站的网站速度会降低。因此，如何提高电子商务网站前端的性能已成为一个必须尽快解决的问题。本文就是顺应这种需求,对提高电子商务网站前端性能的设计理念进行研究,以期对电子商务网站的设计进行指导,提高网站的性能。一、相关概念的分析1、直接进入网站的企业电子商务网站是指以销售或推广商品或服务为目的的网站,这种网站有两类,一类是直接在网站上销售商品或服务,另一类是不直接在网站上销售商品或服务,而是在网站上展示企业的商品或服务,对企业的产品或服务进行宣传和推广。2、快速响应从用户在浏览器地址栏输入URL地址到请求的页面完整的在浏览器中呈现出来,需要经过域名解析、HTML文档下载、页面组件下载等过程,在这个过程中,用户一直处于等待状态,这段时间的长短就是网站的响应速度,高性能网站就是指对网站用户请求响应速度快的网站,网站对用户请求响应速度越快,网站的性能就越高。3、面向网站用户的接口网站前端是指网站的前台页面,他直接面向网站用户,向其展现信息并与其交互,是用户与网站交互的接口,网站前端对于信息发布型的网站尤其重要。4、文件内容要完整网页是由文字、图片、动画等组成的,这些组成部分需要通过HTML语言和样式表进行格式化,才能形成完整、整洁的页面。对于一个HTML文件来说,除了要在网页中显示的文字,图片、动画等网页内容是不包含在文件中的,脚本、样式表等也是可以放置在文件外部的。页面组件就是指这些放置在HTML文件外部的网页组成部分。二、分析电子商务网站前端绩效影响因素1、http端页面的下载电子商务网站的网页是由HTML文档和页面组件组成的,网页要在浏览器中完整的展现出来,必须将HTML文档和页面组件全部下载到浏览器端。页面组件包括图片、动画、客户端脚本、CSS样式表等,当浏览器要打开一个页面的时候,HTML文档和页面的每一个组件就对应一个HTTP请求,每一个HTTP请求都需要一个请求、响应、下载的过程,这个过程需要一定的时间。所以,一个电子商务网站页面HTTP请求的数量越多,页面从请求到完全展现所需要的时间越长,其性能就越低。2、页面组件存储为了使用户的体验更好,电子商务网站的网页中都会使用大量的页面组件,这些页面组件的存在会使HTTP请求的数量增加,会降低网站前端的性能,但是可以通过一个方法来解决这个问题,这就是页面组件缓存。当用户第一次访问电子商务网站页面时,下载该页面所有的组件,然后将这些页面组件缓存到客户端,当该用户再次访问该页面时,就不需要再下载其已经缓存的页面组件了,这样就可以减少页面从请求到完全展现所需要的时间。通过页面组件缓存,可以减少HTTP请求数量和从服务器端下载的数据量,但是这种方式只适合于用户多次访问电子商务网站的情况。3、文件下载的大小电子商务网站的HTML文档和页面组件都是单独的文件,这些文件会有一定的大小,浏览器端从服务器端下载这些文件需要一定的时间,在文件数量一定的情况下,每个文件越小,下载所需要的时间越短,页面从请求到完全展现所需要的时间就越短,电子商务网站前端的性能越高。4、层压机的运行过程会出现重充在制作电子商务网站时,可以将CSS样式表放置在HTML文档的顶部,也可以放置在底部。一般情况下,页面组件按照其在HTML文档中出现的顺序下载,当把CSS样式表放置在HTML文档底部时,可以使需要在页面上显示的页面组件被提前下载,会得到一个加载很快的页面。但是,当CSS样式表放置在HTML文档底部时,浏览器为避免CSS样式表变化时重绘页面,就会阻止内容逐步呈现。虽然把CSS样式表放置在HTML文档底部会加快下载速度,但是这样会阻止页面的逐步呈现,用户会感觉到页面下载变慢。5、下载客户端脚本默认情况下,浏览器会按照HTTP协议的建议从每个服务器并行下载两个页面组件,这比单个下载大约可以节约一半的时间,如果将网页中的组件平均分配到两个服务器中,就可以并行下载四个组件,使下载时间减少到原来的四分之一。在制作电子商务网站时,客户端脚本可以放置在HTML文档的顶部,也可以放置在底部。当把客户端脚本放置在HTML文档的顶部时,由于脚本可能会使用”document.write”向网页中输出内容,浏览器为了确保页面的布局,就会阻止其他页面组件的下载,单独下载客户端脚本,当客户端脚本下载完毕时才继续并行下载其他页面组件。而大多数客户端脚本只是执行动态效果,不会向网页输出内容,所以,将客户端脚本放置在HTML文档的顶部会延迟电子商务网站页面的展现速度。三、高性能电子商务网站的设计理念1、将相邻的多点照片合并为多媒体照片,并将其方法合并合并电子商务网站页面组件可以减少页面HTTP请求的数量,通常可以合并的电子商务网站页面组件有图片、客户端脚本、CSS样式表等。对于图片,可以适当的将相邻的多幅图片合并成一幅图片,如果被合并的图片建立的有超级链接,就可以使用图片地图技术或CSSSprites在合并后的图片上建立多个超级链接。对于客户端脚本和CSS样式表,一般会使用外部脚本和样式表,并且按照软件工程的思想,将代码分开放到多个文件中,这会增加多个HTTP请求,从而使性能降低。这里可以通过适当的合并外部脚本和样式表,减少这些组件的数量,从而减少HTTP请求的数量,进而提高性能。2、采用网络服务方案为了加快Web页面的加载速度,浏览器会将某些或全部电子商务网站页面组件缓存到浏览器端,以减少HTTP请求的数量和从服务器端下载的数据量。Web服务器通过Expires头告知浏览器某个组件在客户端的缓存副本的有效期限,在这个有效期限之前,浏览器可以使用该组件的客户端的缓存副本,而不必从服务器端下载该组件,适合使用缓存的组件包括图片、动画、客户端脚本、CSS样式表等。当然这种机制对于第一次访问电子商务网站的用户是不起作用的,因为电子商务网站页面在该客户端没有缓存。所以,对于大部分用户都是新用户或页面组件变化很快的电子商务网站页面需要合理使用页面组件缓存,根据网站页面的情况设置Expires头。3、压缩被请求的文件对于电子商务网站来说,HTML文档和页面组件文件越小,其下载数据量越小,其下载时间就越短,减少HTML文档和页面组件文件大小的有效方法就是压缩。目前,最常用和最有效的压缩方法是gzip,它可以大幅度减少文件的大小,最适合被压缩的文件是HTML文档、脚本文件和样式表文件等文本内容的文件。浏览器端通过HTTP请求中的“Accept-Encoding:gzip”头来标识对gzip压缩的支持,Web服务器接收到这个头,就会使用gzip方式压缩被请求的文件,并通过“Content-Encoding:gzip”头告知浏览器端,浏览器端需要解压被压缩的文件。在这个过程中,压缩和解压都需要一定的时间,这会使页面的响应时间变长。要不要对文件进行压缩,需要对比压缩后节约的文件下载时间和压缩、解压花费的时间,压缩后节约的文件下载时间和很多因素有关,很难衡量,一般认为,文件越大越值得压缩,一般对于大于1KB的电子商务网站文件进行压缩。4、成为用户体验的原料将CSS样式表放置在电子商务网站页面顶部,使页面从上到下逐步呈现,从而使得浏览器可以尽快显示内容,这会为等待页面的用户提供视觉反馈,从而使用户感觉页面加载变快,改善用户体验。5、下载脚本文件将不需要向网页中输出内容的客户端脚本放置在电子商务网站页面底部,使其他页面组件先并行下载,并逐步呈现,等其他页面组件下载完毕,再下载脚本文件,