css和js的正确摆放均是为了提高页面的加载效率。
css的放置位置
css应该放置在head中,用style标签引入。这是因为,页面渲染时,只有相应CSSOM Tree完成后,才开始之后的布局(layout)并将页面显示,如果将css放置在尾部,前面DOM tree加载过久(内容过多,或者请求资源超时)的话,可能导致白屏时间变长。
js的放置位置
除了一些在页面执行前必须加载的js以外,大多数js应该放置在body标签内的尾部。这主要是因为js会阻塞其后内容的加载和呈现,导致白屏。此外,js的执行过程可能作用于dom tree内的元素,如果放置在前面会报错。
为了避免js阻塞其后内容,可以根据具体需求使用参数async或defer,使JS异步加载。
async,加载和渲染后续元素的过程将和js文件的加载与执行并行进行,async的js元素下载完后立刻执行,不同js的先后执行顺序很可能与页面中的出现次序不同。
defer,加载后续文档元素的过程将和js的加载并行进行,但js的执行要等到所有元素解析完成之后,DOMContentLoaded事件触发之前完成。