#### 使用H5的history改善AJAX
比如有一個分頁功能，用的ajax，當用戶點擊瀏覽器的返回按鈕時，返回的不是分頁的上一頁數據，而是頁面的上一個頁面了。這里可以使用h5的history進行優化。
```
//緩存當前頁碼
var pageIndex = window.localStorage.pageIndex || 0;
function nextPage() {
window.localStorage.pageIndex = ++pageIndex;
requestData(pageIndex);
//把當前頁push到state中，這樣瀏覽器history中就多了當前頁
//三個參數: 頁面數據\title（沒用）\當前頁url
window.history.pushState({page: pageIndex}, null, window.location.href);
}
//監聽用戶點擊瀏覽器的前進后退
window.addEventListener("popState", function(event) {
var page = 0;
if(event.state != null) {
page = event.state.page;
requestData(page);
window.localStorage.pageIndex = page;
}
})
window.onload=function(){
var pageIndex = window.localStorage.pageIndex || 0;
requestData(pageIndex);
}
```
popState只能監聽pushState進去的東西！
瀏覽器有一個隊列，用來存放訪問記錄，包括頁面的網址還有state數據。這個隊列只有pushState了才有數據，否則就沒有。
#### 雪碧圖
雪碧圖其實就是多個小圖片合并在一起，然后調整這張大圖的位置來顯示不同圖片。這種做法能夠減少http請求，但缺點就是圖片是提前做好的，分辨率是固定的，高清屏會模糊，并且如果想要修改圖片的顏色的話就只能重做圖片了。我們應該用圖標或svg來代替雪碧圖。
#### 圖片上傳相關
```
var reader = new FileReader(file);
//讀取為base64格式
reader.readAsDataURL(file);
reader.onload = function(e) {
var base64 = e.target.result;
if(file.size > 1024) { //背景透明0.5 }
//如果圖片大的話賦值src過程可能會卡一下，這里設置div的透明度告訴用戶圖片正在處理中來提高體驗
$img.attr("src", base64);
if(file.size > 1024) { //還原透明度 }
//后續上傳等操作
}
```
壓縮圖片可以用canvas，原理就是把一張圖片畫到一個小畫布上，再把畫布的內容導出成base64，就能拿到一張很小的圖片了。
```
var ctx = cvs.getContext("2d");
ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight);
var quality = 0.6;
var newImageData = cvs.toDataURL(mimeType, quality);
var _img = new Image();
_img.src = newImageData;
```
文件上傳進度：
```
xhr.upload.onprogress = function(e) {
if(e.lengthComputable) {
callback(e.loaded / e.total);
}
}
```
