Will image resources block browser rendering in the end?
when I searched for two questions, I got contradictory answers:
the difference between 1.src and href
2. Browser render pass
the first question: generally speaking, src refers to external resources, and downloading and processing of other resources will be suspended when requesting src resources until the resource is loaded
the second problem is generally speaking, except for the js script, other external resources do not block rendering
as far as I know, the js script blocks rendering not because it was introduced by src, but because it is possible to change the DOM tree or CSSOM tree
so, will the external resources referenced by src block rendering
External resources referenced by
src do not block rendering.
blocking has nothing to do with href and src, but has something to do with the design of the browser to achieve the best physical examination. For example, when we open Taobao, we can clearly see that the image is the last rendered, because the image is usually more and larger, and if it is blocked, it will lead to a white screen for a long time, and the experience is not good. JS is designed to block for the reason you described.
browser rendering process reference:
1, enter url to send request
2, load html file
3, parse html, and build DOM tree during parsing
parsing encounters link, script, img tags, the browser will send requested resources to the server.
script loading or execution blocks html parsing, other download threads, and rendering threads.
link parses to CSSOM after loading css (cascading stylesheet object model, a tree that contains only style information). Loading and parsing of css does not block parsing of html, but does block rendering. The loading of
img does not block the parsing of html, but img does not render after loading. It needs to wait for Render Tree to be generated before it is rendered together with Render Tree. Undownloaded pictures will not be rendered until they have been downloaded.
4. When css is parsed to CSSOM and html is parsed to DOM, the two will be combined to generate a Render Tree (render tree.
5, Layout: calculates the specific location of each node in the Render Tree.
6 and Painting: present the node content (including downloaded pictures) after Layout to the screen through the graphics card.
No. Downloading or executing js code will block the browser's rendering (without defer or async attributes). Browser blocking rendering has nothing to do with src or href, even the code in the script tag will block rendering.
No, so you will see that the picture is brushed out line by line. When the network is bad, there is only the first half
about parse constraints
When the parser gets to a script tag, DOM construction cannot proceed until the JavaScript finishes executing, and the JavaScript cannot be executed until the CSS is downloaded, parsed, and the CSSOM is available.
DOM construction is restricted until JS is fully executed, while JS execution depends on the complete establishment of CSSOM.
this is the way modern browsers play
Yes, if you request the img resource first, the js, will be stuck in the img until the img is loaded and the js is loaded before rendering. Refer to https://www.cnblogs.com/zhoul.
.
