先引入css文件，讓css樣式先加載出來，這樣就不會(huì)讓用戶看到一個(gè)雜亂無章的頁面；然后再引入并加載js。js一般都是處理功能的，不需要提前加載；先給用戶觀感，再給用戶上手體驗(yàn)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&javascript1.8.5版、Dell G3電腦。

先引入并加載css文件，在在引入并加載js。

我們通常是把css放上面，js會(huì)放在下面；先加載css文件（不要讓用戶看到一個(gè)雜亂無章的頁面），最后再加載js文件。js一般都是處理功能的，不需要提前加載；先給用戶觀感，再給用戶上手體驗(yàn)。

js腳本文件的位置

js腳本應(yīng)該放在底部，原因在于js線程與GUI渲染線程是互斥的關(guān)系，如果js放在首部，當(dāng)下載執(zhí)行js的時(shí)候，會(huì)影響渲染行程繪制頁面，js的作用主要是處理交互，而交互必須得先讓頁面呈現(xiàn)才能進(jìn)行，所以為了保證用戶體驗(yàn)，盡量讓頁面先繪制出來。

CSS文件的位置

CSS 是頁面渲染的關(guān)鍵因素之一，（當(dāng)頁面存在外鏈 CSS 時(shí)，）瀏覽器會(huì)等待全部的 CSS 下載及解析完成后再渲染頁面。關(guān)鍵路徑上的任何延遲都會(huì)影響首屏?xí)r間，因而我們需要盡快地將 CSS 傳輸?shù)接脩舻脑O(shè)備，否則，（在頁面渲染之前，）用戶只能看到一個(gè)空白的屏幕。

CSS文件放在頂部一方面是因?yàn)榉胖庙樞驔Q定了下載的優(yōu)先級，更關(guān)鍵的是瀏覽器的渲染機(jī)制。

css在加載過程中不會(huì)影響到DOM樹的生成，但是會(huì)影響到Render樹的生成，進(jìn)而影響到layout，所以一般來說，style的link標(biāo)簽需要盡量放在head里面，因?yàn)樵诮馕鯠OM樹的時(shí)候是自上而下的，而css樣式又是通過異步加載的，這樣的話，解析DOM樹下的body節(jié)點(diǎn)和加載css樣式能盡可能的并行，加快Render樹的生成的速度。

將CSS放在底部，頁面可以逐步呈現(xiàn)，但在CSS下載并解析完畢后，已經(jīng)呈現(xiàn)的文字和圖片就要需要根據(jù)新的樣式重繪，這是一種不好的用戶體驗(yàn)。