css放上面js放下面的原因

小編給大家分享一下css放上面js放下面的原因，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

css放上面js放下面的原因：1、在加載html生成DOM tree的時候，可以同時對DOM tree進行渲染，這樣可以防止閃跳，白屏或者布局混亂；2、javascript加載后會立即執行，同時會阻塞后面的資源加載。

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的解析。

當解析過程中遇到<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被觸發的時間。

以上是“css放上面js放下面的原因”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！