幾個(gè)優(yōu)化WordPress中JavaScript加載體驗(yàn)的插件介紹

2020-03-22 18:19:24

字體：大中小

供稿：網(wǎng)友

WordPress 本身以及主題和插件通常需要加載一些 JavaScript 來(lái)實(shí)現(xiàn)某些特殊功能。為了最大限度地保證兼容性，不至于出現(xiàn) JavaScript 失效的情況，所以一般在頁(yè)頭加載 JavaScript 文件。但是根據(jù) Yahoo 開發(fā)者論壇的建議，加載 JavaScript 應(yīng)該盡量在頁(yè)尾以提高頁(yè)面的顯示（響應(yīng)、渲染）速度。本文根據(jù)作者的使用經(jīng)驗(yàn)介紹幾個(gè)相關(guān)插件，并說(shuō)明如何在某些特殊頁(yè)面仍然在頁(yè)頭加載 JavaScript。下面先簡(jiǎn)單介紹幾個(gè)相關(guān)的優(yōu)化 JavaScript 的 WordPress 插件及特點(diǎn)，然后演示如何處理一些特殊情況。一. 優(yōu)化JavaScript的WordPress插件
我曾經(jīng)用過(guò) WP Minify、Autoptimize、JavaScript to Footer這三個(gè)插件，下面一一介紹其特點(diǎn)。1. WP Minify
這個(gè)插件將 Minify 引擎整合到 WordPress 中。一經(jīng)啟用，該插件就能夠合并和壓縮你的 JS 和 CSS 文件來(lái)提高頁(yè)面的加載速度。WP Minify 能夠抓取生成的 WordPress 頁(yè)面中的 JS/CSS 文件，將文件列表傳遞給 Minify 引擎。Minify 引擎處理后返回一個(gè)加強(qiáng)、精簡(jiǎn)并經(jīng)過(guò)壓縮的 JavaScript 或樣式表文件（CSS），由 WP Minify 將其替換到 WordPress 頁(yè)頭中。其主要特點(diǎn)是：易于使用；對(duì) JavaScript、CSS 和 HTML 均有效；提供了調(diào)試工具；能夠處理外部 JS 和 CSS 文件；能夠排除指定 JS 和 CSS 文件；能夠指定處理后的 JS 和 CSS 文件的位置（頁(yè)頭或頁(yè)尾，甚至別的地方）；可對(duì)處理后的 JS 和 CSS 文件添加過(guò)期時(shí)間等。
當(dāng) WordPress 3.1 測(cè)試版出來(lái)后，我發(fā)現(xiàn) WP Minify 與之不兼容，會(huì)導(dǎo)致網(wǎng)站無(wú)法正確加載。2. Autoptimize
也許將來(lái) WP Minify 升級(jí)后會(huì)解決不兼容問(wèn)題，但是我等不及了。后來(lái)找到了 Autoptimize 這個(gè)具有類似功能的插件，而且這個(gè)插件操作更簡(jiǎn)單。Autoptimize 整合、精簡(jiǎn)并壓縮所有的 JS 和樣式表（CSS）文件，增加緩存過(guò)期標(biāo)志。然后將樣式表文件放到頁(yè)頭（同樣是為了提高頁(yè)面加載效率），并將 JS 文件放到頁(yè)尾。它還能夠精簡(jiǎn) HTML 代碼，給你的頁(yè)面瘦身。不過(guò)我覺(jué)得給 HTML 頁(yè)面瘦身作用不是很明顯，只要你的服務(wù)器開啟了 Gzip 壓縮特性就沒(méi)必要這么做了。默認(rèn)情況下，Autoptimize 會(huì)按照上面介紹的方式優(yōu)化所有 HTML/CSS/JavaScript 。我個(gè)人覺(jué)得，Autoptimize 是比 WP Minify 更好用的 WordPress 優(yōu)化插件。3. JavaScript to Footer
這個(gè)插件寫的非常簡(jiǎn)潔。我查看了源代碼，完成任務(wù)的代碼只有 6 個(gè) WordPress 函數(shù)（見(jiàn)下文），也就是 6 行。所以這個(gè)插件從創(chuàng)建之后就怎么更新過(guò)。我一開始就因?yàn)橐?jiàn)它最后更改日期還停留在2009年9月22日，所以把它給忽略了。但是它僅僅優(yōu)化 JavaScript 的加載位置，也就是將所有在 WordPress 中正確聲明了的 Javascript 文件都給移到頁(yè)面末尾來(lái)加載。它沒(méi)有對(duì) HTML 代碼和 CSS 樣式表文件作任何處理。根據(jù) JavaScript to Footer 的源代碼，它使用下面的 6 行代碼來(lái)完成工作：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ù)前加入下面的代碼，將上述過(guò)程逆轉(zhuǎn)過(guò)來(lái)，也就是使之失效，恢復(fù)成了本來(lái)的加載位置：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)然只是說(shuō)某些特定的頁(yè)面模板，如果是所有頁(yè)面，那干脆禁用該插件好了 :D二. 使用方法
相信對(duì)于大多數(shù) WPer 來(lái)說(shuō)，看了前面的介紹就知道如何選擇自己需要的優(yōu)化插件并合理使用了。無(wú)非是基于以下三個(gè)方面來(lái)考慮：你的頁(yè)面模板中是否使用了大量的 HTML 注釋、空格、空行等標(biāo)記？如果沒(méi)有，那么你就不需要為了一點(diǎn)點(diǎn)（開啟 Gzip 壓縮時(shí)通常 1% 以下）的帶寬節(jié)省而使用 HTML 精簡(jiǎn)功能；
你的頁(yè)面中是否加載了多個(gè) CSS 樣式表文件？如果沒(méi)有，你也不需要通過(guò)插件來(lái)精簡(jiǎn)和整合 CSS 樣式表，手工精簡(jiǎn)和整合 CSS 樣式表比使用插件更加簡(jiǎn)單有效；
基于 WordPress 默認(rèn)會(huì)在頁(yè)頭中加載 JavaScript，一般的 WordPress 網(wǎng)站都需要對(duì) JS 的加載位置進(jìn)行優(yōu)化。但是如果你大部分的頁(yè)面也都需要在頁(yè)面頭部加載 JS 以保證不會(huì)出現(xiàn) JS 失效的情況，那你就不能進(jìn)行這樣的優(yōu)化了。
在我看來(lái)，WP Minify 就不需要了，原因在前面已經(jīng)說(shuō)過(guò)了。那么剩下的 Autoptimize 和 JavaScript to Footer 可以選用其一或者兩者配合使用（如果是配合使用，當(dāng)然是使用前者的 HTML 和 CSS 精簡(jiǎn)/整合功能，而使用后者的 JS 位置控制功能，因?yàn)楹笳呔瓦@一個(gè)功能）。我只需要控制 JS 的加載位置，所以就選擇了 JavaScript to Footer。因?yàn)槲业捻?yè)面中也就四五個(gè) JS 文件，又是放到頁(yè)尾加載，我覺(jué)得沒(méi)必要進(jìn)行整合。三. 特殊情況處理
雖然將 JavaScript 文件都放到頁(yè)面末尾加載對(duì)于頁(yè)面加載速度很有幫助，但是請(qǐng)注意，所謂頁(yè)面末尾指的是在 WordPress 的 wp_footer() 函數(shù)中調(diào)用，這個(gè)函數(shù)通常剛好位于頁(yè)面的 /body 標(biāo)簽前面（當(dāng)然是末尾了）。有時(shí)候我們可能會(huì)在 wp_footer 函數(shù)出現(xiàn)之前就需要用到某些 JavaScript，比如 html' target='_blank'>jquery.js 文件。這樣的情況也是很常見(jiàn)的。比如我單獨(dú)創(chuàng)建了一個(gè)鏈接頁(yè)面，在這個(gè)頁(yè)面中我使用了 jQuery 方法來(lái)獲取鏈接網(wǎng)站的 favicon。很顯然，我只需要在這唯一一個(gè)頁(yè)面使用這部分代碼，所以將這段代碼直接放在這個(gè)頁(yè)面模板中是最好的做法。問(wèn)題來(lái)了：這部分內(nèi)容顯然是在 wp_footer 之前出現(xiàn)的，那么這段代碼就在 jquery.js 文件之前出現(xiàn)了，導(dǎo)致該代碼段實(shí)際上無(wú)法工作，因?yàn)檎{(diào)用 jQuery 方法的代碼段必須比 jquery.js 文件后加載。
那么如何處理這種特殊情況呢？其實(shí)也很簡(jiǎn)單。以上面的情景為例，既然我們需要先調(diào)用 jquery.js 文件，那我們就在該代碼段之前直接輸出需要的 jquery.js 文件，不使用 wp_enqueue_script() 函數(shù)，而改用 wp_print_scripts() 函數(shù)。wp_enqueue_script() 與 wp_print_scripts() 的區(qū)別是：wp_enqueue_script() 是告訴 WordPress “我在這個(gè)頁(yè)面上需要用到某個(gè) JavaScript 文件，你可要記得加載啊”。WordPress 默認(rèn)在 wp_head() 中處理，而我們改為在 wp_footer() 中處理。wp_print_scripts() 則直接在你使用此方法的位置輸出需要的 JavaScript 文件，而不是加入到 WordPress 的處理任務(wù)中。如果我們?cè)陧?yè)面的中間使用， php wp_print_scripts('jquery'); 直接輸出了 jquery.js 文件（通常是其壓縮版本 jquery.min.js），那么即使其它的插件或者什么東西使用， php wp_enqueue_script('jquery'); 告訴 WordPress 需要加載 jquery.js，WordPress 在 wp_footer() 中處理的時(shí)候也會(huì)先檢查前面是不是已經(jīng)有了，如果有了就不會(huì)再重新加載一次。四. 結(jié)論
在 WordPress 中加載 JavaScript 最好使用 wp_enqueue_script() 函數(shù)以減少問(wèn)題提高效率。如果不是有這些特殊情況要處理，使用 Autoptimize 顯然比較好，它全面完成任務(wù)而且使用簡(jiǎn)單。但是如果使用的主題本身已經(jīng)很簡(jiǎn)潔了，那么 JavaScript to Footer 更簡(jiǎn)單高效，也就更好。PHP教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：修改PHP腳本使WordPress攔截垃圾評(píng)論的方法示例

下一篇：講解WordPress開發(fā)中一些常用的debug技巧