在 Laravel 應用中使用 pjax 進行頁面加速

說明#

PHPHub 使用 pjax 來加速網頁的加載, 這篇文章是在開發完此功能後作的筆記.

什麼是 Pjax#

.--.
       /    \
      ## a  a
      (   '._)
       |'-- |
     _.\___/_   ___pjax___
   ."\> \Y/|<'.  '._.-'
  /  \ \_\/ /  '-' /
  | --'\_/|/ |   _/
  |___.-' |  |`'`
    |     |  |
    |    / './
   /__./` | |
      \   | |
       \  | |
       ;  | |
       /  | |
 jgs  |___\_.\_
      `-"--'---'

項目地址見 這裏, 官方的介紹:

pushState + ajax = pjax

詳細的解釋請看 知乎上的這個問題, 或者本身去查閱資料.

簡單點描述, 就是利用 ajax 技術去服務器獲取文檔, 在不刷新瀏覽器頁面的狀況下, 更新當前頁面, 而且能保證頁面的js 和 css 等 assets 文件不會被重複加載, 而後利用瀏覽器提供的 pushState 功能, 對 URL 進行更新, 並能保證用戶經過點擊 back 按鈕回溯到歷史頁面.

注意: 並非全部瀏覽器都支持 pushState, 關於瀏覽器的兼容請見這裏, 當瀏覽器不兼容的時候, 會自動使用原始的瀏覽方式進行訪問.

爲何要使用 Pjax#

由於不須要整個頁面刷新, 而且 assets 文件都不須要從新加載, 很大程度上提升了頁面的加載速度.

服務端安裝 rcrowe/Turbo#

使用 package rcrowe/Turbo .

安裝 rcrowe/Turbo#

在 composer.json 裏的 require 屬性下添加:

"rcrowe/turbo": "0.2.*"

而後 composer update 或者 composer install

配置 Providers#

編輯 app/config/app.php 文件, 在選項 providers 數組裏面添加:

"Turbo\Provider\Laravel\TurboServiceProvider",

下載 pjax.js#

在 public\js 文件夾下

wget https://raw.github.com/defunkt/jquery-pjax/master/jquery.pjax.js

而後在模版裏面加載此文件

<script src="{{ cdn('js/jquery.pjax.js') }}"></script>

最後頁面裏調用:

$(document).ready(function() { $(document).pjax('a', 'body'); });

上面的代碼解釋是, 把全部的 a 標籤的點擊事件截獲, 若是當前瀏覽器支持 pjax 的話, 發送一個 ajax 請求, 並把參數_pjax=body 帶過去.

若是一塊兒順利的話, 在 Chrome 的 debuger 裏能看到相似於這樣的請求:

至此, 已經順利配置完畢.

添加加載動畫#

接下來要來添加一個頁面加載的動畫, 效果以下:

添加 nprogress#

使用 rstacruz/nprogress 來實現.

添加的方法是 下載 文件, 而後把 nprogress.js 和 nprogress.css 添加到頁面中:

<script src='nprogress.js'></script> <link rel='stylesheet' href='nprogress.css'/>

調用#

修改上面的代碼, 修改後的代碼如如下:

$(document).ready(function() { $(document).pjax('a', 'body'); $(document).on('pjax:start', function() { NProgress.start(); }); $(document).on('pjax:end', function() { NProgress.done(); self.siteBootUp(); }); });

這樣的話, 每一次點擊頁面的時候就會有很酷炫的效果了