it-swarm.cn

禁用不使用JS的速度提高

我有一个图库,当前使用标准的img标签加载图像,并且由于它包含很多大图像,因此加载速度很慢。

通过使Gallery脚本在页面加载后动态加载图像,可以加快处理速度。我对此进行了测试,并获得了显着的性能提升。问题是这样做的话,如果用户禁用了JS,图片将不会加载。

所以问题是,如果禁用了JS,以牺牲页面不工作为代价来获得性能是否值得进行权衡?

在这种特定情况下,我想我将使用noscript标记,但是如果我无法控制html输出(例如在CMS中),该怎么办。

2
Sruly

一些简单的想法:

  • 重新设计您的UI,以便您不需要加载超过N张图像。例如,引入分页。
  • 许多浏览器仅呈现用户可见的图像。考虑通过将其他图像移出屏幕或进入具有div的div来隐藏其他图像:隐藏或其他内容。
  • 在页面加载时加载前N张图像,然后再加载其余图像。加载其余图像需要使用javascript,并且您可以添加一个noscript标记,为没有启用JS的少数用户添加分页。
  • 根据要处理的图像类型,将图像组合到Sprite表格中,并使用CSS中的background-position将它们全部加载为背景图像,以仅显示正确的部分。前期加载时间会很长,但是可以缓存。

最终,我无法回答关闭JS是否值得进行权衡,因为我不知道您的听众是什么。我需要更多信息。在大多数情况下,对于我工作过的网站,我们倾向于逐步完善。因此,清单中的第三个示例就是我可能想要的示例。

4
Rahul

如果不是在需要JS来加快图像加载速度的情况下,又在另一页的末尾加载图像,以便在查看图库时图像已经加载,该怎么办?您只想确保图像位于所有重要内容之后,并使用相同的名称以进行缓存。

如果您确实想坚持使用JS进行加载,我建议您先检查JS,然后在支持JS的情况下使用动态加载,如果不支持JS,则建议使用标准加载。

1
LoganGoesPlaces

您可以逐步做到这一点。即,初始HTML会像现在一样输出IMG标签。但是,一旦加载,您的jQuery便会立即触发并用您的自定义加载程序动态替换IMG标签。两全其美。

1
Chase Seibert

甚至大公司也开始需要Javascript。例如,如果您在IE中关闭了Javascript,是否知道您甚至无法下载Google Chrome? Accept and Install按钮不起作用。它们只是在屏幕顶部显示以下文本:

您需要具有JavaScript功能的浏览器才能下载此软件。 单击此处获取说明 关于如何在浏览器中启用JavaScript。

就我个人而言,在这种情况下,我认为Javascript要求本身就是一个错误,但我离题了。

当然,这取决于您的听众,但是在过去的几年中,我也一直在构建许多需要Javascript才能工作的Web界面。

剩下的一个问题是SEO。如果您希望Google索引图库中的图像,则需要将它们显示在HTML中。

1
Steve Wortham

“如果关闭了Java脚本该怎么办”这个问题应该靠它自己解决。虽然应确保在关闭JS的情况下仍可使用您的应用程序/网站,但也应考虑一下谁是受众。老实说-在2010年,网络开发人员甚至不必考虑这个问题(我不再这样做)。

使用分析功能来确定您的用户是否已打开/打开JS。如果少于5%的用户,甚至不用浪费时间解决问题。

1
abrudtkuhl