0
feifeipan
2006左侧的促销信息  滚动一下       右边的广告要        飘来飘去~
2008让用户输入城市简拼就能够匹配    能提示用户入住    日期输入正确性
2011输入城市简拼能最快匹配出城市  能让页面第一时间展  示给用户,并且最快     加载完毕
角色演变       性能            100   ms       功能       美化
DOM ScriptingAjaxUI ThreadJS Loader
DOM in the Browser World JS Engine           Dom API   Document         Bridge (cost)                                HTMLJ...
DOM Access and Modification
DOM Access and Modification           4500           4000           3500           3000运行时间(ms)           2500            ...
Repaints and Reflow       Reflow       • 浏览器使渲染树中受到影响的部分失效       • 重新构造渲染树      Repaints      • 浏览器重新绘制受影响的部分到屏幕中
Repaints and Reflow
Repaints and Reflow           document                          1                              使元素脱离文档流        div        ...
• function hideElement(){     隐藏元素                      var ul = document.getElementById(mylist);                         ...
Event Delegation          window      5  冒泡                   document    4                              html    3到达目标    ...
DOM Scriptingfunction domAM(){  var newD = document.createElement(“div”);    var newDChildren = newD.childNodes;    var ne...
DOM Scriptingfunction domAM(){  var divs = document. getElementsByTagName(“div”);  for(var i = 0; i < divs.length; i++){  ...
DOM ScriptingAjaxUI ThreadJS Loader
Xmlhttprequest            • 只是获取数据的请求   GET      • 数据会被缓存起来,提升性能            • 只发送一个数据包            • URL加上参数的长度接近或超过2048个字符...
Dynamic script tag insertion跨域请求数据function sendDynamicJS(){    var scriptElement = document.createElement(script);    scri...
Ajax
2                        如果没有检索到,则发送Ajax请求                          (URL : A.php?user=test3)      1          在缓存表中检索      ...
Ajax More数据格式(JSON/JSON-P/Custom Format)服务器端缓存机制……………………
DOM ScriptingAjaxUI ThreadJS Loader
var button = document.getElementById(“my-button”);button.onclick = function(){   firstMethod();                        Tim...
UI ThreadUI Thread                                                                                                Javascri...
Splitting up Tasks
Web Workers             Web Workers    javascript               UI      code                 update
>>worker.htmlvar worker = new Worker(my_task.js);worker.onmessage = function(event){    var realJson = event.data;        ...
DOM ScriptingAjaxUI ThreadJS Loader
Script Position                             图片资源被阻塞                  图片资源并行加载
JS Loader      Script    Download     Script               Execution
Script Downloadif(isIEorOpera()){   preObject = new Image();}else{   preObject = document.createElement(“object”);}
Script Executionvar nScript = document.createElement(“script”);nScript.type = “text/javascript”;nScript.src = url;document...
JS Loader             图片资源被阻塞            并行加载,不会阻塞
DOM Scripting     Ajax UI Thread      JS Loader
页面需要精美功能需要完善交互需要体贴在任何时刻都不要让用户等太久让他们感觉浏览你的网站是行云流水般的享受
feifeipan59@gmail.com    @最爱牛腩的小牛-斐斐        http://ued.ctrip.com/
附录1• 浏览器中的DOM     各浏览器情况Browser       Javascript engine       DOMIE            Jscript( jscript.dll)   Trident(mshtml.dll)...
Script with engine
Upcoming SlideShare
Loading in...5
×

Script with engine

1,849

Published on

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

No Downloads
Views
Total Views
1,849
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
39
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Script with engine"

  1. 1. feifeipan
  2. 2. 2006左侧的促销信息 滚动一下 右边的广告要 飘来飘去~
  3. 3. 2008让用户输入城市简拼就能够匹配 能提示用户入住 日期输入正确性
  4. 4. 2011输入城市简拼能最快匹配出城市 能让页面第一时间展 示给用户,并且最快 加载完毕
  5. 5. 角色演变 性能 100 ms 功能 美化
  6. 6. DOM ScriptingAjaxUI ThreadJS Loader
  7. 7. DOM in the Browser World JS Engine Dom API Document Bridge (cost) HTMLJavascript DOM XML 各浏览器引擎对比
  8. 8. DOM Access and Modification
  9. 9. DOM Access and Modification 4500 4000 3500 3000运行时间(ms) 2500 createElement 2000 innerHTML 1500 1000 500 0
  10. 10. Repaints and Reflow Reflow • 浏览器使渲染树中受到影响的部分失效 • 重新构造渲染树 Repaints • 浏览器重新绘制受影响的部分到屏幕中
  11. 11. Repaints and Reflow
  12. 12. Repaints and Reflow document 1 使元素脱离文档流 div div div div div div 2 3 对其运用多重改变 把元素带回文档中 div div div div
  13. 13. • function hideElement(){ 隐藏元素 var ul = document.getElementById(mylist); ul.style.display = "none"; ……doSomethingTo_UL(); {display:none} ul.style.display = "block"; } • function useFragment(){ 文档片段 var fragment = document.createDocumentFragment(); ……doSomethingTo_fragment ();{document fragment} } document.getElementById(mylist).appendChild(fragment); • function useCopy(){ var old = document.getElementById(mylist); 创建备份 var clone = old.cloneNode(true);{element.cloneNode} ……doSomethingTo_clone (); old.parentNode.replaceChild(clone, old); }
  14. 14. Event Delegation window 5 冒泡 document 4 html 3到达目标 body 2捕获(非IE) div 1
  15. 15. DOM Scriptingfunction domAM(){ var newD = document.createElement(“div”); var newDChildren = newD.childNodes; var newDSomeChildren = newD.getElementById(“menu”).getElementsByTagName(“a”);}function domAM_new(){ var newD = existD.cloneNode(true); var newDChild = newD.children; var newDSomChildren = newD.querySelectorAll(“#menu a”);}
  16. 16. DOM Scriptingfunction domAM(){ var divs = document. getElementsByTagName(“div”); for(var i = 0; i < divs.length; i++){ document.body.appendChild(document.createElement(‘div’)); document.getElementsByTagName(“div”)*i+.style.backgroundColor = “#fff”; document.getElementsByTagName(“div”)*i+…. document.getElementsByTagName(“div”)*i+.style.border = “1px solid #e00”; }}function domAM_new(){ var divs = document. getElementsByTagName(“div”); for(var i = 0, l = divs.length; i < l; i++){ document.body.appendChild(document.createElement(‘div’)); var d = divs[i]; d.style.backgroundColor = “#fff”; d…. d.style.border = “1px solid #e00”; } }
  17. 17. DOM ScriptingAjaxUI ThreadJS Loader
  18. 18. Xmlhttprequest • 只是获取数据的请求 GET • 数据会被缓存起来,提升性能 • 只发送一个数据包 • URL加上参数的长度接近或超过2048个字符 POST • 发送两个数据包(头信息、post正文)
  19. 19. Dynamic script tag insertion跨域请求数据function sendDynamicJS(){ var scriptElement = document.createElement(script); scriptElement.src = json.js; document.getElementsByTagName(head)[0].appendChild(scriptElement);}
  20. 20. Ajax
  21. 21. 2 如果没有检索到,则发送Ajax请求 (URL : A.php?user=test3) 1 在缓存表中检索 3 将URL和返回的内容存入缓存表Ajax客户端缓存表 - ajaxCacheHash Request URL Response Content A.php?user=test1 this is test1’s introduction A.php?user=test2 this is test2’s introduction A.php?user=test3 this is test3’s introduction
  22. 22. Ajax More数据格式(JSON/JSON-P/Custom Format)服务器端缓存机制……………………
  23. 23. DOM ScriptingAjaxUI ThreadJS Loader
  24. 24. var button = document.getElementById(“my-button”);button.onclick = function(){ firstMethod(); Time code setTimeout(function(){ document.getElementById(“msg”).style.color=“red”; }, 25);}
  25. 25. UI ThreadUI Thread Javascript UI Update - Button JavaScript - onclick() Timer codeUI Queue UI Update JavaScript Javascript Button onclick Timer code JavaScript onclick 0 50 100 350 setTimeout() Timer code called queuedTime
  26. 26. Splitting up Tasks
  27. 27. Web Workers Web Workers javascript UI code update
  28. 28. >>worker.htmlvar worker = new Worker(my_task.js);worker.onmessage = function(event){ var realJson = event.data; 传递大量数据}worker.postMessage(data);>>my_task.js 1. 处理大量数据self.onmessage = function(event) { 2. 返回处理结果 var jsonText = event.data; var jsonData = JSON.parse(jsonText); self.postMessage(jsonData);};
  29. 29. DOM ScriptingAjaxUI ThreadJS Loader
  30. 30. Script Position 图片资源被阻塞 图片资源并行加载
  31. 31. JS Loader Script Download Script Execution
  32. 32. Script Downloadif(isIEorOpera()){ preObject = new Image();}else{ preObject = document.createElement(“object”);}
  33. 33. Script Executionvar nScript = document.createElement(“script”);nScript.type = “text/javascript”;nScript.src = url;document.getElementsByTagName(“head”)*0+.appendChild(nScript);
  34. 34. JS Loader 图片资源被阻塞 并行加载,不会阻塞
  35. 35. DOM Scripting Ajax UI Thread JS Loader
  36. 36. 页面需要精美功能需要完善交互需要体贴在任何时刻都不要让用户等太久让他们感觉浏览你的网站是行云流水般的享受
  37. 37. feifeipan59@gmail.com @最爱牛腩的小牛-斐斐 http://ued.ctrip.com/
  38. 38. 附录1• 浏览器中的DOM 各浏览器情况Browser Javascript engine DOMIE Jscript( jscript.dll) Trident(mshtml.dll)Firefox JagerMonkey GeckoChrome V8 WebCoreSafari SquirrelFish WebCore
  1. A particular slide catching your eye?

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

×