This PR improves performance of rendering alerts and silences in Vue.
Currently, all alerts and silences are always rendered and hidden using the collapse CSS rule. This causes rendering delays on page load and whenever components need to be re-rendered (for example, on form input change; #370).
With changes introduced in this PR, all alerts and silences are now hidden behind v-if, so the HTML elements are not generated/rendered until the expression is truthy.
Detailed changes
Introduce toggleComponent(), which dynamically toggles the state of components
The initial state of all components is falsy, so they're not shown by default
Since the components object does not have any properties, it needs to be updated using this.$set()
Use toggleComponent() for all elements that previously used toggleTarget() and collapse
Add v-cloak to top-level element of specific components
Replace v-show with v-if so we skip rendering of v-for if it's not necessary
Remove unnecessary prevent modifier on @click
Improve caching of computed methods
We can reuse filterActive{Alerts,Silences}
Since we return a Set, there's no need to sort the values
Rename toggleTarget() to toggleCollapse()
Alerts and silences on the project detail page are expanded by default, so toggleComponent() cannot be used
Improvements
Before the improvements, the page would be mostly unresponsive until the Alerts block is rendered.
Note: All measurements are approximate page reload times without cache, and were performed with 1660 alerts, 25 silences and 6000 farms.
Component
Before
After
Home page
2s
0.8s
Global alerts section
2s
2.5s
Services page
5.2s
1.9s
Link Farm page
16s
6.7s
Page loads are now completely responsive, except for Link Farm since that needs to render the HTML of 6000 farms.
The global Alerts section, now takes 500ms longer to open, since the HTML elements need to be generated.
Form input lag is almost nonexistent, unless the global Alerts section is open.
Description
This PR improves performance of rendering alerts and silences in Vue.
Currently, all alerts and silences are always rendered and hidden using the
collapseCSS rule. This causes rendering delays on page load and whenever components need to be re-rendered (for example, on form input change; #370).With changes introduced in this PR, all alerts and silences are now hidden behind
v-if, so the HTML elements are not generated/rendered until the expression is truthy.Detailed changes
toggleComponent(), which dynamically toggles the state of componentscomponentsobject does not have any properties, it needs to be updated usingthis.$set()toggleComponent()for all elements that previously usedtoggleTarget()andcollapsev-cloakto top-level element of specific componentsv-showwithv-ifso we skip rendering ofv-forif it's not necessarypreventmodifier on@clickcomputedmethodsfilterActive{Alerts,Silences}Set, there's no need to sort the valuestoggleTarget()totoggleCollapse()toggleComponent()cannot be usedImprovements
Before the improvements, the page would be mostly unresponsive until the
Alertsblock is rendered. Note: All measurements are approximate page reload times without cache, and were performed with 1660 alerts, 25 silences and 6000 farms.Link Farmsince that needs to render the HTML of 6000 farms.Alertssection, now takes 500ms longer to open, since the HTML elements need to be generated.Alertssection is open.