chrome 瀏覽器為什麼比一般的瀏覽器快呢?原因是 chrome 瀏覽器給全部頁面都弄了預載入功能。

目前可能還是有少部分人在使用的,就是 InstantClick,它相當於一個 JS 庫,執行的原理類似 「預載入」

利用 mouseover() 、 mousedown() 、 mouseout() 執行整個過程,執行原理:當滑鼠移到連結上時,就已經開始載入頁面了,從滑鼠懸停該連結到點選連結這中間有那麼幾百毫秒的間隔,此時頁面已經載入得差不多,那麼在真正開啟頁面時就等於直接顯示,速度會非常快。所以這不單純是 Ajax,而是 pushState+Ajax ,即是 PJAX,類似於整個頁面的 Ajax(和真實的 Ajax 有區別) 。

下載本文附件將裡面的兩個 js 放在主題目錄的 js 資料夾,之後可以在 footer.php 在</body> 標籤之前引用,引用程式碼:

<script type=」text/javascript」 src=」<?php bloginfo(『template_directory』); ?>/js/instantclick.min.js」 data-no-instant>

</script>

<script data-no-instant>

InstantClick.init();

</script>

然後就大功告成了,點選開啟頁面,你會發現頂部還有一個載入進度條,可以透過 CSS 來修改其樣式。

這個效果有時會與一些 Ajax 效果衝突,比如評論 Ajax,因為 InstantClick 是針對 body 的,當然評論模板會包含在內,所以當你不希望某一區域使用 InstantClick 效果時,可以用<div data-no-instant> 和</div> 這個宣告來包含該區域,在 data-no-instant 區域內的點選事件就都不會觸發預載入,如此一來就可以做到比較好的相容效果了。