目前最佳的HTML/CSS/Javascript配置是什么？

Question

目前最佳的HTML/CSS/Javascript配置是什么？

javascriptjqueryhtmlcssw3c

6

我越来越深入地学习jQuery，因此我建立了一个基于HTML/Javascript/CSS的网站，用于进行所有测试。

由于这些测试最终将变成PHP和ASP.NET MVC网站，我想利用这个机会在构建脚本语言之前，再次为现代浏览器和Web标准掌握基础知识。

我选择使用：

XHTML 1.0 Strict
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");
}

- Edward Tanguay

1

对我来说，你所做的选择看起来很不错。XHTML严格模式、UTF-8、jQuery……当你进行一些研究和测试，找出通常最好的方案时，我认为这就是关键。 - markus

4个回答

5

将 <script> 块移动到页面底部。请参考此文。

- Rob

1

嗯，我明确地将它们再次移动到页面顶部，因为我曾经有过jquery效果在页面完全加载之前不起作用的经验，例如，我有一个翻译卡片网站，用户必须等待完整页面加载（5秒）才能翻转卡片，但我一直听说这是最佳实践，但如果像http://www.apple.com这样的网站在页面顶部有12个脚本引用，那么情况肯定不会太糟糕。 - Edward Tanguay

3

浏览器通常逐个加载 JavaScript 文件。如果你把它们移到末尾，其他所有请求都会在 JavaScript 加载开始之前并行处理，因此页面加载速度通常会更快。如果你的页面加载时间非常长，界面在加载完成之前无法正常功能，你可能需要一条可见的加载信息，真正的内容隐藏直到界面可用为止。最后加载的 JavaScript 代码将包含删除加载图像并显示界面的代码。 - tvanfosson

4

关于CSS和JS文件，一般情况下，我不会在开发过程中将所有JS文件合并成一个文件。这样在一个大的JS文件中进行开发会变得非常困难。相反，可以使用一个模块来在运行时或部署期间将它们组合起来。

通常我会选择（无论是CSS还是JS）：

一个通用文件：

- project.css

每个页面一个文件：

- project_welcome.css

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

这样你就可以应用一些组织技巧，而不会因为管理单个大文件而变得疯狂。

希望对你有所帮助。 Alex

- Alex Duggleby

同意，文件数量少并不会带来任何速度优势，相反我会打赌会有相反的结果。无论如何，在第一次请求后所有内容都会被缓存。 - simon

嗯，我曾在我的PHP网站中使用过几十个JavaScript文件，但现在决定改用一个文件，因为我一直在阅读有关“每个主机名同时下载两个文件”的问题是网站速度瓶颈之一的说法，这是真的吗？ - Edward Tanguay

是的，我可以确认，如果您使用与我提到的类似的方法，您很容易会让浏览器尝试加载50多个JS + CSS文件，这将导致它在第一次访问时需要很长时间。每次更新后都会发生相同的情况...当然，缓存会在此之后启动，但是如果您的访问者在第一次加载时间过长后不再返回，那么这并不重要。而且，像压缩JS这样的事情更容易一旦您将其处理成一个单独的JS文件。 - Alex Duggleby

1

在开发过程中，可以使用适当数量的单独文件。在部署时，您可能考虑使用一个工具将脚本连接在一起并进行缩小（即删除无用的空格和其他技巧以减小文件大小）。您还可以考虑在浏览器支持的情况下使用mod_gzip（或适当的等效物）来提供压缩文件。 - Rob

+1 for gzip 和 minification（代码压缩）: http://developer.yahoo.com/performance/rules.html#gzip, http://developer.yahoo.com/performance/rules.html#minify - Rich Seller

0

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

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

- mager

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alex Duggleby · Accepted Answer

个人而言，我会通过jQuery绑定点击事件来确保良好的分离，像这样：

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

通过这种方式，您可以绑定多个事件处理程序。如果只使用onclick，据我所知，您只能使用一个处理程序。

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

$("#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 Alex