jquery - 响应式移动 Web 开发的加载速度。

Question

我正准备将我们的网站变成完全移动响应，从而摆脱我们的 m.网站。我可能会使用 Bootstrap。

我一直在做一些研究，发现了一些很棒的资源。虽然，我对加载速度和移动设备很好奇。

---

例如:

比方说，我网站的桌面版在 2 秒内加载并传输 3 MB 的数据。

现在我用手机访问我的网站。移动断点版本是否仍会传输所有 3MB 数据来加载页面？

我不确定开发人员如何根据他们是否是移动设备来减少请求大小和缩短加载时间。

我假设如果我加载我的浏览器并将其调整到移动断点，它仍将使用与桌面相同的资源。

我希望我的问题是有道理的。我真的不知道该怎么说。

告诉我!谢谢。

Answer 1

除非您另有说明，否则移动浏览器将提取与桌面浏览器完全相同的内容。

您可以采取一些措施来减小移动设备的页面大小，例如在移动设备上下拉较小的图像。一种方法是使用 HTML 图片标签，您可以根据屏幕宽度指定不同的图像尺寸。 https://www.w3schools.com/tags/tag_picture.asp

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

您可能还拥有对屏幕大小使用react的 javascript，下拉或对事件做出不同 react 以减少带宽占用或使页面加载速度看起来更快。这方面的一个例子是延迟加载，延迟加载是在 DOM 加载后拉下屏幕外图像的 javascript。

这是关于页面图像延迟加载的重要指南 https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

最后，网络浏览器缓存内容。因此，页面之间共享的任何样式表、javascript 文件或图像都应存储在设备缓存中，这样可以减少浏览器在每次页面加载时一次又一次地下载相同文件的需要。