css放上面js放下面的原因

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

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

href和src的區(qū)別

一般加載CSS用href,并放在頭部；加載script用src，放在body內(nèi)的下方。

href

是hypertext reference的縮寫，表示超文本引用，用來建立當(dāng)前元素和文檔間的鏈接。常用的有l(wèi)ink，a。

當(dāng)CSS使用href引用，瀏覽器會識別該文檔問CSS，并行下載，不會停止對當(dāng)前文檔的加載。

src

是source的縮寫，是資源，頁面必不可少的一部分，src指向的內(nèi)容會嵌入到文檔中當(dāng)前標(biāo)簽的位置。常用的有img, script, iframe。

當(dāng)script使用src引用，瀏覽器解析到該元素時會停止對文檔的渲染，直到該資源加載完成。這也是將script放底部而不是頭部的原因。

把CSS放頭部，script放下方的原因

1、CSS放頭部

在加載html生成DOM tree的時候，就可以同時對DOM tree進(jìn)行渲染。

這樣可以防止閃跳，白屏或者布局混亂。

2、javascript放在后面

javascript可能會改變DOM tree的結(jié)構(gòu)，所以需要一個穩(wěn)定的DOM tree。

javascript加載后會立即執(zhí)行，同時會阻塞后面的資源加載。（javascript加載和執(zhí)行的特點）

拓展知識：

1、首先讓我們先認(rèn)識幾個常見的問題：

1.在進(jìn)行頁面優(yōu)化的時候，需要將css放在頭部，將js文件放在尾部，這樣做為什么能夠?qū)崿F(xiàn)頁面的優(yōu)化?

2.在使用jquery的時候，為什么把函數(shù)寫在$(document).ready()事件中？

3.javascript會阻塞dom的解析。

當(dāng)解析過程中遇到<script>標(biāo)簽的時候，便會停止解析過程，轉(zhuǎn)而去處理腳本，

如果腳本是內(nèi)聯(lián)的，瀏覽器會先去執(zhí)行這段內(nèi)聯(lián)的腳本，

如果是外鏈的，那么先會去加載腳本，然后執(zhí)行。

在處理完腳本之后，瀏覽器便繼續(xù)解析HTML文檔。

2.DOMContentLoaded函數(shù)和load函數(shù)解析

1.DOMContentLoaded事件其實就是dom內(nèi)容加載完畢。

舉個例子來說我們在打開一個網(wǎng)頁的時候，

一開始頁面是空白的，什么都看不到，一段事件之后頁面展示出內(nèi)容，但是還是有一些圖片資源看不到，此時頁面是可以進(jìn)行正常的交互的，

再過一段時間之后，頁面上所有的資源都加載完成，繼而整個頁面加載完成。

從頁面空白到展示出頁面內(nèi)容的過程就會觸發(fā)DOMContentLoaded事件，而這段事件就是HTML文檔被加載和解析完成。

2.頁面上所有的資源（圖片，音頻，視頻等）被加載以后才會觸發(fā)load事件，頁面的load事件會在DOMContentLoaded被觸發(fā)之后才觸發(fā)。

3.關(guān)于jquery中的ready函數(shù)

jquery中的ready函數(shù)其實監(jiān)聽的DOMContentLoaded事件，

所以我們將函數(shù)寫在ready函數(shù)中，可以在頁面解析完成之后，

我們可以訪問到頁面所有的元素，縮短頁面的交互時間，提高頁面的整體體驗

4.為什么將css放在頭部，js放在尾部可以增加頁面的性能

現(xiàn)在瀏覽器為了更好的用戶體驗，渲染引擎會嘗試盡快在屏幕上顯示內(nèi)容，

它不會等到所有的HTMl元素解析之后在構(gòu)建和布局dom樹，所以部分內(nèi)容將被解析并顯示。

也就是說瀏覽器能夠渲染不完整的dom樹和cssom，盡快的減少白屏的時間。

假如我們將js放在header，js將阻塞解析dom，dom的內(nèi)容會影響到dom樹的繪制，導(dǎo)致dom繪制延后。

所以說我們會將js放在后面，以減少dom繪制的時間，但是不會減少DOMContentLoaded被觸發(fā)的時間。

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