目前最好的 HTML/CSS/Javascript 配置是什么？答案

【问题标题】：What is currently the best HTML/CSS/Javascript configuration?目前最好的 HTML/CSS/Javascript 配置是什么？
【发布时间】：2009-09-26 11:26:00
【问题描述】：

我对 jQuery 有了更多了解，因此建立了一个 HTML/Javascript/CSS 基础站点，我将其用于所有测试。

由于这些测试最终会变成 PHP 和 ASP.NET MVC 网站，我想借此机会再次了解现代浏览器和 Web 标准的基础知识，然后再构建脚本语言顶一下。

我选择使用：

XHTML 1.0 严格
UTF-8 编码
尽可能少的 CSS 引用（将所有内容放在 1 个 CSS 文件中以提高加载速度）
尽可能少的 Javascript 引用（1 个 javascript 文件 加上 jquery 代码库引用 - 我认为使用 Google jQuery 代码库是提高速度的最佳实践）李>
我在使用http://validator.w3.org 构建代码时检查我的代码

还有什么我需要考虑的吗？

这是我的一个测试网站的示例：

index.htm：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <title>Text XHTML Page</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript" src="javascript/main.js"></script>       

    </head>

<body>
    <h1 class="highlightTitle">Text</h1>
    <p class="main">First</p>
    <p>Second</p>
    <p id="selected" class="regular">Third</p>
    <p>Fourth</p>

<form action="">
    <div>
        <input type="button" value="highlight it" onclick="highlightIt();countThem()" /> 
        <input type="button" value="highlight title" onclick="highlightTitle()" />
        <p>here is another paragraph</p>
    </div>
</form>

</body>
</html>

main.cs:

p.highlighted {
    background-color:orange;
}
h1.highlightTitle {
    background-color:yellow;
}
h1.deselected {
    background-color:#eee;
}
p.regular {
    font-weight: bold;
}

main.js：

google.load("jquery", "1.3.2");

function highlightIt() {
    $('#selected')
        .toggleClass('highlighted');
}

function countThem() {
    alert("there are " + $("p.main").size() + " paragraphs");
}

function highlightTitle() {
    $("h1").toggleClass("deselected");
}

【问题讨论】：

对我来说，你做出的选择看起来不错。 xhtml strict, utf-8, jquery ...我认为这就是当您对通常最有效的方法进行一些研究和测试时归结为的原因。

标签： javascript jquery html css w3c

【解决方案1】：

我个人会通过 jQuery 绑定到 click 事件以确保良好的分离，如下所示：

$("#yourId").bind("click", highlightIt);

这样您可以绑定到多个事件处理程序。如果您只使用 onclick AFAIK，则只能使用一个处理程序。

顺便说一句，您还可以使用自定义事件和事件命名空间：

$("#yourId").bind("beforeHighlighting", doSomething);

由

触发

$("#yourId").trigger("beforeHighlighting");

和

$(".hasAHelptext").bind("helptext.click", showHelptextFct);
$(".hasAHelptext").bind("click", otherFct);

// will only remove the showHelptextFct event handler
$(".hasAHelptext").unbind("helptext.click");

HTH 亚历克斯

【讨论】：

谢谢，是的，不显眼的 javascript 是我在构建这些示例时会坚持的另一个设计目标，只是还没有进入这个示例:-(

【解决方案2】：

将<script> 块移动到bottom of the page。

【讨论】：

hmm，在经历了 jquery 效果在页面完全加载之前不起作用之后，我再次明确地将它们移到了页面顶部，例如我有一个抽认卡网站，用户必须等待整个页面加载（5 秒）才能翻转抽认卡，但我一直听说这是最佳实践，但如果网站像apple.com 在页面顶部有 12（十二）个脚本引用。
浏览器通常一次处理加载一个文件。如果您将它们移到最后，您的页面通常会加载得更快，因为所有其他请求将在 javascript 加载开始之前并行处理。如果您的页面需要很长时间才能加载并且界面在加载之前无法正常运行，那么您可能希望在界面可用之前隐藏真实内容可见的加载消息。加载的最后一点 javascript 将包含删除加载图像并显示界面的代码。

【解决方案3】：

对于一般的 CSS 和 JS 文件，我不会在开发过程中将所有 JS 文件合并到一个文件中。在一个大的 JS 文件中开发变得非常困难。而是使用在运行中或在部署期间组合它们的模块。

我通常使用（CSS 和 JS）：

一个通用文件：

project.css

每页一个：

project_welcome.css

任何特殊组件（登录控件、广告区域视图等）也有一个单独的组件。

这样您就可以应用一些组织技术，而不会因为管理单个大文件而发疯。

HTH 亚历克斯

【讨论】：

其次，减少文件不会带来任何速度优势，我敢打赌相反。无论如何，在第一次请求之后它都被缓存了。
嗯，我曾经在我的 PHP 网站中有几十个 javascript 文件，但现在我决定切换到一个，因为我一直在读到“每个主机名同时下载两个”问题是最大的速度瓶颈之一对于网站，不是吗？
是的，我可以确认，如果您使用与我提到的类似的方法，您很容易导致浏览器尝试加载 50+ JS + CSS 文件，这在第一次点击时会导致它占用很长时间。并且在每次更新之后都会发生同样的事情等等......当然，缓存会在那之后启动，但是如果您的访问者在第一次加载时间太长后没有回来，这并不重要。一旦你将它处理成一个单独的 JS 文件，像缩小 JS 这样的事情会更容易。
在开发过程中使用适当数量的单个文件。在部署中，您可能会考虑使用将脚本连接在一起并缩小它们的工具（即删除无用的空格和其他技巧以减小文件大小）。您可能还考虑使用 mod_gzip（或适当的等效项）来提供浏览器支持的压缩文件。
+1 用于 gzip 和压缩：developer.yahoo.com/performance/rules.html#gzip, developer.yahoo.com/performance/rules.html#minify

【解决方案4】：

我建议将 JS 调用放在 body 标记下方。如果您的脚本挂起，则页面可以加载并让行为 (JS) 在事后加载。我注意到使用这种方法可以大大提高速度。

看看这个：http://stevesouders.com/hpws/rule-js-bottom.php

【讨论】：