今天在寫項目的的時候遇到一個問題,將jquery文件的引入放在js代碼以前項目不報錯,可是放在js代碼以後,在瀏覽器運行html會報出$ is not defined,可是在其餘的html頁面中,放在js代碼以後卻不會產生這樣的問題,思來想去,考慮這可能與html頁面的加載順序有關,html頁面的加載順序是:css
從上到下運行,先解析head標籤中的代碼,
1>head標籤中會包含一些引用外部文件的代碼,從開始運行就會下載這些被引用的外部文件
當遇到script標籤的時候,瀏覽器暫停解析(不是暫停下載),將控制權交給JavaScript引擎(解釋器)
若是<script>標籤引用了外部腳本,就下載該腳本,不然就直接執行,執行完畢後將控制權交給瀏覽器渲染引擎
2>當head中代碼解析完畢,會開始解析body中的代碼,若是此時head中引用的外部文件沒有下載完,將會繼續下載
瀏覽器解析body代碼中的元素,會按照head中聲明一部分樣式去解析,若是此時遇到body標籤中的<script>,html
一樣會將控制權交給JavaScript引擎來解析JavaScript 解析完畢後將控制權交還給瀏覽器渲染引擎。
當body中的代碼所有執行完畢、而且整個頁面的css樣式加載完畢後,css會從新渲染整個頁面的html元素。
3>按照以前的描述,<script>寫到body標籤內靠後比較好,
由於JavaScript 會操做html元素, 若是在body加載完以前寫JavaScript 會形成JavaScript 找不到頁面元素
可是咱們常常將<script>寫到head中,body中不會有大量的js代碼,body中的html代碼結構會比較清晰
window.onload: 等待頁面中的全部內容加載完畢以後纔會執行
$(document).ready(): 頁面中全部DOM結構繪製完畢以後就可以執行
能夠這樣理解:window.onload 和 $(document).ready()/$(function(){}); 至關於 寫在body 內 最靠後的<script> 代碼段jquery
因此瀏覽器應該是解析完body以後,先去引入js,在解析js代碼,之後要是遇到$ is not defined這樣的錯誤,能夠將引入js放到js代碼的前面瀏覽器