提升頁(yè)面加載速度的插件InstantClick
通常，我們?yōu)榱藴p少DNS的查詢時(shí)間，我們可以使用dns prefetch為該頁(yè)面中鏈接的做解析，提升頁(yè)面的加載速度。類似的，我們可以在鼠標(biāo)滑到鏈接上到點(diǎn)擊的時(shí)間間隙去加載這個(gè)頁(yè)面，通常這個(gè)間隙有幾百毫秒，利用InstantClick，我們可以充分利用這幾百毫秒，讓網(wǎng)站能夠瞬間顯示新頁(yè)面，幾乎沒有延遲。
InstantClick的安裝
安裝InstantClick非常簡(jiǎn)單，只要把InstantClick下載過來放到某一個(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è)問題，就像上面的例子一樣。由于不懂JS，不知道這會(huì)不會(huì)影響統(tǒng)計(jì)。
InstantClick工作原理
InstantClick使用pushState和Ajax(pjax)來實(shí)現(xiàn)，只替換<body>和頭部的<title>，瀏覽器不必重新解析編譯頁(yè)面，這樣在頁(yè)面跳轉(zhuǎn)的過程中，瀏覽器不會(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.dbjr.com.cn/hack/123521.html
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面彈出自定義文字效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊頁(yè)面彈出自定義文字效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)留言板，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
使用typescript+webpack構(gòu)建一個(gè)js庫(kù)的示例詳解
這篇文章主要介紹了typescript+webpack構(gòu)建一個(gè)js庫(kù),本文主要記錄使用typescript配合webpack打包一個(gè)javascript library的配置過程，需要的朋友可以參考下2022-07-07
Javascript 關(guān)于基本類型和引用類型的個(gè)人理解
這篇文章主要介紹了Javascript 關(guān)于基本類型和引用類型的個(gè)人理解,需要的朋友可以參考下2019-11-11
uniapp調(diào)用百度語(yǔ)音實(shí)現(xiàn)錄音轉(zhuǎn)文字功能
這篇文章主要介紹了uniapp通過調(diào)用百度語(yǔ)音，實(shí)現(xiàn)錄音轉(zhuǎn)文字的功能。文中的示例代碼對(duì)我們學(xué)習(xí)或工作有一定的幫助，感興趣的小伙伴可以跟隨小編學(xué)習(xí)一下2021-12-12
JavaScript?12個(gè)有用的數(shù)組技巧
數(shù)組是Javascript最常見的概念之一，它為我們提供了處理數(shù)據(jù)的許多可能性，熟悉數(shù)組的一些常用操作是很有必要的。本文將為大家介紹12個(gè)有用的JavaScript數(shù)組技巧，需要的朋友可以參考一下2021-12-12
閉包常常被譽(yù)為JavaScript中最難理解的概念之一，這篇文章就來帶大家深入了解一下JavaScript中閉包的概念、實(shí)現(xiàn)與應(yīng)用，需要的可以參考一下2023-04-04
Vue考試系統(tǒng)的后臺(tái)管理功能開發(fā)示例解讀
這篇文章主要介紹了Vue考試系統(tǒng)后臺(tái)管理項(xiàng)目的登錄、記住密碼功能具體實(shí)現(xiàn)流程，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-09-09
這篇文章主要為大家詳細(xì)介紹了JS代碼實(shí)現(xiàn)頁(yè)面切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
js Html結(jié)構(gòu)轉(zhuǎn)字符串形式顯示代碼
js Html結(jié)構(gòu)轉(zhuǎn)字符串形式顯示代碼，需要的朋友可以參考下。2011-11-11