script with engine
DESCRIPTION
TRANSCRIPT
![Page 1: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/1.jpg)
Script with Engine
feifeipan
![Page 2: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/2.jpg)
2006
左侧的促销信息滚动一下
右边的广告要飘来飘去 ~
![Page 3: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/3.jpg)
2008
让用户输入城市简拼就能够匹配
能提示用户入住日期输入正确性
![Page 4: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/4.jpg)
2011
输入城市简拼能最快匹配出城市
能让页面第一时间展示给用户,并且最快
加载完毕
![Page 5: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/5.jpg)
角色演变
100ms
美化
功能
性能
![Page 6: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/6.jpg)
DOM Scripting
Ajax
UI Thread
JS Loader
![Page 7: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/7.jpg)
DOM in the Browser World
Javascript
DOM
HTML
XML
JS Engine
Dom API
Document
Bridge (cost)
各浏览器引擎对比
![Page 8: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/8.jpg)
DOM Access and Modification
See a demo
![Page 9: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/9.jpg)
DOM Access and Modification
0
500
1000
1500
2000
2500
3000
3500
4000
4500
createElement innerHTML运
行时间
(ms)
![Page 10: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/10.jpg)
Repaints and Reflow
Reflow • 浏览器使渲染树中受到影响的部分失效• 重新构造渲染树
Repaints• 浏览器重新绘制受影响的部分到屏幕中
![Page 11: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/11.jpg)
Repaints and Reflow
![Page 12: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/12.jpg)
div
document
div
div div div div
div div div div
使元素脱离文档流
对其运用多重改变把元素带回文档中
1
2
3
Repaints and Reflow
![Page 13: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/13.jpg)
•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}
![Page 14: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/14.jpg)
Event Delegation
冒泡
到达目标
捕获 ( 非 IE) div
body
html
document
window
1
2
3
4
5
![Page 15: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/15.jpg)
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”);}
![Page 16: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/16.jpg)
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
![Page 17: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/17.jpg)
DOM Scripting
Ajax
UI Thread
JS Loader
![Page 18: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/18.jpg)
Xmlhttprequest
• 只是获取数据的请求• 数据会被缓存起来,提升性能• 只发送一个数据包GET
•URL加上参数的长度接近或超过2048个字符•发送两个数据包(头信息、post正文)POST
![Page 19: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/19.jpg)
Dynamic script tag insertion
跨域请求数据
function sendDynamicJS(){ var scriptElement = document.createElement('script'); scriptElement.src = 'json.js'; document.getElementsByTagName('head')[0].appendChild(scriptElement);}
![Page 21: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/21.jpg)
将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
![Page 22: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/22.jpg)
Ajax More
数据格式 (JSON/JSON-P/Custom Format)
服务器端缓存机制
……………………
![Page 23: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/23.jpg)
DOM Scripting
Ajax
UI Thread
JS Loader
![Page 24: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/24.jpg)
var button = document.getElementById(“my-button”);button.onclick = function(){
firstMethod(); setTimeout(function(){
document.getElementById(“msg”).style.color=“red”; }, 25);}
Time code
![Page 25: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/25.jpg)
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
![Page 26: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/26.jpg)
Splitting up Tasks
See a demo
![Page 27: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/27.jpg)
Web Workers
javascript
code
UIupdate
Web Workers
![Page 28: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/28.jpg)
>>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. 返回处理结果
![Page 29: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/29.jpg)
DOM Scripting
Ajax
UI Thread
JS Loader
![Page 30: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/30.jpg)
![Page 31: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/31.jpg)
Script Position
图片资源被阻塞
图片资源并行加载
![Page 32: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/32.jpg)
Script DownloadScript Execution
JS Loader
![Page 33: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/33.jpg)
if(isIEorOpera()){ preObject = new Image();}else{ preObject = document.createElement(“object”);}
Script Download
![Page 34: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/34.jpg)
var nScript = document.createElement(“script”);nScript.type = “text/javascript”;nScript.src = url;document.getElementsByTagName(“head”)[0].appendChild(nScript);
Script Execution
![Page 35: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/35.jpg)
图片资源被阻塞
并行加载,不会阻塞
JS Loader
![Page 36: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/36.jpg)
DOM Scripting Ajax
UI Thread JS Loader
![Page 37: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/37.jpg)
页面需要精美功能需要完善交互需要体贴
在任何时刻都不要让用户等太久让他们感觉浏览你的网站是行云流水般的享受
![Page 39: Script with engine](https://reader035.vdocuments.net/reader035/viewer/2022081413/548d1a98b4795945138b4e19/html5/thumbnails/39.jpg)
附录 1
• 浏览器中的 DOM
Browser Javascript engine DOM
IE Jscript( jscript.dll) Trident(mshtml.dll)
Firefox JagerMonkey Gecko
Chrome V8 WebCore
Safari SquirrelFish WebCore
各浏览器情况