文章/答案/技术大牛

发布

社区首页 >问答首页 >使用换行优化html页面加载

问使用换行优化html页面加载
EN

Stack Overflow用户

提问于 2016-03-30 06:46:48

回答 2查看 82关注 0票数 2

请查找以下代码：

<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

performance

page-load-time

回答 2

Stack Overflow用户

回答已采纳

发布于 2016-03-30 08:05:56

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

票数 1

Stack Overflow用户

发布于 2016-05-12 15:44:02

是

我不认为它会有任何影响，但它确实。

但在你的情况下可能不是。

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

每个场景我都运行了两次。用谷歌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如此关注“页面速度洞察”中的“高于折叠内容”的原因。

这些图像很小，如这里所示的宽度和高度：

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

此外，大的图像将填补上面的折叠比小的图像更快。

第一次油漆与开始渲染

首先油漆布局的“铁丝框架”。在我的测试场景中，有宽度和高度，第一个油漆布局，图像和他们的图像将占据的框。我能在盒子里看到alt的文字。

没有宽度和高度，首先油漆不知道图像的大小，因此它不能节省所需的空间，在电线框盒。

当检索到每个图像时，呈现必须重新排列所有内容。

更新

在这两种场景中，我给每个图像添加了一个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周围的图像。

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

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36301572

复制

相似问题

问使用换行优化html页面加载
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用换行优化html页面加载EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用换行优化html页面加载
EN