体育外围

當前位置: 首頁 > 網站建設 > 使用instantclick預加載,讓網站速度更進一步

使用instantclick預加載,讓網站速度更進一步

發布于:2019-4-14 網站建設 9條評論 8,086 views
如需VPS代購、PHP開發、服務器運維等服務,請聯系博主QQ:337003006

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強烈推薦給你。更多使用方法可以參考:


9 條評論 “使用instantclick預加載,讓網站速度更進一步”

  1. 說道:

    前兩天剛折騰完Memcached緩存,心好累

    1. xiaoz說道:

      我用的Redis做數據庫緩存。

  2. Andy說道:

    多看看highlight和instantclick的官網,他們有更好的解決方案
    “`
    InstantClick.on(‘change’, function() {
    document.querySelectorAll(‘pre code’).forEach((block) => {
    hljs.highlightBlock(block);
    });
    });
    InstantClick.init();
    “`

    1. xiaoz說道:

      謝謝大佬指教。

  3. 說道:

    請教一下,用了預加載的功能,也確實實現了。
    但是控制臺會報
    Uncaught TypeError: B[a][e] is not a function
    at t (instantclick.min.js:3)
    at Object.init (instantclick.min.js:12)
    at 308.html:18

    這種錯誤

    不知道是什么原因

  4. 說道:

    感謝分享,試試,謝謝

  5. 說道:

    原理就跟以前手機瀏覽器預加載一樣,那時候網速還很慢,現在基本上很少預加載了。

  6. 說道:

    博主的這種使用會不會讓服務器的負載高了?
    手表移到鏈接出就預加載。
    新窗口貌似不管用吧?

    1. xiaoz說道:

      可能會讓負載稍高,但是如果平時資源空閑較多基本不影響。

發表評論