几个月前做的分享，关于浏览器计时器原理

1. Timers in Browser
Etai

2. Content
• 定时器/误差
• 优化
• 几个Bug

3. Content
• 定时器/误差
• JS运行机制
• 时钟精度
• 优化
• 几个Bug

4. 定时器
 setTimeout
 返回值: (number) ID
 clearTimeout(ID)
 setInterval
 返回值: (number) ID
 clearInterval(ID)

5. 浏览器“线程”
 浏览器工作进程：
 界面渲染
 JS脚本执行
 HTTP连接
 JS引擎：单线程执行

6. 异步事件
 鼠标、键盘等事件响应
 Ajax回调
 延时/定时(setTimeout/setInterval)

7. How JavaScript Timers Work / zh

8. setTimeout vs setInterval
 异步回调函数被加入队列等待执行
 若回调不能立即执行，将被推迟到下次机会
 如果执行延迟过长，setInterval回调会堆积从
而无间隔执行

9. 时钟
 硬件时钟：CPU运行频率
 系统时钟：OS为软件运行提供的时钟API

10. 时钟精度
 系统时钟的最小时间间隔
 Windows
 默认时钟精度：15.6ms
 multimedia API：1ms
 Mac
 默认系统时钟：动态，最小约4ms
 利用gettimeofday：1ms

11. 浏览器处理
 旧版本：依赖系统时钟
 HTML5：4ms
 IE9/Chrome/FF5/safari5.1/Opera11已实现
 电池供电时，Chrome/IE9+切换到系统时钟
 FF5+/Chrome 11+/IE10+空闲标签变为1000ms
 Safari on iOS 5 / Silk on Kindle Fire:切出应用时冻结
 Timer resolution in browsers

12. 影响
 setTimeout(fn, 0);
 setInterval(fn, 0);

13. Content
• 误差从哪里来
• 优化
• 实现方式优化
• 误差校正
• 几个Bug

14. setTimeout or setInterval ?
 容易引起堆积的，用setTimeout模拟
 密集操作(动画等)
 高能耗运算
 交互复杂的页面(外部影响)
 BOM操作

15. setTimeout(function(){
/* do sth.. */
setTimeout(arguments.callee, 10);
}, 10);

16. requestAnimationFrame
 Mozilla、Google发起
 专为网页动画设置
 实现有差异，未标准化

17. 时间校正
 客户端时间
 服务端时间

18. 取客户端时间校正
 var timeLeft = 123456ms,
timeStart = new Date().getTime();
// after some time …
var timeNow = new Date().getTime();
timeLeft = timeLeft – (timeNow – timeStart) ;

19. 取客户端时间校正
 优点：
 简单、高效
 缺点：
 用户可以修改本地时间造成干扰

20. 取服务器时间校正
 发送Ajax空响应轮询，取得响应头时间
 或搭车其他Ajax轮询

21. 空响应/取响应头
xhr.onreadystatechange = function(){
if (xhr.readyState == 4) {
serverDate = new Date(xhr.getResponseHeader(„date‟));
//校正
}
};
xhr.open('HEAD', '/?'+Math.random());
xhr.send(null);

22. 服务端校准
 优点：
 准确
 缺点
 资源消耗
 需要考虑网络延迟

23. Content
• 误差从哪里来
• 优化
• 几个Bug

24. 当setInterval 遇到 页面跳转

25. 故障后果
 每到10:00，服务器就开始宕机
 影响淘江湖几十台服务器
 5天后才找到原因
 P1

26. 代码
setInterval(function(){
//…
if(condition){
location.href = „xxx‟;
}
}, 100)

27. 成因
 IE: 页面unload之前，interval持续运行
 location.href 本页跳转，接收到新页面内容
后，旧页面才unload
 大量用户的页面加载时间大于100ms
 持续发起新的页面跳转，服务器请求拥塞

28. 优化方案
 严谨的条件判断
 使用setTimeout替代

29. 变量覆盖

30. 代码
var a = setTimeout(fn0, 1000);
//…
a = setTimeout(fn1, 3000);

31. 代码
var a = setTimeout(fn0, 1000);
//…
a = setTimeout(fn1, 3000);
//
clearTimeout(a);

32. 成因
 setTimeout/setInterval 返回值： (number) ID
 覆盖的是ID，不是计时器
 clearTimeout/clearInterval 参数： (number) ID
 只能清除最后设置的ID

33. setTimeout(fn, 0)

34. 作用
 将操作脱离队列
 等待(文档内容)稳定后执行
alert(1);
setTimeout("alert(2)", 0);
alert(3);

35. 场景
 操作DOM，等待UI稳定后继续操作
 解决IE6 DOM更新常不同步问题
 低优先级操作

36. 替代方案
 setImmediate
 作用：线程空闲时执行操作
 微软提出，尚未纳入标准
 var id = setImmediate(function(){
//do sth
});

37. 替代方案
 web workers：HTML5 多线程方案
 主线程:
 var worker = new Worker( url )
 worker.postMessage( data )
 worker.onmessage
 worker.terminate()
 新线程
 postMessage( data )
 onmessage

38. web workers的局限
 不能跨域加载JS文件
 worker代码不能直接访问DOM
 浏览器实现不一致

39. Thanks~