请找到下面给出的代码:
<img src="test1.jpg" width=50%/>
<img src="test2.jpg" width=50%/>
<img src="test3.jpg" width=50%/>
<img src="test4.jpg" width=50%/>
如果我在相关位置添加换行符，性能会得到改善吗？ (如下):
<img src="test1.jpg" width=50%/>
<img src="test2.jpg" width=50%/> <br/>
<img src="test3.jpg" width=50%/>
<img src="test4.jpg" width=50%/>
最佳答案
是
我认为这不会产生任何影响，但它确实产生了。
但在你的情况下可能不会。
我对各种页面加载场景进行了基准测试，其中之一是没有宽度和高度的图像。 HTML 如下所示:
elseif(intval($_GET['rev']) == 5){
echo<<<EOT
<!DOCTYPE html><html lang="en">
<head><title>img no wxh</title><style type="text/css"></style></head>
<body><div>
<img alt="image 00001" src="Image00001.jpg"/>
<img alt="image 00002" src="Image00002.jpg"/>
<img alt="image 00003" src="Image00003.jpg"/>
<img alt="image 00004" src="Image00004.jpg"/>
...
<img alt="image 00055" src="Image00055.jpg"/>
<img alt="image 00056" src="Image00056.jpg"/>
<img alt="image 00057" src="Image00057.jpg"/>
<img alt="image 00058" src="Image00058.jpg"/>
</div></body></html>
EOT;
我复制了该测试并添加了 <br/>在每张图像之后。
elseif(intval($_GET['rev']) == 6){
echo<<<EOT
<!DOCTYPE html><html lang="en"><head><title>base64</title><style type="text/css"></style></head><body><div>
<img alt="image 00001" src="Image00001.jpg"/><br/>
<img alt="image 00002" src="Image00002.jpg"/><br/>
<img alt="image 00003" src="Image00003.jpg"/><br/>
<img alt="image 00004" src="Image00004.jpg"/><br/>
...
<img alt="image 00055" src="Image00055.jpg"/><br/>
<img alt="image 00056" src="Image00056.jpg"/><br/>
<img alt="image 00057" src="Image00057.jpg"/><br/>
<img alt="image 00058" src="Image00058.jpg"/><br/>
</div></body></html>
EOT;
我将每个场景运行了两次。使用 Google Chrome 浏览器进行测试。
首次运行无中断
TTFB 200 mS
DOM Loaded 326 mS
First Paint 791 mS
Start Render 985 mS
Load Time 2,074 mS
Rendering 1,198 mS
Fully Loaded 2,240 mS
Visual Complete 2,183 mS
第二次运行没有休息
TTFB 277 mS
DOM Loaded 358 mS
First Paint 656 mS
Start Render 692 mS
Load Time 2,138 mS
Rendering 1,500 mS
Fully Loaded 2,221 mS
Visual Complete 2,192 mS
带换行符
更快的页面渲染和 视觉完成要快得多。
第一次运行时有中断
TTFB 220 mS
DOM Loaded 377 mS
First Paint 894 mS
Start Render 991 mS
Load Time 2,263 mS
Rendering 199 mS
Fully Loaded 2,426 mS
Visual Complete 1,190 mS
第二次运行(带休息)
TTFB 206 mS
DOM Loaded 355 mS
First Paint 866 mS
Start Render 889 mS
Load Time 2,267 mS
Rendering 399 mS
Fully Loaded 2,422 mS
Visual Complete 1,288 mS
我的问题是为什么？
答案在于视觉完整和完全加载之间的区别。
这就是 Google 如此关注 Page Speed Insights 中的“首屏内容”的原因。
这些图像很小，如下所示，其宽度和高度:
<img width="90" height="90" alt="image 00001" src="Image00001.jpg"/>
<img width="120" height="79" alt="image 00002" src="Image00002.jpg"/>
<img width="112" height="90" alt="image 00003" src="Image00003.jpg"/>
<img width="111" height="90" alt="image 00004" src="Image00004.jpg"/>
<img width="75" height="90" alt="image 00005" src="Image00005.jpg"/>
<img width="92" height="90" alt="image 00006" src="Image00006.jpg"/>
<img width="90" height="90" alt="image 00007" src="Image00007.jpg"/>
<img width="112" height="90" alt="image 00008" src="Image00008.jpg"/>
<img width="118" height="90" alt="image 00009" src="Image00009.jpg"/>
如果没有换行符，每个图像都可以在“首屏”看到
为什么这对你不起作用？
50% 的宽度可能会呈现相同的效果，就好像每个图像后面都有一个换行符一样。 50% 不允许两个图像并排，因为图像之间的空间很小，水平方向超过 100%。
如果 CSS 删除了左右边距，并且图像没有实际的换行，它们可能会并排渲染两个图像。或者如果宽度是 49%
此 HTML 会将换行符转换为图像之间的空格:
<img src="test1.jpg" width=50%/>
<img src="test2.jpg" width=50%/>
之间没有空格
<img src="test1.jpg" width=50%/><img src="test2.jpg" width=50%/>
或者如果宽度是 49%
<img src="test1.jpg" width=49%/>
<img src="test2.jpg" width=49%/>
加上大图像比小图像更快地填充上方折叠。
首次绘制与开始渲染
首先绘制“线框”布局。在我的具有宽度和高度的测试场景中，第一个绘制布局的图像及其图像将占据的框。我实际上可以看到框中的替代文本。
如果没有宽度和高度，First Paint 不知道图像的大小，因此无法节省线框框中所需的空间。
在检索每个图像时，渲染必须重新排列所有内容。
更新
我在这两种情况下为每个图像添加了 width="50%"。
无换行符
<img width="50%" alt="image 00001" src="Image00001.jpg"/>
TTFB 211 mS
DOM Loaded 365 mS
First Paint 1,022 mS
Start Render 1,091 mS
Load Time 2,319 mS
Rendering 0 mS
Fully Loaded 2,494 mS
Visual Complete 1,091 mS
-
TTFB 203 mS
DOM Loaded 256 mS
First Paint 546 mS
Start Render 594 mS
Load Time 1,838 mS
Rendering 0 mS
Fully Loaded 1,987 mS
Visual Complete 594 mS
带换行符
<img width="50%" alt="image 00001" src="Image00001.jpg"/><br/>
TTFB 256 mS
DOM Loaded 352 mS
First Paint 740 mS
Start Render 793 mS
Load Time 2,110 mS
Rendering 0 mS
Fully Loaded 2,260 mS
Visual Complete 793 mS
-
TTFB 200 mS
DOM Loaded 285 mS
First Paint 653 mS
Start Render 691 mS
Load Time 1,978 mS
Rendering 0 mS
Fully Loaded 2,132 mS
Visual Complete 691 mS
更新两个
关于您对我测试的 50% 和并排的评论
Chrome
FireFox
Safari
Opera
IE 8
结果正如我预测的那样，而不是并列。我将代码更改如下:
<img width="50%" alt="image 00001" src="Image00001.jpg"/><img width="50%" alt="image 00002" src="Image00002.jpg"/>
<img width="50%" alt="image 00003" src="Image00003.jpg"/><img width="50%" alt="image 00004" src="Image00004.jpg"/>
<img width="50%" alt="image 00005" src="Image00005.jpg"/><img width="50%" alt="image 00006" src="Image00006.jpg"/>
<img width="50%" alt="image 00007" src="Image00007.jpg"/>
<img width="50%" alt="image 00009" src="Image00009.jpg"/>
<img width="50%" alt="image 00011" src="Image00011.jpg"/>
<img width="50%" alt="image 00012" src="Image00012.jpg"/>
<img width="50%" alt="image 00013" src="Image00013.jpg"/>
我还尝试了在图像周围有或没有 div 的情况。
在所有五个浏览器中，页面呈现如下:
关于html - 使用换行符优化 html 页面加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36301572/