Question

请找到下面给出的代码：

<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%/>

Answer 1

是

我认为它没有任何影响，但确实如此。

但在你的情况下可能没有。

我对各种页面加载方案进行基准测试，其中一种是没有宽度和高度的图像。 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

WITH Line Breaks

更快的页面渲染和 视觉完成要早得多。

第一次突破

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

我的问题是为什么？

答案在于视觉完成和完全加载之间的区别。

这就是为什么谷歌如此关注＆＃34;高于折叠内容＆＃34;在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"/>

没有换行符，每张图片都可见＆＃34;在首屏上方＃34;

为什么这对你不起作用？

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布局＆＃34;线框＆＃34;。在我的测试场景中，宽度和高度是第一个颜色布局，图像和图像所占的框将占据。我实际上可以在方框中看到替代文字。

没有宽度和高度First Paint不知道图像的大小，因此无法节省线框框中所需的空间。

渲染必须在检索每个图像时重新排列所有内容。

更新

我添加了宽度=＆＃34; 50％＆＃34;两个场景中的每个图像。

没有换行

<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。

在所有五个浏览器中，页面呈现如下：

Answer 2

当在浏览器中加载HTML页面时，所有元素都以浮动样式显示，如果第二个图像宽度大于最大页面宽度，它将显示在第一个图像下方，这由浏览器内部管理。这里重要的是图像的字节大小，因为页面加载意味着在服务器和客户端之间传输数据。

使用换行符来优化html页面加载

2 个答案:

是