SlideShare une entreprise Scribd logo
1  sur  39
Télécharger pour lire hors ligne
feifeipan
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
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
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”;
    }
 }
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
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
Ajax More

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



服务器端缓存机制



……………………
DOM Scripting

Ajax

UI Thread

JS Loader
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
Splitting up Tasks
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);
};
DOM Scripting

Ajax

UI Thread

JS Loader
Script with engine
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

Contenu connexe

Tendances

Mongo db技术分享
Mongo db技术分享Mongo db技术分享
Mongo db技术分享晓锋 陈
 
JavaScript Advanced Skill
JavaScript Advanced SkillJavaScript Advanced Skill
JavaScript Advanced Skillfirestoke
 
jQuery 選取器解析
jQuery 選取器解析jQuery 選取器解析
jQuery 選取器解析Kingsley Zheng
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化li qiang
 
iOS程序设计-数据持久化
iOS程序设计-数据持久化iOS程序设计-数据持久化
iOS程序设计-数据持久化qiyutan
 
07 View Controllers
07 View Controllers07 View Controllers
07 View ControllersTom Fan
 
02 Objective-C
02 Objective-C02 Objective-C
02 Objective-CTom Fan
 
用Jquery实现拖拽层
用Jquery实现拖拽层用Jquery实现拖拽层
用Jquery实现拖拽层yiditushe
 
14 Saving Loading and Application States
14 Saving Loading and Application States14 Saving Loading and Application States
14 Saving Loading and Application StatesTom Fan
 
旺铺前端设计和实现
旺铺前端设计和实现旺铺前端设计和实现
旺铺前端设计和实现hua qiu
 
MongoDB Basic
MongoDB BasicMongoDB Basic
MongoDB Basicsimplels
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101Jollen Chen
 
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范Hongjian Wang
 
jQuery介绍@disandu.com
jQuery介绍@disandu.comjQuery介绍@disandu.com
jQuery介绍@disandu.comThink hy
 
05 MapKit and Text Input
05 MapKit and Text Input05 MapKit and Text Input
05 MapKit and Text InputTom Fan
 

Tendances (18)

Mongo db技术分享
Mongo db技术分享Mongo db技术分享
Mongo db技术分享
 
JS2
JS2JS2
JS2
 
JavaScript Advanced Skill
JavaScript Advanced SkillJavaScript Advanced Skill
JavaScript Advanced Skill
 
jQuery 選取器解析
jQuery 選取器解析jQuery 選取器解析
jQuery 選取器解析
 
面向开发的前端性能优化
面向开发的前端性能优化面向开发的前端性能优化
面向开发的前端性能优化
 
iOS程序设计-数据持久化
iOS程序设计-数据持久化iOS程序设计-数据持久化
iOS程序设计-数据持久化
 
07 View Controllers
07 View Controllers07 View Controllers
07 View Controllers
 
02 Objective-C
02 Objective-C02 Objective-C
02 Objective-C
 
用Jquery实现拖拽层
用Jquery实现拖拽层用Jquery实现拖拽层
用Jquery实现拖拽层
 
14 Saving Loading and Application States
14 Saving Loading and Application States14 Saving Loading and Application States
14 Saving Loading and Application States
 
旺铺前端设计和实现
旺铺前端设计和实现旺铺前端设计和实现
旺铺前端设计和实现
 
MongoDB Basic
MongoDB BasicMongoDB Basic
MongoDB Basic
 
Backbone.js and MVW 101
Backbone.js and MVW 101Backbone.js and MVW 101
Backbone.js and MVW 101
 
希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范希望科技研发部变量命名及编码规范
希望科技研发部变量命名及编码规范
 
前端测试
前端测试前端测试
前端测试
 
jQuery介绍@disandu.com
jQuery介绍@disandu.comjQuery介绍@disandu.com
jQuery介绍@disandu.com
 
05 MapKit and Text Input
05 MapKit and Text Input05 MapKit and Text Input
05 MapKit and Text Input
 
Ooredis
OoredisOoredis
Ooredis
 

Similaire à Script with engine

JavaScript Engine
JavaScript EngineJavaScript Engine
JavaScript Enginejay li
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoloadjay li
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发leneli
 
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式Shengyou Fan
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门Xiujun Ma
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)ziggear
 
异步编程与浏览器执行模型
异步编程与浏览器执行模型异步编程与浏览器执行模型
异步编程与浏览器执行模型keelii
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backboneJerry Xie
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路taobao.com
 
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)Jia Mi
 
網站設計100步
網站設計100步網站設計100步
網站設計100步evercislide
 
Spring 2.x 中文
Spring 2.x 中文Spring 2.x 中文
Spring 2.x 中文Guo Albert
 
中心教员J2 Ee面试题
中心教员J2 Ee面试题中心教员J2 Ee面试题
中心教员J2 Ee面试题yiditushe
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路luolonghao
 

Similaire à Script with engine (20)

JavaScript Engine
JavaScript EngineJavaScript Engine
JavaScript Engine
 
Berserk js
Berserk jsBerserk js
Berserk js
 
前端测试
前端测试前端测试
前端测试
 
Mvc
MvcMvc
Mvc
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
 
Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
 
Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)Web设计 3 java_script初探(程序员与设计师的双重眼光)
Web设计 3 java_script初探(程序员与设计师的双重眼光)
 
异步编程与浏览器执行模型
异步编程与浏览器执行模型异步编程与浏览器执行模型
异步编程与浏览器执行模型
 
前端MVC之backbone
前端MVC之backbone前端MVC之backbone
前端MVC之backbone
 
Kind editor设计思路
Kind editor设计思路Kind editor设计思路
Kind editor设计思路
 
John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)John Resig Beijing 2010 (中文版)
John Resig Beijing 2010 (中文版)
 
A
AA
A
 
Javascript
JavascriptJavascript
Javascript
 
網站設計100步
網站設計100步網站設計100步
網站設計100步
 
Spring 2.x 中文
Spring 2.x 中文Spring 2.x 中文
Spring 2.x 中文
 
Glider
GliderGlider
Glider
 
中心教员J2 Ee面试题
中心教员J2 Ee面试题中心教员J2 Ee面试题
中心教员J2 Ee面试题
 
Kindeditor 设计思路
Kindeditor 设计思路Kindeditor 设计思路
Kindeditor 设计思路
 

Plus de Webrebuild

重构 这一路走来
重构 这一路走来重构 这一路走来
重构 这一路走来Webrebuild
 
构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统Webrebuild
 
Css3之颜色与半透明
Css3之颜色与半透明Css3之颜色与半透明
Css3之颜色与半透明Webrebuild
 
移动网站的兼容性探索
移动网站的兼容性探索移动网站的兼容性探索
移动网站的兼容性探索Webrebuild
 
孙极-Hello, JSS! - 一种新样式语言的诞生
孙极-Hello, JSS! - 一种新样式语言的诞生孙极-Hello, JSS! - 一种新样式语言的诞生
孙极-Hello, JSS! - 一种新样式语言的诞生Webrebuild
 
陈子舜-Html5 based web app
陈子舜-Html5 based web app陈子舜-Html5 based web app
陈子舜-Html5 based web appWebrebuild
 
谭正谊-QQ邮箱HTML5移动应用
谭正谊-QQ邮箱HTML5移动应用谭正谊-QQ邮箱HTML5移动应用
谭正谊-QQ邮箱HTML5移动应用Webrebuild
 
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈Webrebuild
 
微观重构 黄婉芳
微观重构 黄婉芳微观重构 黄婉芳
微观重构 黄婉芳Webrebuild
 
年会主持 By pufen
年会主持 By pufen年会主持 By pufen
年会主持 By pufenWebrebuild
 
年会主持 By pufen
年会主持 By pufen年会主持 By pufen
年会主持 By pufenWebrebuild
 
Css schema by_sofish
Css schema by_sofishCss schema by_sofish
Css schema by_sofishWebrebuild
 
重构的价值转化 By impact
重构的价值转化 By impact重构的价值转化 By impact
重构的价值转化 By impactWebrebuild
 
七年之痒Webrebuild by emu
七年之痒Webrebuild by emu七年之痒Webrebuild by emu
七年之痒Webrebuild by emuWebrebuild
 
Qmail rebuild_by_nico
Qmail rebuild_by_nicoQmail rebuild_by_nico
Qmail rebuild_by_nicoWebrebuild
 
潘杰茂_网络图像优化
潘杰茂_网络图像优化潘杰茂_网络图像优化
潘杰茂_网络图像优化Webrebuild
 
张思坚 浏览器兼容性
张思坚 浏览器兼容性张思坚 浏览器兼容性
张思坚 浏览器兼容性Webrebuild
 
飘飘 年会主持
飘飘 年会主持飘飘 年会主持
飘飘 年会主持Webrebuild
 
石玉磊 Web rebuild
石玉磊 Web rebuild石玉磊 Web rebuild
石玉磊 Web rebuildWebrebuild
 
彪叔 [2010]webrebuild
彪叔 [2010]webrebuild彪叔 [2010]webrebuild
彪叔 [2010]webrebuildWebrebuild
 

Plus de Webrebuild (20)

重构 这一路走来
重构 这一路走来重构 这一路走来
重构 这一路走来
 
构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统构建可扩展的静态资源管理系统
构建可扩展的静态资源管理系统
 
Css3之颜色与半透明
Css3之颜色与半透明Css3之颜色与半透明
Css3之颜色与半透明
 
移动网站的兼容性探索
移动网站的兼容性探索移动网站的兼容性探索
移动网站的兼容性探索
 
孙极-Hello, JSS! - 一种新样式语言的诞生
孙极-Hello, JSS! - 一种新样式语言的诞生孙极-Hello, JSS! - 一种新样式语言的诞生
孙极-Hello, JSS! - 一种新样式语言的诞生
 
陈子舜-Html5 based web app
陈子舜-Html5 based web app陈子舜-Html5 based web app
陈子舜-Html5 based web app
 
谭正谊-QQ邮箱HTML5移动应用
谭正谊-QQ邮箱HTML5移动应用谭正谊-QQ邮箱HTML5移动应用
谭正谊-QQ邮箱HTML5移动应用
 
唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈唐俊开-Html5 mobile web app浅谈
唐俊开-Html5 mobile web app浅谈
 
微观重构 黄婉芳
微观重构 黄婉芳微观重构 黄婉芳
微观重构 黄婉芳
 
年会主持 By pufen
年会主持 By pufen年会主持 By pufen
年会主持 By pufen
 
年会主持 By pufen
年会主持 By pufen年会主持 By pufen
年会主持 By pufen
 
Css schema by_sofish
Css schema by_sofishCss schema by_sofish
Css schema by_sofish
 
重构的价值转化 By impact
重构的价值转化 By impact重构的价值转化 By impact
重构的价值转化 By impact
 
七年之痒Webrebuild by emu
七年之痒Webrebuild by emu七年之痒Webrebuild by emu
七年之痒Webrebuild by emu
 
Qmail rebuild_by_nico
Qmail rebuild_by_nicoQmail rebuild_by_nico
Qmail rebuild_by_nico
 
潘杰茂_网络图像优化
潘杰茂_网络图像优化潘杰茂_网络图像优化
潘杰茂_网络图像优化
 
张思坚 浏览器兼容性
张思坚 浏览器兼容性张思坚 浏览器兼容性
张思坚 浏览器兼容性
 
飘飘 年会主持
飘飘 年会主持飘飘 年会主持
飘飘 年会主持
 
石玉磊 Web rebuild
石玉磊 Web rebuild石玉磊 Web rebuild
石玉磊 Web rebuild
 
彪叔 [2010]webrebuild
彪叔 [2010]webrebuild彪叔 [2010]webrebuild
彪叔 [2010]webrebuild
 

Dernier

KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.
KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.
KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.Ang Xiao Yean
 
KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptx
KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptxKAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptx
KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptxg07294746
 
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】andiback97
 
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】黑客 接单【TG/微信qoqoqdqd】
 
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdf
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdfLos derechos de los animales - Hector Hidalgo (2xhoja36).pdf
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdfyenifferdenisseoband1
 
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學ssuser29f076
 
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026WONGYUZHIKPMGuru
 
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】黑客 接单【TG/微信qoqoqdqd】
 
20230513taibif-datapaper-tutorial_zh.pdf
20230513taibif-datapaper-tutorial_zh.pdf20230513taibif-datapaper-tutorial_zh.pdf
20230513taibif-datapaper-tutorial_zh.pdfjhujyunjhang
 

Dernier (9)

KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.
KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.
KSSR 五年级道德教育课本_单元1:同一条路上(题目)_道德价值:信奉上苍pptx.
 
KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptx
KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptxKAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptx
KAWAD KAKI SJKC UNTUK MURID SEKOLAH RENDAH DAN JUGA MENENGAH.pptx
 
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】
比利时大学文凭制作/日语N1/N2/N3/N4/N5证书定制/日本大阪医科大学毕业证购买【如何制作美国卡罗尔大学成绩单】
 
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】
网上找的黑客真的帮我修改了大学成绩,可以试试!黑客怎么修改大学成绩单【微信tytyqqww】
 
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdf
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdfLos derechos de los animales - Hector Hidalgo (2xhoja36).pdf
Los derechos de los animales - Hector Hidalgo (2xhoja36).pdf
 
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學
2024 SIMPLIS 系列課程 _ SIMPLIS電路模擬軟體的基礎操作教學
 
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026
六年级体育全年计划(KSSR) RPT PJ KSSR 2024 2025 2026
 
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】
这个网站是怎么被黑的啊?我觉得黑客挺厉害,能改成绩。想知道怎么入侵网站吗?我这就给你来个实例演示!【微信tytyqqww】
 
20230513taibif-datapaper-tutorial_zh.pdf
20230513taibif-datapaper-tutorial_zh.pdf20230513taibif-datapaper-tutorial_zh.pdf
20230513taibif-datapaper-tutorial_zh.pdf
 

Script with engine

  • 2. 2006 左侧的促销信息 滚动一下 右边的广告要 飘来飘去~
  • 3. 2008 让用户输入城市 简拼就能够匹配 能提示用户入住 日期输入正确性
  • 5. 角色演变 性能 100 ms 功能 美化
  • 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 • 浏览器重新绘制受影响的部分到屏幕中
  • 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”; } }
  • 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
  • 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
  • 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); };
  • 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
  • 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