InstantClick是一個JavaScript庫，可以顯著加快您的網站速度，工作原理是預加載你可能點擊的鏈接來欺騙。舉個簡單的例子比如您想點擊“体育外围”的下一頁按鈕，InstantClick已經幫助您把下一頁的內容提前加載好了，可以明顯的感受到速度提升。

安裝instantclick

• instantclick官網：

instantclick使用方法非常簡單，只需要從官網下載對應的js庫，然后引用到網站底部（</body>之前）即可。

<script src = 'http://libs.xiaoz.top/instantclick/instantclick.min.js' data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

使用體驗

目前体育外围已經使用instantclick預加載，雖然感覺速度提升了不少，但是依然會產生一些副作用，比如在訪問網站后臺的時候CSS加載失敗導致排版混亂，如下圖。

再次刷新可以解決這個問題，雖然影響不大，但還是影響體驗，解決辦法請繼續往下閱讀。

部分頁面CSS無法預加載的問題

体育外围使用的WordPress程序，查看源碼可得知部分CSS是通過PHP動態代碼渲染生成的，使用instantclick后發現首次訪問后臺等頁面CSS無法加載導致排版混亂。閱讀instantclick文檔可以得知此問題并非不可解決，instantclick提供了黑名單功能，可以將指定的URL鏈接設置為黑名單，這個鏈接將不再使用instantclick預加載。要設置黑名單只需要給鏈接加上data-no-instant屬性。

解決highlight.js沖突問題

在這篇文章中WordPress免插件實現代碼高亮 xiaoz分享了使用highlight.js庫進行代碼高亮，highlight.js默認使用下面這個函數來進行代碼渲染：

<script>hljs.initHighlightingOnLoad();</script>

使用instantclick發現存在沖突，預加載的頁面發現代碼無法進行高亮渲染，需要將上面的渲染函數更改為：

$('pre code').each(function(i, block) {
    try{
        hljs.highlightBlock(block);
    }catch(e){

    }
});

總結

如果您服務器在海外或者本身網站速度加載緩慢，instantclick強烈推薦給你。更多使用方法可以參考：