在 Laravel 应用中使用 pjax 进行页面加速

分享 Summer ⋅ 于 3年前 ⋅ 最后回复由 joychi123 3周前 ⋅ 17540 阅读

说明

PHPHub 使用 pjax 来加速网页的加载, 这篇文章是在开发完此功能后做的笔记.

什么是 Pjax

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

项目地址见 这里, 官方的介绍:

pushState + ajax = pjax

详细的解释请看 知乎上的这个问题, 或者自己去查阅资料.

简单点描述, 就是利用 ajax 技术去服务器获取文档, 在不刷新浏览器页面的情况下, 更新当前页面, 并且能保证页面的 jscssassets 文件不会被重复加载, 然后利用浏览器提供的 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.jsnprogress.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();
  });
});

这样的话, 每一次点击页面的时候就会有很酷炫的效果了. :dancer:


关于此次的代码修改, 见这个 commit.

--- EOF --


欢迎关注 LaravelTips, 这是一个专注于为 Laravel 开发者服务, 致力于帮助开发者更好的掌握 Laravel 框架, 提升开发效率的微信公众号.


:book: Laravel 课程:

本帖已被设为精华帖!
回复数量: 39
  • Cooper :elephant: Developer 1
    3年前

    Markdown 渲染换方式了?

  • lichunqiang
    3年前

    +1

    :)

  • Summer MOD A Life-long learner.
    3年前

    @Cooper 貌似改了挺久的了, 考虑到 seo 友好.

  • monkey 最重要的事,永远只有一件
    3年前

    用户体验极好的一个功能

  • yangbaojin1988
    3年前

    不错,赞。

  • isPythoner
    3年前

    请问页面内有远程js, 加载较慢怎么解决?

  • Summer MOD A Life-long learner.
    3年前

    @isPythoner 你是在说访问 phphub 的时候吗?

  • isPythoner
    3年前

    @Summer 不是,例如百度广告的js。 所有页面url添加 ?_pjax=body 的路由怎么写的? 为什么我的网站 http 请求 aborted 了。

  • Summer MOD A Life-long learner.
    3年前

    @isPythoner ?_pjax=body 这个参数是 pjax 自动添加的, TA 会判断浏览器是否支持, 如果支持的话, 就添加, 否的话就如正常的访问.

    至于外部 js 加载慢的, 尽量把 js 放到页面底部, 这样就不影响页面渲染.

  • isPythoner
    3年前

    @Summer 嗯,有一些问题,?_pjax=body 有时候 200 状态,有时候 aborted。我再看看怎么回事。

  • lovecn
    3年前

    github也用的pajx吗,好赞的效果 ps:markdown能支持可视化编辑吗,类sf

  • Summer MOD A Life-long learner.
    3年前

    @lovecn 好建议.

  • Chitunet PHP Developer
    3年前

    这个网站的右键被禁掉了?

  • jalen
    3年前

    我说这个横线加载状态是怎么实现的呢。 原来是酱紫的。。。TKS

  • jalen
    3年前

    这东西要网速好 才感受得到。 我刚刚还挂着shadownScoks,加载动画完了,页面还没跳转,慢一拍..

  • bopo
    3年前

    膜拜啊,刚开始看laravel 感觉我之前用的代码都是渣,

  • baocaixiong
    3年前

    我试了一下,真是美不胜收啊。 而且还弄起来这么简单。 :+1:

  • blue5tar
    3年前

    很好 渐进增强 对seo也没有影响

  • baocaixiong
    3年前

    有的页面会被浏览器cancel掉,一般有何原因呢?

  • Summer MOD A Life-long learner. 1
    3年前

    @baocaixiong 刚刚解决了这个问题, 原因见这里: Github issue

  • liball
    3年前

    pjax会跟masonry冲突,怎么解决呀?

  • Summer MOD A Life-long learner. 1
    3年前

    @liball 你可以去 http://segmentfault.com/t/pjax 发个问题, 详细描述, 然后把链接贴给我.

  • rootrl
    3年前

    很好,很强大!

  • Rod Hi ~
    3年前

    太赞了,我正想实现这个功能就发现了这篇详细介绍的文章

  • SharkIng
    3年前

    问个小白问题,在哪里去指定这个加载动画的位置呢?~ 如果我想让全页面在页面(或者导航栏以下)加载的时候显示这么一个加载的提示,而不是显示在右上角应该怎么修改呢?

  • Rod Hi ~ 1
    2年前

    为什么需要rcrowe/Turbo呢? Laravel5有合适的包吗?找了找没找到 - _ -b

  • wedojava
    2年前

    mark,这东西我也想实现

  • Enda 江湖上的一只小虾米
    2年前

    mark

  • zwl1619
    2年前

    赞!!!!!!!!!!!!!!!!!!!!!!!

  • Malayke
    2年前

    @Summer Laravel 5 里加那个server provider出错,5里头应该怎么使用呀?

  • makao007 1
    2年前

    在Lv5.1中,安装那个service provider会出错,可以用这个: https://github.com/JacobBennett/pjax

  • makao007
    2年前

    如果要在文档ready后再执行一些另外的操作,可以这样:

    $(document).on('ready pjax:success', function() {
         console.log ('这在ready后执行的操作');
    });

    原先以下的代码会失效

    $ ( function ( ) {
      console.log ('这里在使用pjax后会失效');
    });
  • overtrue MOD https://github.com/overtrue
    2年前

    :100:

  • 辣条一毛五
    2年前

    这个是展示网速的东西么。呵呵哒

  • zhangwei900808 我来自一个古老的星球,1609年来到地球,在地球上居住了将近400年(这可是...
    1年前

    我也来学习学习

  • 王俊锋
    1年前

    :100:

  • Hsiao
    1年前

    :100:

  • chunlintang Learn and live.
    1年前

    不支持laravel5.1吗?会报错。。。

  • joychi123
    1年前

    我点击左侧菜单中的a链接,载入指定连接的页面后,当我再次f5刷新页面后,只能显示载入的页面内容。这时候样式,js,其他页面内容都没了。这应该怎么解决啊

暂无评论~~

  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!