html和css中的图片加载与渲染规则是什么样的？

Web浏览器先会把获取到的HTML代码解析成一个DOM树，HTML中的每个标签都是DOM树中的一个节点，包括<code>display: none</code>隐藏的标签，还有JavaScript动态添加的元素等。
浏览器会获取到所有样式，并会把所有样式解析成样式规则，在解析的过程中会去掉浏览器不能识别的样式。
浏览器将会把DOM树和样式规则组合在一起（DOM元素和样式规则匹配）后将会合建一个渲染树（Render Tree），渲染树类似于DOM树，但两者别还是很大的：
渲染树能识别样式，渲染树中每个节点（NODE）都有自己的样式，而且渲染树不包含隐藏的节点（比如display:none的节点，还有<code>&lt;/head&gt;</code>内的一些节点），因为这些节点不会用于渲染，也不会影响节点的渲染，因此不会包含到渲染树中。一旦渲染树构建完毕后，浏览器就可以根据渲染树来绘制页面了。
简单的归纳就是浏览器渲染Web页面大约会经过六个过程：
<ul>
<li>解析HTML，构成DOM树</li>
<li>解析加载的样式，构建样式规则树</li>
<li>加载JavaScript，执行JavaScript代码</li>
<li>DOM树和样式规则树进行匹配，构成渲染树</li>
<li>计算元素位置进行页面布局</li>
<li>绘制页面，最终在浏览器中呈现</li>
</ul>
是不是会感觉这个和我们图像加载渲染没啥关系一样，事实并非如此，因为img、picture或者background-image都是DOM树或样式规则中的一部分，那么咱们套用进来，图片加载和渲染的时机有可能是下面这样：
<ul>
<li>解析HTML时，如果遇到img或picture标签，将会加载图片</li>
<li>解析加载的样式，遇到background-image时，并不会加载图片，而会构建样式规则树</li>
<li>加载JavaScript，执行JavaScript代码，如果代码中有创建img元素之类，会添加到DOM树中；如查有添加background-image规则，将会添加到样式规则树中</li>
<li>DOM树和样式规则匹配时构建渲染树，如果DOM树节点匹配到样式规则中的backgorund-image，则会加载背景图片</li>
<li>计算元素（图片）位置进行布局</li>
<li>开始渲染图片，浏览器将呈现渲染出来的图片</li>
</ul>
上面套用浏览器渲染页面的机制，但图片加载与渲染还是有一定的规则。因为，页面中不是所有的<code>&lt;img&gt;</code>（或picture）元素引入的图片和background-image引入的背景图片都会加载的。那么就引发出新问题了，什么时候会真正的加载，加载规则又是什么？
先概括一点：
<blockquote>
Web页面中不是所有的图片都会加载和渲染！
</blockquote>
我们可以归纳为：
<ul>
<li><code>&lt;img&gt;</code>、<code>&lt;picture&gt;</code>和设置background-image的元素遇到display:none时，图片会加载，但不会渲染。</li>
<li><code>&lt;img&gt;</code>、<code>&lt;picture&gt;</code>和设置background-image的元素祖先元素设置display:none时，background-image不会渲染也不会加载，而img和picture引入的图片不会渲染但会加载</li>
<li><code>&lt;img&gt;</code>、<code>&lt;picture&gt;</code>和background-image引入相同路径相同图片文件名时，图片只会加载一次</li>
<li>样式文件中background-image引入的图片，如果匹配不到DOM元素，图片不会加载</li>
<li>伪类引入的background-image，比如:hover，只有当伪类被触发时，图片才会加载</li>
</ul>

DreamCoders/CoderGuide

Content Risk Flag

Comments (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

Content Risk Flag