Script with engine

2006
左侧的促销信息
滚动一下

右边的广告要
飘来飘去~

2008

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

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

2011

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

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

角色演变

性能
100 ms

功能

美化

DOM Scripting

Ajax

UI Thread

JS Loader

DOM in the Browser World

JS Engine Dom API Document

Bridge (cost)

HTML
Javascript DOM
XML

各浏览器引擎对比

DOM Access and Modification
4500

4000

3500

3000
运行时间(ms)

2500
createElement
2000
innerHTML
1500

1000

500

0

Repaints and Reflow

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

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

Repaints and Reflow

document
1
使元素脱离文档流
div div
div div div div

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

div div div div

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

Event Delegation
window 5
冒泡
document 4

html 3
到达目标

body 2

捕获(非IE) div 1

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

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

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

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

Ajax More

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

服务器端缓存机制

……………………

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

setTimeout(function(){
document.getElementById(“msg”).style.color=“red”;
}, 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

Web Workers

Web Workers

javascript UI
code update

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

Script Position

图片资源被阻塞

图片资源并行加载

JS Loader

Script
Download Script
Execution

Script Download

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

Script Execution

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

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

Script with engine

More Related Content

What's hot (18)

Similar to Script with engine (20)

More from Webrebuild (20)

Recently uploaded (20)

Script with engine