首頁 > 開發者 > JavaScript
標籤：
最近在JavaScript效能方面有所感悟，把我的經驗分給大家：
說到JavaScript，就不得不說它的代碼的運行速度——
在我初學JavaScript的時候，只是覺得它是一個很強大的指令碼。漸漸的，在做一些大的網站的項目的時候，卻發現，代碼執行的卻異常的慢（儘管JavaScript用的是V8引擎），任然不能滿足我的需求。這時候，我才慢慢的關注效能這一名詞。在以前，個人總是喜歡在網上搜一些好的外掛程式，並把它用到網站的建設工作當中。那麼問題來了，在大量的外掛程式的使用當中，網頁總是要運行很久，處於很長時間的空白，這時候我發現JavaScript執行代碼的速度越來越慢。究其緣由，那就是網頁在渲染的過程前，一直在執行JavaScript代碼的編譯，以至於讓網頁長時間處於空白狀態。那麼這種問題的來源是什嗎？怎麼解決呢？
在引用<script>標籤的時候，我們習慣性的把它放在<head>標籤之內。這樣的做法，只是在最初接觸JavaScript，或者說小的項目的時候可以這樣做。個人覺得，做網頁就是要很好的實現與使用者的互動，如果像上述過程一樣，使用者長時間看的是一片空白的頁面，會導致什麼樣的後果可想而知。為了提高JavaScript代碼編譯的運行速度，提升JavaScript的效能，(1)我推薦把<script>標籤寫在</body>之前，如果有很多的js,我建議用把包工具（雅虎YUI）合并一下.(2)在IE4+ Firefox3.5 的版本下，用代有defer的屬性，像這樣：<script defer></script> ,這樣做的原理是讓<script>標籤總在onload事件執行前調用，原因不用深究。(3)動態建立JavaScript （有興趣的可以試試，不推薦）。
下面說到一個很實用，又簡單，提升JavaScript效能的方法：‘局部變數’
這裡必須要說一下在JavaScript裡面，有四種資料存取位置：1.直接量 2.變數 3.數組元素 4.對象成員。
通常來講，我們可以通過把常用的對象成員、數組元素、跨域變數儲存在局部變數中來改善JavaScript效能，因為局部變數訪問的速度更快。為了便於理解，還是敲兩段代碼吧！
function myLoop1(){
for(var count=0;count<99999;count++){
$(‘#idName‘).innerHTML + = ‘A‘;
}
}
說明一下這段代碼：每一次逐一查看id是idName的元素時，該元素一共被訪問了兩次，一次是讀取他的innerHTML，另一次是重寫idName的值。
那麼怎麼才算提升效能的做法呢？看如下代碼
function myLoop2(){
var show=‘‘;
for(var count=0;count<99999;count++){
show+ = ‘A‘;
}
$(‘#idName‘).innerHTML += show;
}
實驗證明：在所有瀏覽器下，myLoop2的運行要比myLoop1，快幾十倍，在IE6下，更是快155唄。
那麼為什麼這樣做會快這麼多呢。我簡單解釋一下：JavaScript實際上包括了ECMAScript、DOM、BOM,不要以為三者是和諧共處的，它們互相溝通可是要過“路費的”。所以，我們要儘可能的把運算留給ECMAScript這一端，減少訪問DOM的次數。
以後還有效能方面的問題還會分享給大家，不喜勿噴哦！
淺談JavaScript效能
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
