title: What's difference between xhr.onload and xhr.onprogress
body: <p>There are five events on an XMLHttpRequest instance.</p>
  
  <pre><code>var xhr = new XMLHttpRequest();
  
  xhr.onloadstart = res =&gt; {
      console.log('onloadstart')
  }
  
  xhr.onprogress = res =&gt; {
      console.log('onprogress')
  }
  
  xhr.onload = res =&gt; {
      console.log('onload')
  }
  
  xhr.onloadend = res =&gt; {
      console.log('onloadend')
  }
  
  xhr.onreadystatechange = res =&gt; {
      console.log(xhr.readyState)
  }
  console.log(xhr.readyState)
  
  xhr.open('GET', 'https://api.github.com/repos/vuejs/vue/issues');
  xhr.send();
  </code></pre>
  
  <p>this is result</p>
  
  <pre><code>/*
  1   
  onloadstart
  2
  3
  onprogress
  4
  onload
  onloadend 
  */
  </code></pre>
  
  <p>from the results, I can find what the order is when events handler are called.</p>
  
  <p>But I was confused  what is the actually difference of those events? I know the  whatwg specification said that onlandstart mean progress has begun and onprogress mean in progress ....</p>
  
  <p>But I don't got it. I had try this code in every event handlers.</p>
  
  <pre><code>console.log(res)
  console.log(res.target.status)
  var result = res.target.responseText
  console.log(JSON.parse(result))
  console.log(res.target.getAllResponseHeaders())
  console.log(res.target.getResponseHeader('x-ratelimit-remaining'))
  </code></pre>
  
  <p>The results are exactly same.</p>
  
  <p>So what the difference we can find inside javascript code?</p>