前段时间简单的研究了下前端优化相关的知识，本文算是一个阶段性的总结，或者当做一个优化的参考List。
前言
    前端是庞大的，包括HTML、CSS、Javascript、Image、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么？
    1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
    2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
    总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
    前端优化的途径有很多，按粒度大致可以分为两类，第一类是页面级别的优化，例如HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等；第二类则是代码级别的优化，例如Javascript中的DOM操作优化、CSS选择符优化、图片优化以及HTML结构优化等等。另外，本着提高投入产出比的目的，后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。

在前段领域中，对Javascript和CSS的优化一直是大家关注的焦点，相应的压缩优化工具也非常丰富，相对而言对HTML优化的关注则显得有些冷淡。在Steve Souders的大作《Even Faster Web Sites》中谈到非常多有效的前端优化方法，例如Javascript的加载、CSS选择符、图片优化、gzip、iframe问题等，唯独没有细说HTML优化。在整个前端的构成中，HTML是必不可少的一部分，而且是真正的展示“前端”。虽然与动辄十几K的Javascript相比，HTML的大小在整个页面资源中一般不会占太多的比重，而且还有Gzip，但是事实表明，大多数页面都有较大的压缩余地，即使是Gzip过后仍然能减小可观的体积，这一事实在后续的文章中会给出，本文主要讨论HTML优化的一些可行和看上去不那么可行的途径。

今天猛然发现在Firefox3.5下，如果CSS中对同一个背景图片使用了多次，则对同一个图片会发送多次请求，也就是说没有缓存背景图片。因此，这也就造成了CSS Sprite在Firefox3.5中失效了，具体的例子可以围观这个测试页面。

文本内容主要包括以下几点：

什么是repaint/reflow?
什么情况下会触发浏览器的repaint/reflow?
浏览器自身所作的优化
如何优化你的脚本来减少repaint/reflow?

今天读到Steve Souders的一篇关于如何放置内联脚本的文章-Positioning Inline Scripts，现总结在文本。
之前译的一篇文章《无阻塞加载脚本》谈到的是外部脚本对于页面性能的影响，例如阻塞资源下载、阻塞页面渲染等。而对于inline的脚本，同样存在类似的问题，有的甚至是有过之而无不及。

      随着越来越多的站点向”Web2.0″应用发展，脚本的数量也在迅速增加。而与此同时脚本给页面性能带来的负面影响也是令人担忧的。在主流浏览器（例如IE6、IE7）中，由于脚本而产生的阻塞有以下两种：

脚本会阻塞下载位于它之后的资源。
脚本会阻塞渲染位于它之后的元素。