初期的动画轮回

在js中建立动画的典范体式格局就是用setInterval要领掌握一切动画：

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

最腻滑动画的最好轮回距离是100ms/60，约为17ms；大多数电脑显示器的革新频次是60Hz。

然则假如UI线程忙碌，比方忙于处置惩罚用户操纵，那末纵然把代码加入到排队也不会马上实行。

轮回距离的题目

CSS的动画上风在于浏览器晓得动画什么时刻最先，因此会计算出准确的轮回距离，在适当的时刻革新UI，而关于JavaScript动画，浏览器无从晓得什么时刻最先。

现在，W3C已动手草拟requestAnimationFrame()API。

Page Visibility API

该API包含以下三个部份：

• document.hidden：是不是隐蔽

• document.visibilityState：4个能够的状态值

  • 背景标签或最小化

  • 前台标签

  • 现实页面隐蔽，但用户看到页面预览

  • 屏幕外实行预衬着

• visibilitychange事宜

如：

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

Geolocation API

navigator.geolocation这个对象包含三个要领：

• getCurrentPosition：吸收3个参数（胜利回调函数、可选的失利回调函数、可选的选项对象）

  • 胜利回调函数会吸收到一个Position对象参数，该对象有两个属性：coords和timestamp。

    • coords：对象包含latitude和longitude以及accuracy

  • 失利回调函数吸收error对象

    • error对象有code和message两个属性

  • 可选对象吸收一个对象：对象内容有enableHighAccuracy、timeout以及maximumAge

• watchPosition：该要领吸收的参数与上面的一致。合营clearWatch要领运用，相似setTimeout和clearTimeout

• clearWatch

如：

navigator.geolocation.getCurrentPosition(function(position) {
    do_something(position.coords.latitude, position.coords.longitude); //第一个参数为胜利的回调函数
});

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

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);
}, { //第三个参数吸收对象
    enableHighAccuracy: true,
    timeout: 1000,
    maximumAge: 30000
});

File API

HTML5 DOM中添加了元素files鸠合，经由过程文件输入字段挑选一个或多个文件，files鸠合中将包含一组File对象，每一个File对象对应着一个文件，每一个File对象有下面的只读属性：

• name：当地文件体系中的文件名

• size：文件的字节大小

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

FileReader

浏览器都支撑前两个要领：

• 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 = "<img src=" + reader.result +  ">";
                break;
            case "text":
                html = reader.result;
                break;
        }
        output.innerHTML = html;
    };
};

假如想中缀则须要挪用abort要领。

读取部份内容

Blob的实例，slice()要领

blob.slice(startByte, length)

对象URL

援用保存在File或Blob中数据的URL：

window.URL.createObjectURL()要领

要开释内存则把对象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读取文件信息。

XHR要领上传文件

略

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

Web 计时

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

Web Workers

略