A, DOM and document
● DOM: document object model document object model, used to describe objects in standard HTML document
● document: the document object, the object is the root DOM tree, Document object represents the entire html document, can be used to access all the elements on the page, is the most complex object is a dom
Second, the resolution process to render HTML pages
● Create a document object, start parsing web pages, create HTMLElement objects added to the document, the stage document. readyState = 'loading'
● head tag will contain some code that references to external files, encountered external link css, create a thread to load and continue to parse the document.
● encounter external js script, and there is no set async, defer, the browser creates threads to load, and blocking , waiting for js loaded and execute the script, and then continue to parse the document.
● encounter script external js, and is provided with async, defter, the browser creates threads to load and continue to parse the document.
◇ set the async attribute of the script, the script is loaded asynchronously executed immediately complete
After ◇ set defter property script to load, and then complete the implementation of the document parsing
◇ script elements to simulate the dynamic insertion async attribute, etc., to achieve the script loaded and executed asynchronously.
● encounter img other browser creates threads to load and continue to parse the document.
● When the document is parsed, document.readyState = 'interactive', the object model is valid, but is read only. All provided defer the script will execute the order. (Note that unlike the async)
● document object triggers DOMContentLoaded event, which also marked the program is executed from the synchronization script execution stage, transformed into event-driven stage .
● When the script has finished loading and execution of all async, img, etc. after loading is complete, document.readyState = 'complete', window objects trigger load event.
DOMContentLoaded and load differences:
◇ DOMContentLoaded: document has been parsed, dom elements in the page is available, but the pages of pictures, video, audio, and other resources are not loaded, ready in the event action with jQuery
◇ load: the difference is that the latter fully loaded page all the resources completed.
● Since, in an asynchronous manner in response to a user input, network events.