http://www.cnblogs.com/xesam/archive/2011/11/24/2262281.html 关于SETTIMEOUT，理解JAVASCRIPT定时机制
http://www.cnblogs.com/xesam/archive/2011/11/24/2261102.html 关于SETTIMEOUT的第三个参数以及小应用
http://www.cnblogs.com/snandy/archive/2011/05/18/2050315.html 仅IE不支持setTimeout/setInterval函数的第三个以上参数
http://www.cnblogs.com/baochuan/archive/2012/05/29/2524694.html 通过浏览器渲染过程来进行前端优化
http://www.smallni.com/css-performance-from-the-browsers-rendering/ 从浏览器的渲染原理讲CSS性能
http://www.nowamagic.net/librarys/veda/detail/2168 浏览器渲染过程中的reflow是什么
http://blog.csdn.net/longeremmy/article/details/8028713 浏览器加载渲染网页过程解析(1)
http://blog.csdn.net/longeremmy/article/details/8028738 浏览器加载渲染网页过程解析(2)
http://blog.csdn.net/longeremmy/article/details/8030736 浏览器加载渲染网页过程解析(3)
http://www.cnblogs.com/_franky/archive/2010/12/31/1923376.html UI线程的阻塞
http://www.cnblogs.com/_franky/archive/2010/04/30/1725390.html 浏览器中的 window.setInterval 和window.setTimeout
http://kb.cnblogs.com/page/129756/ 前端必读：浏览器内部工作原理
一般来说,除了opera以外浏览器第一次的渲染是要DOM Tree 构建完毕后 构建出完整的Render Tree后,才进行的. 当然 ,如果中途某个脚本执行了如 alert等语句. 则会导致浏览器把之前的ui update队列全部flush并渲染.否则,DOM Tree, Render Tree 不构建完毕前,不进行第一次的渲染. alert之所以引起提前渲染.本质原因是,alert 弹窗也是一种 ui update.行为.而且为了及时反馈用户alert弹窗.这里浏览器们强制flush了 ui update队列.进行了渲染. IE 看起来直接调用 MsgBox 不应该和 ui线程扯上什么关系. 但至少测试结果告诉我们. ie系.在调用alert方法时,并没有仅仅调用MsgBox了事.而是先flush掉当前ui update队列中等待渲染的工作.
一些特殊的情况下如当DOM Tree很大很长的时候(考虑上万个节点,或更多.但不绝对,DOM Tree的复杂性,会大大缩小这个条件的重要性.). 浏览器会根据情况,适当的提前首次渲染的时间.具体算法不明.且各个浏览器的策略也有区别. 但参考的项大概涉及到 DOM Tree 的复杂度 、庞大程度、DOM Tree构建消耗的时间. 外部资源加载,甚至是DOM Tree构建,被阻塞的次数.等等等等
对于HTML 文档.务必使用分段输出的同时,
把脚本资源放在越靠后的段落越好.
即对于一个完整的html文档来说, 脚本越靠后越好的另一种诠释.
如果具备一个执行时间比较长的脚本.尽量使用setTimeout + Web Worker 代替直接执行.
但是在ie浏览器 中使用 interval 如果间隔为0 则只会回调一次方法
一旦该函数执行时间 可能超过 了setInterval的间隔 那么函数执行间隔就是不稳定的.
如果我们使用计时器回调需要稳定连续的间隔 那么这个值应该不小于16ms即可获得更好的兼容
JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.JavaScript的定时器回调函数是同步执行的
假如某一浏览器内核的实现至少有三个常驻线程:javascript引擎线程,界面渲染线程,浏览器事件触发线程
在JavaScript引擎运行脚本期间,浏览器渲染线程都是处于挂起状态的,也就是说被”冻结”了.
如果队列非空,引擎就从队列头取出一个任务,直到该任务处理完,即返回后引擎接着运行下一个任务,在任务没返回前队列中的其它任务是没法被执行的.
JavaScript引擎是单线程运行的,浏览器无论在什么时候都只且只有一个线程在运行JavaScript程序.
出现上面所有误区的最主要一个原因是:潜意识中认为,JavaScript引擎有多个线程在执行,JavaScript的定时器回调函数是异步执行的.
但这时有必要说说渲染线程,因为该线程与JavaScript引擎线程是互斥的
不论js代码是内联还是包含在一个不相干的外部文件中，页面下载和解析过程肯定会停下，等待脚本执行完成这些处理，然后才能继续进行。——大多数浏览器使用单进程处理JavaScript的多个任务，同一时间只能有一个任务执行
无样式之闪烁
注意两个词“repaint"和"reflow"。
repaint(重绘)是在一个元素的外观被改变，但没有改变布局的情况下发生。——如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint。
reflow（回流）：浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程就叫回流。
JavaScript：
1、把脚本进行压缩（移除不必要的字符，注释以及空行）。
2、对部分js文件进行合并，以减少http的请求个数，以减少服务器端的压力——但是要量力而行，因为如果你的js文件很大，下载很慢的话，很多功能都不能正常进行，我们可以按照业务进行合并。
3、使用外部js文件。因为现在很多浏览器都有缓存，明显会减少http请求数。
4、将脚本放在页面底部。先让用户看到内容，然后再加载js，这样用户会感觉页面加载速度很快。
CSS:
1、合并多个css文件，以减少http的请求个数，以减少服务器端的压力。
2、使用外部css文件。主要原因是浏览器缓存，以减少http请求。
3、放在页面顶部（head标签处），防止出现“无样式内容的闪烁”。
最终决定浏览器表现出来的页面效果的差异是：渲染引擎 Rendering Engine（也叫做排版引擎），也就是我们通常所说的“浏览器内核”，负责解析网页语法（如HTML、JavaScript）并渲染、展示网页。相同的代码在不同的浏览器呈现出来的效果不一样，那么就很有可能是不同的浏览器内核导致的。
浏览器内核:渲染引擎 Rendering Engine+js引擎+..
注意了：css引擎查找样式表，对每条规则都按从右到左的顺序去匹配。 看如下规则：
#nav li {}
reflow问题是可以优化的，我们可以尽量减少不必要的reflow。比如开头的例子中的<img>图片载入问题，这其实就是一个可以避免的reflow——给图片设置宽度和高度就可以了。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。
1、解析HTML以重建DOM树（Parsing HTML to construct the DOM tree ）：渲染引擎开始解析HTML文档，转换树中的标签到DOM节点，它被称为“内容树”。
2、构建渲染树（Render tree construction）：解析CSS（包括外部CSS文件和样式元素），根据CSS选择器计算出节点的样式，创建另一个树 —- 渲染树。
3、布局渲染树（Layout of the render tree）: 从根节点递归调用，计算每一个元素的大小、位置等，给每个节点所应该出现在屏幕上的精确坐标。
4、绘制渲染树（Painting the render tree） : 遍历渲染树，每个节点将使用UI后端层来绘制。
学院说法：根据html嵌套关系，得到树形的DOM树，根据出现的样式构建Style Object，结合DOM树和Style Object reflow得到Render Tree，然后通过图形API绘制出来。接下去就是loop:dom和style改变触发事件->reflow->repaint
关闭连接整个过程中每个环节的时长（域名解析 -> 建立连接 -> 发起请求 -> 等待响应 -> 接收数据）
其实浏览器加载显示html的顺序是按下面的顺序进行的：
1、IE下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2、在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3、如果遇到语义解释性的标签嵌入文件（JS脚本，CSS 下载过程会启用单独连接进行下载，并且在下载后进行解析，解析过程中，停止页面所有往下元素的下载。
5、样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
6、JS、CSS中如有重定义，后定义函数将覆盖前定义函数
3，减少域名查询
DNS查询和解析域名也是消耗时间的，所以要减少对外部JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好
6，减少inline JavaScript的数量
浏览器parser会假设inline JavaScript会改变页面结构，所以使用inline JavaScript开销较大
不要使用document.write()这种输出内容的方法，使用现代W3C DOM方法来为现代浏览器处理页面内容
8，Chunk your content
不要使用嵌套tables
<table>
<table>
<table>
..
<table>
<table>
<table>
而使用非嵌套tables或者divs
<table>...</table>
<table>...</table>
<table>...</table>
将基于大块嵌套的tables的layout分解成小tables，这样显示时不用加载整个页面(或大table)的内容