title: The page doesn't refresh until MutationObserver callback function execute thoroughly, takes a long time
body: <p>I am writing a chrome extension using JavaScript for a website. When the user click on the 'More results' button, more results are displayed on the screen. I used the <code>MutationObserver</code> to listen on the website DOM change and made some modification. Here is the code.</p>
  
  <pre><code>var mo=new MutationObserver(function(mutations){
              mutations.forEach(mo_callback)
          })
  mo.observe(document,{childList:true})
  
  function mo_callback(mutation){
  //first step, run quickly
  //second step, make a request to an API, time wasting, need 5 secs or more
  }
  </code></pre>
  
  <p>The code can work but the user's experience is bad. Since the second step took a long time, the result didn't show until <code>mo_callback</code> finished. Before loading my extension, the user can get the result displayed in 1 sec after clicking on "More results" button, but it takes 5 secs or more after loading my extension. I have tried to use <code>async function</code>for the second step, but since the second step is included in the <code>mo_callback</code>as a whole, it doesn't work.</p>
  
  <p>I hope the result can display on the screen immediately or after the first step of <code>mo_callback</code>. How to solve it?</p>
  
  <p>Appreciate your help</p>