首先我們要知道兩點:
(1) 瀏覽器在遇到<body>元素纔開始顯示內容;
(2) 當HTML頁面中含有外部的JavaScript代碼引用,會首先對其進行下載,解析。
在最初的寫法中,我們都將<script>元素寫在HTML頁面的<head>元素中。
這樣寫的好處是:把所有的外部文件(即.css文件和.js文件)的引用都放在了相同的位置。
但是這樣就會產生一個問題:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="text.js"> </script>
<script type="text/javascript" scr="test.js"> </script>
...
</head>
<body>
</body>
</html>
由(2)我們知道,當有很多<script>元素時,代碼會在<head>標籤中等待過長的時間,此時瀏覽器也不能顯示任何頁面,這種交互體驗...
所以我們推薦將<script>元素寫在<body>元素中頁面內容的後面。這樣在解析包含的JavaScript代碼之前,頁面的內容都已經完全顯示在瀏覽器中,相應的體驗就會好很多。
<html>
<head>
</head>
<body>
...
<script type="text/javascript" src = "test.js">
</script>
</body>
</html>