javascript在 html 文档中的执行顺序
来源:互联网 发布:结构化数据 编辑:程序博客网 时间:2024/05/30 07:12
html
文档在浏览器中解析的过程是这样:浏览器按照文档流从上到下逐步解析页面结构和信息。js
代码作为嵌入的脚本也算做html
文档的组成部分,因此,js
代码在装载时的执行顺序也是根据脚本标签<script>
的出现来顺序来决定。
<!DOCTYPE html><script> console.log("顶部脚本");</script><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> console.log("头部脚本"); </script></head><body> <script> console.log("页面脚本"); </script></body></html><script> console.log("底部脚本");</script>
还有对于通过脚本标签<script>
的src
属性导入的外部js
文件脚本,它也将按照其语句出现的顺序来执行,而且执行过程是文档装载的一部分,不会因为是外部js
文件而延期执行。
// 先加载 b.js 并且执行里面的代码<script src="b.js"></script>// 然后在按顺序执行下面的代码<script> console.log(1);</script>
分块执行代码
js
是按块执行代码的,所谓代码块就是使用<script>
标签分隔的代码段。(下面一个栗子)
<script> // 代码段1 var a = 1;</script><script> // 代码段2 function f() { console.log(1); };</script>
因为js
是按代码块来执行的。浏览器在解析html
文档流的时候,如果遇到一个<script>
标签,则js
会等到这个代码块都加载完之后再对代码进行预编译,然后在执行。执行完毕后,浏览器会继续解析西门的html
文档流,同时js
也准备好处理下一个代码块。
有个小坑,由于js
是按块执行的,因此在一个js
块中调用后面块声明的变量或者函数就会提示语法错误。但是不同块都属于一个全局作用域,也就是说,块之间的变量和函数是可以共享的。(下面一个栗子)
这个是重点:对比下面两个代码段,避免出现错误
<script> // 代码段1 console.log(a); f();</script><script> // 代码段2 var a = 1; function f() { console.log(1); };</script>
由于js
是按块处理代码,同时又遵循html
文档流的解析顺序,因此在上面的栗子中会看到语法错误。但是,在文档流加载完毕后再次访问就不会出现这种错误了。(下面一个栗子)
<script> window.onload = function(){ // 页面初始化事件处理函数 // 代码段1 console.log(a); f(); }</script><script> // 代码段2 var a = 1; function f() { console.log(1); };</script>
还有为了安全起见,一般在页面初始化完毕之后才允许js
代码执行,这样就可以避免一些网速对js
执行的影响。同时,也避开了html
文档流对js
执行的限制。
0 0
- javascript在 html 文档中的执行顺序
- 【原创】Javascript在html中的执行顺序
- JavaScript在HTML中的执行顺序与运行机制
- js在html中的加载执行顺序
- js在html中的加载执行顺序
- js在html中的加载执行顺序
- js在html中的加载执行顺序
- js在html中的加载执行顺序
- js在html中的加载执行顺序
- JavaScript在页面中的执行顺序
- 9.22 CSS复合属性和JavaScript在Html页面中的执行顺序
- JavaScript在Html中的解析顺序
- javascript在html中的加载顺序
- Javascript 在html 中的加载顺序
- Javascript在html加载时的执行顺序
- 浏览器执行javascript html 顺序
- 多个jquery{}在html中的执行顺序
- js在html中的加载执行顺序,多个jquery ready执行顺序
- async
- android-webView使用问题
- Linux 进程
- tcp/ip1
- javaWeb学习_04:js的基本对象
- javascript在 html 文档中的执行顺序
- 端口占用
- mysql基础的一些注意事项
- ListView选中多个item、改变背景、输入框的综合处理
- android-webView 定位功能开启
- Tomcat服务器的安装和启动
- 数据机构1
- 《Java高并发程序设计》学习 --5.3 并行模式之生产者-消费者模式
- TCP/IP 如何断开连接