使用换行符优化 html 页面加载
using linebreaks to optimize html page load
请找到下面给出的代码：
<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页面在浏览器中加载时，所有元素都以浮动样式显示，如果第二张图片宽度大于最大页面宽度，它将显示在第一张图片下方，这是由浏览器内部管理的.这里重要的是图像的字节大小，因为页面加载意味着服务器和客户端之间的数据传输。
是
我认为它不会有任何影响，但它确实有。
但你的情况可能不是。
我对各种页面加载场景进行了基准测试，其中之一是没有宽度和高度的图像。 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
有换行符
更快的页面呈现和
Visual Complete 更快。
第一个 运行 有中断
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 中的 "above the fold content"。
这些图片很小，如下所示，宽度和高度：
<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"/>
没有换行符，每张图片都可见 "above the fold"
为什么这对你不起作用？
宽度为 50% 的渲染效果可能与每张图片后都有一个换行符一样。 50% 不允许两个图像并排，因为图像之间的小 space 水平超过 100%。
如果 CSS 删除了左右边距并且图像没有实际换行，它们可能会并排呈现两个。或者如果宽度是 49%
此 HTML 会将换行符转换为图像之间的 space：
<img src="test1.jpg" width=50%/>
<img src="test2.jpg" width=50%/>
之间没有space
<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%/>
此外，大图片比小图片更快地填充上方折叠。
首次绘制与开始渲染
首先绘制布局"wire frame"。在我的具有宽度和高度的测试场景中，第一个绘制布局图像及其图像将占据的框。我实际上可以在框中看到替代文本。
没有宽度和高度，First Paint 不知道图像的大小，因此无法保存线框框所需的 space。
渲染必须在检索每张图像时重新运行处理所有内容。
更新
在这两种情况下，我都为每张图片添加了一个 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。
在所有五个浏览器中，页面呈现如下：
请找到下面给出的代码：
<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页面在浏览器中加载时，所有元素都以浮动样式显示，如果第二张图片宽度大于最大页面宽度，它将显示在第一张图片下方，这是由浏览器内部管理的.这里重要的是图像的字节大小，因为页面加载意味着服务器和客户端之间的数据传输。
是
我认为它不会有任何影响，但它确实有。
但你的情况可能不是。
我对各种页面加载场景进行了基准测试，其中之一是没有宽度和高度的图像。 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
有换行符
更快的页面呈现和 Visual Complete 更快。
第一个 运行 有中断
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 中的 "above the fold content"。
这些图片很小，如下所示，宽度和高度：
<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"/>
没有换行符，每张图片都可见 "above the fold"
为什么这对你不起作用？
宽度为 50% 的渲染效果可能与每张图片后都有一个换行符一样。 50% 不允许两个图像并排，因为图像之间的小 space 水平超过 100%。
如果 CSS 删除了左右边距并且图像没有实际换行，它们可能会并排呈现两个。或者如果宽度是 49%
此 HTML 会将换行符转换为图像之间的 space：
<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%/>
此外，大图片比小图片更快地填充上方折叠。
首次绘制与开始渲染
首先绘制布局"wire frame"。在我的具有宽度和高度的测试场景中，第一个绘制布局图像及其图像将占据的框。我实际上可以在框中看到替代文本。
没有宽度和高度，First Paint 不知道图像的大小，因此无法保存线框框所需的 space。
渲染必须在检索每张图像时重新运行处理所有内容。
更新
在这两种情况下，我都为每张图片添加了一个 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。
在所有五个浏览器中，页面呈现如下：