摘要：對象包括和以及失敗回調(diào)函數(shù)接收對象對象有和兩個(gè)屬性可選對象接收一個(gè)對象對象內(nèi)容有以及該方法接收的參數(shù)與上面的一致。

在js中創(chuàng)建動(dòng)畫的典型方式就是用setInterval方法控制所有動(dòng)畫：

(function() {
    function animations() {
        //animations...
    }
    setInterval(animations, 100);
})()

最平滑動(dòng)畫的最佳循環(huán)間隔是100ms/60，約為17ms；大多數(shù)電腦顯示器的刷新頻率是60Hz。

但是如果UI線程繁忙，比如忙于處理用戶操作，那么即使把代碼加入到列隊(duì)也不會立即執(zhí)行。

CSS的動(dòng)畫優(yōu)勢在于瀏覽器知道動(dòng)畫什么時(shí)候開始，因此會計(jì)算出正確的循環(huán)間隔，在恰當(dāng)?shù)臅r(shí)候刷新UI，而對于JavaScript動(dòng)畫，瀏覽器無從知曉什么時(shí)候開始。

目前，W3C已經(jīng)著手起草requestAnimationFrame()API。

該API包括以下三個(gè)部分：

document.hidden：是否隱藏

document.visibilityState：4個(gè)可能的狀態(tài)值

后臺標(biāo)簽或最小化

前臺標(biāo)簽

實(shí)際頁面隱藏，但用戶看到頁面預(yù)覽

屏幕外執(zhí)行預(yù)渲染

visibilitychange事件

如：

document.addEventListener("visibilitychange", function () {
    console.log(document.hidden);
});

navigator.geolocation這個(gè)對象包括三個(gè)方法：

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

成功回調(diào)函數(shù)會接收到一個(gè)Position對象參數(shù)，該對象有兩個(gè)屬性：coords和timestamp。

coords：對象包括latitude和longitude以及accuracy

失敗回調(diào)函數(shù)接收error對象

error對象有code和message兩個(gè)屬性

可選對象接收一個(gè)對象：對象內(nèi)容有enableHighAccuracy、timeout以及maximumAge

watchPosition：該方法接收的參數(shù)與上面的一致。配合clearWatch方法使用，類似setTimeout和clearTimeout

clearWatch

如：

navigator.geolocation.getCurrentPosition(function(position) {
    do_something(position.coords.latitude, position.coords.longitude); //第一個(gè)參數(shù)為成功的回調(diào)函數(shù)
});

navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position.coords.latitude);
    console.log(position.coords.timestamp);
}, function(err) { //第二個(gè)參數(shù)為失敗的回調(diào)函數(shù)
    console.log("Error code: " + err.code);
    console.log("Error message: " + err.message);
});

navigator.geolocation.getCurrentPosition(function(position) {
    console.log(position.coords.latitude);
    console.log(position.coords.timestamp);
}, function(err) {
    console.log("Error code: " + err.code);
    console.log("Error message: " + err.message);
}, { //第三個(gè)參數(shù)接收對象
    enableHighAccuracy: true,
    timeout: 1000,
    maximumAge: 30000
});

HTML5 DOM中添加了元素files集合，通過文件輸入字段選擇一個(gè)或多個(gè)文件，files集合中將包括一組File對象，每個(gè)File對象對應(yīng)著一個(gè)文件，每個(gè)File對象有下面的只讀屬性：

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

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

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

lastModifiedDate：字符串，上次文件被修改的事件

如：

var files = document.getElementById("files");
files.onchange = function () {
    var list = event.target.files; //FileList對象
    // console.log(list); //name: lastModified: lastModifiedDate: webkitRelativePath:
    for (var i = 0, len = list.length; i < len; i++) {
        console.log("name: " + list[i].name + "; type: " + list[i].type + "; size: " + list[i].size + "bytes"); //name: opening.png; type: image/png; size: 324991bytes
    };
};

瀏覽器都支持前兩個(gè)方法：

readAsText；

readAsDataURL

readAsBinaryString

readAsArrayBuffer

如下例子：

var files = document.getElementById("files");
files.onchange = function() {
    var files = event.target.files,
        info = "",
        output = document.getElementById("output"),
        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, error: " + reader.error.code;
    };
    reader.onprogress = function () {
        if (event.lengthComputable) {
            output.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;
    };
};

如果想中斷則需要調(diào)用abort方法。

Blob的實(shí)例，slice()方法

blob.slice(startByte, length)

引用保存在File或Blob中數(shù)據(jù)的URL：

window.URL.createObjectURL()方法

要釋放內(nèi)存則把對象URL傳給：

window.URL.revokeObjectURL()方法

var droptarget = document.getElementById("drop");
droptarget.addEventListener("dragenter",function () {
    event.preventDefault();
});
droptarget.addEventListener("dragover",function () {
    event.preventDefault();
});
droptarget.addEventListener("drop",function () {
    event.preventDefault();
    var file = event.dataTransfer.files[0];
    console.log(file.name)
});

在drop事件中，可以通過event.dataTransfer.files讀取文件信息。

略

data = new FormData();
...
data.append("file" + i, files[i]);
...
xhr.send(data);

Web Timing API

window.performance對象

PerformanceNavigation.redirectCount

type

performance.timing屬性

navigationStart

unloadEventStart

unloadEventEnd

redirectStart

redirectEnd

fetchStart

domainLookupStart

domainLookupEnd

connectStart

connectEnd

secureConnectionStart

requestStart

responseStart

responseEnd

domLoading

domInteractive

domContentLoadedEventStart

domContentLoadedEventEnd

domComplete

loadEventStart

loadEventEnd

toJSON

略