关于jsp、js、html代码执行顺序

最新推荐文章于 2021-03-01 17:03:38 发布

itzyjr

最新推荐文章于 2021-03-01 17:03:38 发布

阅读量6.6k

点赞数 4

本文链接：https://blog.csdn.net/itzyjr/article/details/70342086

版权

<html>
<head>
<script type="text/javascript">
	function jsLoad() {
		document.body.innerHTML += "#jsLoad:" + new Date().getTime();
	}
	function jsGo() {
		console.log("jsGo:" + new Date().getTime());
		<%
			System.out.println("Java in jsGo:" + System.currentTimeMillis());
		%>
	}
</script>
</head>
<body οnlοad="jsLoad()">
	<%="Java in htmlBody:" + System.currentTimeMillis()%>
	<input type="button" value="Click" οnclick="jsGo()" />
</body>
</html>

输出结果如下（按顺序排列）：
Java in jsGo:1492802686580（Eclipse控制台输出，这是服务器端，与前台显示没关）
Java in htmlBody:1492802686581（Html网页内容，直接浏览器渲染）
jsLoad:1492802687009（Html网页内容，直接浏览器渲染）
jsGo:1492802689999（浏览器客户端控制台(手动点击按钮后发生)）
=======================================================================
先通过上面的结果来看现象：
1.最初js方法jsGo没被调用，但里面的java代码直接执行了，在它上面的js代码都没执行。
2.<body>标签里面的java代码几乎与js里面的java代码同时执行，实际上很多时候两时间都一样。
3.<body>里面的onload方法在页面结束加载之后触发。
4.手动点击“Click”按钮后，浏览器控制台输出：jsGo:1492802689999，但并没有执行java程序。
=======================================================================
通过上面的现象，分析总结如下：
<%xxx%>这是jsp中嵌入的java程序，是在服务器端运行的。
<script>xxx</script>这是页面脚本，是在浏览器客户端运行的。

在编译jsp页面时，是直接编译里面的java代码，生成一个servlet，最终输出到前台的是一个html格式的流（原先所有的java代码都变成html里面的常量了），然后浏览器客户端对html进行解析渲染，在渲染时是标准的html格式，完全没有任何java代码（如果有浏览器也无法解析啊）。

JSP是Servlet的扩展，在没有JSP之前，就已经出现了Servlet技术。Servlet是利用输出流动态生成HTML页面，包括每一个HTML标签和每个在HTML页面中出现的内容。
每个JSP页面就是一个Servlet实例——JSP页面由系统编译成Servlet，Servlet再负责响应用户请求。JSP其实也是Servlet的一种简化，使用JSP时，其实还是使用Servlet，因为Web应用中的每个JSP页面都会由Servlet容器生成对应的Servlet。首次请求转化abc.jsp->xyzServlet.java->xyzServlet.class，再次请求就更快了。

响应给浏览器的html文档如下：

<html>
<head>
<script type="text/javascript">
	function jsLoad() {
		document.body.innerHTML += "#jsLoad:" + new Date().getTime();// 时间当然是在浏览器给出的，只有java代码是传来之前就已变成常量值了
	}
	function jsGo() {
		console.log("jsGo:" + new Date().getTime());
	}
</script>
</head>
<body οnlοad="jsLoad()">
	Java in htmlBody:1492802686581#jsLoad:1492802687009// 注：“#jsLoad:1492802687009”是在onload完成后加上去的
	<input type="button" value="Click" οnclick="jsGo()" />
</body>
</html>

点击“Click”按钮后执行js方法jsGo()，但里面已经没有java代码，所以当然不可能在控制台（而且还是服务器端的）打印出语句了。

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

从反向来分析一下：（页面上的js代码是HTML文档的一部分）

1.服务器如tomcat根本就没有去解析渲染html(包括js等页面脚本)的能力，故js的一些属性方法是不可能在服务器进行预执行的，如上面的new Date()当然是在浏览器每次加载网页时由浏览器去解析出来的。

2.浏览器压根就没有解析java代码的能力，所以到达浏览器的html页面里面一定是不包含java代码的。

3.服务器在把jsp编译成servlet时，由于无解析html、js脚本的能力，故只能直接把java代码编译完成，其他的原封不动交给浏览器去解析。

4.推论：js可以使用java的变量，但是java不可以使用js的变量。因为java代码只在服务器编译一次就完事了，成为html里面的常量值了，所以js当然可以直接调用，但服务器并不能识别js声明的变量和函数，当然也就无法进行调用了。

5.简单记住一点：jsp页面只在服务器存在，到浏览器只存在纯html(当然其中包括js)。

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

html、js的加载顺序：

<html>
<head>
<script>
    alert("script-head");
</script>
</head>
<body οnlοad="alert('html-tag');">
<script>
    alert("script-body");
</script>
</body>
<script>
    alert("script-body-outer");
</script>
</html>
<script>
    alert("script-html-outer");
</script>

输出结果：script-head、script-body、script-body-outer、script-html-outer、html-tag

从上面输出结果可以明显看到：

js在页面装载时执行的顺序就是其引入标记<script />的出现顺序， <script />标记里面的或者通过src引入的外部JS，都是按照其语句出现的顺序执行，而且执行过程是文档装载的一部分。只有全部js脚本按顺序加载完毕后才开始html标签内容的加载过程。