Script with Engine

feifeipan

2006

左侧的促销信息滚动一下

右边的广告要飘来飘去 ~

2008

让用户输入城市简拼就能够匹配

能提示用户入住日期输入正确性

2011

输入城市简拼能最快匹配出城市

能让页面第一时间展示给用户，并且最快

加载完毕

角色演变

100ms

美化

功能

性能

DOM Scripting

Ajax

UI Thread

JS Loader

DOM in the Browser World

Javascript

DOM

HTML

XML

JS Engine

Dom API

Document

Bridge (cost)

各浏览器引擎对比

DOM Access and Modification

See a demo

DOM Access and Modification

0

500

1000

1500

2000

2500

3000

3500

4000

4500

createElement innerHTML运

行时间

(ms)

Repaints and Reflow

Reflow • 浏览器使渲染树中受到影响的部分失效• 重新构造渲染树

Repaints• 浏览器重新绘制受影响的部分到屏幕中

Repaints and Reflow

div

document

div

div div div div

div div div div

使元素脱离文档流

对其运用多重改变把元素带回文档中

1

2

3

Repaints and Reflow

•function hideElement(){• var ul = document.getElementById('mylist');• ul.style.display = "none";• ……doSomethingTo_UL();• ul.style.display = "block";•}

隐藏元素{display:no

ne}

•function useFragment(){• var fragment = document.createDocumentFragment();• ……doSomethingTo_fragment ();• document.getElementById('mylist').appendChild(fragment);•}

文档片段{document fragment}

•function useCopy(){• var old = document.getElementById('mylist');• var clone = old.cloneNode(true);• ……doSomethingTo_clone ();• old.parentNode.replaceChild(clone, old);•}

创建备份{element.cloneNode}

Event Delegation

冒泡

到达目标

捕获 ( 非 IE) div

body

html

document

window

1

2

3

4

5

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”);}

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”; } }

DOM Scripting

DOM Scripting

Ajax

UI Thread

JS Loader

Xmlhttprequest

• 只是获取数据的请求• 数据会被缓存起来，提升性能• 只发送一个数据包GET

•URL加上参数的长度接近或超过2048个字符•发送两个数据包（头信息、post正文）POST

Dynamic script tag insertion

跨域请求数据

function sendDynamicJS(){ var scriptElement = document.createElement('script'); scriptElement.src = 'json.js'; document.getElementsByTagName('head')[0].appendChild(scriptElement);}

Ajax

See a demo

将URL和返回的内容存入缓存表

Request URL Response Content

A.php?user=test1 this is test1’s introduction

A.php?user=test2 this is test2’s introduction

Ajax 客户端缓存表 - ajaxCacheHash

在缓存表中检索

如果没有检索到，则发送 Ajax请求(URL : A.php?user=test3)

1

2

3

A.php?user=test3 this is test3’s introduction

Ajax More

数据格式 (JSON/JSON-P/Custom Format)

服务器端缓存机制

……………………

DOM Scripting

Ajax

UI Thread

JS Loader

var button = document.getElementById(“my-button”);button.onclick = function(){

firstMethod(); setTimeout(function(){

document.getElementById(“msg”).style.color=“red”; }, 25);}

Time code

UI ThreadUI Thread

UI Queue

UI UpdateButton

JavaScriptonclick

UI Update - Button

JavaScriptonclick

JavaScript - onclick()

JavascriptTimer code

JavascriptTimer code

0 50 100 350

setTimeout() called

Timer codequeued

Time

Splitting up Tasks

See a demo

Web Workers

javascript

code

UIupdate

Web Workers

>>worker.htmlvar worker = new Worker('my_task.js');worker.onmessage = function(event){

var realJson = event.data;}worker.postMessage(data);

>>my_task.jsself.onmessage = function(event) {

var jsonText = event.data; var jsonData = JSON.parse(jsonText); self.postMessage(jsonData);

};

传递大量数据

1. 处理大量数据2. 返回处理结果

DOM Scripting

Ajax

UI Thread

JS Loader

Script Position

图片资源被阻塞

图片资源并行加载

Script DownloadScript Execution

JS Loader

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

Script Download

var nScript = document.createElement(“script”);nScript.type = “text/javascript”;nScript.src = url;document.getElementsByTagName(“head”)[0].appendChild(nScript);

Script Execution

图片资源被阻塞

并行加载，不会阻塞

JS Loader

DOM Scripting Ajax

UI Thread JS Loader

页面需要精美功能需要完善交互需要体贴

在任何时刻都不要让用户等太久让他们感觉浏览你的网站是行云流水般的享受

feifeipan59@gmail.com

http://ued.ctrip.com/

@最爱牛腩的小牛 -斐斐

附录 1

• 浏览器中的 DOM

Browser Javascript engine DOM

IE Jscript( jscript.dll) Trident(mshtml.dll)

Firefox JagerMonkey Gecko

Chrome V8 WebCore

Safari SquirrelFish WebCore

各浏览器情况