title: How to use Network's Waterfall in Chrome Dev Tool to diagnose web rendering performance issue?
body: <p>One of our web pages has a rendering performance issue, when the page is open, the spinner is freeze or loading very laggy, and after 6-12 seconds the page completes loading. So i'm using the Network's waterfall in chrome dev tool to diagnose the issue. But I got a few scenarios which i don't understand what happened.</p>
  
  <p>In the following screenshots, all the resources for the corresponding page are loaded in a very short time, but the spinner is freeze for 6 seconds or 9 seconds, i'm not sure what is happening after the resources are loaded and before the page completes loading, maybe the spinner is in a wrong thread or gets blocked somehow? What is the means that i should use to find out the cause?</p>
  
  <p><strong><em>Scenario 1</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/HK10e.png" alt="1"></p>
  
  <p><strong><em>Scenario 2</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/sgMBy.png" alt="2"></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p><strong><em>Network Screenshot</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/XVCVt.png" alt="pic"></p>
  
  <p><strong><em>Timeline Screenshot</em></strong></p>
  
  <p><img src="https://i.stack.imgur.com/3SBYs.png" alt="pic"></p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>After checking the Event Log, i think the issue happens at Angular digest cycle, that endpoint response time should still be 780ms.</p>
  
  <p><img src="https://i.stack.imgur.com/IpDzg.png" alt="pic"></p>