Question

我正在使用Slim和Twig构建一个应用程序作为它的模板引擎，我正在处理一个显示所有用户记录的页面。

加载需要花费很多时间，实际上是11.25秒，而我的雇主发现这是一个不合理的加载时间，并且同意应该可以更快地加载它。

我应该提到我使用Eloquent作为我的ORM。与我的数据库通信。我正在使用DataTables

进行分页

树枝模板页面：

＆＃13;

 library(data.table)
 setDT(df1)[order(-Score), .SD[1:10]]

＆＃13;

用户浏览页面：

＆＃13;

<!doctype html>
<html class="no-js" lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>{% block title %}{% endblock %} | Administration</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" type="text/css" href="/public/css/vendor/normalize.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="/public/css/vendor/admin.css">
  <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
  <link rel="stylesheet" href="/public/css/main.css">

  <!--[if lt IE 9]>
        	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

</head>

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
      {% include 'templates/partials/admin/navigation.php' %}
    </div>
  </nav>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-3 col-md-2 sidebar">
        {% include 'templates/partials/admin/menubar.php' %}
      </div>
      <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        {% include 'templates/partials/messages.php' %} {% block content %}{% endblock %}
      </div>
    </div>
  </div>

  {% include 'templates/partials/admin/footer.php' %}
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
  window.jQuery || document.write('<script src="/public/js/vendor/jquery-1.11.2.min.js"><\/script>')
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script>
  $(document).ready(function() {
    $('#example').DataTable();
  });
</script>

</html>

＆＃13;

用户路线：

{% extends 'templates/table.php' %} {% block title %}View users {% endblock %} {% block content %}

<h2> All Users </h2>
{% if users is empty%}
<p>No registered Users</p>
{% else %}

<table id="example" class="display" data-page-length='15' cellspacing="0" width="100%">
  <thead>
    <th>&nbsp;</th>
    <th>Bedrijf</th>
    <th>Toegang Weigeren</th>
    <th>Naam:</th>
    <th>VCA</th>
    <th>email</th>
    <th>registratie datum</th>
    <th>bestanden</th>
  </thead>
  <tfoot>
  </tfoot>
  <tbody>
    {% for user in users %}
    <tr>
      <td>
        {{ user.IDSTUDENT }}
      </td>
      <td>
        {{ user.COMPANY_NAME }}
      </td>
      <td>
        Button here
      </td>
      <td>
        {{ user.STUDENT_NAME }} {{ user.STUDENT_FIRSTNAME }}
      </td>
      <td>
        {{ user.STUDENT_VCANUMMER }}
      </td>
      <td>
        {{ user.STUDENT_EMAIL }}
      </td>
      <td>
        {{ user.STUDENT_DATE }}
      </td>
      <td>
        Files go here
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %} {% endblock %}

我已经尝试过缓存和压缩文件，这些文件将加载时间从11秒减少到11.25秒。

建议将得到任何人的赞赏。

Answer 1

尝试以下，

$users = table_name::paginate(n);。这将返回您的第一个 n 记录。确定最后一条记录的id。使用ajax request作为get参数滚动发送id并查询数据库，如， $users = table_name::where('id','>',identified_id)->paginate(n);。这将为您提供下一个 n 记录

谢谢：）

Answer 2

你可以使用延迟加载类型的模式，所以在第一次它只会带来有限数量的记录，比方说100行。当用户向下滚动并到达页面末尾时，您可以查询下一行并在页面上显示。

优化5400+记录的加载

2 个答案: