關於網頁腳本代碼結構的再思考

　　在不少說法中，老是建議將咱們的javascript腳本加載在網頁的最後，並用外部文件的形式，然而事實並非這樣，外掛的文件最好不要太多，腳本結構代碼自己纔是值得咱們思考的問題。咱們須要從新思考咱們撰寫的腳本的執行力，並把更優秀的javascript開發思路融入到咱們的開發中。

      我在讀完了幾篇關於javascript和jQuery的性能優化的文章以後，才恍然大悟，我之前所作的不少代碼結構優化，最終只是讓烏徒幫顯得臃腫，因而從新設計腳本代碼的結構，不管怎麼樣，烏徒幫如今的網頁打開顯得更加流暢了。

      一、加載和執行

      加載是瀏覽器獲取代碼，而執行是瀏覽器解析腳本並操做DOM。我之前忽視的一個問題的加載和執行的區別，加載的少並不必定提升速度和性能，只有執行能力決定網頁的打開速度，固然加載確實是佔到了一部分因素。在之前，咱們習慣將幾乎全部的腳本代碼用文件外掛的形式，並將javascript文件放在網頁的最後進行加載。我想說的是，1、並不是全部的腳本都要用文件外掛，2、並不是全部的都要放在頁面底部。烏徒幫因爲要兼容HTML5，所以必須在頭部加載HTML5相關的代碼。既然整個頁面都要用到jQuery庫，我又將jQuery庫和modernizr合併，用一個文件加載在頭部。

      在javascript和jQuery優化的文章中有這麼一點：咱們能夠提早聲明函數變量，在網頁加載過程當中能夠隨時使用，前提是對象必須已經加載好。例如咱們但願某個按鈕button#show點擊時提示頁面沒有加載完，咱們在頭部先定義一個函數，在這個<button>以後加是一段腳本代碼，固然，提示的代碼太少，咱們不用再頭部先定義。

      這種跟隨文檔加載而進行的腳本對網頁中須要即時就有的效果很是明顯，舉一個很簡單的例子，咱們但願某一組<a>標記點擊時不要進入到一個新的網址，而是觸發其餘的動做，那麼咱們直接在這一組<a>結束以後，給他們帶上click,function(e){e.preventDefault()的效果，你以想象，若是你將這段代碼寫在文檔底部的外掛js文檔中，更不幸的是寫在$(document).ready()中，那麼這段代碼首先須要頁面加載到該文檔，該文檔加載到該段代碼，同時頁面代碼已經加載完整，才能夠被執行preventDefault()，若是你的頁面代碼很長的話，在頁面加載出<a>而沒有加載到這個js文件時，點擊<a>就會出現新的跳轉。

      還有一個問題就是，外掛的js文檔要加載，須要一次服務器請求，雖然如今的瀏覽器支持的請求數成倍增長，然而若是成千上萬的人一塊兒訪問網站，請求給服務器形成的壓力也是可想而知的，請求的時間若是再算在內的話，將腳本直接包含在網頁底部或許能節省一些時間。

      二、頭部定義的函數並不會執行，直到被調用時

      咱們在頭部創建了一些js函數庫，但它們並不會當即執行(通俗地說js只有在它被用到的時候纔會被執行)，要知道執行會花時間，而存儲這些函數到內存的時間更少。咱們加載這些函數的時間和存儲到內存的時間總和也可能不會超過執行的時間。你能夠將這些函數所有放到網頁底部的外掛文檔中，可是就會遇到像上面所講的加載問題。

      三、內存變量比獲取DOM節點快的多

      之前我習慣獲取一個數組的長度並用在for循環中，例如for($i = 0;$i < $a.length;$i ++)，如今才注意到，$a.length會進行一次內部計算，沒循環一次就計算一次，優化後的for($i = 0,$len = $a.length;$i < $len;$i ++)就會好不少，將$a.length獲取的值存儲在$len變量裏，只進行了一次length運算，不是節約了不少的時間和空間嗎。正是因爲這種思路，咱們須要從新檢查本身的代碼，是否能將更多的這種要查找或操做DOM的放在一個變量中。

      四、隱藏和搬遷

      若是你但願你的網頁加載的更快，搬遷也是另一套思路，不要把從其餘服務器加載的代碼放在網頁中間，那樣會讓網頁卡在那個地方，把這些從外部加載的代碼先放在網頁的底部，隱藏起來，等網頁可以正常顯示之後，再把它們搬遷到它們應該呆的位置。很簡單的例子就是谷歌廣告，若是在網頁文章的開頭加載谷歌廣告，若是受到網速的影響，網頁會卡在這個地方，等到廣告代碼建立DOM節點結束以後，才一會兒把文章內容顯示出來。搬遷的思路是，在文章開頭留出一塊和廣告大小相同的區域（甚至不留，增長出現效果），用一張小圖片或文章提示加載廣告，把廣告加載在後面，等加載好以後，用appendTo或其餘移動代碼，將廣告移動過去。

      經過搬遷的方法，烏徒幫很好的解決了評論框加載慢引發的網頁顯示不全的缺點。

      五、將不一樣語言的優化思路運用到其餘地方

      咱們能夠把一些思路運用到php裏面，直接獲取數據要比經過各類函數調用來的快，不必定要使用函數，雖然那樣更美觀。一次性將數據從數據庫中拿出來，保存在變量中，而後經過php程序處理變量中的值進行排序或篩選。將數據先保存在一個變量中，能夠重複使用它。

      性能的優化是網頁打開速度和執行效率的一個工做，在wordpress中，網絡上不少文章給出了建議，但不少建議從某種意義上講只是針對訪問，而沒有涉及到加載和執行。這或許是咱們之後應該考慮的。

本文原文轉載自：烏徒幫 > 技術中心 > 網站性能 > 關於網頁腳本代碼結構的再思考

原文連接：關於網頁腳本代碼結構的再思考