下面是一段有JavaScript和CSS的网页
<script type="text/JavaScript"> window.οnlοad=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.οnlοad=function(){ //非常多的代码 ....... } </script>