0
0
instrumental/app/javascript/mastodon
Matt Panaro 31f7c3fc5d Summary: fix slowness due to layout thrashing when reloading a large … (#12661)
* Summary: fix slowness due to layout thrashing when reloading a large set of status updates

in order to limit the maximum size of a status in a list view (e.g. the home timeline), so as to avoid having to scroll all the way through an abnormally large status update (see https://github.com/tootsuite/mastodon/pull/8205), the following steps are taken:
•the element containing the status is rendered in the browser
•its height is calculated, to determine if it exceeds the maximum height threshold.
Unfortunately for performance, these steps are carried out in the componentDidMount(/Update) method, which also performs style modifications on the element.  The combination of  height request and style modification during javascript evaluation in the browser leads to layout-thrashing, where the elements are repeatedly re-laid-out (see https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing & https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Performance_best_practices_for_Firefox_fe_engineers).
The solution implemented here is to memoize the collapsed state in Redux the first time the status is seen (e.g. when fetched as part of a small batch, to populate the home timeline) , so that on subsequent re-renders, the value can be queried, rather than recalculated.  This strategy is derived from https://github.com/tootsuite/mastodon/pull/4439 & https://github.com/tootsuite/mastodon/pull/4909, and should resolve https://github.com/tootsuite/mastodon/issues/12455.

Andrew Lin (https://github.com/onethreeseven) is thanked for his assistance in root cause analysis and solution brainstorming

* remove getSnapshotBeforeUpdate from status

* remove componentWillUnmount from status

* persist last-intersected status update and restore when ScrollableList is restored

e.g. when navigating from home-timeline to a status conversational  thread and <Back again

* cache currently-viewing status id to avoid calling redux with identical value

* refactor collapse toggle to pass explicit boolean
2019-12-29 05:39:48 +01:00
..
actions Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
components Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
containers Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
features Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
locales Fix notifications label (#12517) 2019-12-02 13:39:53 +01:00
middleware Add missing rejection handling for Promises (#7008) 2018-04-02 14:51:02 +02:00
reducers Summary: fix slowness due to layout thrashing when reloading a large … (#12661) 2019-12-29 05:39:48 +01:00
selectors Add special alert for throttled requests (#11677) 2019-08-27 16:50:39 +02:00
service_worker Add follow_request notification type (#12198) 2019-12-01 17:25:29 +01:00
storage Cache media only when storage can be freed (#7547) 2018-05-19 19:22:11 +02:00
store Update dependencies for Node.js (2018-12-31) (#9669) 2018-12-31 18:11:48 +01:00
utils Do not add margin light when opening modal on mobile (#11830) 2019-09-29 14:30:58 +02:00
api.js Do not set CSRF Token when no csrf header (#10383) 2019-03-26 11:13:20 +01:00
base_polyfills.js Refactor resizeImage method (#7236) 2018-04-23 09:15:51 +02:00
common.js Improve the public hashtag page (#9831) 2019-01-17 14:06:08 +01:00
compare_id.js Add option to disable real-time updates in web UI (#9984) 2019-07-16 06:30:47 +02:00
extra_polyfills.js fix multiple space (#12655) 2019-12-19 07:39:08 +09:00
initial_state.js Add setting for whether to crop images in unexpanded toots (#12126) 2019-10-24 22:51:41 +02:00
is_mobile.js Change mobile layout breakpoint from 1024px to 630px (#5063) 2017-09-24 01:25:07 +02:00
load_keyboard_extensions.js fix: support KaiOS arrow navigation on public pages (#12251) 2019-11-04 13:03:09 +01:00
load_polyfills.js Refactor resizeImage method (#7236) 2018-04-23 09:15:51 +02:00
main.js bug fix (WebPush does not work) (#6120) 2017-12-28 16:20:34 +01:00
performance.js Upgrade to React 16 (#5119) 2017-09-30 04:29:56 +02:00
ready.js Do not load unnecessary script files (#4193) 2017-07-14 11:08:56 +02:00
rtl.js Exclude URLs from text analysis (#11759) 2019-09-04 22:30:49 +02:00
scroll.js Use ScrollToOptions for smooth scrolling if supported (#11207) 2019-06-29 18:32:06 +02:00
settings.js Implement tag auto-completion by history (#6621) 2018-03-04 20:27:25 +01:00
stream.js upgrade/replace websocket.js to @gamestdio/websocket v2 (#12543) 2019-12-04 20:45:49 +09:00
test_setup.js Replace JavaScript Testing Framework from Mocha to Jest (#5412) 2017-10-16 09:33:08 +02:00
uuid.js Replace sprockets/browserify with Webpack (#2617) 2017-05-03 02:04:16 +02:00