1. feifeipan

2. 2006
左侧的促销信息
滚动一下
右边的广告要
飘来飘去~

3. 2008
让用户输入城市
简拼就能够匹配
能提示用户入住
日期输入正确性

4. 2011
输入城市简拼能
最快匹配出城市
能让页面第一时间展
示给用户，并且最快
加载完毕

5. 角色演变
性能
100 ms
功能
美化

6. DOM Scripting
Ajax
UI Thread
JS Loader

7. DOM in the Browser World
JS Engine Dom API Document
Bridge (cost)
HTML
Javascript DOM
XML
各浏览器引擎对比

8. DOM Access and Modification

9. DOM Access and Modification
4500
4000
3500
3000
运行时间(ms)
2500
createElement
2000
innerHTML
1500
1000
500
0

10. Repaints and Reflow
Reflow
• 浏览器使渲染树中受到影响的部分失效
• 重新构造渲染树
Repaints
• 浏览器重新绘制受影响的部分到屏幕中

11. Repaints and Reflow

12. Repaints and Reflow
document
1
使元素脱离文档流
div div
div div div div
2
3 对其运用多重改变
把元素带回文档中
div div div div

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. Event Delegation
window 5
冒泡
document 4
html 3
到达目标
body 2
捕获(非IE) div 1

15. DOM Scripting
function 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. DOM Scripting
function 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. DOM Scripting
Ajax
UI Thread
JS Loader

18. Xmlhttprequest
• 只是获取数据的请求
GET • 数据会被缓存起来，提升性能
• 只发送一个数据包
• URL加上参数的长度接近或超过2048个字符
POST • 发送两个数据包（头信息、post正文）

19. Dynamic script tag insertion
跨域请求数据
function sendDynamicJS(){
var scriptElement = document.createElement('script');
scriptElement.src = 'json.js';
document.getElementsByTagName('head')[0].appendChild(scriptElement);
}

20. Ajax

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. Ajax More
数据格式(JSON/JSON-P/Custom Format)
服务器端缓存机制
……………………

23. DOM Scripting
Ajax
UI Thread
JS Loader

24. var button = document.getElementById(“my-button”);
button.onclick = function(){
firstMethod(); Time code
setTimeout(function(){
document.getElementById(“msg”).style.color=“red”;
}, 25);
}

25. UI Thread
UI Thread
Javascript
UI Update - Button JavaScript - onclick()
Timer code
UI Queue
UI Update JavaScript Javascript
Button onclick Timer code
JavaScript
onclick
0 50 100 350
setTimeout() Timer code
called queued
Time

26. Splitting up Tasks

27. Web Workers
Web Workers
javascript UI
code update

28. >>worker.html
var 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. DOM Scripting
Ajax
UI Thread
JS Loader

31. Script Position
图片资源被阻塞
图片资源并行加载

32. JS Loader
Script
Download Script
Execution

33. Script Download
if(isIEorOpera()){
preObject = new Image();
}else{
preObject = document.createElement(“object”);
}

34. Script Execution
var nScript = document.createElement(“script”);
nScript.type = “text/javascript”;
nScript.src = url;
document.getElementsByTagName(“head”)*0+.appendChild(nScript);

35. JS Loader
图片资源被阻塞
并行加载，不会阻塞

36. DOM Scripting Ajax
UI Thread JS Loader

37. 页面需要精美
功能需要完善
交互需要体贴
在任何时刻都不要让用户等太久
让他们感觉浏览你的网站是行云流水般的享受

38. feifeipan59@gmail.com
@最爱牛腩的小牛-斐斐
http://ued.ctrip.com/

39. 附录1
• 浏览器中的DOM
各浏览器情况
Browser Javascript engine DOM
IE Jscript( jscript.dll) Trident(mshtml.dll)
Firefox JagerMonkey Gecko
Chrome V8 WebCore
Safari SquirrelFish WebCore