Yug*_*dle 26 html javascript css jquery
我很困惑哪些JavaScript应该包含在哪里？
例如:
应该在哪里包含jQuery库？在<head>关闭</body>元素之前还是之前？
如果JavaScript在底部定义<body>,它可以在体内使用吗？
如果它阻止并行下载,那为什么它从未说过将CSS包含在底部呢？
Jos*_*eph 22
加载CSS是<head>为了防止Flash Of Unstyled Content(FOUC),这种情况下你的页面会在瞬间显示没有样式.加载它们<head>是一个小小的牺牲,以确保在呈现内容时您的页面看起来很完美.
JS在底部加载了几个(但不限于以下)原因:
这样它就不会阻止其他资源的加载和页面的呈现.
JS的传统用法是增强,如客户端验证和次要特效.这些通常是可选的,不会影响页面的总体用途.因此它们最后加载.
在内容之后添加脚本可确保安全访问脚本引用的元素,因为它们已经在DOM上.
但该规则有一些例外:
"飞行前图书馆",如Modernizr
Modernizr在<html>标签上应用类来表示功能的可用性,这些功能可用于JS和CSS目的.延迟这种情况可能会因类添加而导致样式突然转移,以及由于先前没有进行检查而导致JS损坏.
像LESS/SASS这样的CSS解析器和影响样式的脚本
远程LESS/SASS样式通过AJAX加载,因此无论样式是否准备好,页面都会呈现.将它们装入头部将使它们尽可能早地加载样式以避免FOUC.
像RequireJS这样的"Bootloader库"需要尽早加载以并行下载其他脚本.
Web应用程序需要JS作为平台.你最好早点加载这些库.此外,在webapp中,应用程序运行之前存在最少的页面内容.
这里有两个值得提及的脚本属性,它们是defer和async.
基本上,我们的想法是defer只在解析DOM之后运行脚本标记,并且async异步加载脚本的脚本标记不会阻止其他操作.可以暗示您可以在头部使用脚本,应用于async并行加载它们,并defer确保DOM在执行时已准备好,但每个都有它自己的问题.
这是一个MDN文档,解释了它们的内容以及几乎可以解释它们的历史,支持和当前状态的答案.
use*_*064 10
脚本元素阻止渐进式页面下载.
浏览器一次下载几个组件,但是当它们遇到外部脚本时,它们会停止进一步下载,直到下载,解析和执行脚本文件.
这会损害整个页面时间,尤其是在页面加载期间多次发生这种情况时.
要最小化阻止效果,可以将脚本元素放在页面末尾,就在结束标记之前.
这样,脚本就没有其他资源可以阻止.其余的页面组件将被下载并且已经吸引用户.
最糟糕的反模式是在文档的头部使用单独的文件:
<!doctype html>
<html>
<head>
<title>My App</title>
<!-- ANTIPATTERN -->
<script src="jquery.js"></script>
<script src="jquery.quickselect.js"></script>
<script src="jquery.lightbox.js"></script>
<script src="myapp.js"></script>
</head>
<body>
...
</body>
</html>
更好的选择是组合所有文件:
<!doctype html>
<html>
<head>
<title>My App</title>
<script src="all_20100426.js"></script>
</head>
<body>
...
</body>
</html>
最好的选择是将组合脚本放在页面的最后:
<!doctype html>
<html>
<head>
<title>My App</title>
</head>
<body>
...
<script src="all_20100426.js"></script>
</body>
"JavaScript模式,Stoyan Stefanov(O'Reilly).版权所有2010 Yahoo!,Inc.,9780596806750."
| 归档时间： |
|
| 查看次数： |
2335 次 |
| 最近记录： |