css放上面js放下面的原因:1、在載入html產生DOM tree的時候,可以同時對DOM tree進行渲染,這樣可以防止閃跳,白屏或者佈局混亂;2、javascript加載後會立即執行,同時會阻塞後面的資源載入。
本文操作環境:Windows7系統、HTML5&&CSS3版,DELL G3電腦。
推薦:css影片教學
href和src的區別
一般載入CSS用href,並放在頭部;載入script用src,放在body內的下方。
href
是hypertext reference的縮寫,表示超文本引用,用來建立目前元素和文件間的連結。常用的有link,a。
當CSS使用href引用,瀏覽器會辨識該文件問CSS,並行下載,不會停止目前文件的載入。
src
是source的縮寫,是資源,頁面不可或缺的一部分,src指向的內容會嵌入到文件中目前標籤的位置。常用的有img, script, iframe。
當script使用src引用,瀏覽器解析到該元素時會停止對文件的渲染,直到該資源載入完成。這也是將script放底部而不是頭部的原因。
把CSS放頭部,script放下方的原因
1、CSS放頭部
#在載入html產生DOM tree的時候,就可以同時對DOM tree進行渲染。
這樣可以防止閃跳,白色螢幕或佈局混亂。
2、javascript放在後面
javascript可能會改變DOM tree的結構,所以需要一個穩定的DOM tree。
javascript載入後會立即執行,同時會阻塞後面的資源載入。 (javascript載入與執行的特點)
拓展知識:
1、首先讓我們先認識幾個常見的問題:
1.在進行頁面優化的時候,需要將css放在頭部,將js檔案放在尾部,這樣做為什麼能夠實現頁面的最佳化?
2.在使用jquery的時候,為什麼把函數寫在$(document).ready ()事件中?
3.javascript會阻塞dom的解析。
當解析過程中遇到