为什么多个“includes（）”文件导致浏览器在基于移动JQM的网站上加载速度慢

Question

I know this question have been asked many times on stack one of them is probably this Link but I could not get my answers from these links .

So my question is I am loading multiple files in a form using php includes() which is causing the page load time almost 30 seconds that is too much than the normal execution time .

Although the same method works fine in my desktop version check the link Link here the page is loading fine .

My code looks something like this

HTML

<div id="DIVC3" class="divs_details">
    <?php include(dirname(__FILE__)."/cat3.tpl.php")?>
</div>
<div id="DIVC4" class="divs_details">
    <?php include(dirname(__FILE__)."/cat4.tpl.php")?>
</div>
<div id="DIVC5" class="divs_details">
    <?php include(dirname(__FILE__)."/cat5.tpl.php")?>
</div>
<div id="DIVC6" class="divs_details">
    <?php include(dirname(__FILE__)."/cat6.tpl.php")?>
</div>
<div id="DIVC8" class="divs_details">
    <?php include(dirname(__FILE__)."/cat8.tpl.php")?>
</div>
<div id="DIVC9" class="divs_details">
    <?php include(dirname(__FILE__)."/cat9.tpl.php")?>
</div>
<div id="DIVC10" class="divs_details">
    <?php include(dirname(__FILE__)."/cat10.tpl.php")?>
</div>
<div id="DIVC11" class="divs_details">
    <?php include(dirname(__FILE__)."/cat11.tpl.php")?>
</div>
<div id="DIVC12" class="divs_details">
    <?php include(dirname(__FILE__)."/cat12.tpl.php")?>
</div>
<div id="DIVC13" class="divs_details">
    <?php include(dirname(__FILE__)."/cat13.tpl.php")?>
</div>
<div id="DIVC15" class="divs_details">
    <?php include_once(dirname(__FILE__)."/cat15.tpl.php")?>
</div>
<div id="DIVC16" class="divs_details">
    <?php include(dirname(__FILE__)."/cat16.tpl.php")?>
</div>
<div id="DIVC17" class="divs_details">
    <?php include(dirname(__FILE__)."/cat17.tpl.php")?>
</div>
<div id="err_desc" style="visibility:hidden; display:none;">
    <?php
    $long_desc=strlen($t_POST['im_desc']);
    if ($long_desc>0 && $long_desc<15) {
        ?>
        <span style="color:#FF0000;font-weight:bold; font-size:12px"> <?=$this->translate->translate('ERR_DESC','nucleo','Descripción deficiente');?></span>
        <?php 
    }
</div>

Please let me know if you have similar problem before

Thanks & Regards

Answer 1

Several things are causing this problem but let go from the beginning.

jQuery Mobile can't style and enhance page content before web server handles all responses back to your browser client. So lets say your page has additional cca. 50 files (different images, js and css files etc.) plus there's a loot of PHP includes on your server side.

In this case server side PHP will first try to handle all file includes. But this process is not parallel, it will not happen all at once. This is the first performance block, and looking it your PHP code it is probably number one culprit.

Second step is also problematic, lets say PHP has finished content generation and response is sent to client browser. Again responses will not be handled all at the same time, each web server has a limit of how much responses can be handled per single session. So if you have for example 50 files (different images, js and css files etc.) it will take at average 10x more time to load everything then it will take to load only 5 files (of course this differs depending on file sizes).