Suche senden
Hochladen
Timers in Browser
•
Als PPTX, PDF herunterladen
•
0 gefällt mir
•
837 views
J
j5726
Folgen
几个月前做的分享,关于浏览器计时器原理
Weniger lesen
Mehr lesen
Technologie
Melden
Teilen
Melden
Teilen
1 von 39
Jetzt herunterladen
Empfohlen
浮云脱水小说站的搭建
浮云脱水小说站的搭建
jondynet
Ian .net async programming
Ian .net async programming
LearningTech
JCConf2015: groovy to gradle
JCConf2015: groovy to gradle
Ching Yi Chan
Nationalites vargas guash
Nationalites vargas guash
ineserra
Wipo smes del_08_www_116734
Wipo smes del_08_www_116734
yogesh_rml
Mosaicos
Mosaicos
Gregory Chacon
Lista Productos Botello..
Lista Productos Botello..
icond03
An experiment in hypnosis from gold maximizer exam proficiency page 74
An experiment in hypnosis from gold maximizer exam proficiency page 74
villacadima1916
Empfohlen
浮云脱水小说站的搭建
浮云脱水小说站的搭建
jondynet
Ian .net async programming
Ian .net async programming
LearningTech
JCConf2015: groovy to gradle
JCConf2015: groovy to gradle
Ching Yi Chan
Nationalites vargas guash
Nationalites vargas guash
ineserra
Wipo smes del_08_www_116734
Wipo smes del_08_www_116734
yogesh_rml
Mosaicos
Mosaicos
Gregory Chacon
Lista Productos Botello..
Lista Productos Botello..
icond03
An experiment in hypnosis from gold maximizer exam proficiency page 74
An experiment in hypnosis from gold maximizer exam proficiency page 74
villacadima1916
2014/02: 嵌入式測試驅動開發
2014/02: 嵌入式測試驅動開發
AgileCommunity
Glider
Glider
windyrobin
异步编程与浏览器执行模型
异步编程与浏览器执行模型
keelii
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Johnson Gau
JavaScript 80+ Programming and Optimization Skills
JavaScript 80+ Programming and Optimization Skills
Ho Kim
构建ActionScript游戏服务器,支持超过15000并发连接
构建ActionScript游戏服务器,支持超过15000并发连接
Renaun Erickson
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会
Zhi Zhong
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013
Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013
Hazem Saleh
Berserk js
Berserk js
taobao.com
網站設計100步
網站設計100步
evercislide
香港六合彩
香港六合彩
香港六合彩 香港六合彩
ev2oik
ev2oik
香港六合彩 香港六合彩
香港六合彩
香港六合彩
aaveow
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
Li JianYe
NodeJS快速服务端开发 朝沐金风 Shanghai
NodeJS快速服务端开发 朝沐金风 Shanghai
Jackson Tian
Real time web实时信息流推送
Real time web实时信息流推送
yongboy
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
yongboy
Using armeria to write your RPC
Using armeria to write your RPC
koji lin
服务器端性能优化 提升Qps、rt
服务器端性能优化 提升Qps、rt
锐 张
Weitere ähnliche Inhalte
Ähnlich wie Timers in Browser
2014/02: 嵌入式測試驅動開發
2014/02: 嵌入式測試驅動開發
AgileCommunity
Glider
Glider
windyrobin
异步编程与浏览器执行模型
异步编程与浏览器执行模型
keelii
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
Johnson Gau
JavaScript 80+ Programming and Optimization Skills
JavaScript 80+ Programming and Optimization Skills
Ho Kim
构建ActionScript游戏服务器,支持超过15000并发连接
构建ActionScript游戏服务器,支持超过15000并发连接
Renaun Erickson
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会
Zhi Zhong
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
taobao.com
Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013
Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013
Hazem Saleh
Berserk js
Berserk js
taobao.com
網站設計100步
網站設計100步
evercislide
香港六合彩
香港六合彩
香港六合彩 香港六合彩
ev2oik
ev2oik
香港六合彩 香港六合彩
香港六合彩
香港六合彩
aaveow
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
Li JianYe
NodeJS快速服务端开发 朝沐金风 Shanghai
NodeJS快速服务端开发 朝沐金风 Shanghai
Jackson Tian
Real time web实时信息流推送
Real time web实时信息流推送
yongboy
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
yongboy
Using armeria to write your RPC
Using armeria to write your RPC
koji lin
服务器端性能优化 提升Qps、rt
服务器端性能优化 提升Qps、rt
锐 张
Ähnlich wie Timers in Browser
(20)
2014/02: 嵌入式測試驅動開發
2014/02: 嵌入式測試驅動開發
Glider
Glider
异步编程与浏览器执行模型
异步编程与浏览器执行模型
利用Signalr打造即時通訊@Tech day geek
利用Signalr打造即時通訊@Tech day geek
JavaScript 80+ Programming and Optimization Skills
JavaScript 80+ Programming and Optimization Skills
构建ActionScript游戏服务器,支持超过15000并发连接
构建ActionScript游戏服务器,支持超过15000并发连接
钟志 第八期Web标准化交流会
钟志 第八期Web标准化交流会
Node.js在淘宝的应用实践
Node.js在淘宝的应用实践
Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013
Efficient JavaScript Unit Testing (Chinese Version), JavaOne China 2013
Berserk js
Berserk js
網站設計100步
網站設計100步
香港六合彩
香港六合彩
ev2oik
ev2oik
香港六合彩
香港六合彩
运维系统开发与Rails 3页面开发实践
运维系统开发与Rails 3页面开发实践
NodeJS快速服务端开发 朝沐金风 Shanghai
NodeJS快速服务端开发 朝沐金风 Shanghai
Real time web实时信息流推送
Real time web实时信息流推送
Real-Time Web实时信息流推送
Real-Time Web实时信息流推送
Using armeria to write your RPC
Using armeria to write your RPC
服务器端性能优化 提升Qps、rt
服务器端性能优化 提升Qps、rt
Timers in Browser
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~
Jetzt herunterladen