Performance Mobile Clients

Opening an event can lag significantly. On my desktop in mobile view it went down to 9fps and on mobile phones it takes multiple seconds!

After some performance debugging I found the cuplrit in eventList.js: date.toLocaleString is really inefficient. Apparently date.toString is cached, but toLocaleString calls out to ICU (i18n library) instead (link).

This simple patch leads to >50 fps on my machine:

diff --git a/src/views/events/eventList.js b/src/views/events/eventList.js
index ca5a7bb..ff70cee 100644
--- a/src/views/events/eventList.js
+++ b/src/views/events/eventList.js
@@ -261,56 +261,10 @@ export default class EventList extends FilteredListPage {
       (date_start.getDate() === date_end.getDate() - 1 &&
         date_start.getHours() > date_end.getHours())
     ) {
-      return [
-        m(
-          'span',
-          date_start.toLocaleString(currentLocale(), {
-            weekday: 'long',
-            day: '2-digit',
-            month: '2-digit',
-            year: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-          })
-        ),
-        ' – ',
-        m(
-          'span',
-          date_end.toLocaleString(currentLocale(), {
-            hour: '2-digit',
-            minute: '2-digit',
-            timeZoneName: 'short',
-          })
-        ),
-      ];
+      return [m('span', date_start.toString()), ' – ', m('span', date_end.toString())];
     }
 
-    return [
-      m(
-        'span',
-        date_start.toLocaleString(currentLocale(), {
-          weekday: 'long',
-          day: '2-digit',
-          month: '2-digit',
-          year: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-        })
-      ),
-      ' – ',
-      m(
-        'span',
-        date_end.toLocaleString(currentLocale(), {
-          weekday: 'long',
-          day: '2-digit',
-          month: '2-digit',
-          year: '2-digit',
-          hour: '2-digit',
-          minute: '2-digit',
-          timeZoneName: 'short',
-        })
-      ),
-    ];
+    return [m('span', date_start.toString()), ' – ', m('span', date_end.toString())];
   }
 
   // eslint-disable-next-line class-methods-use-this