script 放置最佳位置以及 html 执行顺序

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

看到知乎上有很多讨论关于javascript位置的文章。所以特意留意了这方面的问题。

　　首先要了解到的是：

　　　　html文件是自上而下的执行方式，但引入的css和javascript的顺序有所不同，css引入执行加载时，程序仍然往下执行，而执行到<script>脚本是则中断线程，待该script脚本执行结束之后程序才继续往下执行。

　　　　所以，大部分网上讨论是将script脚本放在<body>之后，那样dom的生成就不会因为长时间执行script脚本而延迟阻塞，加快了页面的加载速度。

　　　　但又不能将所有的script放在body之后，因为有一些页面的效果的实现，是需要预先动态的加载一些js脚本。所以这些脚本应该放在<body>之前。

　　　　其次，不能将需要访问dom元素的js放在body之前，因为此时还没有开始生成dom，所以在body之前的访问dom元素的js会出错，或者无效

　　　　直接上代码

</head><script type="text/javascript">document.getElementById("text").innerHTML="hello world";</script><body><h1 id="text"></h1></body>
</html>

　　　　此时结果空白一片。

　　　　将script脚本放在body之后

<body><h1 id="text"></h1>
</body>
<script type="text/javascript">document.getElementById("text").innerHTML="hello world";
</script>

　　　　有了结果

　　　　所以，我认为script放置位置的原则“页面效果实现类的js应该放在body之前，动作，交互，事件驱动，需要访问dom属性的js都可以放在body之后”。

转自：http://www.cnblogs.com/iamwangxupeng/p/4950255.html

script 放置最佳位置以及 html 执行顺序相关推荐

JavaScript的预编译及执行顺序
从JavaScript引擎的解析机制来探索JavaScript的工作原理,下面我们以更形象的示例来说明JavaScript代码在页面中的执行顺序. 如果说,JavaScript引擎的工作机制比较深奥是 ...
script标签的加载解析执行
看了很多网上的文章,都是大同小异.总结一下.内部原理还没有搞清楚,有机会再学习. 一.<script>标签的加载解析执行顺序 html页面中的<script>标签中的内容(直接 ...
关于script标签在HTML页面放置的位置
一般script标签会被放在头部或尾部,头部就是head标签里,尾部就是body里,也有放在body闭合标签之后. 1.script标签放在head标签内部 <head><title ...
html/css基础篇——link和@inport详解以及脚本执行顺序探讨
先说一说两者之间的异同两者都可以引用外部CSS的方式,现在主流浏览器两者都支持(ps:@import是CSS2.1提出的),但是存在一定的区别: 1.link是XHTML标签,除了加载CSS外,还可 ...
Javascript在页面加载时的执行顺序
一.在HTML中嵌入Javasript的方法直接在Javascript代码放在标记对<script>和</script>之间由<script />标记的src属 ...
Execution Order of Event Functions, unity 3d 事件函数的执行顺序
vs_Community.exe --layout "F:\linson\vs2017 comm\offline" --lang zh-CN 学习unity3d,感觉事件顺序很重要 ...
Javascript在页面加载时的执行顺序(转载）
原文:http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/ 一.在HTML中嵌入Javasript的方 ...
vue生命周期，vue执行顺序图，钩子函数
一.生命周期导图通过代码,理解生命周期,查看钩子函数的执行顺序注:复制就可以运行查看 <!DOCTYPE html> <html> <head><titl ...
var和function谁先优先执行_js函数和变量的执行顺序【易错】
js函数和变量的声明与执行顺序一.函数执行顺序 1.正常顺序 1 function f(){2 alert(2);3 }4 f(); //alert 2 所有浏览器都能测试通过. 2.倒序调用 1 ...

script 放置最佳位置以及 html 执行顺序

script 放置最佳位置以及 html 执行顺序相关推荐

最新文章

热门文章