参考答案

Web浏览器先会把获取到的HTML代码解析成一个DOM树，HTML中的每个标签都是DOM树中的一个节点，包括display: none隐藏的标签，还有JavaScript动态添加的元素等。

浏览器会获取到所有样式，并会把所有样式解析成样式规则，在解析的过程中会去掉浏览器不能识别的样式。

浏览器将会把DOM树和样式规则组合在一起（DOM元素和样式规则匹配）后将会合建一个渲染树（Render Tree），渲染树类似于DOM树，但两者别还是很大的：

渲染树能识别样式，渲染树中每个节点（NODE）都有自己的样式，而且渲染树不包含隐藏的节点（比如display:none的节点，还有</head>内的一些节点），因为这些节点不会用于渲染，也不会影响节点的渲染，因此不会包含到渲染树中。一旦渲染树构建完毕后，浏览器就可以根据渲染树来绘制页面了。

简单的归纳就是浏览器渲染Web页面大约会经过六个过程：

  • 解析HTML，构成DOM树
  • 解析加载的样式，构建样式规则树
  • 加载JavaScript，执行JavaScript代码
  • DOM树和样式规则树进行匹配，构成渲染树
  • 计算元素位置进行页面布局
  • 绘制页面，最终在浏览器中呈现

是不是会感觉这个和我们图像加载渲染没啥关系一样，事实并非如此，因为img、picture或者background-image都是DOM树或样式规则中的一部分，那么咱们套用进来，图片加载和渲染的时机有可能是下面这样：

  • 解析HTML时，如果遇到img或picture标签，将会加载图片
  • 解析加载的样式，遇到background-image时，并不会加载图片，而会构建样式规则树
  • 加载JavaScript，执行JavaScript代码，如果代码中有创建img元素之类，会添加到DOM树中；如查有添加background-image规则，将会添加到样式规则树中
  • DOM树和样式规则匹配时构建渲染树，如果DOM树节点匹配到样式规则中的backgorund-image，则会加载背景图片
  • 计算元素（图片）位置进行布局
  • 开始渲染图片，浏览器将呈现渲染出来的图片

上面套用浏览器渲染页面的机制，但图片加载与渲染还是有一定的规则。因为，页面中不是所有的<img>（或picture）元素引入的图片和background-image引入的背景图片都会加载的。那么就引发出新问题了，什么时候会真正的加载，加载规则又是什么？

先概括一点：

Web页面中不是所有的图片都会加载和渲染！

我们可以归纳为：

  • <img>、<picture>和设置background-image的元素遇到display:none时，图片不会渲染，也不会加载。
    • 当一个元素设置了 display: none 样式后，该元素和其子元素都不会显示在页面上，布局也不会占据空间。浏览器会判断这些元素是否需要渲染，并且会优化性能以减少资源的浪费，因此不会去加载它们所包含的图片资源。这样做可以提高网页的加载速度，减轻服务器的负担，同时也有助于防止篡改或盗用图片等不良行为。
    • 部分旧版本的浏览器中可能会加载图片，但是不渲染
  • <img>、<picture>和设置background-image的元素祖先元素设置display:none时，background-image不会渲染也不会加载，而img和picture引入的图片不会渲染但会加载
  • <img>、<picture>和background-image引入相同路径相同图片文件名时，图片只会加载一次
  • 样式文件中background-image引入的图片，如果匹配不到DOM元素，图片不会加载
  • 伪类引入的background-image，比如:hover，只有当伪类被触发时，图片才会加载