如何改善包括CSS和jQuery文件在内的页面加载

我是HTML和CSS的新手，当我在本地服务器中测试页面时，加载需要时间，我害怕在Internet上需要什么时间。我将所有文件都包括在顶部的<head>标签中，是否有更好的方法来改进页面加载。

我的一些页面代码在这里

<?php
    include "check_timeout.php";
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script src="js/jquery-1.2.3.pack.js"></script>
        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/new_product_page.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/application.js"></script>
        <script src="js/bootswatch.js"></script>
        <script src="js/all_events.js"></script>
        <link href="css/bootstrap.css" rel="stylesheet" media="screen">
        <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
        <link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
        <link href="css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<?php               
            $qMaxPr_id = "SELECT MAX(prd_id) from prd_list WHERE 1";
            $getMaxPr_id = mysql_query($qMaxPr_id,$con) or die("could not get usr_id : ".mysql_error());
            while($infoResult =  mysql_fetch_assoc($getMaxPr_id))
            {
                $prd_id = $infoResult['MAX(prd_id)'];
            //  echo $usr_id;   
            }
            $prd_id = $prd_id+1;            
?>
        <title>Add Product</title>
</head>
<body>
<?php
    include 'menu.html';
?>
   <form id="form_new_product_page" method="post" action="">
       ...
       ...
   </form>
</body>
</html>

最好的方法是使用 Google托管库

链接您的jQuery库

原因是许多网站链接到Google托管的库，这增加了您的用户在其他网站上冲浪时可能会被缓存的可能性...

您可以做的其他事情以增加页面负载是缩小您的CSS的。将脚本链接到外部.js文件，因此增加了缓存的机会，下次用户不需要脚本，除非并更改。

对于您网站上的图标，您可以使用sprites，这是保存多个HTTP请求

的好方法

对于图像，您应该在其他网站上托管

还有更多的调整和调整不断进行...尝试在Google上搜索它们，您将获得许多

缩小您的CSS和JS
如果可以
对于jQuery问题：使用Google库

这些只是我脑海中最初的头...正如其他用户对您所说的那样，有十几件事可以减慢您的网站，您必须调查并尝试准确地了解您的底部颈部的位置（S）IS（是）

由于您处于开发环境中，因此可以取决于您的IDE/部署机制。您可能会遇到部署延迟，而不是实际的加载时间！;）

此外，数据库访问可以减慢一些速度，但不用担心，只需使用页面上的加载覆盖层即可让用户知道发生了什么！

参考 yahoo绩效提示

将CSS和JS移动到分开文件＆amp;缩小CSS和JS
使用CSS图像精灵技术
在关闭身体标签之前，请参阅底部的JS

相关内容

最新更新

热门标签：