Content loading in browser

2022.06.15
loading in browser
#JavaScript#basics
use client /components/post/reExport Content loading in browser 2022.06.15 JavaScript ],
  imgUrl:  ,
  desc:  ,
  body: (
    <>
      <H>script</H>

      <ul>
        <li>
          {
             
          }
        </li>
        <li>{ }</li>
        <li>{ }</li>
        <li>
          {
             ) and then added to the webpage does not block DOMContentLoaded event but <script> waits for external CSS, DOMContentLoaded waits for CSS in case of a <script> 
        <link type= stylesheet >
        <script>
          // the script doesn }</Code>

      <H>DOMContentLoaded</H>

      <ul>
        <li>event happens on the document object</li>
        <li>fully loaded HTML + DOM tree is built, but </li>
        <li>{ }</li>
        <li>
          {
             
          }
        </li>
        <li>but it doesn’t wait images to load</li>
        <li>we can apply JavaScript to elements at this stage</li>
        <li>{ }</li>
        <li>{ }</li>
        <li>
          external style sheets don’t affect DOM loading, DOMContentLoaded does not wait for them
        </li>
        <li>
          autofill forms are triggered on DOMContentLoaded, if DOMContentLoaded is postponed by
          long-loading scripts, then autofill also awaits
        </li>
      </ul>

      <Code block jsx>{ DOMContentLoaded document.onDOMContentLoaded = func DOM is ready Image size: \${img.offsetWidth}x\${img.offsetHeight}\ }</Code>

      <H>onload</H>

      <ul>
        <li>event on the window object triggers when the whole page and resources are loaded</li>
        <li>including styles, images and other resources</li>
      </ul>

      <p>Message will show correct sizes...</p>

      <Code block jsx>{ , () => {
        alert( );
        alert(\ );
      })
       
      window.onbeforeunload = function() {
        return  
      }
      // browser shows   instead of our text
       
      window.onbeforeunload = function() {
        return false
      }
        event triggers on window</li>
        <li>
          Naturally,   event is when the user leaves us, and we’d like to save the data on
          our server
        </li>
        <li>
          in the handler we can only do simple things that do not involve delays or asking a user
        </li>
        <li>
          There exists a special <Code js>navigator.sendBeacon(url, data)</Code> method for such
          needs
        </li>
        <li>
          It sends the data in background. The transition to another page is not delayed: the
          browser leaves the page, but still performs sendBeacon
        </li>
        <li>The request is sent as POST request</li>
        <li>We can send not only a string, but also forms and other formats</li>
        <li>The data is limited by 64kb</li>
      </ul>

      <Code block jsx>{ , function() {
        navigator.sendBeacon( , JSON.stringify(analyticsData))
      })
       </code> the document is loading
        <code> </code> the document was fully read
        <code> </code> the document was fully read and all resources (like images) are
        loaded too
      </ul>

      <Code block jsx>{ ) {
        document.addEventListener( , work) // still loading, wait for the event
      } else {
        work() // DOM is ready!
      }
       
      document.addEventListener( , () => console.log(document.readyState))
       }
          <code>DOMContentLoaded</code>, they are same things
        </li>
        <li>
          <code> document.readyState</code> becomes complete when all resources (iframe and img) are
          loaded
        </li>
        <li>
          it happens in about the same time as <code>img.onload</code> and{ }
          <code>window.onload</code>
        </li>
        <li>
          switching to complete state means the same as <code>window.onload</code>
        </li>
        <li>
          difference is that <code>window.onload</code> always works after all other load handlers
        </li>
      </ul>

      <H>scripts: async, defer, dynamic</H>

      <ul>
        <li>{ }</li>
        <li>It must execute the script right now</li>
        <li>{ }</li>
        <li>Scripts can’t see DOM elements below them</li>
        <li>bulky script at the top “blocks the page” till script downloads and executes</li>
        <li>{ }</li>
        <li>
          we can put a script at the bottom and it doesn’t block the page content from showing
        </li>
        <li>
          {
              script attributes that solve the problem, they do not block page rendering s important if we need to load a JavaScript library and some script depends on it
        </li>
        <li>The defer attribute is only for external scripts</li>
        <li>
          <code>defer</code> attribute is ignored if { } tag has no <code>src</code>{ }
          attribute
        </li>
      </ul>

      <Hs>async</Hs>

      <ul>
        <li>
          <span>async</span> attribute is somewhat like <code>defer</code>
        </li>
        <li>
          The <span>async</span> attribute means that a script is completely independent
        </li>
        <li>async scripts load in the background and run when ready</li>
        <li>
          browser doesn’t block on <span>async</span> scripts (like defer)
        </li>
        <li>page content shows up immediately</li>
        <li>
          Other scripts don’t wait for <span>async</span> scripts, and <span>async</span> scripts
          don’t wait for them
        </li>
        <li>
          <i>DOMContentLoaded</i> and async scripts don’t wait for each other
        </li>
        <li>
          <i>DOMContentLoaded</i> may happen both before & after an async script
        </li>
        <li>
          Async scripts are great when we integrate an independent third-party script into the page
          like counters, ads and so on, where our scripts shouldn’t wait for them
        </li>
      </ul>

      <Hs>dynamic</Hs>

      <ul>
        <li>we can create a script and append it to the document dynamically using JavaScript</li>
        <li>
          dynamic scripts behave as <code>async</code> by default
        </li>
        <li>They don’t wait for anything, nothing waits for them</li>
        <li>The script that loads first – runs first</li>
        <li>
          <Code js>script.async = false </Code> scripts will be executed in the document order, just
          like <code>defer</code>
        </li>
      </ul>

      <Code block jsx>{ )
      script.src =  
      document.body.append(script)
        here</li>
        <li>but for external</li>
        <li>Errors that occur during the loading of the script can be tracked in an error event</li>
        <li>Events onload/onerror track only the loading itself.</li>
        <li>To track script errors, window.onerror global handler can be used</li>
        <li>Most resources start loading when they are added to the document.</li>
        <li>{ }</li>
        <li>
          {
             
          }
        </li>
      </ul>

      <Code block jsx>{ )
      img.src =   // 
      img.onload = function() { alert(\ ) }
      img.onerror = function() { alert( ) }
       To allow cross-origin access, the <script> needs to have the   attribute &  remote server must provide special headers </code> – access allowed if the server responds with the
            header <i> </i> with <code>*</code> or our origin
          </li>
          <li>
            <code>crossorigin= </code> – access allowed if the server sends back the
            header <i> </i> with our origin and{