js加载、执行顺序

js加载与执行顺序：

ie：head内外都是异步加载，同步执行

非ie：head里异步加载，head外同步加载，head内外都同步执行

async：规定异步执行脚本（仅适用于外部脚本）（html5）

defer：规定是否对脚本执行进行延迟，直到页面加载为止。(ie特性)

<html>
<head>
    <script type="text/javascript">var str='1';</script>
    <script type="text/javascript">console.log('a'+str);</script>
    <script type="text/javascript" src="http://misc.secoo.com/js/jquery-1.8.3.min.js"></script>
    <!-- <script type="text/javascript" src="http://coolshell.cn/asyncjs/alert.js"></script> -->
    <script type="text/javascript" src="http://my.secoo.com/order/test.jsp"></script>
    <script type="text/javascript">console.log('a'+str);</script>
    <script type="text/javascript">str = '3';</script>
    <script type="text/javascript">console.log('a'+str);</script>
    <script type="text/javascript" src="http://pifa.secoo.com/js/secoo.tools.min.js"></script>
    
    
    
</head>
<body>
12
    <script async="async" type="text/javascript">var str2='1';</script>
    <script async="async" type="text/javascript">console.log('b'+str2);</script>
    <script async="async" type="text/javascript" src="http://misc.secoo.com/js/jquery-1.8.3.min.js?#"></script>
    <!-- <script type="text/javascript" src="http://coolshell.cn/asyncjs/alert.js"></script> -->
    <script async="async" type="text/javascript" src="http://my.secoo.com/order/test.jsp?#"></script>
    <script async="async" type="text/javascript">console.log('b'+str2);</script>
    <script async="async" type="text/javascript">str2 = '3';</script>
    <script async="async" type="text/javascript">console.log('b'+str2);</script>
    <script async="async" type="text/javascript" src="http://pifa.secoo.com/js/secoo.tools.min.js?#"></script>
</body>
</html>

<%@page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%>
<%

    Thread.currentThread().sleep(1000*10);
    response.getWriter().write("var test=1; str=2");

%>

==========================================================

加载：当<script>节点在<head>外，则为同步加载(后面的节点加载被阻断)，当在<head>内部，则为异步加载(加载不被阻断)
执行：同步执行，当一个加载未完成时，其后面的脚本执行将被阻断(即当前脚本的执行会在其前面的脚本加载完成后进行)

1.test.jsp

2.test_logic.jsp

Thread.currentThread().sleep(10*1000); response.getWriter().write("var test = 1;");

3、代码块
JavaScript中的代码块是指由<script>标签分割的代码段。例如：
<script type="text/javascript">alert("代码块");</script>

JS是按照代码块来进行编译和执行的，代码块间相互独立，但变量和方法共享。例如：
<script type="text/javascript">
alert(str);//因为没有定义str，所以浏览器会出错，下面的不能运行
alert("我是代码块一");//没有运行到这里
var test = "我是代码块一变量";
</script>
<script type="text/javascript">
alert("我是代码块二"); //这里有运行到
alert(test); //弹出"我是代码块一变量"
</script>
上面的代码中代码块一中运行报错，但不影响代码块二的执行，这就是代码块间的独立性，而代码块二中能调用到代码一中的变量，则是块间共享性。

4、声明式函数与赋值式函数
JS中的函数定义分为两种：声明式函数与赋值式函数。
<script type="text/javascript">
function Fn(){//声明式函数}
var Fn = function{//赋值式函数}
</script>
声明式函数与赋值式函数的区别在于：在JS的预编译期，声明式函数将会先被提取出来，然后才按顺序执行js代码。

参考：http://blog.csdn.net/chen_zw/article/details/18502937

posted @ 2013-12-10 19:08 zbjice 阅读(446) 评论(0) 收藏举报

刷新页面返回顶部

Jice's Blog

js加载、执行顺序

公告