css和js的正確擺放均是為了提高頁面的加載效率。
css的放置位置
css應(yīng)該放置在head中，用style標(biāo)簽引入。這是因?yàn)?，頁面渲染時(shí)，只有相應(yīng)CSSOM Tree完成后，才開始之后的布局(layout)并將頁面顯示，如果將css放置在尾部，前面DOM tree加載過久(內(nèi)容過多，或者請(qǐng)求資源超時(shí))的話，可能導(dǎo)致白屏?xí)r間變長。
js的放置位置
除了一些在頁面執(zhí)行前必須加載的js以外，大多數(shù)js應(yīng)該放置在body標(biāo)簽內(nèi)的尾部。這主要是因?yàn)閖s會(huì)阻塞其后內(nèi)容的加載和呈現(xiàn)，導(dǎo)致白屏。此外，js的執(zhí)行過程可能作用于dom tree內(nèi)的元素，如果放置在前面會(huì)報(bào)錯(cuò)。
為了避免js阻塞其后內(nèi)容，可以根據(jù)具體需求使用參數(shù)async或defer，使JS異步加載。
async，加載和渲染后續(xù)元素的過程將和js文件的加載與執(zhí)行并行進(jìn)行，async的js元素下載完后立刻執(zhí)行，不同js的先后執(zhí)行順序很可能與頁面中的出現(xiàn)次序不同。
defer，加載后續(xù)文檔元素的過程將和js的加載并行進(jìn)行，但js的執(zhí)行要等到所有元素解析完成之后，DOMContentLoaded事件觸發(fā)之前完成。
