Using the Console[译]
由于最近的项目需要大量用到浏览器端的js编码和调试，所以仔细阅读了一下Chrome对于开发者工具中js部分的说明。虽然原来也用这个工具，但读后仍然觉得受益匪浅。于是抽空翻译一下，与大家分享。
本人英文水平较渣，如有不妥之处，还请不吝赐教。
JavaScript Console为开发人员测试网页和应用提供了两种主要的功能：
提供了一个通过Console API，比如console.log()和console.profile()，来显示诊断信息的地方。
提供了一个让你能够通过输入命令与html文档和Chrome开发者工具交互的shell。你能在Console中直接对表达式求值，还能使用Command Line API提供的各种方法，比如用$()命令选择元素,或者用profile()命令开始对CPU资源进行监控分析。
这篇文章将向您展示这两类API的概况和一些基本用法.您也可以浏览Console API和Command Line API的使用手册。
Basic operation
Opening the Console
Clearing the console history
Conso ...
requestAnimationFrame优势何在
大概半年前，无意中在网上看到一个新的js函数requestAnimationFrame，据说，此函数可以优化传统的js动画效果，似乎是未来js动画的新方向。
当时我所在的项目正好用到了和js动画有关的技术，于是在网上查阅了一些相关资料。虽然国内外都有人写过一些关于这个js函数的文章，但大多都只是简要说明工作原理，使用方式等等，一直都没有找到验证其优势所在的示例。
今天我就自己写两个testcase验证requestAnimationFrame的优势所在。
关于requestAnimationFrame这个函数在MDN上的说明是“告诉浏览器,你想要执行一个动画,该请求要求浏览器提前安排一下下一帧动画显示时需要进行的浏览器窗口的重绘”。也就是说，调用这个api就表示告诉浏览器，下次重绘页面时，记得执行我刚刚传给你的那个逻辑。
这样做一个最大的好处就是可以避免不必要的过度重绘，关于过度重绘的产生原因MSDN上已经说得很清楚了。
于是，我的测试思路是，用js构造若干个独立的动画，每个动画都有一个定时器去控制动画的执行，动画的效果就是通过修改一个div的位置坐标，使该div围绕一点做圆周运动。
...
使用统一帧管理优化前端性能
随着网络的普及和浏览器技术的日益进步，Web页面的呈现样式变得越来越丰富多彩，带着各种酷炫效果和富交互的网站层出不穷，Web页面再也不是一个简单信息罗列的文档了。
可是，随着web页面内容的逐渐丰富，浏览器渲染页面的性能瓶颈逐渐显现。所以，当web页面的动画效果从最开始的个别按钮和图标的交互动画逐渐演变为配合Ajax技术实现页面主体内容改变的过场动画，甚至到由复杂JavaScript实现的web在线游戏。做前端开发时对性能的优化和调校也变得越来越重要。
好吧，前面废话了一堆，现在进入正题。
考虑下图所示的一个场景：
页面分为6个部分，除最上方的Banner区域外，其他区域均会显示各种不同类型的动画效果（注：这里的“动画”指广义的动画，即只要呈现内容随时间发生变化就算是“动画”，如，一段文字从左向右缓慢移动算“动画”，一段文字内容由“AAA”变为“BBB”也算“动画”）。
如果这4个动画区域的动画的频度相对较小，也许不会有什么问题，但，如果动画内容频度非常高，就很有可能会引起严重的性能问题。
我们用如下所示的页面来模拟这种情况：
点击start按钮后，这个页面会在2~3秒时间内每一毫 ...
