一.css性能优化 摘自http://www.ibm.com/developerworks/cn/web/1109_zhouxiang_optcss/
1.把 Stylesheets 放在 HTML 页面头部：
浏览器在所有的 stylesheets 加载完成之后，才会开始渲染整个页面，在此之前，浏览器不会渲染页面里的任何内容，页面会一直呈现空白。这也是为什么要把 stylesheet 放在头部的原因。如果放在 HTML 页面底部，页面渲染就不仅仅是在等待 stylesheet 的加载，还要等待 html 内容加载完成，这样一来，用户看到页面的时间会更晚。
对于 @import 和 <link> 两种加载外部 CSS 文件的方式：@import 就相当于是把 <link> 标签放在页面的底部，所以从优化性能的角度看，应该尽量避免使用 @import 命令
2.避免使用 CSS Expressions：
CSS Expression 案例
Background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" )
Expression 只有 IE 支持，而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行，页面滚动 (scroll) 时也会执行，甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道，expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。
避免使用 Filter：
IE 特有的 AlphaImageLoader filter 是为了解决 IE6 及以前版本不支持半透明的 PNG 图片而存在的。但是浏览器在下载 filter 里面的图片时会“冻结”浏览器，停止渲染页面。同时 filter 也会增大内存消耗。最不能忍受的是 filter 样式在每个页面元素（使用到该 filter 样式）渲染时都会被浏览器分析一次，而不是像一般的背景图片渲染模式：使用过该背景图片的所有元素都是被浏览器一次性渲染的。
针对这种情况，最好的解决办法就是使用 PNG8。
3.CSS 缩写：
CSS 缩写可以让你用极少的代码定义一系列样式属性，这种做法可以极大程度的缩减代码量以达到提高性能的目的。
Colour 缩写
#000000 ------>> #000
#336699 ------>> #369
关于颜色，重复的属性值可以省略。
各种缩写方式
Margin-top: 2px;
Margin-right: 5px;
Margin-bottom: 2em;
Margin-left: 15px; ----->> Margin: 2px 5px 2em 15px;
Border-width: 1px;
Border-style: solid;
Border-color: #000 ----->> border: 1px solid #000
Font-style: italic;
Font-variant: small-caps;
Font-weight: bold;
Font-size: 1em;
Line-height: 140%;
Font-family: sans-serif; ----->> font: italic small-caps bold 1em 140% sans-serief
Background-color: #f00;
Background-image: url(background.gif);
Background-repeat: no-repeat;
Background-attachment: fixed;
Background-position: 0 0;
----->>background: #f00 url(background.gif) no-repeat fixed 0 0
list-style-type: square;
list-style-position: inside;
List-style-image: url(image.gif) ----->> list-style: square inside url(image.gif)
4.Multiple Declarations
关于 CSS 的 class 声明和定义，也有简写的方式
Class 的声明
.Class1{position: absolute; left: 20px; top: 30px;}
.Class2{position: absolute; left: 20px; top: 30px;}
.Class3{position: absolute; left: 20px; top: 30px;}
.Class4{position: absolute; left: 20px; top: 30px;}
.Class5{position: absolute; left: 20px; top: 30px;}
.Class6{position: absolute; left: 20px; top: 30px;}
-------------------->>>>>>>
.class1 .class2 .class3 .class4 .class5 .class6{
Position: absolute; left: 20px; top: 20px;
}
这种 Class 简写的方式可以极大的缩减我们的代码，提高浏览器分析识别的效率。
5. CSS 选择器 （CSS Selectors）
Child selector
#toc > li {font-weight: bold}
按照我们惯常的理解，编译器应该是先查找 id 为“toc”的节点，然后在他的所有直接子节点中查找类型（tag）为“li”的节点，将“font-weight”属性应用到这些节点上。
但是，不幸的是，恰恰相反，浏览器是“从右往左”来分析 class 的，它的匹配规则是从右向左来进行匹配的。这里，浏览器首先会查找页面上所有的“li”节点，然后再去做进一步的判断：如果它的父节点的 id 为“toc”，则匹配成功。
Descendant selector
#toc li {font-weight: bold}
这个效率比之前的“child selector”效率更慢，而且要慢很多。浏览器先便利所有的“li”节点，然后步步上溯其父节点，直到 DOM 结构的根节点（document），如果有某个节点的 id 为“toc”，则匹配成功，否则继续查找下一个“li”节点。
尽量避免 universal rules
[hidden="true"] { ... } /* A universal rule */
这里的匹配规则很明显：查找页面上的所有节点，如果有节点存在“hidden”属性，并且其属性值为“true”，则匹配成功。这是最耗时耗力的匹配，页面上的所有节点都需要进行匹配运算，这种规则应尽量避免。
Id-categorized 规则与 tag name 或 class 规则并行
button#goButton {...};----->>#goButton
.fundation#testIcon {...};----->>#testIcon
这里，按照我们常规的理解，箭头左边的写法似乎是应该更快的，因为它的限制更多。其实不然，id 是全局唯一的，在匹配 CSS 选择器时浏览器定位到 id 是最快的，如果伴随有其他的非 id 的 selector，反而会影响匹配的效率。
关于 class-categorized 规则
button.indented {...}----->>.button-indented {...}
程序员们经常会给某个 Class 前面加上标签名称（Tag Name），以更精确且快速的定位该节点，但是这样往往效率更差。和清单 8 中的原理一样，页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上，这种做法也可以避免由于开发修改页面元素的类型（Tag）而导致的样式失效的情况，做到样式与元素的分离，两者独立维护。
尽量减少规则数量
Span[mailfolder="true"] > table > tr > td.columnClass {...}
------------------->>>>>>>
.span-mailfolder-tbl-tdCol {...}
规则越多，匹配越慢，上面一种规则需要进行 6 项匹配，先找“columnClass”，再找“td”，然后是“tr”，“table”，最后是符合“mailfolder”为“true”的 span，这种效率是非常慢的。如果用一个比较特殊的 class 替代（span-mailfolder-tbl-tdCol），效率会快上好几倍。
.尽量避免使用 descendant selector
treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}
Descendant 选择器是耗时相对高的选择器，通常来讲，它在 CSS 里的使用应该是尽量避免的，如果能用 child 选择器替代就应该尽量这样去做。
利用 CSS 的继承机制
Color
Font
Letter-spacing
Line-height
List-style
Text-align
Text-indent
Text-transform
White-space
Word-spacing
#bookmark > .menu-left {list-style-image: url(blah)}
------------>>>>>>>>
#bookmark {list-style-image: url(blah)}
在 CSS 中，有很多 CSS 的属性以可以继承的，如果某个节点的父节点已经设定了上述的 CSS 样式（如：color, font 等 ...），并且子节点无需更改该样式，则无需再作相关设定，同时，也可以利用这一点：如果很多子节点都需要设定该 CSS 属性值，可以统一设定其父节点的该 CSS 属性，这样一来，所有的子节点再无需做额外设定，加速了 CSS 的分析效率。
二.js优化 摘自http://www.chinaz.com/web/2015/0626/417391.shtml
1. 定义局部变量
因为局部变量在这条链的起端，所以查找局部变量总是比查找全局变量要块。所以当你想要不止一次地使用一个全局变量的时候，你应该将它定义成局部变量，就像这样：
var blah = document.getElementById('myID'),
blah2 = document.getElementById('myID2');
改写成
var doc = document,
blah = doc.getElementById('myID'),
blah2 = doc.getElementById('myID2');
2. 不要使用 with() 语句
这是因为 with() 语句将会在作用域链的开始添加额外的变量。额外的变量意味着，当任何变量需要被访问的时候，JavaScript引擎都需要先扫描with()语句产生的变量，然后才是局部变量，最后是全局变量。 So with() essentially gives local variables all the performance drawbacks of global ones, and in turn derails Javascript optimization. 因此with()语句同时给局部变量和全局变量的性能带来负面影响，最终使我们优化JavaScript性能的计划破产。
3. 小心使用闭包
闭包基本上被认为是JavaScript中的new，当我们定义一个即时函数的时候，我们就使用了闭包，比如：
document.getElementById('foo').onclick = function(ev) { };
闭包的问题在于：根据定义，在它们的作用域链中至少有三个对象：闭包变量、局部变量和全局变量。这些额外的对象将会导致第1和第2个建议中提到的性能问题。
但是我认为Nicholas并不是要我们因噎废食，闭包对于提高代码可读性等方面还是非常有用的，只是不要滥用它们（尤其在循环中）。
4. 对象属性和数组元素的速度都比变量慢
谈到JavaScript的数据，一般来说有4种访问方式：数值、变量、对象属性和数组元素。在考虑优化时，数值和变量的性能差不多，并且速度显著优于对象属性和数组元素。
因此当你多次引用一个对象属性或者数组元素的时候，你可以通过定义一个变量来获得性能提升。（这一条在读、写数据时都有效）
虽然这条规则在绝大多数情况下是正确的，但是Firefox在优化数组索引上做了一些有意思的工作，能够让它的实际性能优于变量。但是考虑到数组元素在其他浏览器上的性能弊端，还是应该尽量避免数组查找，除非你真的只针对于火狐浏览器的性能而进行开发。
5. 不要在数组中挖得太深
另外，程序员应该避免在数组中挖得太深，因为进入的层数越多，操作速度就越慢。
简单地说，在嵌套很多层的数组中操作很慢是因为数组元素的查找速度很慢。试想如果操作嵌套三层的数组元素，就要执行三次数组元素查找，而不是一次。
因此如果你不断地引用 foo.bar， 你可以通过定义 var bar = foo.bar 来提高性能。
6. 避免 for-in 循环（和基于函数的迭代）
这是另一条非常教条的建议：不要使用for-in循环。
这背后的逻辑非常直接：要遍历一个集合内的元素，你可以使用诸如for循环、或者do-while循环来替代for-in循环，for-in循环不仅仅可能需要遍历额外的数组项，还需要更多的时间。
为了遍历这些元素，JavaScript需要为每一个元素建立一个函数，这种基于函数的迭代带来了一系列性能问题：额外的函数引入了函数对象被创建和销毁的上下文，将会在作用域链的顶端增加额外的元素。
7. 在循环时将控制条件和控制变量合并起来
提到性能，在循环中需要避免的工作一直是个热门话题，因为循环会被重复执行很多次。所以如果有性能优化的需求，先对循环开刀有可能会获得最明显的性能提升。
一种优化循环的方法是在定义循环的时候，将控制条件和控制变量合并起来，下面是一个没有将他们合并起来的例子：
for ( var x = 0; x < 10; x++ ) {
};
当我们要添加什么东西到这个循环之前，我们发现有几个操作在每次迭代都会出现。JavaScript引擎需要：
#1：检查 x 是否存在
#2：检查 x 是否小于 0 <span style="color: #888888;">（译者注：我猜这里是作者的笔误）</span>
#3：使 x 增加 1
然而如果你只是迭代元素中的一些元素，那么你可以使用while循环进行轮转来替代上面这种操作：
var x = 9;
do { } while( x-- );
如果你想更深入地了解循环的性能，Zakas提供了一种高级的循环优化技巧，使用异步进行循环（碉堡了！）
8. 为HTML集合对象定义数组
JavaScript使用了大量的HTML集合对象，比如 document.forms，document.images 等等。通常他们被诸如 getElementsByTagName、getElementByClassName 等方法调用。
由于大量的DOM selection操作，HTML集合对象相当的慢，而且还会带来很多额外的问题。正如DOM标准中所定义的那样：“HTML集合是一个虚拟存在，意味着当底层文档被改变时，它们将自动更新。”这太可怕了！
尽管集合对象看起来跟数组很像，他们在某些地方却区别很大，比如对于特定查询的结果。当对象被访问进行读写时，查询需要重新执行来更新所有与对象相关的组分，比如 length。
HTML集合对象也非常的慢，Nicholas说好像在看球的时候对一个小动作进行60倍速慢放。另外，集合对象也有可能造成死循环，比如下面的例子：
var divs = document.getElementsByTagName('div');
for (var i=0; i < divs.length; i++ ) {
var div = document.createElement("div");
document.appendChild(div);
}
这段代码造成了死循环，因为 divs 表示一个实时的HTML集合，并不是你所期望的数组。这种实时的集合在添加 <div> 标签时被更新，所以i < div.length 永远都不会结束。
解决这个问题的方法是将这些元素定义成数组，相比只设置 var divs = document.getElementsByTagName(‘div’) 稍微有点麻烦，下面是Zakas提供的强制使用数组的代码：
function array(items) {
try {
return Array.prototype.concat.call(items);
} catch (ex) {
var i = 0,
len = items.length,
result = Array(len);
while (i < len) {
result[i] = items[i];
i++;
}
return result;
}
}
var divs = array( document.getElementsByTagName('div') );
for (var i=0l i < divs.length; i++ ) {
var div = document.createElement("div");
document.appendChild(div);
}
9. 不要碰DOM！
不使用DOM是JavaScript优化中另一个很大的话题。经典的例子是添加一系列的列表项：如果你把每个列表项分别加到DOM中，肯定会比一次性加入所有列表项到DOM中要慢。这是因为DOM操作开销很大。
Zakas对这个进行了细致的讲解，解释了由于回流（reflow）的存在，DOM操作是非常消耗资源的。回流通常被理解为浏览器重新选渲染DOM树的处理过程。比如说，如果你用JavaScript语句改变了一个div的宽度，浏览器需要重绘页面来适应变化。
任何时候只要有元素被添加到DOM树或者从DOM树移除，都会引发回流。使用一个非常方便的JavaScript对象可以解决这个问题——documentFragment，我并没有使用过，但是在Steve Souders也表示同意这种做法之后我感觉更加肯定了。
DocumentFragment 基本上是一种浏览器以非可视方式实现的类似文档的片段，非可视化的表现形式带来了很多优点，最主要的是你可以在 documentFragment 中添加任何结点而不会引起浏览器回流。
10. 修改CSS类，而不是样式
你也许听说过：修改CSS类必直接修改样式会更高效。这归结于回流带来的另一个问题：当布局样式发生改变时，会引发回流。
布局样式意味着任何影响改变布局的变化都会强制引起浏览器回流。比如宽度、高度、字号、浮动等。
但是别误会我的意思，CSS类并不会避免回流，但是可以将它的影响最小化。相比每次修改样式都会引起回流，使用CSS类一次修改多个样式，只需要承担一次回流带来的消耗。
因此在修改多个布局样式的时候，使用CSS类来优化性能是明智的选择。另外如果你需要在运行时定义很多歌CSS类，在DOM上添加样式结点也是不错的选择。
三.html优化 摘自http://blog.sina.com.cn/s/blog_946e7651010151j6.html
1，页面减肥
页面的肥瘦是影响加载速度最重要的因素
删除不必要的空格、注释
将inline的script和css移到外部文件
可以使用HTML Tidy来给HTML减肥，还可以使用一些压缩工具来给JavaScript减肥
2，减少文件数量
减少页面上引用的文件数量可以减少HTTP连接数
许多JavaScript、CSS文件可以合并最好合并，人家财帮子都把自己的JavaScriptfunctions和Prototype.js合并到一个base.js文件里去了
3，减少域名查询
DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好
4，缓存重用数据
使用缓存吧
5，优化页面元素加载顺序
首先加载页面最初显示的内容和与之相关的JavaScript和CSS
然后加载DHTML相关的东西
像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载
6，减少inline JavaScript的数量
浏览器parser会假设inline JavaScript会改变页面结构，所以使用inlineJavaScript开销较大
不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容
7，使用现代CSS和合法的标签
使用现代CSS来减少标签和图像，例如使用现代CSS+文字完全可以替代一些只有文字的图片
使用合法的标签避免浏览器解析HTML时做“error correction”等操作，还可以被HTML Tidy来给HTML减肥
8，Chunk your content
不要使用嵌套tables
代码
1.
2.
3.
4.
5.
6.
7.
而使用非嵌套tables或者divs
代码
1.
2.
3.
将基于大块嵌套的tables的layout分解成小tables，这样显示时不用加载整个页面(或大table)的内容
9，指定图像和tables的大小
如果浏览器可以立即决定图像或tables的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作
这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变
image使用height和width
table使用table-layout: fixed并使用col和colgroup标签指定columns的width
8172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
