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 區域內的點擊事件就都不會觸發預加載,如此一來就可以做到比較好的兼容效果了。