I have a LiveView that displays a number of images, each having a src that comes from the database. I noticed that every time I send an event (phx-click, etc…) to update the LiveView, the “network” tab in my browser shows every image being re-downloading. This causes the performance of the page to suffer.
It’s my understanding that LiveView should diff the updates and only send the things that have changed. In my case, this shouldn’t include the images, as they don’t change. Any idea what I’m doing wrong? I imagine I am doing something that makes it difficult for LiveView’s “diff” to work correctly. Each time an even is sent to the server, I am re-fetching the data in the “handle_params” function, and I’m wondering if this is what is causing the images to be downloaded again.
One more bit of information that could be relevant:
I am rendering the images from and Elixir list using a for loop. Something like
<%= for image <- @images do %>
<img src='<%= image.src %>'>
<% end %>
I feel like I remember reading that liveview handles lists differently, so perhaps that’s the issue.
If your image is cached, it shouldn’t matter much, right? It’ll refetch a cached image from the browser cache?
Is “Disable cache” in Chrome developer tools checked?
If yes, uncheck it and see if the behaviour persists.
Even a cached asset will still appear in the report - however the value in the Size column will be something like
(disk cache) and the time shown will be the time required to retrieve the asset from the cache.
@trentjones21 is this in a partial per chance? As I understand it if you do
.eex instead of
.leex for a partial the diff tracking won’t be able to work.
“Disable cache” was indeed checked. I can’t believe I overlooked that. I always keep that checked because it’s generally what I want when the dev tools are open. Thanks for pointing that out. Disabling that definitely shows that a lot less network activity is happening than I originally thought.
It is in a partial. I had no idea that
.eex files wouldn’t be compatible with diff tracking if it was being rendered from a
.leex file. Is there any easy solution around this? It isn’t a huge deal now that I see the browser cache working fine, but it might be nice to know for future reference.
Thanks everyone for the helpful feedback.