【1】JavaScript位置
js在jsp頁面中的位置如下圖：
對應代碼如下：
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@include file="./WEB-INF/includes/taglibs.jsp" %> <script type="text/javascript"> console.log("it is before !DOCTYPE html"); </script> <!DOCTYPE html> <script type="text/javascript"> // test2(); console.log("it is before html"); </script> <html> <script type="text/javascript"> console.log("it is in html before head"); </script> <head> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="format-detection" content="telephone=no"> <script src="<%=uiPath%>ui/jquery/jquery.min.js" type="text/javascript"></script> <link href="<%=uiPath%>ui/skins/default/css/test.css" rel="stylesheet" type="text/css" /> <link href="<%=uiPath%>ui/skins/default/css/commons.css" rel="stylesheet" type="text/css" /> <script src="<%=uiPath%>ui/js/commons.js" type="text/javascript"></script> <script src="<%=uiPath%>ui/js/common_edit.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ console.log("it is in head"); }); </script> </head> <script type="text/javascript"> console.log("it is after head before body"); </script> <body> <h2>Hello World!</h2> <script type="text/javascript"> console.log("it is in body"); </script> <div> <span class="testls">test link script</span> </div> </body> <script type="text/javascript"> console.log("it is after body before </html>"); </script> </html> <script type="text/javascript"> console.log("it is after </html>"); </script>
【2】加載順序
瀏覽器執行html代碼是自上而下的線性過程，<script>作為html代碼的一部分同樣遵循這個原則！
【3】執行順序
在HTML head部分中的JS會在被調用的時候才執行。
其他部分的JS會在會在頁面加載的時候被執行。
執行順序效果如下圖：
即，head標簽中的js最后被執行，其他地方的按照頁面加載上下順序依次在頁面加載的時候就被執行。
【4】實際項目應用
實際項目中可能的三個位置：
① head之間；
② body內部；
③ body后面。
其中②③是為了動態生成頁面，①是為了頁面加載完成后的功能調用。
————————————————
版權聲明：本文為CSDN博主「流煙默」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/J080624/article/details/78297024