如果您对JavaScript代码优化和部署——“性能和部署”的注意要点和js代码优化的方法感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解JavaScript代码优化和部署——“性能和部署”的注

如果您对JavaScript 代码优化和部署——“性能和部署”的注意要点和js代码优化的方法感兴趣，那么这篇文章一定是您不可错过的。我们将详细讲解JavaScript 代码优化和部署——“性能和部署”的注意要点的各种细节，并对js代码优化的方法进行深入的分析，此外还有关于JavaScript Ajax与Comet——“XMLHttpRequest2级”的注意要点、JavaScript Ajax与Comet——“XMLHttpRequest对象”的注意要点、JavaScript Ajax与Comet——“跨源资源共享”的注意要点、JavaScript Ajax与Comet——“进度事件”的注意要点的实用技巧。

本文目录一览：

• JavaScript 代码优化和部署——“性能和部署”的注意要点（js代码优化的方法）
• JavaScript Ajax与Comet——“XMLHttpRequest2级”的注意要点
• JavaScript Ajax与Comet——“XMLHttpRequest对象”的注意要点
• JavaScript Ajax与Comet——“跨源资源共享”的注意要点
• JavaScript Ajax与Comet——“进度事件”的注意要点

JavaScript 代码优化和部署——“性能和部署”的注意要点（js代码优化的方法）

注意作用域

避免全局查找

function updateUI () {
    var images = document.getElementsByTagName("img");
    for (var i = 0, len = images.length; i < len; i++) {
        images[i].title = document.title + " image " + i;
    }
    var msg = document.getElementById("msg");
    msg.innerHTML = "Update complete";
}

以上代码应该修改如下：

function updateUI () {
    var doc = document; //doc
    var images = doc.getElementsByTagName("img");
    for (var i = 0, len = images.length; i < len; i++) {
        images[i].title = doc.title + " image " + i; //doc
    }
    var msg = doc.getElementById("msg"); //doc
    msg.innerHTML = "Update complete";
}

避免with语句

必须使用with语句的情况很少，因为它主要用于消除额外的字符。

使用正确方法

避免不必要的属性查找

算法的复杂度是使用O符号来表示的，最简单快速的算法是常熟值O(1)。

使用变量和数组要比访问对象上的属性更有效率。

var query = window.location.href.substring(window.location.href.indexOf("?"));

上面的代码需要6次属性查找，应该改为：

var url = window.location.href;
var query = url.substring(url.indexOf("?"));

上面的代码则减少为4次属性查找。

优化循环

for (var i = 0; i < Things.length; i++) {
    Things[i]
};
for (var i = Things.length - 1; i >= 0; i--) {
    Things[i]
};

应该才去上面第二种写法。

var id = Things.length - 1;
if (i > -1) {
    do {
        Things[i];
    } while (--i >= 0);
}

或者把循环改成后测试循环。

展开循环

使用Duff装置

其他

• 避免双重解释

• 用原生方法C或C++等

• 用Switch代替if-else

• 位操作符代替布尔运算和算数运算

最小化语句数

多个变量声明

var count = 5;
var color = "red";
var value = [21, 3, 21, 4];

var count = 5,
    color = "red",
    value = [21, 3, 21, 4];

应该采用下面的方法

使用数组和对象字面量语法

var values = new Array();
values[0] = 123;
values[1] = 456;
var obj = new Object();
obj.name = "Oli";
obj.age = 18;

var values = [123, 456];
var obj = {
    name: "Oli",
    age: 18
};

应该采用下面的方法

优化DOM交互

最小化现场更新

使用fragment方法更新DOM

使用innerHTML

var list = document.getElementById("myList"),
    html = "",
    i;
for (var i = 10; i >= 0; i--) {
    html = html + "<li>listing...</li>";
};
list.innerHTML = html;

类似fragment方法，要避免以下写法：

var list = document.getElementById("myList"),
    i;
for (var i = 10; i >= 0; i--) {
    list.innerHTML = list.innerHTML + "<li>listing...</li>";
};

使用事件代理

任何可以冒泡的事件都可以在祖先节点上处理事件；

注意HTMLCollection

var imgs = document.getElementsByTagName("img");
for (var i = 0, len = imgs.length; i < len; i++) {
    //processing...
};

---

部署

构建过程

将每个对象或自定义类型分别放在单独的文件中。

将代码分离称多个文件只是为了提高可维护性，并非为了部署。

要进行部署的时候，需要将这些源代码合并为一个或几个归并文件。

Ant构建工具（http://ant.apache.org）

验证

用JSLint（http://www.jslint.com）

压缩

文件压缩

使用YUI压缩器（http://yuilibrary.com/projects/yuicompressor）

HTTP压缩

在Apache Web服务器中可以用下面两个模块进行HTTP压缩：mod_gzip和mod_deflate

JavaScript Ajax与Comet——“XMLHttpRequest2级”的注意要点

并非所有的浏览器都完整的实现了XMLHttpRequest 2 级的规范， 但是所有的浏览器都实现了它部分的规范。

FormData

• FormData类型

• append()向其添加数据，包含两个参数：键和值；

如：

var data = new FormData();
data.append("name", "oliver");

也可以用表单元素的数据预先想其中填入键值对：

var data = new FormData(document.forms[0]);

它是为序列化表单以及创建于表单格式相同的数据提供了遍历:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            console.log(xhr.responseText);
        } else {
            console.log("error");
        }
    }
};
xhr.open("post", "postexample.php", true);
var form = document.getElementById("form1");
xhr.send(new FormData(form));

它的方便之处在于不用明确的在XHR对象上设置请求头部。

超时设定

IE8+唯一支持的超时设定事件，XHR对象的ontimeout事件。XHR对象的timeout设定超时时间，单位是毫秒数。这些设定要方法open之后，send之前。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
            console.log(xhr.responseText);
        } else {
            console.log("error");
        }
    }
};
xhr.open("get", "getexample.php", true);
xhr.timeout = 1000;
xhr.ontimeout = function () {
    alert("Request did not return in a second.");
};
xhr.send(null);

overrideMimeType()方法

用于重写XHR响应的MIME类型。它能强迫服务器返回的数据类型给些为本方法提供的类型。使用方法：
在open之后，send之前。

xhr.open("get", "getexample.php", true);
xhr.overrideMimeType("text/xml");
xhr.send(null);

JavaScript Ajax与Comet——“XMLHttpRequest对象”的注意要点

在IE5中，XHR对象是通过MSXML库中的ActiveX对象实现的。在IE中可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MXSML.XMLHttp.6.0。

适用于IE7之前的浏览器的代码：

function createXHR() {
    if (typeof arguments.callee.activeXString != "string") {
        var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
            i, len;
        for (var i = 0, len = versions.length; i < len; i++) {
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            } catch (e) {
                //
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
}

IE7之后的版本和其他浏览器都会使用下面的函数来创建：

var xhr = new XMLHttpRequest();

兼容代码：

function createXHR() {
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    } else if (typeof ActiveXObject != "undefined") {
        if (typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"],
                i, len;
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (e) {
                    //
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    } else {
        throw new Error("No XHR Object available.");
    }
}

兼容代码的应用：

var xhr = new createXHR();

XHR的用法

在使用XHR对象时，要调用的第一方法时

• open（），它接收三个参数：要发送请求的类型，请求的URL和表示是否异步发送请求的布尔值。

如：

xhr.open("get", "note.txt", false);

open()表示启动一个请求以备发送，send()方法才是真正的发送；

要发送特定的请求，要向下面一样调用

• send()方法：

如：

xhr.open("get", "note.txt", false);
xhr.send(null);

XHR从服务器返回后，发生变化的属性，即保存服务器相应数据的属性为：

• responseText:作为响应主体被返回的文本

• responseXML:如果响应类型是"text/xml"和"application/xml"，则保存着响应数据的XML DOM文档

• status：响应的HTTP状态

• statusText：HTTP状态的说明

一般来说，可以将HTTP状态吗为200作为成功标志，此时responseText属性内容准备就绪，responseXML也应该能够访问。此外状态吗为304表示请求的资源没有被修改，可以直接使用浏览器中缓存的版本。

完整代码如下：

var xhr = new XMLHttpRequest();

xhr.open("get", "note.txt", false);
xhr.send(null);

if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    document.write(xhr.responseText);
} else {
    alert("Request was unsuccessful: " + xhr.status);
}

要注意的是：

我们在多数情况下都要发送异步请求的，才能让js继续执行而不必等待响应。

可以检测XHR对象的readyState属性，该属性表示请求/响应过程的当前活动阶段。这个属性可取的值如下：

• 0：未初始化。尚未调用open()；

• 1：启动。已经调用open()但未调用send()；

• 2：发送。已经调用send()但尚未接收到响应；

• 3：接收。已经接收到部分响应数据；

• 4：完成。已经接收到全部响应数据，而且可以在客户端中使用；

具体格式如下：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
            //......
        }
    }
};
xhr.open("get", "user.json", true);
xhr.send();

举个例子：

json文件：

[{
    "name": "oliver",
    "age": 18,
    "user": true
}, {
    "name": "troy",
    "age": 26,
    "user": true
}]

dom：

<pre id="pre"></pre>
<button id="btn">insert</button>

js：

var btn = document.getElementById("btn"),
    pre = document.getElementById("pre"),
    obj = null;

btn.onclick = function() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
                console.log(xhr.responseText);
                obj = JSON.parse(xhr.responseText);
                pre.innerHTML = obj[1].name; //troy
            }
        }
    };
    xhr.open("get", "user.json", true);
    xhr.send();
};

当点击btn时，pre部分显示获取的json文件中的部分信息。

另外在接收到响应之前还可以调用

• abort()方法来取消异步请求。

如下所示：

xhr.abort();

在终止请求之后，还应该对XHR对象进行解引用操作。由于内存原因，不建议重用XHR对象。

HTTP头部信息

XHR对象提供了操作请求头部和响应头部信息的方法。 在默认情况下，在发送XHR请求同时，还会发送下列头部信息：

• Accept： 浏览器能够处理的内容类型

• Accept - Charset： 浏览器能够显示的字符集

• Accept - Encoding: 浏览器能够处理的压缩编码

• Accept - Language: 浏览器当前设置的语言

• Connection: 浏览器与服务器之间连接的类型

• Cookie: 当前页面设置的任何Cookie

• Host: 发送请求的页面所在的域

• Referer: 发送请求的页面的URI

• User - Agent: 浏览器的用户代理字符串

使用

• setRequestHeader()方法可以设置自定义的请求头部信息。

这个方法接收两个参数： 头部字段名和头部字段值。 要成功发送请求头部信息， 必须在调用open（） 方法之后且send（） 方法之前调用它。 建议使用自定义的头部名称。如：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
        if ((xhr.status >= 200 && xhr.status <= 300) || xhr.status == 304) {
            //......
        }
    }
};
xhr.open("get", "user.json", true);
xhr.setRequestHeader("MyHeader", "MyValue"); //这里定义
xhr.send();

另外，调用XHR对象的getResponseHeader()方法传入头部字段名称，可以取得相应的响应头部信息。而调用getAllResponseHeaders()方法则可以取得一个包含所有头部信息的长字符串：

var myHeader = xhr.getResponseHeader("MyHeader");
var allHeaders = xhr.getAllResponseHeaders();

GET请求

用encodeURIComponent()编码后的格式如下：

xhr.open("get", "example.php?name1=value1&name2=value2", true);

下面的函数可以辅助向现有的URL的末尾添加查询字符串参数：

function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&"); //检查URL是否包含问号（以确定是否已经有参数存在），没有就加上问好，否则添加一个和号
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
}

举个例子：

var url = "example.php";
url = addURLParam(url, "name", "oli");
url = addURLParam(url, "book", "js");
xhr.open("get", url, false);

POST请求

POST请求通常用于向服务器发送应该保存的数据

使用post提交，要设置头部属性Content-type。如果不设置，会出现数据无法解码和获取等问题。

JavaScript Ajax与Comet——“跨源资源共享”的注意要点

通过XHR实现Ajax通信的一个主要限制，来源于跨域安全策略。在默认情况下，Ajax只能访问与包含它的页面位于同一个域中的资源。但是有时也需要一些跨域的请求。为了解决这个问题，现在的浏览器采用CORS（Cross-Origin Resource Sharing,跨域资源共享）策略来实现。CORS是W3C的一个工作草案，定义了必须访问跨源资源时浏览器与服务器之间如何进行沟通。这个策略的基本思想是使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或响应的成功和失败。注意请求和响应都不包含cookie信息。

IE对CORS的实现

IE8中引入了XDR（ XDomainRequest） 类型， 这个对象与XHR类似， 但是能实现安全可靠的跨域通信。 XDR对象的安全机制部分实现了W3C的CORS规范。 以下是XDR与XHR的不同之处：
cookie不会随请求发送， 也不会随响应返回

只能设置请求头部信息中的Content - Type字段

不能访问响应头部信息

只支持GET和POST请求

XDR对象使用方法： 创建一个实例， 调用open方法， 调用send方法。 open方法只接受两个参数： 请求的类型和URL。 所有XDR的请求都是异步的。 请求返回后会触发load事件， 响应数据保存在responseText属性中。

var xdr = new XDomainRequest();
xdr.onload = function() {
    alert(xdr.responseText);
};
xdr.open("get", "http://www.somewhere-else.com/page/");
xdr.send(null);

在跨域请求上唯一可以获得响应的信息就是错误本身， 因此确定响应失败的方式就是使用onerror事件。 要放到open之前使用。

xdr.onerror = function() {
    alert("an error occurred!");
}

在请求返回之前， 可以调用取消命令abort（） 方法：

xdr.abort(); //终止请求

与XHR一样， XDR对象也支持timeout属性以及ontimeout事件处理程序。

xdr.timeout = 1000;
xdr.ontimeout = function() {
    alert("late!")
}

将这些处理程序添加到open之前才可以哦。
为了支持post请求， XDR对象提供了contentType属性， 用来表示发送数据的格式： 在open之后， send之前设置

xdr.contentType = "application/x-www-form-urlencoded";

其他浏览器对CORS的实现

使用标准的XHR对象并在open()方法中传入绝对URL即可：

var xhr = new XMLHttpRequest();
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        document.getElementById("content").innerHTML = xhr.responseText;
    } else {
        console.log("error");
    }
};
xhr.open("get", "http://www.somewhere-else.com/page/", true);
xhr.send();

其他的浏览器都通过XMLHttpRequest对象实现了对CORS的原生支持。但是在跨域请求的时候有以下的限制：

• 不能使用setRequestHeader()设置自定义头部。

• 不能接受和发送cookie

• 调用getAllResponseHeaders()方法总会返回空字符串。

无论是同源请求还是跨域请求，对于本地资源最好使用相对URL，在访问远程资源时再使用绝对URL。

Preflighted　Ｒequests

透明服务器验证机制，支持开发人员使用自定义的头部，get和post之外的方法，以及不同类型的主题内容。这种请求使用OPTIONS方法，发送下列头部：

• Origin：与简单的请求相同

• Access-Control-Request-Method:请求自身使用的方法

• Access-Control-Request-Headers:(可选)自定义头部信息，多喝头部逗号分隔。

发送请求之后，服务器决定是否允许这种类型的请求。服务器通过响应发送如下的头部与浏览器进行沟通：

• Access-Control-Allow-Origin:与简单的请求相同

• Access-Control-Allow-Methods:允许的方法，多个方法以逗号分隔

• Access-Control-Allow-Headers:允许的头部，多个头部以逗号分隔

• Access-Control-Max-Age:应该将这个Preflight请求缓存多长时间（以秒表示）

带凭据的请求

通过将withCredentials属性设置为true，可以指定特定的请求应该发送凭据。如果服务器接收带凭据的请求，会用下面的HTTP头部响应

Access-Control-Allow-Credentials:true

跨浏览器的CORS

function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined") {
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}
var request = createCORSRequest("get", "http://somewhere-else.com/page/");
if (request) {
    request.onload = function() {
        //request.responseText
    };
    request.send();

}

JavaScript Ajax与Comet——“进度事件”的注意要点

有以下6个进度事件：

• loadstart: 在接收到响应数据的第一个字节时触发。

• progress: 在接收响应数据期间持续的触发

• error: 在请求发生错误时触发

• abort: 在因调用abort() 方法而终止连接时触发

• load: 在接收到完整的响应数据时触发

• loadend: 在通信完成或者触发error， abort， load事件后触发。

现在所有的主流浏览器都支持load事件， 前五个除了IE其他的都支持

load事件

下面是使用示例：

xhr.onload = function() {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful:" + xhr.status);
    }
}

放到open方法之前。

如：

var xhr = new XMLHttpRequest();
// xhr.onreadystatechange = function () {
//     if (xhr.readyState == 4) {
//         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
//             console.log(xhr.responseText);
//         } else {
//             console.log("error");
//         }    
//     }
// };
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        console.log(xhr.responseText);
    } else {
        console.log("error");
    }
};
xhr.open("get", "getexample.php", true);
xhr.send(null);

响应接收完毕后将触发load事件，因此也就没有必要去检查readyState属性了。

progress事件

onprogress事件处理程序会接收一个event对象，其target属性是XHR对象，但包含着三个额外属性：

• lengthComputable

• position

• totalSize

其中lengthComputable表示进度信息是否可用的布尔值，position表示已经接收的字节数，totalSize表示根据Content-Length响应头部确定的预期字节数。

根据这些信息，就可以创建一个进度指示器：

xhr.onprogress = function () {
    if (event.lengthComputable) {
        document.getElementById("status").innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes.";
    }
};

要注意的是position已改为loaded;totalSize已改为total。

关于JavaScript 代码优化和部署——“性能和部署”的注意要点和js代码优化的方法的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于JavaScript Ajax与Comet——“XMLHttpRequest2级”的注意要点、JavaScript Ajax与Comet——“XMLHttpRequest对象”的注意要点、JavaScript Ajax与Comet——“跨源资源共享”的注意要点、JavaScript Ajax与Comet——“进度事件”的注意要点等相关知识的信息别忘了在本站进行查找喔。

本文标签：

• JavaScript代码优化
• 网站性能提升
• 代码部署策略
• SEO最佳实践