前端性能优化方法(转自:http://i.funshion.com/blog/content/214)

前端优化是一个麻烦的事情，不仅有着HTML、CSS、Javascript、Image等各种各样的资源，而且针对方方面面的资源都有不同的优化方式，哪种方式是适合你的？
正如大家都知道的，JS、CSS要外联，可是也有大网站却偏偏要内联，不同的做法那是因为存在不一样的环境。

首先进行前端优化是要有一定目的：

   1. 以用户的眼光来看，优化能够让页面加载，渲染，解析的更快、对用户的交互响应更加即时。
   2. 从服务器方面而言，优化能够减少Http请求链接，减少对服务器带宽的占用。

总而言之，合理的优化可以带来不可小觑的利益（没办法，RMB太少，只能省着花）。

众所周知，一般情况下，浏览器展现的过程其实就是与WebServer建立连接、发送数据、等待服务器响应、接收、渲染这样一个复杂的过称。由于有 PageSpeed和YSlow这样的工具，我们很容易发现和网络相关的种种问题，然而浏览器的渲染确犹如一个黑匣子一般，让我们无所适从，怎样才能让其更快？以下是从代码层面给出的一点点说法。

1：减少脚本的阻塞

内联脚本和外联脚本对浏览器渲染性能的影响有多严重，我们可以用一个词语来形容 — 杀手。

首先，当内联脚本执行或者外联脚本加载时，脚本会阻塞并发请求。并且，浏览器的渲染是单线程进行的，在渲染完成之前执行脚本，渲染会被推迟，所以应该将执行时间较长的脚本异步执行，例如使用setTimeout，同时优化JS执行性能，减少JS执行时间，减少JS对DOM更改也是必不可少的。然后外联的脚本，尽量放在最后加载吧。

2：减少HTTP请求

建立链接、请求数据是一个昂贵的开销，而且请求数还有一定限制的，在这种情况下，某些资源不得不处于block的状态，延迟了网页的网站展现。如何减少HTTP请求？仅仅从代码的角度来看，合并小的图片到一张图片、对图片资源使用惰性加载是一些不错的做法。同时服务器也需要给静态资源一个足够长的缓存时间。

3：尽量不要使用iframe

不得不说ifame是一个庞大的家伙，对于浏览器资源来说是一个不小的消耗，偶尔用一个还行，用多了就成了灾难，如果可以不用则尽量不用。但往往在一些情况下我们又不得不使用它，延迟加载 iframe或与是一种妥协。

以上仅仅是一点优化策略，在实际中前端性能优化需要从方方面面入手。