Web前端开发--JavaScript文件位置的选择

       下面是一段有JavaScript和CSS的网页

 

<script type="text/JavaScript">
window.onload=function(){
    //非常多的代码
    .......
}
</script>
<div id="test">xxxxx</div>
<!-很多的代码-->
......
<style type="text/css">
#test{}
</style>

        在浏览器中显示这个网页，浏览器加载网页，加载到JavaScript时，脚本非常多，加载脚本话费时间很长，而这段时间里因为没有加载HTML代码所以网页显示为空白，脚本延缓了HTML的加载，等待一段时间JavaScript加载完毕时，加载HTML，但是发现这些网页元素没有样式，直到非常多的HTML加载完了，才开始加载CSS，此时网页才有了样式，这样的用户体验是非常糟糕的。

 

       我们要养成一个好的习惯，将CSS放在页头，在加载了HTML元素之前先载入他们的样式，这样可以避免HTML出现无样式状态，将JavaScript放在页尾，先将网页呈现给用户，再来加载页面内的脚本，避免JavaScript阻塞网页的呈现，减少页面的空白时间，实现更好的用户体验。

<style type="text/css">
#test{}
</style>
<div id="test">xxxxx</div>
<!-很多的代码-->
......
<script type="text/JavaScript">
window.onload=function(){
    //非常多的代码
    .......
}
</script>