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

时间:2017-10-04 21:54:07

标签: jquery css twitter-bootstrap mobile jquery-mobile

我正准备在这里拿走我们的网站并使其完全移动响应,从而摆脱我们的m。网站。我可能会使用Bootstrap。

我一直在做一些研究,并且遇到了一些很好的资源。虽然,我对加载速度和移动设备很好奇。

例如:

可以说,我网站的桌面版本在2秒内加载并传输3 MB数据。

现在我打开手机去我的网站。移动断点版本是否仍会传输所有3MB数据以加载页面?

我不确定开发人员如何减少请求数量并改善加载时间,具体取决于他们是否可以移动。

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

我希望我的问题有道理。我真的不确定如何说出来。

让我知道! 谢谢。

1 个答案:

答案 0 :(得分:0)

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

您可以采取措施减少移动设备的网页尺寸,例如在移动设备上拉下较小的图片。一种方法是使用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>

您可能还有javascript对屏幕大小作出反应,以不同方式拉下或响应事件以减少带宽占用空间或使页面看起来更快加载。一个例子是延迟加载,延迟加载是javascript,在DOM加载后拉下屏幕外图像。

这是关于页面图片https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

的延迟加载的精彩指南

最后,Web浏览器缓存内容。因此,页面之间共享的任何样式表,javascript文件或图像都应存储在设备缓存中,这样就减少了浏览器在每次页面加载时反复下载相同文件的需要。