前段时间简单的研究了下前端优化相关的知识，本文算是一个阶段性的总结，或者当做一个优化的参考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优化的一些可行和看上去不那么可行的途径。

(更多…)

最近貌似流行做Javascript题，Dmitry A. Soshnikov这又出了几道题-The quiz，还可以自我评分，有兴趣的可以去试试看自己可以得几分。本文主要挑了2道比较绕的题目来说几个知识点：

1. Javascript中的”,”（逗号）操作符

2. Javascript中”;”（分号）的重要性

3. Javascript中with块中的作用域

下面请看题目。

(更多…)

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

(更多…)

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

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

(更多…)

先来看一段代码：

alert("a" in window);    /*true    -    1*/
if( false ){
    var a = 1;
}
alert("b" in window);    /*false    -    2*/
if( false ){
    b = 1;
}
alert("b" in window);    /*false    -    3*/
alert("c" in window);    /*false    -    4*/
if( true ){
    c = 1;
}
alert("c" in window);    /*true    -    5*/

以上代码片段是在全局作用域下定义的，对于第一个例子，Javascript在预解析的时候已经将变量a的声明添加到了活动对象中（具体可参考Javascript的“预解析），于是在运行时 “a” in window 为true。

(更多…)

1. parentWindow 与 defaultView
parentWinow是IE下document的特有属性，表示的是document所在的window对象
defaultView DOM Level2中引入的属性，document.defaultView指向默认的AbstractView。

2. 各种坐标以及维度属性

(更多…)

本文主要介绍以下几项的检测方法：
1. Javascript版本信息
2. Cookie是否开启
3. 用户的屏幕分辨率
4. Flash版本号以及浏览器是否开启了Flash拦截功能
5. 浏览器字体大小是否正常（某些浏览器缩放后会导致页面布局混乱）
6. 浏览器的Ajax功能是否正常，包括Get方式和Post方式
7. 浏览器的图片浏览功能是否正常
8. 用户的网络速度
通过对以上几个问题的检测，开发人员能够比较全面的了解目标浏览器的整体环境。
(更多…)

前不久，Google发布了一系列与WEB开发相关的工具，包括Closure Compiler、Closure Library与Closure Templates，其中Closure Compiler被Google称之为Javascript 优化器（Javascript Optimizer）。通过编译，Compiler可以使代码获得更佳的紧凑性和更高的性能。它不仅能删除无用的代码，同时还会重写和压缩代码以获得更好的下载和运行速度。此外，它还能检查代码中的语法、变量引用以及变量类型，并在发现问题后给出警告。
(更多…)

1. Javascript在执行前会进行类似“预解析”的操作：首先会创建一个当前执行环境下的活动对象，并将那些用var申明的变量设置为活动对象的属性，但是此时这些变量的赋值都是undefined，并将那些以function定义的函数也添加为活动对象的属性，而且它们的值正是函数的定义。
(更多…)