2013-11-15 87 views
1

我新来使用javascript &我每天都在学习更多&。 我对加载的基本知识有一些疑问,执行&推迟加载JavaScript。我越搜索&读这个在不同的地点越糊涂,我得到...加载JavaScript文件

问题:

1的外部文件加载在<head>对这些文件的装载在文件末尾&就在</body>之前。

这里有什么区别? 我已经了解到,当在</body>之前放置加载时,在js执行之前加载文档。但渲染的文件呢?在执行js之前文档的呈现是否也发生?像这样:文档

1加载

2的文档渲染

3的JS-文件加载

4 JS的执行

2的JS-文件推迟装载。我已阅读Google的js-loading的推荐。我的问题与上面的一样。什么时候发生的实际渲染?

谷歌recomends使用此代码:

<script type="text/javascript"> 
function downloadJSAtOnload() { 
var element = document.createElement("script"); 
element.src = "your-js-file.js"; 
document.body.appendChild(element); 
} 
if (window.addEventListener) 
window.addEventListener("load", downloadJSAtOnload, false); 
else if (window.attachEvent) 
window.attachEvent("onload", downloadJSAtOnload); 
else window.onload = downloadJSAtOnload; 
</script> 

这里是顺序如下?:

1的文件加载

2的JS-文件

3执行加载js

4文件的渲染

真的希望有人能为我分享一些光... 最佳,尼克拉斯

回答

0

与谷歌试图体结束顺序权之前是:

  1. 的文件
  2. 渲染doument的
  3. 在js文件的执行(谷歌建议代码加载)
  4. 加载外部JS
  5. 执行外部JS

但是,如果你想包括像jQuery库,你有你的文档中根据代码, 我宁愿身体结束内幕准备的文档权之前加载<head>

库和依赖的js代码包裹

这样的顺序将是文档

  1. 加载和外部ressources
  2. 渲染文档
  3. 文件执行JS
+0

非常感谢您花时间回答我的问题。 根据js-code的含义是什么? 这段代码是否改变了页面的视觉效果?例如: – NiklasWideC

+0

例如:您将jQuery包含为外部资源,并在您的文档中包含jquery-script,如果没有jquery库,那么jquery脚本将不会运行,因此存在依赖关系 –

0
  1. HTML渲染是一个渐进的过程,这意味着浏览器不会等到所有的HTML开始呈现前解析。
  2. 脚本可能被卸载的样式表阻止。
  3. 脚本将阻止文档的解析,直到脚本被提取并执行。

所以样式表应放置在<head>逐步呈现。脚本应放置在</body>之前以避免阻塞。

How browsers work

+0

好的,谢谢您花时间回答我的问题。 但是window.onload是做什么的? 这和将js文件加载到文档的末尾是一样的吗? 感谢您的链接! – NiklasWideC

+0

当DOM树及其内容(图像,CSS,脚本等)加载时,@NiklasWideC window.onload将被触发。所以他们不一样。在''之前放置脚本更像是'document.ready',在加载DOM树时会被触发。 – qiangwang