tozz

tozz

Running into JavaScript timeouts with LiveView (browser tab hangs) and medium sized forms

I’m currently seeing some issued with our admin interface, where people on Intel CPU’s being shown the “the tab has crashed” kind of dialog when using a LiveView form. The background is that we use the Ecto sort and delete params, interactions need to be processed, otherwise I’d just change it to not have any interactive features.

The issue is not on the receiving end, that’s significantly much faster, but when LiveView does its processing before dispatching to the server. This screenshot is on a M3 Pro.

I don’t know why dispatchClickAway is wrapping all this, since there’s no such event on the page :slight_smile:
I tried digging deeper but as you know with JS, it’s usually a very long list of anonymous functions with minified names.

Looking at Node count it varies between 80-800K. Yes that’s 10x, for some reason LiveView or Chrome, unclear which, don’t clean up the tree after navigating/getting updates. It seems to be reliant on a GC to run.

The form is quite straight forward.

Schema (120 entries), 
|---- SubSchema (can vary, but between 0 and 10 items)
|---- SecondSubSchema (0-3 items)

So at most one level deep, but you can add and remove them dynamically. Processing times on the server side are fast enough that it doesn’t matter, less than 20ms, even in dev-mode.

Curious as to if people have some good ideas on how to debug this.

Marked As Solved

steffend

steffend

Phoenix Core Team

Hey @tozz,

can you please try

{:phoenix_live_view,
     github: "phoenixframework/phoenix_live_view", branch: "sd-optimize-serializeForms-assets", override: true}

See also Optimize serializeForm by SteffenDE · Pull Request #3696 · phoenixframework/phoenix_live_view · GitHub :slight_smile:

Also Liked

tozz

tozz

I don’t know if you wear a cape, but a hero you are! Works fantastically well :slight_smile:

chrismccord

chrismccord

Creator of Phoenix

We’d need to know a lot more. 80k DOM nodes is extreme, 800k is likely to be a showstopper in general, but I haven’t measured. facebook.com timeline for example is on the order of 4-5k DOM nodes. What is your DOM node count on dead render/first mount?

tozz

tozz

I dug into this some more, my numbers are from the Chrome Performance Monitor, and it seems that is doing some weird counting, or it keeps some internal state that isn’t represented in the actual tree.
Doing a simple document.querySelectorAll('*'); returns 19k nodes. Looking at just input it’s 4600 (actually exact) and of those it’s 2450 that are hidden (inputs_for generated with the exception of the needed _sort / _delete ones for Ecto)

Looking at execution time pushInput is the one function taking up time, below is a screenshot of dynamically adding three new “SubSchemas” to the form on a M1.

Happy to supply any other data you might need, and thank you for all the hard work in the ecosystem, using Phoenix and LiveView has been a bliss in general :slight_smile:

Last Post!

tozz

tozz

Got it, thanks for the update!

Where Next?

Popular in Questions Top

baxterw3b
Hi guys, i’m new in the Elixir world, and i have to say, that i love it! i’m having some problem to understand anonymous functions with ...
New
vonH
When I run the Plug and I recompile I wind up having to use Ctrl C to quit iex and start again. Witht the help of rlwrap I can use the cu...
New
vonH
In asking this question I am more interested about the expressiveness of the language itself and less concerned about the availability of...
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
openscript
Hello! Sorry for this astonishing simple question, but I’m really stuck. I try to set up the intellij-elixir plugin, but I don’t know ho...
New
shijith.k
I am trying to start a new phoenix project with elixir 1.9, but mix phx.new does not work. It says that ** (Mix) The task "phx.new" could...
New
dblack
I’ve got an issue with an app and I’ve no idea of how to troubleshoot it. I’m hoping someone here might have seen something similar. I p...
New

Other popular topics Top

grych
Hi folks, Few months ago I have announced the proof-of-concept of the library to manipulate the browsers DOM objects directly from Elixi...
639 54006 488
New
dogweather
I wrote this comment on r/haskell, and it’s not popular there. :wink: But I think I’m on to something… Haskell reminds me of Java, and e...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
gshaw
What is the idiomatic way of matching for not nil in Elixir? E.g., First way: defp halt_if_not_signed_in(conn, signed_in_account) when...
New
saif
Hello everyone, Long time lurker first time poster here. I’ve recently begun working on Elixir full-time again! :raised_hands: It’s been...
New
Harrisonl
We have an ECS cluster with 4 services, where each task joins a single cluster, via discovery ECS discovery service. Currently when I de...
New

We're in Beta

About us Mission Statement