解析页面加载与js函数的执行 onload or ready-前端开发

当浏览器加载一个页面时，会按照以下步骤逐步完成页面的加载：

解析页面加载与js函数的执行 onload or ready

页面加载过程

当浏览器加载一个页面时，会按照以下步骤逐步完成页面的加载：

浏览器通过DNS解析获取目标网站的IP地址
浏览器向服务器发出请求，获取HTML文件
浏览器开始解析HTML，构建DOM树
遇到CSS和JS文件时，浏览器会解析它们，并执行其中的代码
解析完成后，浏览器构建出渲染树
渲染树和DOM树进行合并，生成最终的页面

JS函数的执行

JS代码在上述第四步会被加载并执行，可通过两种方式来确保JS函数在DOM加载完成后才会执行：onload和ready。

window.onload

window.onload事件表示在网页中的所有元素加载完毕后才会执行，包括图像、嵌入的对象、样式表等。当HTML页面在浏览器窗口中完全渲染，并且所有依赖的资源都已经下载好后，window.onload事件才会被触发。

例如，在以下代码中，在页面以及所有图片都加载完成后，弹出”页面加载完成“的提示框：

window.onload = function() {
  alert("页面加载完成");
};

$(document).ready()

$(document).ready() 是 jQuery 提供的工具，可在 HTML 文档加载完成后进行调用。它表示文档已经加载完毕，并且HTML结构已解析完成，但并不表示所有的嵌入式资源已经加载成功。

例如，在以下代码中，当Dom树以及所有脚本、图片都装载完成之后，弹出”Dom树加载成功“的提示框：

$(document).ready(function() {
  alert("Dom树加载成功");
});

示例说明

示例一

设计一个网站，当用户将GIF图片复制到文本框中时，在新标签页中播放该GIF图。GIF图片在HTML中为img标签，播放GIF需要调用其他JS库。如何确保JS函数不会在HTML解析过程中被执行？

将img标签包含在一个默认隐藏的div元素中，防止图片加载时对页面渲染的影响。
在HTML页面底部调用JS库，并确保在dom树全部渲染完成后调用该库。
使用$(document).ready()函数将用户输入的文本框与JS脚本绑定。

示例代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>动态播放GIF图片</title>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <form>
    <input type="text" id="gif-input" placeholder="输入GIF图片地址">
    <input type="button" value="播放" onclick="playGif()">
  </form>
  <div class="hidden" id="gif-container">
    <img id="preview" />
  </div>
  <script src="jquery.js"></script>
  <script>
    $(document).ready(function () {
      document.getElementById('gif-input').oninput = function () {
        document.getElementById('preview').src = document.getElementById('gif-input').value;
        $('#gif-container').show();
      }
    });
    function playGif() {
      window.open('viewer.html?image=' + encodeURIComponent(document.getElementById('gif-input').value));
    }
  </script>
</body>

</html>

示例二

设计一个网站，当用户点击一个按钮时，弹出画布，在画布上显示一个可移动的小球。如何确保小球画布在HTML加载完成后被渲染？

将JS代码包含在window.onload函数中，防止代码在页面加载过程中被执行。

示例代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>小球运动动画</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="200" height="200"></canvas>
  <button onclick="start()">开始</button>
  <script>
    window.onload = function () {
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');

      var ball = {
        x: 100,
        y: 100,
        vx: 5,
        vy: 4,
        radius: 25,
        color: 'blue',
        draw: function() {
          context.beginPath();
          context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
          context.closePath();
          context.fillStyle = this.color;
          context.fill();
        }
      };

      function start() {
        setInterval(function () {
          context.clearRect(0, 0, canvas.width, canvas.height);
          ball.x += ball.vx;
          ball.y += ball.vy;
          if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
            ball.vx = -ball.vx;
          }
          if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
            ball.vy = -ball.vy;
          }
          ball.draw();
        }, 16);
      }
    }
  </script>
</body>

</html>