浏览器在加载一个页面时，是按照自上向下的顺序加载的，
读取到一行就执行一行，如果将 script 标签写到页面的上边，那么HTML代码执行了，页面却还没有加载

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <script>
  9.         var btn = document.getElementById("btn");
  10.         // 绑定单击响应函数
  11.         btn.onclick = function(){
  12.             alert("我是警告框！");
  13.         };
  14.     </script>
  15. </head>
  16. <body>
  17.     <button id="btn">我是按钮</button>
  18. </body>
  19. </html>

将会报错：Uncaught TypeError: Cannot set properties of null (setting ‘onclick’)

解决方法

onload事件会在整个页面加载完成之后才触发
为windows绑定一个onload事件
该事件对应的响应函数将会在页面加载完成之后执行，
这样可以确保我们的代码执行时所有的 DOM对象以将加载完毕了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 绑定单击响应函数
        // 只有当页面加载完后，才会执行响应函数， 
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                alert("我是警告框！");
            };
        };
    </script>
</head>
<body>
    <button id="btn">我是按钮</button>
</body>
</html>

如果追求性能的话，应将 script 标签放到 body下面，页面加载完后，才执行 JS代码。