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