发布时间 : 星期一 文章电子商务系统前端性能优化的研究与实现 陈韵晴 - 图文更新完毕开始阅读
图3-8 eles_allup.html
eles_allup.html把CSS、JS都放在页面顶部，图片放在BODY标签中，这时按照他们各自先出现的顺序进行下载，没有组件因为优先级的原因而受到阻滞。
图3-9 eles_alldown.html在Chrome
eles_alldown.html把CSS、JS都放在页面底部，图片放在BODY标签中，这时3个图片虽然都先出现，但是受到了阻滞，仍是先为4个CSS和2个JS发送HTTP请求并下载，再处理剩下的2个JS和3个图片。
至此很容易看出，浏览器对不同页面组件进行发送HTTP请求并下载的优先顺序是CSS>JS>IMAGE。当优先级低的组件先于优先级高的组件出现时，前者会暂时受到阻滞，等待优先级高的组件先获取资源和下载之后才开始自身的解析。
页面元素优化就是通过改变页面中某些元素的位置来提升用户体验的一种方式，虽然实际上并不能真正减少加载时间，因为整个页面组件下载的内容大小其实并不会改变，但是对页面元素优化后用户确实能得到更快的内容反馈，会感觉到显示内容的速度像是变快了一样，增强了用户浏览网页的信心，才能留住用户，否则他们不知道提出的请求是被正常处理当中还是页面已经失去了响应，而导致用户关闭了你的网站投奔竞争对手，所以页面元素的优化是十分必要的。
3.2.2 CSS 放在顶部
在上面的测试中观察到，如果把CSS样式表放置在代码顶部
中的话，我们看到出现页面内容的时间，会比放在底部的情况要明显短很多，后者感觉上很明显在显示内容之前空白了一段时间，然后最后一下涌出所有内容。而用户当然希望浏览器能够尽快地呈现页面信息，即使整个页面所有组件并没有加载完，但目前已经下载的内容可以先显示出来，尽快让浏览者得到一个视觉上的反馈。如果系统响应不及时，浏览者很快就会转移注意力，响应太久用户就会失去耐心。所以当请求的数据量很大或者网络连接很慢的时候，这种逐步加载的方式就显得尤为重要。有时候我们访问一些网站的时候，看到浏览器虽然没有完全显示整个页面，但是出现了导航栏、logo图标之类的内容时，我们就知道浏览器是得到了正确的响应的，也就愿意多等一会。因此，将CSS文件放在顶部，可以使得用户在等待过程中，尽快看到一些页面内容，使其愿意再耐心地等待页面完整显示。如果CSS放置在代码底部的话，页面内容会延迟出现，如果页面数据量比较大则白屏现象会很明显，这样容易使用户流量流失。在IE浏览器中这种情况更为明显，这是因为组件是按照他们在代码中的顺序进行发送HTTP然后下载的(如图3-10中eles_alldown.html各组件在IE的加载顺序是按照代码中的出现顺序，HTML>IMAGE>CSS>JS),而IE会在保证所有样式表都下载完毕之后才呈现页面内容，如果网站在构建呈现树的时候CSS尚未加载解析完毕，那么这种构建就是在做无用功，因为这个时候页面根本不能呈现内容，如果在全部样式表加载解析完毕之前就呈现内容的话，就会出现无样式内容的闪烁抖动问题，因此如果样式表放在底部的话，页面就会一直空白直到所有东西都加载完毕后才一次性全部涌现给用户，所以我们应该把CSS样式表放置在HTML顶部的
标签里。
图3-10 eles_alldown.html在IE
除了可以在HTML顶部
中使用CSS，还要注意引用方式的选择，虽然使用标签或@import指令都可以完成引用操作，但经验告诉我们使用标签更妥当，不仅因为它的形式上更简单易用，还因为@import指令不管放在HTML的哪个部位都有可能造成页面空白的情况。综上所述，最佳的解决方案就是遵循HTML的规范，将那些呈现页面所需要的样式表使用LINK标签放在顶部的
标签中，给用户一个更良好的浏览体验。3.2.3 脚本放在底部
与样式表不同，虽然脚本文件可能有些语句是用来修改页面内容的，但是大部分的代码往往是用来丰富页面的动态效果和其他功能，对页面的改动往往也比较小，所以我们可以在使用CSS加载完页面之后，再慢慢下载脚本文件并对页面做出相应改动，而且后面的脚本可能要在前面脚本的执行结果基础上才能正确执行，浏览器为了正确执行代码并使页面能够恰当的布局，会在加载脚本的时候暂停对其他组件的加载。
因此，脚本最好放到HTML底部，避免因为它的加载而妨碍了网页内容的尽快显示。与将样式表放在前面一样，通过把JS脚本放在代码底部后，总加载时间也不变，但浏览器可以尽快看到页面的内容，增强用户继续浏览下去的信心。
3.5 重定向的优化
3.5.1 原理
重定向17最常见的是服务器返回301、302、304状态码而导致的页面重定向，其中304状态码是用于响应浏览器发出的条件GET请求的，收到这样的状态码则说明浏览器可以到缓存中获取所需的数据，不算是真正意义上的重定向。而前两个状态码的情况则可能是由于网站重新设计、修改了易于记忆的URL、跟踪流量等原因而导致了重定向的发生，当服务器返回这样的重定向时，网站就需要根据这个新的URL来请求资源，使得网页的显示被延迟了，所以应尽量避免这种不必要的重定向；
产生重定向有以下三种方式： 1、响应返回一个范围在3xx的状态码
这个响应中有一个Location字段，会使得页面被重新定位到该字段显示的网址去，这种方式有利于后退操作的正常执行；
2、HTML里
标签中如果有带refresh属性的标签，网站就知道在所指定的秒数之后使页面重定向到指定的URL；3、JS中也可以使用document.location（）函数来执行重定向。
表3-1显示了7个较为知名的网站加载时发生重定向（不包含304）的情况：1个在一级页面使用了重定向，而6个不会在一级页面使用。当重定向发生次数较多时，响应时间会明显变长。
表3-1
较知名的站点 亚马逊 百度 谷歌 新浪 网易 京东商城 雅虎 3.5.2 避免重定向
除了尽量避免因为上述的3种方式而导致的重定向，还有一种极为常见但很容易避免的重定向，那就是某些结尾必须有“/”的URL因为缺少了这个斜线而导致的重定向。服务器接收到请求末尾没有斜线的URL时通常都会选择进行重定向，例如请求访问http://hbhru.w236.mc-test.com/onlineshop_test的时候，可以看到导致了一个302响应，查看这个响应的详细信息发现，其中包含了一个到http://hbhru.w236.mc-test.com/onlineshop_test/ （也就是Location的值）的重定向，这个重定向就是在原URL的结尾添加了斜线。
HTTP/1.1 302 Found
Date: Fri, 15 Apr 2016 01:21:51 GMT Server: Apache/2.2.15 (CentOS)
是否在一级页面使用重定向 否 否 否 否 否 否 是