高性能JavaScript（高性能Ajax）

時間 2019-11-21

標籤高性能 javascript ajax 欄目 JavaScript 简体版

原文原文鏈接

ajax是一種與服務器通訊而無需重載頁面的方法（即局部刷新。）javascript

高性能的Ajax應該考慮數據傳輸技術和數據格式，以及其餘的如數據緩存等優化技術。php

請求數據css

請求數據的經常使用技術有XMLHttpRequest（XHR），動態腳本注入、Multipart XHR、iframes、Comet五種，其中前三種比較常見，後兩種每每在比較極端的狀況下使用。html

XHRjava

XMLHttpRequest是目前最經常使用的技術，能夠在請求中添加頭信息和參數，讀取服務器返回的全部頭信息和響應文本，下面是一個簡單的例子ajax

readyState的值等於3時，說明這是ajax與服務器正在進行交互，相應信息還在傳輸過程當中。json

XHR 提供了高級的控制，因此瀏覽器對其增長了一些限制。不能是用 XHR 從外域請求數據，也就是跨域。並且低版本的IE 沒有 readyState 爲 3 的狀態跨域

當請求的URL加上參數的長度接近 2048 個字符時，須要使用 post 獲取數據。過長將會致使請求的URL被截斷。數組

動態腳本注入瀏覽器

克服了XHR的限制：可以跨域請求數據

經過建立script標籤，將src指向不一樣域的url便可

與XHR相比：

(1) 動態腳本注入沒法設置頭信息，

(2) 只能使用get方式，不能使用post方式

(3) 不能訪問請求的頭信息，也不能將響應消息做爲字符串來處理，響應消息通常是可執行的javascript腳本（其餘待返回的XML、JSON或其餘格式的數據都要封裝在一個回調函數中）

Multipart XHR（新技術）

MXHR容許客戶端只用一個HTTP請求從服務器端向客戶端傳送多個資源。它經過在服務器端將多個資源（css文件、HTML片斷、js代碼、base64編碼的圖片）打包成一個由雙方約定的特定字符分割的長字符串發送到客戶端。而後，在客戶端根據那個特定的字符將這個長字符串解析成各個資源。

發起請求

var xhr = new XMLHttpRequest(); 

xhr.open('get','data.php',true);

xhr.onreadystatechange = function(){
   if(xhr.readyState == 4){
        splitImage(xhr.responseText)
   }
}

服務端處理數據

$dataArr=array();
$images=array('1.jpg','2.jpg','3.jpg');
foreach($images as $img){
　　$file=fopen($img,'r');
　　$imgdata=fread($file,filesize($img));
　　$imgdata=base64_encode($imgdata);
　　fclose($file);
　　array_push($dataArr,$imgdata);
}
$newchar=chr(1);
echo implode($newchar,$dataArr);//使用一個不會出如今base64中的一個字符將各個圖片的base64編碼連成一個長字符串

數據到達客戶端後，再進行解析

function splitImage(imgstring){
　　var imgdata=imgstring.split(\u0001'); //將字符串分割
　　var img=document.createElement('img');
　　for(var i=0,len=imgdata.length;i<len;i++){
　　　　var tmpimg=img.cloneNode();
　　　　tmpimg.src="data:image/jpeg;base64,"+imgdata[i];
　　　　document.getElementById('div1').appendChild(tmpimg);
　　}
}

因爲一次性請求的資源多，因此沒必要等待全部資源都返回在進行處理，能夠根據readyState狀態值監測響應狀態，當readyState爲3時，就對接收到的部分數據進行處理。

優勢：一次能夠請求多個資源，提高性能

缺點：獲取的資源不能被瀏覽器緩存

發送數據

XHR

GET方式受瀏覽器的最大URL尺寸限制，當上傳數據量較大時，用POST方式。

對於少許數據，GET方式會更快，由於一個GET請求往服務器只發送一個數據包，而一個POST請求，至少要發送兩個數據包，一個裝載頭信息，一個裝載 POST正文。

數據格式

服務器端與客戶端進行數據傳輸時，數據的格式會影響其下載速度和解析速度，通常來講JSON形式和字符分隔的自定義格式是最好的。XML、HTML通常會增長數據量，解析較慢。

XML

最開始是流行 XML做爲數據格式，當時的優點：極佳的通用性-服務端和客戶端都能完美支持。格式嚴格，易於驗證。

JSON