为什么要把JavaScript代码尽量放到网页底部

JavaScript012

为什么要把JavaScript代码尽量放到网页底部,第1张

这个问题有两个考虑:

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

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

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

因为css是要在网页渲染外观的时候就要调用的,所以要预先调入内存,因此放在头部。

而js因为有可能(可以说是很有可能)需要调用网页DOM结构中的元素,所以必须等HTML的整个DOM结构都调入内存后才开始运行(否则就很可能因为无法找到元素而出错),所以要放在底部。但是最好或者说最标准的用法是把js代码放入window对象的onload事件中,这样就可以把整个js代码放到网页的任何位置了(包括头部)。就类似这样:

<script>

window.onload=function(){

//要运行的js代码放在这

}

</script>

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

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

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