Timers in Browser

705
-1

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
705
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Timers in Browser

  1. 1. Timers in Browser Etai
  2. 2. Content • 定时器/误差 • 优化 • 几个Bug
  3. 3. Content• 定时器/误差 • JS运行机制 • 时钟精度• 优化• 几个Bug
  4. 4. 定时器 setTimeout  返回值: (number) ID  clearTimeout(ID) setInterval  返回值: (number) ID  clearInterval(ID)
  5. 5. 浏览器“线程” 浏览器工作进程: 界面渲染 JS脚本执行 HTTP连接 JS引擎:单线程执行
  6. 6. 异步事件 鼠标、键盘等事件响应 Ajax回调 延时/定时(setTimeout/setInterval)
  7. 7. How JavaScript Timers Work / zh
  8. 8. setTimeout vs setInterval 异步回调函数被加入队列等待执行 若回调不能立即执行,将被推迟到下次机会 如果执行延迟过长,setInterval回调会堆积从 而无间隔执行
  9. 9. 时钟 硬件时钟:CPU运行频率 系统时钟:OS为软件运行提供的时钟API
  10. 10. 时钟精度 系统时钟的最小时间间隔 Windows  默认时钟精度:15.6ms  multimedia API:1ms Mac  默认系统时钟:动态,最小约4ms  利用gettimeofday:1ms
  11. 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. 12. 影响 setTimeout(fn, 0); setInterval(fn, 0);
  13. 13. Content• 误差从哪里来• 优化 • 实现方式优化 • 误差校正• 几个Bug
  14. 14. setTimeout or setInterval ? 容易引起堆积的,用setTimeout模拟  密集操作(动画等)  高能耗运算  交互复杂的页面(外部影响)  BOM操作
  15. 15. setTimeout(function(){ /* do sth.. */ setTimeout(arguments.callee, 10); }, 10);
  16. 16. requestAnimationFrame Mozilla、Google发起 专为网页动画设置 实现有差异,未标准化
  17. 17. 时间校正 客户端时间 服务端时间
  18. 18. 取客户端时间校正 var timeLeft = 123456ms, timeStart = new Date().getTime(); // after some time … var timeNow = new Date().getTime(); timeLeft = timeLeft – (timeNow – timeStart) ;
  19. 19. 取客户端时间校正 优点: 简单、高效 缺点: 用户可以修改本地时间造成干扰
  20. 20. 取服务器时间校正 发送Ajax空响应轮询,取得响应头时间 或搭车其他Ajax轮询
  21. 21. 空响应/取响应头xhr.onreadystatechange = function(){ if (xhr.readyState == 4) { serverDate = new Date(xhr.getResponseHeader(„date‟)); //校正}};xhr.open(HEAD, /?+Math.random());xhr.send(null);
  22. 22. 服务端校准 优点:  准确 缺点  资源消耗  需要考虑网络延迟
  23. 23. Content• 误差从哪里来• 优化• 几个Bug
  24. 24. 当setInterval 遇到 页面跳转
  25. 25. 故障后果 每到10:00,服务器就开始宕机 影响淘江湖几十台服务器 5天后才找到原因 P1
  26. 26. 代码setInterval(function(){ //… if(condition){ location.href = „xxx‟; }}, 100)
  27. 27. 成因 IE: 页面unload之前,interval持续运行 location.href 本页跳转,接收到新页面内容 后,旧页面才unload 大量用户的页面加载时间大于100ms 持续发起新的页面跳转,服务器请求拥塞
  28. 28. 优化方案 严谨的条件判断 使用setTimeout替代
  29. 29. 变量覆盖
  30. 30. 代码var a = setTimeout(fn0, 1000);//…a = setTimeout(fn1, 3000);
  31. 31. 代码var a = setTimeout(fn0, 1000);//…a = setTimeout(fn1, 3000);//clearTimeout(a);
  32. 32. 成因 setTimeout/setInterval 返回值: (number) ID 覆盖的是ID,不是计时器 clearTimeout/clearInterval 参数: (number) ID 只能清除最后设置的ID
  33. 33. setTimeout(fn, 0)
  34. 34. 作用 将操作脱离队列 等待(文档内容)稳定后执行 alert(1); setTimeout("alert(2)", 0); alert(3);
  35. 35. 场景 操作DOM,等待UI稳定后继续操作 解决IE6 DOM更新常不同步问题 低优先级操作
  36. 36. 替代方案 setImmediate  作用:线程空闲时执行操作  微软提出,尚未纳入标准  var id = setImmediate(function(){ //do sth });
  37. 37. 替代方案 web workers:HTML5 多线程方案 主线程:  var worker = new Worker( url )  worker.postMessage( data )  worker.onmessage  worker.terminate() 新线程  postMessage( data )  onmessage
  38. 38. web workers的局限 不能跨域加载JS文件 worker代码不能直接访问DOM 浏览器实现不一致
  39. 39. Thanks~

×