假设我有一个相当庞大的JavaScript文件,打包到大约100kb左右.通过文件我的意思是它是一个外部文件,将在via中链接<script src="...">,而不是粘贴到HTML本身.
哪个是放在HTML中的最佳位置？
<html>
<head>
<!-- here? -->
<link rel="stylesheet" href="stylez.css" type="text/css" />
<!-- here? -->
</head>
<body>
<!-- here? -->
<p>All the page content ...</p>
<!-- or here? -->
</body>
</html>
每个选项之间是否存在功能差异？
将script标记放在body(</body>)的结束标记之后是多么错误.？
<html>
....
<body>
....
</body>
<script type="text/javascript" src="theJs.js"></script>
</html>
如何正确地将JavaScript文件链接到HTML文档？
其次,如何在JavaScript文件中使用jQuery？
我已经看到了两种方式,两种方式的实现工作只是结构有点不同.根据您的经验,哪个更好,为什么？
这是我的简短HTML文档.
为什么Chrome控制台会注意到此错误:
"未捕获的TypeError:无法调用方法'appendChild'的
null"？
<html>
<head>
<title>Javascript Tests</title>
<script type="text/javascript">
var mySpan = document.createElement("span");
mySpan.innerHTML = "This is my span!";
mySpan.style.color = "red";
document.body.appendChild(mySpan);
alert("Why does the span change after this alert? Not before?");
</script>
</head>
<body>
</body>
</html>
我最近阅读了雅虎宣言加速你的网站的最佳实践.他们建议我们尽可能将JavaScript包含在HTML代码的底部.
但究竟何时何地？
我们应该在收盘前</html>还是之后放？最重要的是,我们什么时候应该把它放在这个<head>部分？
我正在研究的团队已经养成了<script>在HTML页面正文中随机位置使用标记的习惯.例如:
<html>
<head></head>
<body>
<div id="some-div">
<script type="text/javascript">//some javascript here</script>
</div>
</body>
</html>
我以前没见过这个.它似乎适用于我测试过的少数浏览器.但据我所知,将脚本标签放在这样的地方是无效的.
我错了吗？我们在这样的div标签中放置脚本标签有多糟糕？我应该注意哪些浏览器兼容性问题？
Google Analytics在多大程度上会影响效果？
我正在寻找以下内容:
在您的网站上测试Google Analytics(GA)的一种(可能的)方法:
我很想知道这会如何减少客户端Web服务器和GA服务器之间的通信.
有没有人进行过这些测试？如果是这样,你能提供你的结果吗？如果没有,是否有人有更好的方法来测试使用GA的性能损失(或缺乏)？
可以按任何顺序使用任何东西？放置<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">之前很重要<title>
这是最常用的,是最好的方法吗？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Title Goes Here</title>
<link rel="stylesheet" href="http://sstatic.net/so/all.css?v=5912">
<link rel="shortcut icon" href="http://sstatic.net/so/favicon.ico">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#wmd-input").focus();
$("#title").focus();
$("#revisions-list").change(function() { window.location = '/posts/1987065/edit/' + $(this).val(); });
});
</script>
</head>
<body>
<p>This is my web page</p>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools.js"></script>
</body>
</html>
这个网站http://stackoverflow.com没有任何编码和<meta>
我使用一个具有SEO组件的CMS,它<meta>在所有js和css之后为SEO 添加了每个组件.文件.可以在<head>影响文档兼容性和编码中允许的任何顺序放置任何元素吗？
让我们面对现实吧,jQuery/jQuery-ui是一个重载下载.
Google建议延迟加载JavaScript以加快初始呈现速度.我的页面使用jQuery来设置一些位于页面下方的选项卡(主要是在初始视图之外),我想将jQuery推迟到页面呈现之后.
Google的延迟代码在页面加载后通过挂钩到正文onLoad事件为DOM添加标记:
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
我想以这种方式推迟加载jQuery,但是当我尝试它时,我的jQuery代码无法找到jQuery(我不是完全出乎意料):
$(document).ready(function() {
$("#tabs").tabs();
});
所以,似乎我需要找到一种方法来推迟执行jQuery代码,直到加载jQuery.如何检测添加的标签是否已完成加载和解析？
作为推论,似乎异步加载也可能包含答案.
有什么想法吗？
javascript ×8
html ×6
jquery ×2
optimization ×2
performance ×2
benchmarking ×1
coding-style ×1
css ×1
pagespeed ×1
w3c ×1
xhtml ×1