The page loads - the rendering process

Load the form of resources

  • Enter the url (or jump page) loaded html
  • Html static load of resources
  • <script src="/static/js/jquery.js"></script>

Load a resource-intensive process

Q: From the input url to get the detailed process of html

  • The browser to get the IP address of the domain name according to DNS server
  • Http request to send the IP of the machine
  • Server received, processed and returned http request
  • The browser returns the contents get

Browser page rendering process

  • HTML DOM Tree survival according to structure
  • According to CSS generated CSSOM
  • The DOM and CSSOM integrated form RenderTree
  • Browser to start rendering and display according to RenderTree
  • Encountered <script>, the execution will be blocked and rendering

Q: window.onload and DOMContentLoaded

  • window.onload - all the resources of the page finished loading will be implemented, including pictures, video, etc.
  • DOMContentLoaded - DOM rendering complete to perform, this time pictures, videos have not finished loading (jquery, zepto are using this situation, DOM rendering done on the implementation, not because the window.onload control)

Guess you like

Origin blog.csdn.net/u011121176/article/details/90239647