内容下载时导航空闲答案

【问题标题】：Navigation idle on content download内容下载时导航空闲
【发布时间】：2019-06-21 20:05:47
【问题描述】：

您好，我有一个用 cakePHP 2.10 开发的网站。

当我浏览我的网站时，我意识到我的加载时间总是在 5 秒左右，即使对于只显示表单的视图也是如此。 5秒内“内容下载”3.6秒锁定在“IDLE”状态。

我在ajax中也遇到这个问题，请求好像被锁定在“reception”大约5秒。

例如在 ajax 中锁定 5 秒的导航 gif

在默认布局中，我将所有 JavaScript 文件加载到底部：

<?php 



echo $this->Html->script('jquery-2.1.1');
echo $this->Html->script('bootstrap.min');
echo $this->Html->script('plugins/metisMenu/jquery.metisMenu');
echo $this->Html->script('plugins/slimscroll/jquery.slimscroll.min');
echo $this->Html->script('inspinia');
echo $this->Html->script('plugins/pace/pace.min', array("data-pace-options" => '{"ajax": false}'));
echo $this->Html->script('plugins/jquery-ui/jquery-ui.min');
echo $this->Html->script('plugins/gritter/jquery.gritter.min');
echo $this->Html->script('plugins/sparkline/jquery.sparkline.min');
echo $this->Html->script('demo/sparkline-demo');
echo $this->Html->script('plugins/chartJs/Chart.min');
echo $this->Html->script('plugins/toastr/toastr.min');
echo $this->Html->script('plugins/dataTables/datatables.min');
echo $this->Html->script('plugins/clockpicker/clockpicker');
echo $this->Html->script('plugins/datepicker/bootstrap-datepicker');


echo $this->Html->script('jquery.autocomplete');

echo $this->Html->script('plugins/star-rating/star-rating');
echo $this->Html->script('plugins/star-rating/locales/fr');
echo $this->Html->script('plugins/switchery/switchery');
echo $this->Html->script('plugins/chosen/chosen.jquery');
echo $this->Html->script('plugins/validate/jquery.validate.min');
echo $this->Html->script('slim/slim.kickstart');
echo $this->Html->script('plugins/sweetalert/sweetalert.min');
echo $this->Html->script('plugins/summernote/summernote');
echo $this->Html->script('plugins/summernote/lang/summernote-fr-FR');



echo $this->Html->script('datatableExport/dataTables.buttons.min');
echo $this->Html->script('datatableExport/buttons.html5.min');
echo $this->Html->script('datatableExport/jszip.min');
echo $this->Html->script('datatableExport/pdfmake.min');
echo $this->Html->script('datatableExport/vfs_fonts');
echo $this->Html->script('datatableExport/buttons.print.min');

echo $this->Html->script('plugins/morris/raphael-2.1.0.min'); 
echo $this->Html->script('plugins/morris/morris');
echo $this->Html->script('plugins/ladda/spin.min');
echo $this->Html->script('plugins/ladda/ladda.min');
echo $this->Html->script('plugins/ladda/ladda.jquery.min');


//chemin pour que le Javascript puisse trouver les images
echo $this->Js->set('url', $this->request->base); 

echo $this->Html->script('main');
echo $this->Html->script('sessionPopup');
echo $this->Html->script('users');
echo $this->Html->script('compromis');
echo $this->Html->script('mediatheque');
echo $this->Html->script('messagerie');
echo $this->Html->script('competences');

echo $this->fetch('script');

echo $this->Js->writeBuffer(); 
 ?>

【问题讨论】：

尝试减少资产文件的数量、concat、缩小、以 gzip 格式发送、在客户端缓存、延迟加载等。
你好，对于测试我已经注释了所有的javascripts导入，并且时间负载是一样的..

标签： javascript php jquery apache cakephp

【解决方案1】：

加载时间总是很长，这里以下面的代码为例，没有css/js。这是监控画面 https://a741vvfaa.preview.infomaniak.website/img/monitoring3.JPG

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="gray-bg">
    <div class="col-md-4 col-lg-offset-4 text-center loginscreen animated fadeInDown">
        <div>
            <div class="ibox float-e-margins">
            <div class="ibox-title ">
                <div class="text-center">                            

                </div>
            </div>
            <div class="ibox-content">
            <h3>Bienvenue sur <?php echo Configure::read("VERSION");?></h3>
                <!-- <form class="m-t" role="form" action="index.html"> -->
                <?php echo $this->Form->create('User'); ?>  
                    <div class="form-group">
                        <div class="input-group margin-bottom-sm">
                            <span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                            <input type="text" class="form-control" id="UserUsername" placeholder="Nom d'utilisateur" required="required" maxlength="30" name="data[User][username]">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group margin-bottom-sm">
                            <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
                            <input type="password" class="form-control" id="UserPassword" placeholder="Mot de passe" required="required" name="data[User][password]">
                        </div>
                    </div>
                    <button type="submit" id="btnlogin" class="btn btn-primary block full-width m-b ladda-button" data-style="zoom-in" style="background-color:#00ADEE;">Connexion</button>


                <?php echo $this->Form->end();?>  

                </div>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：