vs4*_*jay 10 javascript twitter-bootstrap
可能重复:
页面底部的Javascript？
我在一些twitter bootstrap示例中看到了一条评论.它说
JavaScript放在文档的末尾,因此页面加载速度更快
这是真的？？如果是,那么它是如何工作的？
Muh*_*ani 10
有许多优点
- 没有必要检查是否加载了DOM,因为最后有脚本,你肯定知道它是.
- 在Web浏览器开始下一个JavaScript文件之前,必须完全加载JavaScript脚本文件.如果JavaScript文件包含在文档顶部,则其效果是在最终用户看到实际页面之前它将是一个视觉延迟.如果在文档末尾包含JavaScript文件,则可以完全避免这种情况.
也有一些限制
虽然在底部包含JavaScript文件可以帮助我们解决延迟页面呈现的问题,从而给人的印象是网站中的每个页面加载速度更快,但确实存在缺陷.
如果页面对最终用户可见,但JavaScript文件尚未完成加载,则尚未对元素应用任何事件(因为每个人都使用不显眼的方法,对吧？)并且用户可能会开始点击而不是获得预期的结果.
如果你有适当的回退,例如一个链接元素,如果支持JavaScript并且已经应用了正确的事件,则通过AJAX获取内容,否则它是通向另一个页面的普通链接,那么问题就不那么糟了.但是仍然有点烦人.
这里有用的文章
如果浏览器遇到<script>标记,HTMLRenderer将默认停止,ECMAscript解析器将完成其工作.该HTMLRenderer将不会继续,直到所有的Javascript代码完全evalutated.
因此,如果您<script>的" 上层 "HTML代码中有许多标记和大量Javascript代码,则您网站的查看者可能会实现缓慢的加载过程.
有几种方法可以避免这个问题.首先,正如您所提到的,只需将所有Javascript代码和<script>标记放在<body>元素的最底部即可.这可确保至少所有HTML标记和样式表定义都已完全加载.
另一个选项是标签名称的<script>元素本身.如async和defer将指示浏览器/JS解析器是不需要这个填充即可立即下载并开始评估.例如
<script async defer src="/foo/bar.js"></script>
该HTML渲染器将实现标签并将其存储到一个队列,但它不会直接停止和评估.
| 归档时间： |
|
| 查看次数： |
9882 次 |
| 最近记录： |