is a way to inform browser that the resource is definitely needed for current navigation and you would like to download as soon as possible. You may also use JavaScript module if that's suitable. The browser then loads and runs the JavaScript code asynchronously and does not block the parsing. If your JavaScript does not use document.write(), you can add async or defer attribute to the tag. There are many ways web developers can send hints to the browser in order to load resources nicely. # Hint to browser how you want to load resources If you are curious about what happens in JavaScript execution, the V8 team has talks and blog posts on this. This is why the HTML parser has to wait for JavaScript to run before it can resume parsing of the HTML document. ![]() Why? because JavaScript can change the shape of the document using things like document.write() which changes the entire DOM structure ( overview of the parsing model in the HTML spec has a nice diagram). When the HTML parser finds a tag, it pauses the parsing of the HTML document and has to load, parse, and execute the JavaScript code. Figure 2: The main thread parsing HTML and building a DOM tree # JavaScript can block the parsing If there are things like or in the HTML document, preload scanner peeks at tokens generated by HTML parser and sends requests to the network thread in the browser process. The main thread could request them one by one as they find them while parsing to build a DOM, but in order to speed up, "preload scanner" is run concurrently. Those files need to be loaded from network or cache. # Subresource loadingĪ website usually uses external resources like images, CSS, and JavaScript. If you are curious how these things are done, you can read on " An introduction to error handling and strange cases in the parser" section of the HTML spec. This is because the HTML specification is designed to handle those errors gracefully. Erroneous markup like Hi! I'm Chrome! (b tag is closed before i tag) is treated as if you wrote Hi! I'm Chrome!. For example, missing closing tag is a valid HTML. You may have noticed that feeding HTML to a browser never throws an error. Parsing an HTML document into a DOM is defined by the HTML Standard. The DOM is a browser's internal representation of the page as well as the data structure and API that web developer can interact with via JavaScript. When the renderer process receives a commit message for a navigation and starts to receive HTML data, the main thread begins to parse the text string (HTML) and turn it into a Document Object Model ( DOM). Figure 1: Renderer process with a main thread, worker threads, a compositor thread, and a raster thread inside # Parsing # Construction of a DOM The renderer process's core job is to turn HTML, CSS, and JavaScript into a web page that the user can interact with. Compositor and raster threads are also run inside of a renderer processes to render a page efficiently and smoothly. Sometimes parts of your JavaScript is handled by worker threads if you use a web worker or a service worker. ![]() In a renderer process, the main thread handles most of the code you send to the user. The renderer process is responsible for everything that happens inside of a tab. If you'd like to dig deeper, the Performance section of Web Fundamentals has many more resources. Since there is a lot happening inside of the renderer process, this post is only a general overview. Renderer process touches many aspects of web performance. In this post, we are going to look at what happens inside of the renderer process. Previously, we covered multi-process architecture and navigation flow. This is part 3 of 4 part blog series looking at how browsers work.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |