WordPress中JavaScript加載體驗(yàn)的插件有哪些-創(chuàng)新互聯(lián)

這篇文章主要介紹了WordPress中JavaScript加載體驗(yàn)的插件有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括岑鞏網(wǎng)站建設(shè)、岑鞏網(wǎng)站制作、岑鞏網(wǎng)頁制作以及岑鞏網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，岑鞏網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到岑鞏省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

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

其主要特點(diǎn)是：

  • 易于使用；

  • 對(duì) JavaScript、CSS 和 HTML 均有效；

  • 提供了調(diào)試工具；

  • 能夠處理外部 JS 和 CSS 文件；

  • 能夠排除指定 JS 和 CSS 文件；

  • 能夠指定處理后的 JS 和 CSS 文件的位置（頁頭或頁尾，甚至別的地方）；

  • 可對(duì)處理后的 JS 和 CSS 文件添加過期時(shí)間等。


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

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

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

默認(rèn)情況下，Autoptimize 會(huì)按照上面介紹的方式優(yōu)化所有 HTML/CSS/JavaScript 。

我個(gè)人覺得，Autoptimize 是比 WP Minify 更好用的 WordPress 優(yōu)化插件。

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

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

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

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ù)成了本來的加載位置：

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)然只是說某些特定的頁面模板，如果是所有頁面，那干脆禁用該插件好了 :D

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

你的頁面模板中是否使用了大量的 HTML 注釋、空格、空行等標(biāo)記？如果沒有，那么你就不需要為了一點(diǎn)點(diǎn)（開啟 Gzip 壓縮時(shí)通常 1% 以下）的帶寬節(jié)省而使用 HTML 精簡功能；
你的頁面中是否加載了多個(gè) CSS 樣式表文件？如果沒有，你也不需要通過插件來精簡和整合 CSS 樣式表，手工精簡和整合 CSS 樣式表比使用插件更加簡單有效；
基于 WordPress 默認(rèn)會(huì)在頁頭中加載 JavaScript，一般的 WordPress 網(wǎng)站都需要對(duì) 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)行整合。

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

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

這樣的情況也是很常見的。比如我單獨(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 文件后加載。


那么如何處理這種特殊情況呢？其實(shí)也很簡單。以上面的情景為例，既然我們需要先調(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è)頁面上需要用到某個(gè) JavaScript 文件，你可要記得加載啊”。WordPress 默認(rèn)在 wp_head() 中處理，而我們改為在 wp_footer() 中處理。wp_print_scripts() 則直接在你使用此方法的位置輸出需要的 JavaScript 文件，而不是加入到 WordPress 的處理任務(wù)中。

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

 <?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ù)以減少問題提高效率。如果不是有這些特殊情況要處理，使用 Autoptimize 顯然比較好，它全面完成任務(wù)而且使用簡單。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“WordPress中JavaScript加載體驗(yàn)的插件有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

當(dāng)前標(biāo)題：WordPress中JavaScript加載體驗(yàn)的插件有哪些-創(chuàng)新互聯(lián)
文章位置：http://bm7419.com/article22/cesejc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、軟件開發(fā)、網(wǎng)站維護(hù)、營銷型網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司、微信小程序

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站建設(shè)