diff options
author | Yorhel <git@yorhel.nl> | 2019-11-10 16:06:37 +0100 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2019-11-10 16:10:07 +0100 |
commit | 671ba75f3fdc46d250fd7e2a64017dc2b62d885e (patch) | |
tree | 9a691c810c941b2e6b657100b5faf8fde4eca1d2 /elm | |
parent | 6978b670e715d32f39e15c1aa2191d5dcd86685c (diff) |
ulist: Improve page load time by lazily loading some things
Instantiating 100 <input type="date"> takes about 180ms on my system
with Firefox, so doing that lazily is a big win. UList.Opt is typically
hidden, lazily initializing that saves an additional 60ms.
Also increase the mouse-over div for the date editor a bit so that
there's more hover space.
Diffstat (limited to 'elm')
-rw-r--r-- | elm/UList/DateEdit.elm | 28 | ||||
-rw-r--r-- | elm/UList/Opt.js | 13 | ||||
-rw-r--r-- | elm/elm-init.js | 3 |
3 files changed, 31 insertions, 13 deletions
diff --git a/elm/UList/DateEdit.elm b/elm/UList/DateEdit.elm index fc5da234..0c16a8c4 100644 --- a/elm/UList/DateEdit.elm +++ b/elm/UList/DateEdit.elm @@ -20,22 +20,25 @@ main = Browser.element } type alias Model = - { state : Api.State - , flags : GDE.Send - , val : String - , debnum : Int -- Debounce for submit + { state : Api.State + , flags : GDE.Send + , val : String + , debnum : Int -- Debounce for submit + , visible : Bool } init : GDE.Send -> Model init f = - { state = Api.Normal - , flags = f - , val = f.date - , debnum = 0 + { state = Api.Normal + , flags = f + , val = f.date + , debnum = 0 + , visible = False } type Msg - = Val String + = Show + | Val String | Save Int | Saved GApi.Response @@ -43,6 +46,7 @@ type Msg update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of + Show -> ({ model | visible = True }, Cmd.none) Val s -> ({ model | val = s, debnum = model.debnum + 1 }, Task.perform (\_ -> Save (model.debnum+1)) <| Process.sleep 500) Save n -> @@ -59,11 +63,13 @@ update msg model = view : Model -> Html Msg -view model = div [ class "compact" ] <| +view model = div (class "compact" :: if model.visible then [] else [onMouseOver Show]) <| case model.state of Api.Loading -> [ span [ class "spinner" ] [] ] Api.Error _ -> [ b [ class "standout" ] [ text "error" ] ] -- Argh Api.Normal -> - [ input ([ type_ "date", class "text", value model.val, onInput Val, onBlur (Save model.debnum), pattern "yyyy-mm-dd" ] ++ GDE.valDate) [] + [ if model.visible + then input ([ type_ "date", class "text", value model.val, onInput Val, onBlur (Save model.debnum), pattern "yyyy-mm-dd" ] ++ GDE.valDate) [] + else text "" , span [] [ text model.val ] ] diff --git a/elm/UList/Opt.js b/elm/UList/Opt.js index 11ac9419..2c0f274a 100644 --- a/elm/UList/Opt.js +++ b/elm/UList/Opt.js @@ -1,6 +1,6 @@ var init = Elm.UList.Opt.init; -Elm.UList.Opt.init = function(opt) { - // TODO: This module is more often than not hidden from the page, lazily loading it could improve page load time. + +var actualInit = function(opt) { var app = init(opt); app.ports.ulistVNDeleted.subscribe(function(b) { @@ -26,3 +26,12 @@ Elm.UList.Opt.init = function(opt) { e.innerText = rels[0] + '/' + rels[1]; }); }; + +// This module is typically hidden, lazily load it only when the module is visible to speed up page load time. +Elm.UList.Opt.init = function(opt) { + var e = document.getElementById('collapse_vid'+opt.flags.vid); + if(e.checked) + actualInit(opt); + else + e.addEventListener('click', function() { actualInit(opt) }, { once: true }); +}; diff --git a/elm/elm-init.js b/elm/elm-init.js index 1388b0cd..e48a94f3 100644 --- a/elm/elm-init.js +++ b/elm/elm-init.js @@ -19,8 +19,10 @@ /* Load all Elm modules listed in the pageVars.elm array */ if(pageVars.elm) { + //var t0 = performance.now(); for(var i=0; i<pageVars.elm.length; i++) { var e = pageVars.elm[i]; + //if(e[0] != 'UList.DateEdit') continue; var mod = e[0].split('.').reduce(function(p, c) { return p[c] }, Elm); var node = document.getElementById('elm'+i); if(e.length > 1) @@ -28,4 +30,5 @@ if(pageVars.elm) { else mod.init({ node: node }); } + //console.log("Elm modules initialized in " + (performance.now() - t0) + " milliseconds."); } |