23条网站前端性能优化，看懂就了解了！

12. 避免跳转
有种现象会比较坑爹，看起来没什么差别，其实多次了一次页面跳转。比如当URL本该有斜杠（/）却被忽略掉时。例如，当我们要访问 http:// baidu.com 时，实际上返回的是一个包含301代码的跳转，它指向的是 http:// baidu.com/ （注意末尾的斜杠）。在nginx服务器可以使用rewrite；Apache服务器中可以使用Alias 或者 mod_rewrite或者the DirectorySlash来避免。 
另一种是不用域名之间的跳转， 比如访问 http:// baidu.com/bbs 跳转到 http:// bbs.baidu.com/ 。那么可以通过使用Alias或者mod_rewirte建立CNAME（保存一个域名和另外一个域名之间关系的DNS记录）来替代。

13、删除重复的JS和CSS
重复调用脚本，除了增加额外的HTTP请求外，多次运算也会浪费时间。在IE和Firefox中不管脚本是否可缓存，它们都存在重复运算JavaScript的问题。

14、配置ETags
它用来判断浏览器缓存里的元素是否和原来服务器上的一致。比last-modified date更具有弹性，例如某个文件在1秒内修改了10次，Etag可以综合Inode(文件的索引节点(inode)数)，MTime(修改时间)和Size来精准的进行判断，避开UNIX记录MTime只能精确到秒的问题。 服务器集群使用，可取后两个参数。使用ETags减少Web应用带宽和负载

15、可缓存的AJAX
异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。如下代码片段, cache:true就是显式的要求如果当前请求有缓存的话，直接使用缓存
$.ajax({
  url : 'url',
  dataType : "json",
  cache: true,
  success : function(son, status){},
  error : function(){}
})

16、使用GET来完成AJAX请求
当使用XMLHttpRequest时，浏览器中的POST方法是一个“两步走”的过程：首先发送文件头，然后才发送数据。因此使用GET获取数据时更加有意义。

17、减少DOM元素数量
这是一门大学问，这里可以引申出一堆优化的细节。想要具体研究的可以看后面推荐书籍。总之大原则减少DOM数量，就会减少浏览器的解析负担。

18、避免404
比如外链的css、js文件出现问题返回404时，会破坏浏览器的并行加载。

19、减少Cookie的大小
Cookie里面别塞那么多东西，因为每个请求都得带着他跑。

20、使用无cookie的域
比如CSS、js、图片等，客户端请求静态文件的时候，减少了 Cookie 的反复传输对主域名的影响。

21、不要使用滤镜
IE独有属性AlphaImageLoader用于修正7.0以下版本中显示PNG图片的半透明效果。这个滤镜的问题在于浏览器加载图片时它会终止内容的呈现并且冻结浏览器。在每一个元素（不仅仅是图片）它都会运算一次，增加了内存开支，因此它的问题是多方面的。 
完全避免使用AlphaImageLoader的最好方法就是使用PNG8格式来代替，这种格式能在IE中很好地工作。如果你确实需要使用AlphaImageLoader，请使用下划线_filter又使之对IE7以上版本的用户无效。

22、不要在HTML中缩放图片
比如你需要的图片尺寸是50* 50，那就不用用一张500*500的大尺寸图片，影响加载（说到这里可能有朋友会说了，后台上传的图片我也没办法控制他上传的尺寸啊，这里只是说的最开始做静态页面的时候的一些注意事项，至于后面怎么去操作，那就看网编怎么办了，尽可能把自己能做的做到最好就行了）

以上是Yslow的23个优化原则，基本可以涵盖现在前端大部分的性能优化原则了，很多更加geek和精细优化方法都是从这些原则里面延伸出来的。

前端优化是条漫长的路，不是说一天两天就能全部做完的。我们可以参考上面的准则去把我们目前能做的都给优化了，剩下的更加小的一些细节点不用太过着急，毕竟也是要考虑优化性价比的。比如为了减小一个文件几个字节花上个把月根本不值得。这些优化的东西都可以在我们的工作中慢慢去通过积累，去通过google解决。