new Timer                               etaivar aTimer = Ju.app.timer.create(    {        timeEnd: timeEnd,        timeCur...
‣‣‣‣‣‣
WTF?   ....
1.     •   ;     •
setInterval : 5mins / hoursetTimeout : 10min / hour                    10+ / day
2.     •
3.     •     •
3.     •     •
-a.b.
-a.b.
-b.
-before:
-a.       innerHTML
-b. replaceHTML                     When innerHTML isn’t Fast Enough
-before       innerHTML   replaceHTMLff3.6 2600   ff3.6 600   ff3.6 3000ie8 6100     ie8 900     ie8   4200ie6 6300     ie...
-<p class="dsec">.6</p>
-dsec.gif
-html
-    “     ”var aTimer = Ju.app.timer.create(    {        timeEnd: timeEnd,        timeCurrent: timeCurrent,        timeLe...
-   “   ”
-   “   ”
-   “   ”
/ Tips
/ Tips - 1.             vs timer•                   timer••                 setInterval?
/ Tips - 1.       vs timer“           ”                  “    ”
/ Tips - 1.   vs timer
/ Tips - 1.   vs timer
/ Tips - 1.        vs timer              =>+
/ Tips- 2. setTimeout vs setInterval         “   bug”
/ Tips- 2. setTimeout vs setInterval    setTimeout    or    setInterval?
/ Tips 2. setTimeout vs setInterval                  How JavaScript Timers Work
/ Tips     - 2. setTimeout vs setIntervalSetTimeout
Google I/O Conference: HTML5 Countdown Finale
Google I/O Conference: HTML5 Countdown Finale
checker          “   ”
Q /A
倒计时优化点滴
倒计时优化点滴
倒计时优化点滴
倒计时优化点滴
倒计时优化点滴
Upcoming SlideShare
Loading in...5
×

倒计时优化点滴

1,653

Published on

懒懒keynote, http://www.oncoding.cn/2011/javascript-flyweight/

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,653
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
14
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

倒计时优化点滴

  1. 1. new Timer etaivar aTimer = Ju.app.timer.create( { timeEnd: timeEnd, timeCurrent: timeCurrent, container: theTimer, style: simple, callback: function(handler){ console.log(handler); } });
  2. 2. ‣‣‣‣‣‣
  3. 3. WTF? ....
  4. 4. 1. • ; •
  5. 5. setInterval : 5mins / hoursetTimeout : 10min / hour 10+ / day
  6. 6. 2. •
  7. 7. 3. • •
  8. 8. 3. • •
  9. 9. -a.b.
  10. 10. -a.b.
  11. 11. -b.
  12. 12. -before:
  13. 13. -a. innerHTML
  14. 14. -b. replaceHTML When innerHTML isn’t Fast Enough
  15. 15. -before innerHTML replaceHTMLff3.6 2600 ff3.6 600 ff3.6 3000ie8 6100 ie8 900 ie8 4200ie6 6300 ie6 1200 ie6 5500
  16. 16. -<p class="dsec">.6</p>
  17. 17. -dsec.gif
  18. 18. -html
  19. 19. - “ ”var aTimer = Ju.app.timer.create( { timeEnd: timeEnd, timeCurrent: timeCurrent, timeLeft: 0, container: theTimer, callback: function(handler){ alert(‘time’s up!’); } });Ju.app.timer.remove(aTimer);
  20. 20. - “ ”
  21. 21. - “ ”
  22. 22. - “ ”
  23. 23. / Tips
  24. 24. / Tips - 1. vs timer• timer•• setInterval?
  25. 25. / Tips - 1. vs timer“ ” “ ”
  26. 26. / Tips - 1. vs timer
  27. 27. / Tips - 1. vs timer
  28. 28. / Tips - 1. vs timer =>+
  29. 29. / Tips- 2. setTimeout vs setInterval “ bug”
  30. 30. / Tips- 2. setTimeout vs setInterval setTimeout or setInterval?
  31. 31. / Tips 2. setTimeout vs setInterval How JavaScript Timers Work
  32. 32. / Tips - 2. setTimeout vs setIntervalSetTimeout
  33. 33. Google I/O Conference: HTML5 Countdown Finale
  34. 34. Google I/O Conference: HTML5 Countdown Finale
  35. 35. checker “ ”
  36. 36. Q /A
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×