script with engine
DESCRIPTION
TRANSCRIPT
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);}
将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
页面需要精美功能需要完善交互需要体贴
在任何时刻都不要让用户等太久让他们感觉浏览你的网站是行云流水般的享受
附录 1
• 浏览器中的 DOM
Browser Javascript engine DOM
IE Jscript( jscript.dll) Trident(mshtml.dll)
Firefox JagerMonkey Gecko
Chrome V8 WebCore
Safari SquirrelFish WebCore
各浏览器情况