《PHP教程：幾個(gè)優(yōu)化WordPress中JavaScript加載體驗(yàn)的插件介紹》要點(diǎn)：
本文介紹了PHP教程：幾個(gè)優(yōu)化WordPress中JavaScript加載體驗(yàn)的插件介紹，希望對您有用。如果有疑問，可以聯(lián)系我們。

WordPress 本身以及主題和插件通常需要加載一些 JavaScript 來實(shí)現(xiàn)某些特殊功能.為了最大限度地保證兼容性,不至于出現(xiàn) JavaScript 失效的情況,所以一般在頁頭加載 JavaScript 文件.但是根據(jù) Yahoo 開發(fā)者論壇的建議,加載 JavaScript 應(yīng)該盡量在頁尾以提高頁面的顯示(響應(yīng)、渲染)速度.本文根據(jù)作者的使用經(jīng)驗(yàn)介紹幾個(gè)相關(guān)插件,并說明如安在某些特殊頁面仍然在頁頭加載 JavaScript.PHP實(shí)例

下面先簡單介紹幾個(gè)相關(guān)的優(yōu)化 JavaScript 的 WordPress 插件及特點(diǎn),然后演示如何處理一些特殊情況.PHP實(shí)例

一. 優(yōu)化JavaScript的WordPress插件
我曾經(jīng)用過 WP Minify、Autoptimize、JavaScript to Footer這三個(gè)插件,下面一一介紹其特點(diǎn).PHP實(shí)例

1. WP Minify
這個(gè)插件將 Minify 引擎整合到 WordPress 中.一經(jīng)啟用,該插件就能夠合并和壓縮你的 JS 和 CSS 文件來提高頁面的加載速度.PHP實(shí)例

WP Minify 能夠抓取生成的 WordPress 頁面中的 JS/CSS 文件,將文件列表傳遞給 Minify 引擎.Minify 引擎處理后返回一個(gè)加強(qiáng)、精簡并經(jīng)過壓縮的 JavaScript 或樣式表文件(CSS),由 WP Minify 將其替換到 WordPress 頁頭中.PHP實(shí)例

其主要特點(diǎn)是：PHP實(shí)例

• 易于使用；
• 對 JavaScript、CSS 和 HTML 均有效；
• 提供了調(diào)試工具；
• 能夠處理外部 JS 和 CSS 文件；
• 能夠排除指定 JS 和 CSS 文件；
• 能夠指定處理后的 JS 和 CSS 文件的位置(頁頭或頁尾,甚至別的地方)；
• 可對處理后的 JS 和 CSS 文件添加過期時(shí)間等.

當(dāng) WordPress 3.1 測試版出來后,我發(fā)現(xiàn) WP Minify 與之不兼容,會(huì)導(dǎo)致網(wǎng)站無法正確加載.PHP實(shí)例

2. Autoptimize
也許將來 WP Minify 升級(jí)后會(huì)辦理不兼容問題,但是我等不及了.后來找到了 Autoptimize 這個(gè)具有類似功能的插件,而且這個(gè)插件操作更簡單.PHP實(shí)例

Autoptimize 整合、精簡并壓縮所有的 JS 和 樣式表(CSS)文件,增加緩存過期標(biāo)志.然后將樣式表文件放到頁頭(同樣是為了提高頁面加載效率),并將 JS 文件放到頁尾.它還能夠精簡 HTML 代碼,給你的頁面瘦身.不過我覺得給 HTML 頁面瘦身作用不是很明顯,只要你的服務(wù)器開啟了 Gzip 壓縮特性就沒必要這么做了.PHP實(shí)例

默認(rèn)情況下,Autoptimize 會(huì)依照上面介紹的方式優(yōu)化所有 HTML/CSS/JavaScript .PHP實(shí)例

我個(gè)人覺得,Autoptimize 是比 WP Minify 更好用的 WordPress 優(yōu)化插件.PHP實(shí)例

3. JavaScript to Footer
這個(gè)插件寫的非常簡潔.我查看了源代碼,完成任務(wù)的代碼只有 6 個(gè) WordPress 函數(shù)(見下文),也就是 6 行.所以這個(gè)插件從創(chuàng)建之后就怎么更新過.我一開始就因?yàn)橐娝詈蟾娜掌谶€停留在2009年9月22日,所以把它給忽略了.PHP實(shí)例

但是它僅僅優(yōu)化 JavaScript 的加載位置,也就是將所有在 WordPress 中正確聲明了的 Javascript 文件都給移到頁面末尾來加載.它沒有對 HTML 代碼和 CSS 樣式表文件作任何處理.PHP實(shí)例

根據(jù) JavaScript to Footer 的源代碼,它使用下面的 6 行代碼來完成工作：PHP實(shí)例

remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);

如果有需要,可以在某個(gè)特定 WordPress 模板的 wp_head() 函數(shù)前加入下面的代碼,將上述過程逆轉(zhuǎn)過來,也就是使之失效,恢復(fù)成了原來的加載位置：PHP實(shí)例

remove_action('wp_footer', 'wp_print_scripts', 5);
remove_action('wp_footer', 'wp_enqueue_scripts', 5);
remove_action('wp_footer', 'wp_print_head_scripts', 5);
add_action('wp_head', 'wp_print_scripts');
add_action('wp_head', 'wp_print_head_scripts', 9);
add_action('wp_head', 'wp_enqueue_scripts', 1);

當(dāng)然只是說某些特定的頁面模板,如果是所有頁面,那干脆禁用該插件好了 :DPHP實(shí)例

二. 使用辦法
相信對于大多數(shù) WPer 來說,看了前面的介紹就知道如何選擇自己需要的優(yōu)化插件并合理使用了.無非是基于以下三個(gè)方面來考慮：PHP實(shí)例

你的頁面模板中是否使用了大量的 HTML 注釋、空格、空行等標(biāo)記?如果沒有,那么你就不需要為了一點(diǎn)點(diǎn)(開啟 Gzip 壓縮時(shí)通常 1% 以下)的帶寬節(jié)省而使用 HTML 精簡功能；
你的頁面中是否加載了多個(gè) CSS 樣式表文件?如果沒有,你也不需要通過插件來精簡和整合 CSS 樣式表,手工精簡和整合 CSS 樣式表比使用插件更加簡單有效；
基于 WordPress 默認(rèn)會(huì)在頁頭中加載 JavaScript,一般的 WordPress 網(wǎng)站都需要對 JS 的加載位置進(jìn)行優(yōu)化.但是如果你大部分的頁面也都需要在頁面頭部加載 JS 以保證不會(huì)出現(xiàn) JS 失效的情況,那你就不能進(jìn)行這樣的優(yōu)化了.
在我看來,WP Minify 就不需要了,原因在前面已經(jīng)說過了.那么剩下的 Autoptimize 和 JavaScript to Footer 可以選用其一或者兩者配合使用(如果是配合使用,當(dāng)然是使用前者的 HTML 和 CSS 精簡/整合功能,而使用后者的 JS 位置控制功能,因?yàn)楹笳呔瓦@一個(gè)功能).我只需要控制 JS 的加載位置,所以就選擇了 JavaScript to Footer.因?yàn)槲业捻撁嬷幸簿退奈鍌€(gè) JS 文件,又是放到頁尾加載,我覺得沒必要進(jìn)行整合.PHP實(shí)例

三. 特殊情況處理
雖然將 JavaScript 文件都放到頁面末尾加載對于頁面加載速度很有贊助,但是請注意,所謂頁面末尾指的是在 WordPress 的 wp_footer() 函數(shù)中調(diào)用,這個(gè)函數(shù)通常剛好位于頁面的 </body> 標(biāo)簽前面(當(dāng)然是末尾了).PHP實(shí)例

有時(shí)候我們可能會(huì)在 wp_footer 函數(shù)出現(xiàn)之前就需要用到某些 JavaScript,比如 jquery.js 文件.PHP實(shí)例

這樣的情況也是很常見的.比如我單獨(dú)創(chuàng)建了一個(gè)鏈接頁面,在這個(gè)頁面中我使用了 jQuery 辦法來獲取鏈接網(wǎng)站的 favicon.很顯然,我只需要在這唯一一個(gè)頁面使用這部分代碼,所以將這段代碼直接放在這個(gè)頁面模板中是最好的做法.問題來了：這部分內(nèi)容顯然是在 wp_footer 之前出現(xiàn)的,那么這段代碼就在 jquery.js 文件之前出現(xiàn)了,導(dǎo)致該代碼段實(shí)際上無法工作,因?yàn)檎{(diào)用 jQuery 辦法的代碼段必須比 jquery.js 文件后加載.PHP實(shí)例

那么如何處理這種特殊情況呢?其實(shí)也很簡單.以上面的情景為例,既然我們需要先調(diào)用 jquery.js 文件,那我們就在該代碼段之前直接輸出需要的 jquery.js 文件,不使用 wp_enqueue_script() 函數(shù),而改用 wp_print_scripts() 函數(shù).PHP實(shí)例

wp_enqueue_script() 與 wp_print_scripts() 的區(qū)別是：wp_enqueue_script() 是告訴 WordPress “我在這個(gè)頁面上需要用到某個(gè) JavaScript 文件,你可要記得加載啊”.WordPress 默認(rèn)在 wp_head() 中處理,而我們改為在 wp_footer() 中處理.wp_print_scripts() 則直接在你使用此辦法的位置輸出需要的 JavaScript 文件,而不是加入到 WordPress 的處理任務(wù)中.PHP實(shí)例

如果我們在頁面的中間使用,PHP實(shí)例

 <?php wp_print_scripts('jquery'); ?>

直接輸出了 jquery.js 文件(通常是其壓縮版本 jquery.min.js),那么即使其它的插件或者什么東西使用,PHP實(shí)例

 <?php wp_enqueue_script('jquery'); ?>

告訴 WordPress 需要加載 jquery.js,WordPress 在 wp_footer() 中處理的時(shí)候也會(huì)先檢查前面是不是已經(jīng)有了,如果有了就不會(huì)再重新加載一次.PHP實(shí)例

四. 結(jié)論
在 WordPress 中加載 JavaScript 最好使用 wp_enqueue_script() 函數(shù)以減少問題提高效率.如果不是有這些特殊情況要處理,使用 Autoptimize 顯然比較好,它全面完成任務(wù)而且使用簡單.PHP實(shí)例

但是如果使用的主題自己已經(jīng)很簡潔了,那么 JavaScript to Footer 更簡單高效,也就更好.PHP實(shí)例

維易PHP培訓(xùn)學(xué)院每天發(fā)布《PHP教程：幾個(gè)優(yōu)化WordPress中JavaScript加載體驗(yàn)的插件介紹》等實(shí)戰(zhàn)技能，PHP、MYSQL、LINUX、APP、JS,CSS全面培養(yǎng)人才。

轉(zhuǎn)載請注明本頁網(wǎng)址：
http://www.snjht.com/jiaocheng/8227.html