![]() Notice that the domContentLoaded time is effectively the same as in the previous example instead of marking our JavaScript as async, we've inlined both the CSS and JS into the page itself. textContent = 'You loaded this page on: ' + new Date ( ) ĭocument. ![]() create a new element, style it, and append it to the DOM display = 'inline' // change CSSOM property textContent = 'interactive' // change DOM text content Much better! The domContentLoaded event fires shortly after the HTML is parsed the browser knows not to block on JavaScript and since there are no other parser blocking scripts the CSSOM construction can also proceed in parallel.Īlternatively, we could have inlined both the CSS and JavaScript: Let's undo our inlining and give that a try: But there are several strategies that can make our page render faster.įirst, recall that all inline scripts are parser blocking, but for external scripts we can add the "async" keyword to unblock the parser. In this instance, inlining the JavaScript code doesn't help us much. Further, in our first example, the browser downloads both CSS and JavaScript in parallel and they finish downloading at about the same time. Why? Well, we know that it doesn't matter if the JavaScript is inlined or external, because as soon as the browser hits the script tag it blocks and waits until the CSSOM is constructed. We are making one less request, but both our onload and domContentLoaded times are effectively the same. That said, despite blocking on CSS, does inlining the script make the page render faster? Let's try it and see what happens. In short, inlined JavaScript is also parser blocking. What if we replace our external script with an inline script? Even if the script is inlined directly into the page, the browser can't execute it until the CSSOM is constructed.
0 Comments
Leave a Reply. |