端浏览器、结束连接等步骤，当这种请求很多的时候，整个相应速度会被拖得很慢。根据前端性能黄金法则，最终用户总响应时间的80%-90%都用在HTML中的组件的加载上，所以要缩短网站的响应时间，首先就要缩减页面中的组件数，从而HTTP请求数量的降低就带来了响应速度的提升；
2、客户端缓存：虽然缓存技术对于页面的首次访问不会减少响应时间（因为所有需要用到的组件都必须发送HTTP请求，从服务器获取并下载到客户端），但是客户端缓存可以使得用户在再次访问该网站时，减少用户的等待时间，如果不设置缓存，那么再次访问时又会重新下载所有组件，十分浪费时间和网络资源。对于那些被经常访问的页面，我们可以把初次访问时已经下载了的那些组件保留在本地，当再次访问时就可以直接从本地缓存获得这些资源而避免重复下载，这样就可以极大地提升响应速度。
3、压缩技术：所请求页面的数据量越大，返回花费的时间就越长，当带宽速度比较慢时会花很久的时间去请求和下载资源。为了尽可能减少响应时间，可以采取减少所请求资源的数据量的方式，比如压缩HTTP的响应包，来减少数据传输量。
4、页面元素优化：可以使浏览器尽快显示内容，即使只是一部分，而不要等所有内容都准备就绪才一并显示，特别是在网速很慢的时候，这种优化就十分必要。网页中的组件依照程序中的先后顺序进行加载，所以影响显示的组件的摆放位置就不能随意，比如需要立即使用的样式表该放在前面等等，因此针对页面元素的优化也能提升网站的性能，为浏览者带来更良好的使用体验。
5、重定向：一般指将页面从原来的某个URL改变定位到别的URL，最常见的是服务器返回301、302、304状态码而导致的页面重定向，也可能是页面中组件的重定向，前两个状态码可能是由于网站重新设计、修改了易于记忆的URL、跟踪流量等原因导致了重定向的发生，当服务器向浏览器返回这样一个状态码和重定向时，网站需要根据这个新的URL来请求资源，使得网页的显示被延迟了，所以应尽量避免不必要的重定向；
6、Ajax技术：Ajax技术4用于实现客户端脚本与Web服务器的异步数据交换。这种方式使得原本需要服务器承担的部分运算操作转移给了相对闲置的浏览器，
避免了重复的数据传输，减少了浏览器和服务器之间交流的数据量，只用来改变网页中的部分内容，从而增快了响应时间，因此Ajax技术可用于提高前端性能；
7、减少DNS查询：DNS5可以把易于用户记忆的域名转换成不易记忆但计算机可以处理的IP地址。因为DNS查找这个过程是要占用一定时间的，为了缩短时间我们必须尽量避免这种查找的发生，也就是将资源尽量放在同一个域中，但是又要考虑同一个域的资源请求有并行度的限制，两者是对立的，所以我们要考虑兼顾两者的平衡；
8、CDN：CDN6相当于一种缓存代理，通过将网站的资源存放在离浏览者最近的服务器上，供用户访问相关资源的时候能够更快地获得它们。这种资源往往是静态的、普遍性较高的，比如一些大公司的CDN服务会提供JQuery的免费使用，我们建网站的时候就不必把JQuery放在自己的服务器上，让用户“千里迢迢”地下载这个文件，而是在网站中利用这些大公司的CDN服务，使得用户请求路径最短，缩短网页响应的时间。
2.3 前端性能测量方法
除了利用浏览器本身自带的调试工具之外，还使用其他的网页分析工具比如HttpWatch7等。其实浏览器本身自带的调试工具很强大也足够我们基本使用，比如谷歌浏览器的开发者工具就是一个用于收集网页信息的网页数据分析工具，只要简单地在浏览器界面按下F12就可以打开开发者模式，便于查看网页的各种数据和图表。相对于其他较为复杂的网络监控工具更简单，只需直接在浏览器页面上查看网页发送的请求和响应的头信息、代码管理、Cookies管理、缓存等相关的信息。因此，本文将主要使用浏览器Chrome的开发者工具、Firefox的Firebug工具，再结合其他网页分析工具对网站进行数据采集，通过对比前端性能优化之前和之后的表现数据，来体现优化方案的效果。
3 电子商务网站前端优化方案
下面，将针对前面提到的影响前端性能的各个因素，分别提出具体的优化方案，并利用网页分析工具对结果进行进一步的分析和验证。
3.1 HTTP 请求优化
3.1.1 原理
HTTP协议8是现今使用最广泛的应用层协议，是一种客户端/服务器协议，负责浏览器和服务器之间的数据传输。HTTP其工作的大概过程是：客户端向一个特定的URL发送一个HTTP请求，该请求的请求头包含请求方式、目标URI、协议版本、接受的压缩方式、语言、缓存设置、Cookie、HOST、修改日期等等信息，接着客户端就处于等待响应的状态中；URL对应的宿主服务器处理收到的请求，并返回一个状态码和响应信息，响应信息包括日期时间、服务器类型和版本信息等内容；客户端接收到服务器返回的响应后，再对页面进行刷新。HTTP协议有两种常见的请求类型：
（1）GET请求：GET请求是获取数据最常用的方式，它发送的数据量相对比较小，包括URI和请求头信息。当使用缓存时，会产生条件GET请求，在请求的头信息里使用“If-Modified-Since”一项写上该需要请求的文件的最后修改时间，那么服务器收到后经过处理则可以与Last-Modified的时间比较，如果不一致则把请求的文件返回给浏览器，如果一致就返回“304 Not Modified”状态码，告诉浏览器可以从缓存中下载所请求的文件，从而提高了响应速度，也节省了网络带宽。
（2）POST请求：POST请求比GET允许发送的数据量更大，一般用于包含大量数据的表单的提交，提交放在消息主体中，不限制提交的数据量，也可以用于改变服务器资源。
从HTTP的整个工作过程可以看出，客户端每次需要更新页面信息，请求页面上的组件资源时，都要等待一段用于进行请求响应的时间，在这个过程中由于距离、网络带宽等因素的影响存在着一定的时延，所以组件数量越少，HTTP请求得越少，网页的响应速度就能越快。根据这个结论，下面提出了相应的优化方案。
3.1.2 使用图片地图
常见的网站导航栏为了更美观一般会将超链接关联到图片上，下面给出了一个导航栏示例（如图3-1）。
图3-1 导航栏
当使用传统的图片链接方式，不采用图片地图时（图3-2），导航栏上的7个按钮由7幅分开的图片组成，每个图片对应相关的超链接。用户通过点击不同的图片转向各自的页面去，也就是说，有n个导航按钮就需要n张图片，当页面加载的时候，浏览器需要向服务器发送n个HTTP请求来请求这n个图片。
图3-2 photomap1.html
photomap1.html采用传统的图片连接方式。首次加载该页面的时候，通过查看Google Chrome44的开发者模式（先禁用了Cache）来查看具体数据，可以看到如图3-3的结果：在使用传统的图片链接的方式下，首先加载HTML，之后是导航的7个图片加载，共发出了8个HTTP请求，共传输37.9KB数据量。本页面的总加载时间是0.298秒。
相关推荐：
loading