介紹如何使用你的JavaScript

申請免費(fèi)試用、咨詢電話：400-8352-114

JavaScript如今極點(diǎn)重要。一些網(wǎng)站運(yùn)用JavaScript來添加魅力;如今的許多Web應(yīng)用程序依托它;其間一些甚至是完全用JavaScript編寫而成的。我在本文中將指出一些重要的規(guī)則，引見如何運(yùn)用你的JavaScript、運(yùn)用哪些東西以及你將從中得到什么長處。

　　包管代碼盡量簡練

　　不要什么都依托JavaScript。不要編寫重復(fù)性的腳本。要把JavaScript當(dāng)作糖塊東西，只是起到美化作用。別給你的網(wǎng)站添加許多的JavaScript代碼。只需必要的時(shí)分用一下。只需確實(shí)能改善用戶領(lǐng)會的時(shí)分用一下。

　　盡量減少DOM訪問

　　運(yùn)用JavaScript訪問DOM元素很簡略，代碼更簡略閱讀，可是速度很慢。下面引見幾個(gè)要害：束縛運(yùn)用JavaScript來修飾網(wǎng)頁布局，把對準(zhǔn)訪問元素的引用緩存起來。有時(shí)，當(dāng)你的網(wǎng)站依托許多的DOM改動時(shí)，就應(yīng)該思索束縛你的符號。這是改用HTML5、拋棄那些正本的XHTML和HTML4的一個(gè)充分理由。你可以檢查DOM元素的數(shù)量，只需在Firebug插件的控制臺中輸入：document.getElementsByTagName('*').length。

　　緊縮代碼

　　要供應(yīng)始末緊縮的JavaScript頁面，最有用的方法就是先用JavaScript緊縮東西對你的代碼緊縮一下，這種緊縮東西可以緊縮變量和參數(shù)稱謂，然后供應(yīng)因而獲得的代碼，運(yùn)用了gzip緊縮。

　　是的，我沒有緊縮我的main.js，但你要檢查有沒有未經(jīng)緊縮的任何jQuery插件，別忘了緊縮。下面我列出了緊縮方面的幾個(gè)方案。

　　◆ YUI緊縮東西(jQuery開發(fā)團(tuán)隊(duì)就運(yùn)用它)，初學(xué)者攻略

(http://www.slideshare.net/nzakas/extreme-JavaScript-compression-with-yui-compressor)、第二攻略 (http://vilimpoc.org/research/js-speedup/)和官方網(wǎng)站(http://developer.yahoo.com/yui/compressor/)。

　　◆ Dean Edwards Packer(http://dean.edwards.name/packer/)

　　◆ JSMin(http://crockford.com/JavaScript/jsmin)

　　GZip緊縮：其背面的主見是，縮短在瀏覽器和服務(wù)器之間傳送數(shù)據(jù)的時(shí)間。縮短時(shí)間后，你得到標(biāo)題是Accept-Encoding: gzip,deflate的一個(gè)文件。不過這種緊縮方法有一些缺點(diǎn)。它在服務(wù)器端和客戶端都要占用處置器資源(以便緊縮寬和緊縮)，還要占用磁盤空間。

　　避免eval()：當(dāng)然有時(shí)eval()會在時(shí)間方面帶來一些功率，但運(yùn)用它肯定是差錯(cuò)的做法。eval()引起你的代碼看起來更臟，并且會逃過大多數(shù)緊縮東西的緊縮。

　　加快JavaScript裝入速度的東西：Lab.js

　　有許多超卓的東西可以加快JavaScript裝入的速度。值得一提的一款東西是Lab.js。

　　憑仗LAB.js(裝入和阻止JavaScript)，你就可以并行裝入JavaScript文件，加快總的裝入進(jìn)程。此外，你還可以為需求裝入的腳本設(shè)置某個(gè)按次，那樣就能包管依托聯(lián)絡(luò)的完整性。此外，開發(fā)者聲稱其網(wǎng)站上的速度提升了2倍。

　　運(yùn)用恰當(dāng)?shù)腃DN

　　如今許多網(wǎng)頁運(yùn)用內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)。它可以改善你的緩存機(jī)制，由于每個(gè)人都可以運(yùn)用它。它還能為你節(jié)省一些帶寬。你很簡略運(yùn)用ping檢測或運(yùn)用Firebug調(diào)試那些服務(wù)器，以便搞清可以從哪些方面加快數(shù)據(jù)的速度。選擇CDN時(shí)，要照看到你網(wǎng)站那些訪客的方位。記住盡可以運(yùn)用公共存儲庫。

　　面向jQuery的幾個(gè)CDN方案：

　　◆ http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js——谷歌Ajax，關(guān)于更多庫的信息請參閱http://code.google.com/apis/libraries/devguide.html#Libraries。

　　◆ http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js——微軟的CDN

　　•http://code.jquery.com/jquery-1.4.2.min.js——Edgecast (mt)。

　　網(wǎng)頁結(jié)束裝入JavaScript

　　假若你注重用戶，用戶因互聯(lián)網(wǎng)聯(lián)接速度慢而沒有脫離你的網(wǎng)頁，這是一個(gè)非常好的做法。易用性和用戶放在首位，JavaScript放在末位。這或許很痛苦，可是你應(yīng)該有所準(zhǔn)備，有些用戶會禁用JavaScript?？梢栽陬^部分放置需求裝入的一些JavaScript，可是條件是它以異步方法裝入。

　　異步裝入跟蹤代碼

　　這一點(diǎn)非常重要。我們大多數(shù)人運(yùn)用谷歌分析東西(Google Analytics)來獲得統(tǒng)計(jì)數(shù)據(jù)。這很好。如今看一下你把你的跟蹤代碼放在哪里。是放在頭部分?仍是說它運(yùn)用document.write?然后，假若你沒有運(yùn)用谷歌分析東西異步跟蹤代碼，那也只能怪你自己。

　　這就是谷歌分析東西異步跟蹤代碼的姿勢。我們必須招認(rèn)，它運(yùn)用DOM，而不是運(yùn)用document.write，這可以更適合你。它可以在網(wǎng)頁裝入之前檢測到其間一些工作，這非常重要。如今想一想這種情況，你的網(wǎng)頁甚至還沒有裝入，全部用戶都關(guān)閉了網(wǎng)頁。已找到了處置頁面瀏覽量失掉的方法。

　　var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-XXXXXXX-XX']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/JavaScript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();

　　沒有運(yùn)用谷歌分析東西?這不是問題，今天的分析東西供應(yīng)商大多容許你運(yùn)用異步跟蹤。

　　Ajax優(yōu)化

　　Ajax央求對你網(wǎng)站的功用有嚴(yán)重影響。下面我引見關(guān)于Ajax優(yōu)化的幾個(gè)要害。

　　緩存你的ajax

　　先看一下你的代碼。你的ajax可以緩存嗎?是的，它依托數(shù)據(jù)，可是你的ajax央求大多應(yīng)該可以緩存。在jQuery中，你的央求在默許情況下已被緩存，不包括script和jsonp數(shù)據(jù)類型。

　　對準(zhǔn)Ajax央求運(yùn)用GET

　　POST類型央求要發(fā)送兩個(gè)TCP數(shù)據(jù)包(先發(fā)送標(biāo)題，然后發(fā)送數(shù)據(jù))。GET類型央求只需求發(fā)送一個(gè)數(shù)據(jù)包(這可以取決于你的cookie數(shù)量)。所以，當(dāng)你的URL長度不到2K，你又想央求一些數(shù)據(jù)時(shí)，不妨運(yùn)用GET。

　　運(yùn)用ySlow

　　說到功用，ySlow既簡略，又極點(diǎn)有用。它可以對你的網(wǎng)站進(jìn)行評分，閃現(xiàn)哪些方面需求改正，以及應(yīng)注重哪些方面。

　　另外支一招：把你的JavaScript打包成PNG文件

　　幻想一下：把你的JS和CSS添加到圖片的結(jié)束，然后用CSS來裁切，顛末一次HTTP央求來獲得應(yīng)用程序中所需的全部信息。

　　我比來找到了這個(gè)方法。它基本上把你的JavaScript/css數(shù)據(jù)打包成PNG文件。之后，你可以拆包，只需運(yùn)用畫布API的getImageData()。此外，它非常高效。你可以在不縮小數(shù)據(jù)的情況下，多緊縮35%左右。并且是無損緊縮!我得指出，對比較宏大的腳正本說，在圖片指向畫布、讀取像素的進(jìn)程中，你會覺得有“一段”裝入時(shí)間。