css放在頭部，js放在尾部優化頁面原因：
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放下方的原因
CSS放頭部
在加載html生成DOM tree的時候，就可以同時對DOM tree進行渲染。
這樣可以防止閃跳，白屏或者布局混亂。
javascript放在后面
javascript可能會改變DOM tree的結構，所以需要一個穩定的DOM tree。
javascript加載后會立即執行，同時會阻塞后面的資源加載。（javascript加載和執行的特點）
1.首先讓我們先認識幾個常見的問題：
1.在進行頁面優化的時候，需要將css放在頭部，將js文件放在尾部，這樣做為什么能夠實現頁面的優化? 2.在使用jquery的時候，為什么把函數寫在$(document).ready()事件中？ 3.javascript會阻塞dom的解析。 當解析過程中遇到<script>標簽的時候，便會停止解析過程，轉而去處理腳本， 如果腳本是內聯的，瀏覽器會先去執行這段內聯的腳本， 如果是外鏈的，那么先會去加載腳本，然后執行。 在處理完腳本之后，瀏覽器便繼續解析HTML文檔。
2.DOMContentLoaded函數和load函數解析
1.DOMContentLoaded事件其實就是dom內容加載完畢。 舉個例子來說我們在打開一個網頁的時候， 一開始頁面是空白的，什么都看不到，一段事件之后頁面展示出內容，但是還是有一些圖片資源看不到，此時頁面是可以進行正常的交互的， 再過一段時間之后，頁面上所有的資源都加載完成，繼而整個頁面加載完成。 從頁面空白到展示出頁面內容的過程就會觸發DOMContentLoaded事件，而這段事件就是HTML文檔被加載和解析完成。 2.頁面上所有的資源（圖片，音頻，視頻等）被加載以后才會觸發load事件，頁面的load事件會在DOMContentLoaded被觸發之后才觸發。
3.關於jquery中的ready函數
jquery中的ready函數其實監聽的DOMContentLoaded事件，
所以我們將函數寫在ready函數中，可以在頁面解析完成之后，
我們可以訪問到頁面所有的元素，縮短頁面的交互時間，提高頁面的整體體驗
4.為什么將css放在頭部，js放在尾部可以增加頁面的性能
現在瀏覽器為了更好的用戶體驗，渲染引擎會嘗試盡快在屏幕上顯示內容，
它不會等到所有的HTMl元素解析之后在構建和布局dom樹，所以部分內容將被解析並顯示。
也就是說瀏覽器能夠渲染不完整的dom樹和cssom，盡快的減少白屏的時間。
假如我們將js放在header，js將阻塞解析dom，dom的內容會影響到dom樹的繪制，導致dom繪制延后。
所以說我們會將js放在后面，以減少dom繪制的時間，但是不會減少DOMContentLoaded被觸發的時間。
補充：
瀏覽器加載網頁的順序（如何加快HTML頁面加載速度）