如何利用socket.io加速laravel应用程序

Question

我有一个Laravel应用程序，我开发用来作为眼图在我的办公室(眼科)。所以，想象一下，用大的E和所有的字母来看图表，这些字母会越来越小。除了执行的速度之外，我的所有功能都能正常工作。当我按下键盘按钮时，字母并没有那么快的变化，这让我有点难过。我想我已经缩小到渲染图像的范围了？(这些字母实际上是单独的PNG文件，不只是屏幕上的一个字体)，但最大的一个大概是47 of，不完全是一个巨大的内容。我遇到的问题是，当我排队换行时，屏幕上会加载5个图像供病人阅读。但他们都花了相当长的时间来load....like，有时7秒。我运行的英特尔i5处理器，可以得到1.9ghz。我真的不认为是那样。我在WAMP堆栈上最新的apache服务器上本地托管这个文件。如果我连续地加载一个又一个的线，图像开始将它们的加载时间减少到更合理的位置。但是，如果我让页面停留5分钟，然后返回到它，这就像它重置和重新加载所有的图像，最初再次在5+秒。有谁知道这件事的潜在解决办法吗？我知道这听起来可能很宽泛，但是这个谜题有太多的地方，我甚至不知道该从哪里开始。铬自动缓存图像吗？目前，我只是通过调用laravel中的"public/imgs“文件夹中的路径来加载它们。有没有更有效的方法来做到这一点？任何一个方向上的帮助都是值得赞赏的，只是想让它变得更有响应性。旁注:我可以在其他网站上播放youtube视频和图像内容，这也是为什么我的小图像文件要花这么长时间才能加载的原因。如果有人需要，github可以查看这个项目:github.com/maxus1127/eyechart。该应用程序使用socket.io、redis和节点。所以，如果你想下载它来玩，你需要配置这些东西。但是电话和信息几乎立刻就被发送了，我真的认为这只是图像加载的麻烦。

Answer 1

看起来，每次更改设置时，图像都会被加载到页面中。您将在每次更改后向DOM中添加/移除img元素。

$('#line1').html("<img src='/images/" + image[size[1]] + "'/> <img src='/images/" + image[size[2]] + "' /> <img src='/images/" + image[size[3]] + "' /> <img src='/images/" + image[size[4]] + "' /> <img src='/images/" + image[size[0]] + "' />" );

您可以尝试在第一次加载页面时预加载所有图像，然后根据您选择的选项在页面上隐藏/显示/移动它们，并使用jquery代码。

<div class="display">

</div>

<div class="hidden">
    <img id="size-1" src="/images/...">
    ...
</div>

然后：

$('.display').append($('#size-1'));

或者类似的..。你知道这个主意。