摘要：事件，當(dāng)文檔從可見變?yōu)椴豢梢娀驈牟豢梢娮優(yōu)榭梢姇r(shí)，觸發(fā)該事件要為兩個(gè)事件都指定事件處理程序?qū)ο蟀瑐€(gè)方法，接收個(gè)參數(shù)成功回調(diào)函數(shù)可選的失敗回調(diào)函數(shù)可選的選項(xiàng)對(duì)象。，事件已經(jīng)發(fā)生且執(zhí)行完所有事件處理程序的時(shí)間。

基本動(dòng)畫循環(huán)

(function(){
  function updateAnimations(){
    doAnimation1();
    doAnimation2();
    //其他動(dòng)畫
  }
  setInterval(updateAnimations, 100);
})();

幾個(gè)瀏覽器的計(jì)時(shí)器精度

IE8 及更早版本的計(jì)時(shí)器精度為 15.625ms。

IE9 及更晚版本的計(jì)時(shí)器精度為 4ms。

Firefox 和 Safari 的計(jì)時(shí)器精度大約為 10ms。

Chrome 的計(jì)時(shí)器精度為 4ms。

mozRequestAnimationFrame() 方法接收一個(gè)參數(shù)，即在重繪屏幕前調(diào)用的一個(gè)函數(shù)。這個(gè)函數(shù)負(fù)責(zé)改變下一次重繪時(shí)的 DOM樣式。為了創(chuàng)建動(dòng)畫循環(huán)，可以像以前使用 setTimeout() 一樣，把多個(gè)對(duì)mozRequestAnimationFrame() 的調(diào)用連綴起來

function updateProgress(){
  var div = document.getElementById("status");
  div.style.width = (parseInt(div.style.width, 10) + 5) + "%";
  if (div.style.left != "100%"){
    mozRequestAnimationFrame(updateProgress);
  }
}
mozRequestAnimationFrame(updateProgress);

(function(){
function draw(timestamp){
  //計(jì)算兩次重繪的時(shí)間間隔
  var drawStart = (timestamp || Date.now()),
      diff = drawStart - startTime;
  //使用 diff 確定下一步的繪制時(shí)間
  //把 startTime 重寫為這一次的繪制時(shí)間
  startTime = drawStart;
  //重繪 UI
  requestAnimationFrame(draw);
}
var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame,
    startTime = window.mozAnimationStartTime || Date.now();
requestAnimationFrame(draw);
})();

三部分組成

document.hidden，表示頁面是否隱藏的布爾值。頁面隱藏包括頁面在后臺(tái)標(biāo)簽頁中或者瀏覽器最小化。

document.visibilityState，表示下列 4 個(gè)可能狀態(tài)的值。

頁面在后臺(tái)標(biāo)簽頁中或?yàn)g覽器最小化。

頁面在前臺(tái)標(biāo)簽頁中。

實(shí)際的頁面已經(jīng)隱藏，但用戶可以看到頁面的預(yù)覽（就像在 Windows 7 中，用戶把鼠標(biāo)移動(dòng)到任務(wù)欄的圖標(biāo)上，就可以顯示瀏覽器中當(dāng)前頁面的預(yù)覽）。

頁面在屏幕外執(zhí)行預(yù)渲染處理。

visibilitychange 事件，當(dāng)文檔從可見變?yōu)椴豢梢娀驈牟豢梢娮優(yōu)榭梢姇r(shí)，觸發(fā)該事件

function handleVisibilityChange(){
  var output = document.getElementById("output"),
      msg;
  if (document.hidden || document.msHidden || document.webkitHidden){
    msg = "Page is now hidden. " + (new Date()) + "
";
  } else {
    msg = "Page is now visible. " + (new Date()) + "
";
  }
  output.innerHTML += msg;
}
//要為兩個(gè)事件都指定事件處理程序
EventUtil.addHandler(document, "msvisibilitychange", handleVisibilityChange);
EventUtil.addHandler(document, "webkitvisibilitychange", handleVisibilityChange);

navigator.geolocation對(duì)象包含3個(gè)方法

getCurrentPosition()，接收3個(gè)參數(shù)：成功回調(diào)函數(shù)、可選的失敗回調(diào)函數(shù)、可選的選項(xiàng)對(duì)象。

成功回調(diào)函數(shù)，有兩個(gè)屬性：coords和timestamp。其中coords包含相關(guān)信息

latitude，以十進(jìn)制度數(shù)表示的緯度。

longitude，以十進(jìn)制度數(shù)表示的經(jīng)度。

accuracy，經(jīng)、緯度坐標(biāo)的精度，以米為單位。

altitude，以米為單位的海拔高度，如果沒有相關(guān)數(shù)據(jù)則值為 null 。

altitudeAccuracy，海拔高度的精度，以米為單位，數(shù)值越大越不精確。

heading，指南針的方向，0°表示正北，值為 NaN 表示沒有檢測(cè)到數(shù)據(jù)。

speed，速度，即每秒移動(dòng)多少米，如果沒有相關(guān)數(shù)據(jù)則值為 null

失敗回調(diào)函數(shù)，在被調(diào)用的時(shí)候接收一個(gè)參數(shù)，這個(gè)參數(shù)是一個(gè)對(duì)象，包含兩個(gè)屬性：message和code。其中message屬性中包含文本信息，解釋為什么會(huì)出錯(cuò)，code中保存著一個(gè)值，表示錯(cuò)誤的類型：用戶拒絕共享1、位置無效2、超時(shí)3

navigator.geolocation.getCurrentPosition(function(position){
  drawMapCenteredAt(position.coords.latitude, positions.coords.longitude);
}, function(error){
  console.log("Error code: " + error.code);
  console.log("Error message: " + error.message);
})

選項(xiàng)對(duì)象，用于設(shè)定信息的類型?？梢栽O(shè)置的選項(xiàng)有三個(gè)：enableHightAccurancy是一個(gè)布爾值，表示必須盡可能使用最準(zhǔn)確的位置信息；timeout是以毫秒數(shù)表示的等待位置信息的最長時(shí)間；maximumAge表示上一次取得坐標(biāo)信息的有效時(shí)間，毫秒表示

navigator.geolocation.getCurrentPosition(function(position){
  drawMapCenteredAt(position.coords.latitude, positions.coords.longitude);
}, function(error){
  console.log("Error code: " + error.code);
  console.log("Error message: " + error.message);
}, {
  enableHighAccuracy: true,
  timeout: 5000,
  maximumAge: 25000
})

另一個(gè)方法是watchPosition()這個(gè)方法接收的參數(shù)與上一個(gè)方法一樣

每個(gè)File對(duì)象都有下列只讀屬性

name，本地文件系統(tǒng)中的文件名。

size，文件的字節(jié)大小。

type，字符串，文件的 MIME 類型。

lastModifiedDate，字符串，文件上一次被修改的時(shí)間

為了讀取文件中的數(shù)據(jù)，F(xiàn)ileReader提供的方法

readAsText(file,encoding)，以純文本形式讀取文件，將讀取到的文本保存在 result 屬性中。第二個(gè)參數(shù)用于指定編碼類型，是可選的。

readAsDataURL(file)，讀取文件并將文件以數(shù)據(jù) URI 的形式保存在 result 屬性中。

readAsBinaryString(file)，讀取文件并將一個(gè)字符串保存在 result 屬性中，字符串中的每個(gè)字符表示一字節(jié)。

readAsArrayBuffer(file)，讀取文件并將一個(gè)包含文件內(nèi)容的 ArrayBuffer 保存在result 屬性中

var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
  var info = "",
      output = document.getElementById("output"),
      progress = document.getElementById("progress"),
      files = EventUtil.getTarget(event).files,
      type = "default",
      reader = new FileReader();
  if (/image/.test(files[0].type)){
    reader.readAsDataURL(files[0]);
    type = "image";
  } else {
    reader.readAsText(files[0]);
    type = "text";
  }
  reader.onerror = function(){
    output.innerHTML = "Could not read file, error code is " +
      reader.error.code;
  };
  reader.onprogress = function(event){
    if (event.lengthComputable){
      progress.innerHTML = event.loaded + "/" + event.total;
    }
  };
  reader.onload = function(){
    var html = "";
    switch(type){
      case "image":
        html = "";
        break;
      case "text":
        html = reader.result;
        break;
    }
    output.innerHTML = html;
  };
});

File對(duì)象還支持slice()方法，這個(gè)方法接收兩個(gè)參數(shù)：起始的字節(jié)及要讀取的字節(jié)數(shù)

function blobSlice(blob, startByte, length){
  if (blob.slice){
    return blob.slice(startByte, length);
  } else if (blob.webkitSlice){
    return blob.webkitSlice(startByte, length);
  } else if (blob.mozSlice){
    return blob.mozSlice(startByte, length);
  } else {
    return null;
  }
}

Blob類型有一個(gè)size屬性和一個(gè)type屬性，支持slice()方法，以便進(jìn)一步切割數(shù)據(jù)

var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
  var info = "",
      output = document.getElementById("output"),
      progress = document.getElementById("progress"),
      files = EventUtil.getTarget(event).files,
      reader = new FileReader(),
      blob = blobSlice(files[0], 0, 32);
  if (blob){
    reader.readAsText(blob);
    reader.onerror = function(){
      output.innerHTML = "Could not read file, error code is " +
        reader.error.code;
    };
    reader.onload = function(){
      output.innerHTML = reader.result;
    };
  } else {
    alert("Your browser doesn" t support slice().");
  }
});

使用對(duì)象URL的好處是可以不必把文件內(nèi)容讀取到JavaScript中而直接使用文件內(nèi)容，為此只要在需要文件內(nèi)容的地方提供對(duì)象URL即可，要?jiǎng)?chuàng)建對(duì)象URL，可以使用window.URL.createObjectURL()方法，并傳入File或Blob對(duì)象

var filesList = document.getElementById("files-list");
EventUtil.addHandler(filesList, "change", function(event){
  var info = "",
      output = document.getElementById("output"),
      progress = document.getElementById("progress"),
      files = EventUtil.getTarget(event).files,
      reader = new FileReader(),
      url = createObjectURL(files[0]);
  if (url){
    if (/image/.test(files[0].type)){
      output.innerHTML = "";
    } else {
      output.innerHTML = "Not an image.";
    }
  } else {
    output.innerHTML = "Your browser doesn"t support object URLs.";
  }
});

var droptarget = document.getElementById( "droptarget");
function handleEvent(event){
var info = "",
    output = document.getElementById("output"),
    files, i, len;
EventUtil.preventDefault(event);
if (event.type == "drop"){
  files = event.dataTransfer.files;
  i = 0;
  len = files.length;
  while (i < len){
    info += files[i].name + " (" + files[i].type + ", " + files[i].size +
      " bytes)
";
    i++;
  }
  output.innerHTML = info;
}
}
EventUtil.addHandler(droptarget, "dragenter", handleEvent);
EventUtil.addHandler(droptarget, "dragover", handleEvent);
EventUtil.addHandler(droptarget, "drop", handleEvent);

var droptarget = document.getElementById("droptarget");
function handleEvent(event){
var info = "",
    output = document.getElementById("output"),
    data, xhr,
    files, i, len;
EventUtil.preventDefault(event);
if (event.type == "drop"){
  data = new FormData();
  files = event.dataTransfer.files;
  i = 0;
  len = files.length;
  while (i < len){
    data.append("file" + i, files[i]);
    i++;
  }
  xhr = new XMLHttpRequest();
  xhr.open("post", "FileAPIExample06Upload.php", true);
  xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
      alert(xhr.responseText);
    }
  };
  xhr.send(data);
}
}
EventUtil.addHandler(droptarget, "dragenter", handleEvent);
EventUtil.addHandler(droptarget, "dragover", handleEvent);
EventUtil.addHandler(droptarget, "drop", handleEvent);

navigationStart，開始導(dǎo)航到當(dāng)前頁面的時(shí)間。

unloadEventStart，前一個(gè)頁面的 unload 事件開始的時(shí)間。但只有在前一個(gè)頁面與當(dāng)前頁面來自同一個(gè)域時(shí)這個(gè)屬性才會(huì)有值；否則，值為 0。

unloadEventEnd，前一個(gè)頁面的 unload 事件結(jié)束的時(shí)間。但只有在前一個(gè)頁面與當(dāng)前頁面來自同一個(gè)域時(shí)這個(gè)屬性才會(huì)有值；否則，值為 0。

redirectStart，到當(dāng)前頁面的重定向開始的時(shí)間。但只有在重定向的頁面來自同一個(gè)域時(shí)這個(gè)屬性才會(huì)有值；否則，值為 0。

redirectEnd，到當(dāng)前頁面的重定向結(jié)束的時(shí)間。但只有在重定向的頁面來自同一個(gè)域時(shí)這個(gè)屬性才會(huì)有值；否則，值為 0。

fetchStart，開始通過 HTTP GET 取得頁面的時(shí)間。

domainLookupStart，開始查詢當(dāng)前頁面 DNS 的時(shí)間。

domainLookupEnd，查詢當(dāng)前頁面 DNS 結(jié)束的時(shí)間。

connectStart，瀏覽器嘗試連接服務(wù)器的時(shí)間。

connectEnd，瀏覽器成功連接到服務(wù)器的時(shí)間。

secureConnectionStart，瀏覽器嘗試以 SSL 方式連接服務(wù)器的時(shí)間。不使用 SSL 方式連接時(shí)，這個(gè)屬性的值為 0。

requestStart，瀏覽器開始請(qǐng)求頁面的時(shí)間。

responseStart，瀏覽器接收到頁面第一字節(jié)的時(shí)間。

responseEnd，瀏覽器接收到頁面所有內(nèi)容的時(shí)間。

domLoading，document.readyState 變?yōu)?"loading" 的時(shí)間。

domInteractive，document.readyState 變?yōu)?"interactive" 的時(shí)間。

domContentLoadedEventStart，發(fā)生 DOMContentLoaded 事件的時(shí)間。

domContentLoadedEventEnd，DOMContentLoaded 事件已經(jīng)發(fā)生且執(zhí)行完所有事件處理程序的時(shí)間。

domComplete，document.readyState 變?yōu)?"complete" 的時(shí)間。

loadEventStart，發(fā)生 load 事件的時(shí)間。

loadEventEnd，load 事件已經(jīng)發(fā)生且執(zhí)行完所有事件處理程序的時(shí)間。

只有Worker接收到消息才會(huì)實(shí)際執(zhí)行文件匯總的代碼。要給Worker傳遞消息，可以使用postMessage()方法，消息內(nèi)容可以是任何能夠被序列化的值

worker.postMessage(“start! ");

Worker執(zhí)行的JavaScript代碼完全在另一個(gè)作用域中，與當(dāng)前網(wǎng)頁中的代碼不共享作用域

Web Worker本身也是一個(gè)最小化的運(yùn)行環(huán)境

最小化的 navigator 對(duì)象，包括 onLine 、 appName 、 appVersion 、 userAgent 和 platform屬性；

只讀的 location 對(duì)象；

setTimeout() 、 setInterval() 、 clearTimeout() 和 clearInterval() 方法；

XMLHttpRequest 構(gòu)造函數(shù)。

Worker的全局作用域提供這個(gè)功能，可以調(diào)用importScripts()方法，這個(gè)方法接收一個(gè)或多個(gè)指向JavaScript文件的URL，每個(gè)加載過程都是異步進(jìn)行的。因此所有腳本加載之后，importScripts()才會(huì)執(zhí)行

//Web Worker 內(nèi)部的代碼
importScripts("file1.js", "file2.js");