Question

我是html和css的新手，当我在本地服务器上测试页面时，需要时间才能加载，我很害怕在互联网上花费的时间。我在顶部的<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>

Answer 1

最好的方法是使用Google Hosted Libraries

链接您的jQuery库

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

您可以采取的其他措施来增加页面加载量，这样可以缩小CSS的范围。将脚本链接到外部.js文件，从而增加了缓存的可能性，下次用户不需要脚本，除非并且直到它被更改。

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

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

还有更多的调整和调整可以继续...尝试在Google上搜索它们，你会得到很多

Answer 2

缩小你的css和js
如果可以，请将css和js统一为更大的文件（此结果为对服务器的唯一调用）
对于jQuery问题：使用Google库

这些只是我脑海中的第一次......正如其他用户对你说的那样，有十几种东西会让你的网站变慢，你必须调查并尝试准确理解你的底线在哪里是（是）

Answer 3

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

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

Answer 4

参考Yahoo Performance Tips

将CSS和JS移动到单独的文件＆amp;缩小CSS和JS
使用CSS图像精灵技术
在关闭正文标记

如何改进包含css和jquery文件的页面加载

4 个答案: