提升頁面加載速度的插件InstantClick
通常，我們?yōu)榱藴p少DNS的查詢時間，我們可以使用dns prefetch為該頁面中鏈接的做解析，提升頁面的加載速度。類似的，我們可以在鼠標(biāo)滑到鏈接上到點擊的時間間隙去加載這個頁面，通常這個間隙有幾百毫秒，利用InstantClick，我們可以充分利用這幾百毫秒，讓網(wǎng)站能夠瞬間顯示新頁面，幾乎沒有延遲。
InstantClick的安裝
安裝InstantClick非常簡單，只要把InstantClick下載過來放到某一個目錄下，然后在</body>之前引用一下代碼即可，例如：
<script src="http://img.ezloo.com/static/instantclick.min.js" data-no-instant></script> <script data-no-instant>InstantClick.init();</script>
InstantClick可能會導(dǎo)致出現(xiàn)白屏的情況，官方給出了例子，解決了和Google Adsense之間的沖突。我發(fā)現(xiàn)百度統(tǒng)計也會導(dǎo)致白屏，在<script>中加data-no-instant會解決這個問題，就像上面的例子一樣。由于不懂JS，不知道這會不會影響統(tǒng)計。
InstantClick工作原理
InstantClick使用pushState和Ajax(pjax)來實現(xiàn)，只替換<body>和頭部的<title>，瀏覽器不必重新解析編譯頁面，這樣在頁面跳轉(zhuǎn)的過程中，瀏覽器不會閃一下白屏，看上去頁面在瞬間就加載完成了。
InstantClick的進度條
默認情況下，InstantClick在載入頁面的時候，會在頁面的頂部顯示一個進度條，默認的顏色是#29d，你可以更改顏色：
#instantclick-bar {
background: white;
}
也可以隱藏進度條：
#instantclick {
display: none;
}
WordPress插件
如果你使用的是WordPress博客，你可以搜索安裝InstantClick插件https://wordpress.org/plugins/instantclick/，安裝完成之后，在WordPress后臺的設(shè)置菜單下，會增加一個InstantClick選項。
相關(guān)鏈接：
測試鼠標(biāo)點擊延遲：http://instantclick.io/click-test
讓InstantClick兼容百度統(tǒng)計、Google Analytics：http://m.fzitv.net/hack/123521.html
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Javascript中replace方法與正則表達式的結(jié)合使用教程
replace方法是javascript涉及到正則表達式中較為復(fù)雜的一個方法,嚴格上說應(yīng)該是string對象的方法,下面這篇文章主要給大家介紹了關(guān)于Javascript中replace方法與正則表達式的結(jié)合使用的相關(guān)資料,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了JS修改iframe頁面背景顏色的方法,涉及javascript操作iframe頁面樣式的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了javascript實現(xiàn)樹形菜單的方法,涉及javascript動態(tài)操作頁面元素與節(jié)點屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了js自定義鼠標(biāo)右鍵的實現(xiàn)原理及源碼,需要的朋友可以參考下2014-06-06
JS+CSS實現(xiàn)精美的二級導(dǎo)航效果代碼
JS如何設(shè)置cookie有效期為當(dāng)天24點并彈出歡迎登陸界面
JavaScript undefined及null區(qū)別實例解析