jsp页面中的代码执行加载顺序

一.jsp页面中的代码执行加载顺序介绍

1. java是在服务器端运行的代码,jsp在服务器的servlet里运行,而javascript和html都是在浏览器端运行的代码。所以加载执行顺序是是java>jsp>js。

2. js在jsp中的加载顺序

页面上的js代码是html代码的一部分,所以页面加载的时候是由上而下加载。所以js加载的顺序也就是页面中<script>标签出现的顺序。<script>标签里面的或者是引入的外部js文件的执行顺序都是其语句出现的顺序,其中js执行的过程也是页面装载的一部分。

2.1 在js脚本中定义的全局变量和函数,都可以在后面的脚本中调用。变量的调用,必须是前面已经声明了的,否则变量返回的值是undefined。同一段脚本中,函数定义可以出现在函数的调用后面;若函数的定义和调用在两个脚本段中,函数调用在函数定义之前就会报函数未定义错误。

2.2 js中出现ajax的异步加载

由于ajax的异步加载可能会导致语句的执行顺序并不是按照语句的出现顺序来执行。下面以我做任务时遇到的问题为例:

在页面初始加载的时候需要向jsp发送请求来获得该页面所需的数据,在ajax成功函数中,对data的操作所需时间过长,就会导致在ajax函数外面的confirm与loadTree比data操作后面的语句先执行。最终在loadTree中使用data的值得时候就为空,此时全局变量openTab_Id就为空。

二.关于JS和html代码的执行先后有关问题

关于JS和html代码的执行先后问题

  JS代码可以在html代码的<head>和<body>里面引用,所以按照解析html代码的先后顺序来决定JS的执行的先后顺序,可以看下面的一段代码来验证:

  1.在<head>里面的JS谁先被引用,谁就优先执行,在本例中外部引用的JS第一个执行。紧接着下面的一个<script>“最先实行”代码执行。

  2.在<body>里面的JS要比<head>里面的JS后执行,因为html代码是先执行<head>再执行<body>的,紧接着执行“中间执行1”,然后页面上执行html代码“This is my JSP page. ”,在按照顺序执行“中间执行2”的JS代码。

       3.执行-----------------------我是documengt--中间执行3

  4.最后页面全部加在完成之后,就是从<head>一直到<body>全部执行完,出发页面加载完成函数onload(),然后处罚“最后执行”JS。

  5.关于CSS样式,直接在标签后面style引用效果最强,在head里面定义的样式引用效果次之,在head里面引用外部的样式效果最弱,用JS改写的样式,一般比直接引用的样式要强。

注意:   window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
               $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。            

              window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 

              $(document).ready()可以同时编写多个,并且都可以得到执行 

-------------------------------------------------------------------------------------------------------------------------------------

  <!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript">
 alert("最先执行");
   </script>
<script type="text/javascript">
  $(document).ready(function(){
    alert("我是documengt--中间执行3");
  })
</script>
</head>
<body onload="alert('最后执行');">
  <script type="text/javascript">
  alert("中间执行1");
  </script>
  This is my JSP page. <br>
  <script type="text/javascript">
  alert("中间执行2");
  </script>
</body>


 
</html>

猜你喜欢

转载自blog.csdn.net/qq_39949109/article/details/82683951