通過wp_enqueue_script優化WordPress中JavaScript在插件、主體中加載位置（轉）

下面先簡單介紹幾個相關的優化 JavaScript 的 WordPress 插件及特點，然後示範如何處理一些特殊情況。

這個插件将 Minify 引擎整合到 WordPress 中。一經啟用，該插件就能夠合并和壓縮你的 JS 和 CSS 檔案來提高頁面的加載速度。

WP Minify 能夠抓取生成的 WordPress 頁面中的 JS/CSS 檔案，将檔案清單傳遞給 Minify 引擎。Minify 引擎處理後傳回一個加強、精簡并經過壓縮的 JavaScript 或樣式表檔案（CSS），由 WP Minify 将其替換到 WordPress 頁頭中。

其主要特點是：

易于使用；

對 JavaScript、CSS 和 HTML 均有效；

提供了調試工具；

能夠處理外部 JS 和 CSS 檔案；

能夠排除指定 JS 和 CSS 檔案；

能夠指定處理後的 JS 和 CSS 檔案的位置（頁頭或頁尾，甚至别的地方）；

可對處理後的 JS 和 CSS 檔案添加過期時間等。

也許将來 WP Minify 更新後會解決不相容問題，但是我等不及了。後來找到了 Autoptimize 這個具有類似功能的插件，而且這個插件操作更簡單。

Autoptimize 整合、精簡并壓縮所有的 JS 和 樣式表（CSS）檔案，增加緩存過期标志。然後将樣式表檔案放到頁頭（同樣是為了提高頁面加載效率），并将 JS 檔案放到頁尾。它還能夠精簡 HTML 代碼，給你的頁面瘦身。不過我覺得給 HTML 頁面瘦身作用不是很明顯，隻要你的伺服器開啟了 Gzip 壓縮特性就沒必要這麼做了。

預設情況下，Autoptimize 會按照上面介紹的方式優化所有 HTML/CSS/JavaScript 。

我個人覺得，Autoptimize 是比 WP Minify 更好用的 WordPress 優化插件。

這個插件寫的非常簡潔。我檢視了源代碼，完成任務的代碼隻有 6 個 WordPress 函數（見下文），也就是 6 行。是以這個插件從建立之後就怎麼更新過。我一開始就因為見它最後更改日期還停留在2009年9月22日，是以把它給忽略了。

根據 JavaScript to Footer 的源代碼，它使用下面的 6 行代碼來完成工作：

如果有需要，可以在某個特定 WordPress 模闆的 <code>wp_head()</code> 函數前加入下面的代碼，将上述過程逆轉過來，也就是使之失效，恢複成了本來的加載位置：

當然隻是說某些特定的頁面模闆，如果是所有頁面，那幹脆禁用該插件好了 

相信對于大多數 WPer 來說，看了前面的介紹就知道如何選擇自己需要的優化插件并合理使用了。無非是基于以下三個方面來考慮：

你的頁面模闆中是否使用了大量的 HTML 注釋、空格、空行等标記？如果沒有，那麼你就不需要為了一點點（開啟 Gzip 壓縮時通常 1% 以下）的帶寬節省而使用 HTML 精簡功能；

你的頁面中是否加載了多個 CSS 樣式表檔案？如果沒有，你也不需要通過插件來精簡和整合 CSS 樣式表，手工精簡和整合 CSS 樣式表比使用插件更加簡單有效；

基于 WordPress 預設會在頁頭中加載 JavaScript，一般的 WordPress 網站都需要對 JS 的加載位置進行優化。但是如果你大部分的頁面也都需要在頁面頭部加載 JS 以保證不會出現 JS 失效的情況，那你就不能進行這樣的優化了。

在我看來，WP Minify 就不需要了，原因在前面已經說過了。那麼剩下的 Autoptimize 和 JavaScript to Footer 可以選用其一或者兩者配合使用（如果是配合使用，當然是使用前者的 HTML 和 CSS 精簡/整合功能，而使用後者的 JS 位置控制功能，因為後者就這一個功能）。我隻需要控制 JS 的加載位置，是以就選擇了 JavaScript to Footer。因為我的頁面中也就四五個 JS 檔案，又是放到頁尾加載，我覺得沒必要進行整合。

雖然将 JavaScript 檔案都放到頁面末尾加載對于頁面加載速度很有幫助，但是請注意，所謂頁面末尾指的是在 WordPress 的 wp_footer() 函數中調用，這個函數通常剛好位于頁面的 &lt;/body&gt; 标簽前面（當然是末尾了）。

有時候我們可能會在 wp_footer 函數出現之前就需要用到某些 JavaScript，比如 jquery.js 檔案。

<code>wp_enqueue_script()</code> 與 <code>wp_print_scripts()</code> 的差別是：<code>wp_enqueue_script()</code> 是告訴 WordPress “我在這個頁面上需要用到某個 JavaScript 檔案，你可要記得加載啊”。WordPress 預設在 wp_head() 中處理，而我們改為在 wp_footer() 中處理。<code>wp_print_scripts()</code> 則直接在你使用此方法的位置輸出需要的 JavaScript 檔案，而不是加入到 WordPress 的處理任務中。

如果我們在頁面的中間使用，

直接輸出了 jquery.js 檔案（通常是其壓縮版本 jquery.min.js），那麼即使其它的插件或者什麼東西使用，

告訴 WordPress 需要加載 jquery.js，WordPress 在 wp_footer() 中處理的時候也會先檢查前面是不是已經有了，如果有了就不會再重新加載一次。

在 WordPress 中加載 JavaScript 最好使用 <code>wp_enqueue_script()</code> 函數以減少問題提高效率。如果不是有這些特殊情況要處理，使用 Autoptimize 顯然比較好，它全面完成任務而且使用簡單。

但是如果使用的主題本身已經很簡潔了，那麼 JavaScript to Footer 更簡單高效，也就更好。

本文轉自黃聰部落格園部落格，原文連結：http://www.cnblogs.com/huangcong/archive/2013/03/10/2952405.html，如需轉載請自行聯系原作者