为啥css放在头部,js放在底部

JavaScript017

为啥css放在头部,js放在底部,第1张

通常情况下，js加载比较耗时，用于页面特效，页面加载完才执行特效，页面不会出现找不到某个标签的情况

CSS，用于控制页面排版，必须放头部，否则会出现刚打开页面时错位的情况，用户体验不好

这个问题有两个考虑：

如果是外部加载的js， 也就是通过src加载的外部js，  这种方式调用的js之所以要放到底部是因为浏览器渲染网页是从上往下，页面是用户能看到的也能直观感受到的，而js代码是用户看不到的，属于“幕后”的东西， 把“幕后”的东西放到最下面，那么用户能看得见的页面加载速度就会更快，让用户感觉页面打开速度很快，提高用户体验。

js一般会用于对页面DOM的操作，如果将js代码放到页面顶部， 基于浏览器从上往下加载的机制，有可能被操作的DOM节点还未加载完毕，JS就去操作DOM了，这明显会导致出错，放到页面底部会保险一些。

主要考虑是第一条， 第二条现在为了百分百保证DOM树渲染完毕执行JS， 基本都用load检测了。

JS可以放在页面的任意位置，推荐放在底部，主要原因有：

JS的加载会阻塞其它内容的加载，就是页面要等待JS下载完成，解析运行完成才能继续加载其它内容，JS放在页面开始，如果网速慢或JS复杂，会造成长时间页面空白，用户体验不好。

JS一般会对DOM树进行操作，放在页首，DOM元素还没有加载完，一般还是要在onload等事件中运行JS，放在页尾，DOM树已经完成，可以直接运行。