Web app wastes and burns πŸ”₯ CPU cycles

Though I am not entirely sure, this could be a regression because if I am not mistaken this used not to be, or not as much.

  1. Launch your browser and go to the Mapillary web app.
  2. Place your browser window on one side of the screen and a CPU/process monitor on the other.
  3. Notice how the CPU, and on multi‑core systems at least one core, goes full blast just to render the Mapillary page.

Generally speaking, at first glance, this does not seem to be an issue on desktop systems. But, it is indeed a huge issue on battery powered devices. Note that the Mapillary web app can be and usually is embedded into other apps, like the Mapillary mobile apps or OsmAnd. So, this is something that is going to drain mobile users’ batteries no matter what you do in the mobile app to save power. For testing, you can make this issue more pronounced when you switch to software rendering.

My humble guess is that the web app’s WebGL canvas just mindlessly renders in a loop instead of rendering only on updates, like input events or timed events. The Mapillary web app is not an action game, where input versus display latency may be of concern. However, power on battery powered devices is a huge concern and this is where the web app is often used.

Can you share the URL where you noticed this behaviour and the browser/OS? The CPU/RAM usage could rise when browsing images and zooming on the map in but should go down over time when the page is inactive and not loading anything new. Performance may differ depending on browser/OS.

I have observed this in Firefox 94 and 102.14.0esr, on x86_64, arm64, and armv7 CPUs, GNOME 42.9 (Wayland and X), and Android, including software and GPU rendering. I have not tested other browsers. GPU rendering causes less CPU load but still too much, especially when doing nothing (no user input and no page or data loading). This behavior does not depend on any particular image or map view. Simply viewing the initial world map at level 2 is enough to cause this issue. It also does not matter whether the view is filled with an image or the map only.

On Android, I can clearly see a significant increase in power use when the Mapillary WebView is visible (on the screen), both in the Mapillary mobile app as well as in OsmAnd. Android’s Settings app’s battery chart and developer options are very handy in diagnosing this. To make it perhaps more pronounced, you should be able switch to software rendering on Android (I am not sure if this is still possible on the latest Android versions). As expected, when the WebView becomes invisible, like switching to another Activity or app, power usage drops to close to zero.

The CPU/RAM usage could rise when browsing images and zooming on the map in but should go down over time when the page is inactive and not loading anything new.

Unfortunately, this is exactly what is not happening, even when doing nothing. For example, in GNOME just having the tab open on top in the browser but the browser in the background makes the CPU or a core go full blast. When I switch to another browser tab then processing of the Mapillary web app tab stops as expected. Basically the same happens on Android. Either way, doing nothing in the Mapillary web app should keep CPU load close to zero.

I can also see this with Firefox / desktop. My only active plugin is UBlock/Origin

1 Like

Did you also experience this on pages like https://www.mapillary.com/dashboard/profile or https://www.mapillary.com/desktop-uploader or just when the map is visible? Do you notice this issue on any other sites that use MapLibre (e.g. Add a default marker - MapLibre GL JS)?

1 Like

https://www.mapillary.com/dashboard/profile
https://www.mapillary.com/desktop-uploader

CPU loads are close to 0.

https://maplibre.org/maplibre-gl-js/docs/examples/add-a-marker

CPU load hovers around 0.5%.

Thanks! We’ll start by updating to the latest version of MapLibre GL JS as we’ve been using a pretty old version on the Mapillary web app. Hopefully this resolves the issue.

1 Like

Thanks @nikola. :+1: Just let us know when you are ready, so that we can test again reliably.

Win10 Entreprise 2016 LTSB.

Firefox 120.01 (64 bits).

With auto-advance activated (default settings), CPU load is growing up from 6% to 20% i.e. one virtual core is fully loaded.

With auto-advance activated (default settings), CPU load is growing up from 6% to 20% i.e. one virtual core is fully loaded.

What you are talking about is to be more or less expected by design. We are talking about the situation when the website is idling, no user input, no data loading, and no automatic (internal) website activity.

I can confirm that this issue persists in Firefox 115.6.0esr.

@nikola So, I have peeked :eyes: at the console…

 system   ERROR in CurrentUserService.reloadCurrentUser()  No accessToken and/or userId in local storage main.fa41a69103e1a85b.js:1:551355
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
Cookie β€œβ€ has been rejected as third-party. An_eZcLi3BPOLAJVDIB7b1neX1-ihHlQ1hwNEjdZD3lsNSnulLHz0KM_WtsDubUDSOkl6D_BgNbAssvKlv4XN6Ly8EW5QgZpw1GCGUvTt6uNB6i9BnkbW9JtWtolG7Bh
Cookie β€œβ€ has been rejected as third-party. An-FBtHr6Ta56jTKWeOjYd8GhNzotjBP3zclMCA2oYfv33ruyLmmH5RxImvgPAvIrGkD5Ank7nABBWGDquHsg9GvNEci3feyg9nibs3hIypdDpU1i9uZMUEbNHwn-BZD8djEzcRkWQxxOMWA3_wOGA
Cookie β€œβ€ has been rejected as third-party. An-dJuaa7hqxzy7ja3UmQobMsoMqY_iZE5hXCkszhAGWl0zeJxhTzUGNjhDWTBtfmTwij34ts5qoLx1zA7yoJZNeL47SpFMaDZjftYfbeqfuyL97VgQ7iJH_wL97BH_EPxqlh6Q5gSkP5hbCoymEeHI
Cookie β€œβ€ has been rejected as third-party. An98aFaklQZGeLYQzVOEwvZgBz90mwM88HtKdXPkxpXTqXUZrhsK1v1iz-GzC-uoTLVJkXaA37pDF5dP39-pxTuyRt080qI9biE-IN4q2ltPtVTKDFTTsgxxPOG2K9hNcbQz4xjWXeeJeLHwC6oUDA
Cookie β€œβ€ has been rejected as third-party. An8t7NjsZeRLlSnjehMPkTKLVttxIcwDKGNFIFyt-578DMdJjKCba4CfI5oQz408el6jhoHmhvxqiMiA8KOJKwIO2tkEjxwNnXDHNomPkFg6D40wqHxg67g7_0-u5Ko3wjVucwOJHLKT1CjDNRUK6g
Cookie β€œβ€ has been rejected as third-party. An8pOu6A37dZwvC_nAhQ1om7pSCs32SFIkQl-5CTNZV-h024ik7Cn43fbezRnDleTaotUEQ4Axt7EzPx1J8uqnDf2BuUGa0TWzWweWXPu8oPFXa34qVe-MlgDwI0xJq7GKZ1y_4VQqD_AmREIkgO-pw
Cookie β€œβ€ has been rejected as third-party. An8-p0DaTeb5K9KnUECITVLP6vBs8EGVCDQdiglYzBdD45ieHorgI6YFmhpR2kc56rDxmCAVxZhRGXRDe7kwurLlGeZPqUIW1-5azmLcRKk39vnGwxfT21gl4iU5Ln7uJbc26A3npo7fJ-LXpNuuKzk
Cookie β€œβ€ has been rejected as third-party. An-cpSbnunS3HHndVal5i4OyVPTRAvwktLQQP9bA_OTMm31vORbHcpvkNFZsrDuHuVvIUZxjDYlOwyk-GPwmEEq9hFvftb77h-JHa7Z3g5Eazd-wMzWr_3VeClYc2euLmgb-LEI60b-NxHLFf67tmyA
Cookie β€œβ€ has been rejected as third-party. An9gEiVFGoL_sDD8BwBjQ_9SjOQ8OnHt8kXqXtvz-ZNiIkpRGFvqBVO9LPgVId0pFYCqjT43lPaIIJ1oM1yGEGs-k9iQpCXmHVhh65Khi6Ll4hdJLbmgtZmoRwQkPEk2ejiMDGjhYawtlSmon5U16Kc
Cookie β€œβ€ has been rejected as third-party. An9H_9kKUCsrObzBmpL_Jmn7vBrWYbJ_E1tWbYlP4SvQYDi236Vmy226iwPwrak56QnWbQr8Kpv_uGb48cre9sKtjo5uEfnhqvldJjcUfUmNtZTMVLXY3p-lWb3dnqQWQSHSXFe1wVT8GC8e1ZNXBw
Cookie β€œβ€ has been rejected as third-party. An-la6W46gqGeIfjTINsPu3231g9VDnT5iS9NJtfzXToOzIN6e5EEmAXo5gskSA0mm_wbxSWfWtGDuh_VPmqc4ILLMpXKBK9s1OsGtfuBcsB8h0tE1GG303Nvwd-PvkS7F32BgR5hy0ehcfcQjZB7w
Cookie β€œβ€ has been rejected as third-party. An-CTfI4HMmxBkViytSN5bbTQVwns3MI_KXhO4LGHigLa2Ff7tnWbgTfHL_KtDGALfP5Ht0VqZeTpJbalw9QV4EsQcNHvYqBcffr40lr1T9GE0sR5XW-DMsMw--3Qn6O_8VlTY6ZZTZs5slJWVBEdA
Cookie β€œβ€ has been rejected as third-party. An89poxfV0MXcaOYG1u0EZSPxT-FQqXr7ICRzy9b__8x7J_v1Shb3uup4mPoBeI_5VkKJP0CSrg8VD5laI9rSCKdakingg59uBMhSQNOMC9YYftYVoZ8MagUEa8vz6owzUX2JajzglgfGKvyXo9_AtU
Cookie β€œβ€ has been rejected as third-party. An9fkbJpVF7nQkylNaPWgaxBjLq7nhXb0TyL6FCuk3T2ooDjE2O1EB_miReftSxaaGg5HX-fTzAFjAEu5YEx8K8spB9ChijhnVCKzlXLO1goybOJ-qvHrknROwn2BHlgpFBN9bt6g4di_u_TrPKIjA
Cookie β€œβ€ has been rejected as third-party. An8wpj-IeGwu96kq6DjKAywUWKdUKS6X-QUCMddyyhCSE6rYLxsPTEa80a8qkcU69dIjG32EZmm-EA8tCph7cEO_4HEknIGym_VTpfFIJZHSWwrknCTbzRHK2RkyHzYbqY4wkEzO8xXcrJjcpOJfLw
Cookie β€œβ€ has been rejected as third-party. An9q2u-hQkXM4MkI6sqR32HH93EGFHllcXsA8kBqUqeU3Gc6S2ueuHgTD8nfSgwbkjeEK-J2MY_hU5jSM35Ehz5wGswDwgOdY2A1tOo8rj0GpqdDdIHHneKwYTvYxG-rpk-dxTw99YmczZHKjSbqvjk
Cookie β€œβ€ has been rejected as third-party. An9NX8YTlFwXDHtAd9sg6IuXLxOLKhV5ViRc3idTgeZ94EZJZed_pTtoFTGp78XYd_PFtkM38guMCs_LvLHbEM4JT6bp8iGK7_tnlkRtHDn9EuaFc5ICwCWFH7-Ua6wiJRuqCiC7d_vdlYyzxXfFHR4
Cookie β€œβ€ has been rejected as third-party. An8eahaP4M-SdR5Qj-ekOm2uTGwXF8-HMb7BLxp3VySAVIL78A0xETCDdIB2Gqn35ZVNhsK2R85bjNi98d7rg5JfypJN9ExuXqvrlMWsWn86z0kTH2GYnFfaRpc0R0d4ogH7Gaf02RMDq0jGFUPvOuw
Cookie β€œβ€ has been rejected as third-party. An-9gUqiqfuLIQOuZlafJdZyJx7l7mgCmcKN66rJvuqEfXlzggjJYpbsBvDH_hFIHgbSW9lzfsRvlpyhC0yPzGP_CPMAGlEfPLCPJBz5skaSWihmEJsTrszZI2_YBfbZ7hILoI0G7NqhrfNiGwvKnQ
Cookie β€œβ€ has been rejected as third-party. An_6o7IcqjlbfDWTcOteQs1uFGiWrh5pYy13EKRSlD1NXJG1OT7j-T6Usmtgqr7IIfr1oEybTExgVS6ThHIHK7AnW2_TpE92MDnw22PDQ4xbup_bTP-Q1KsBCvqp4YwjD5C2uUIg5F5bheChaeBA0w
Cookie β€œβ€ has been rejected as third-party. An9ifV21SzhYCoOPOIWNJts2OBv0v5UVlA4PEVPVCiNvVKo_T-SXZARlBpGnntUtfbH7TcrsOB6kLPjMLPIIaKoFeIpGshvr3aec4bxgapQqwZYKp-ViU92JnCdIRyEh1LKY02lu8jb6Cfegi-O95w
Cookie β€œβ€ has been rejected as third-party. An_WNF7snPaMXTuzTqia-e0Kj7a99cvG0KCD4POIBfl9tHu_S6V3dVa0q7NfTCtF-17HZimkQ-YfnEytrL6Qtz1UfDzqXzL8b3l2lurmFucan28PFvcASnTvDtnzIIvQq2Nf6Y2SvC3GQI8baKMZUyo
Cookie β€œβ€ has been rejected as third-party. An_PpdsGmNklBPiy3ZekUdQ3i_0JLvocoOYJCLqTBRw1vjQgqBd5i70XXwezZXLBkBR2-tHVwepDMClpifwS335-OSxXFY5OJPbiThNSzex1icMJbooXKyDlYhfpIhJGOUsWxJlLmJgacc5hK4ARzHs
Cookie β€œβ€ has been rejected as third-party. An-j07OnhQvX0PIE5UZtmuPTlP7iMrXLNSEjgazKDhDtpcAPCfym4CituX3MFs_e0Qy9PsIon9qxKENF2hPLP6srqeoVh3GIEdh4kpkTAg-0xncqHtjhBBWlMDxEH2ed672vi2MQs1Y4HzMOpk8RMw
Cookie β€œβ€ has been rejected as third-party. An9_9RpDHJYRpesUsg1H5wG7XG0re1ioEo7hQFtRRDlF4uTKj4i09RQDys8_fYcRcwzMx2W2-Abrd0bL6Rd7Yxo0q8SIQ--2XG5Hus3z0OcBE4G5F7AWaTL2bet2hHOHt5k92odWrXAIzrE-aORtIic
Cookie β€œβ€ has been rejected as third-party. An8xB2wIHDz3ii8XHhR9hMNqwN7TRwi4xMgrdXEXMZBjwmg8vM5jsE6Dl-cDIC9zBtFXrp2BiTJmPv-fWYCHZ8pefEV5QU_RvDpO9N2cdv3N52ooyl5J0s-2KXyGYqKnnaXBonTprNatRkBApLfC_2g
Cookie β€œβ€ has been rejected as third-party. An_FaQqMjAP3pC7srhvcB3sFETkI4HkcygJ37fgLyjYxijHPlRSbr1KHq3SEFkTZS945D01SoPlfCc8Zue0kQb6lSLjRCilzrNbmMIKAfhf97bAla3x3l-i_VqTW_5E-JQnh7zbulyTVxAnxbOjNyg
Cookie β€œβ€ has been rejected as third-party. An826uoU2rCp41DmqBtugyP8phz9VB4o1PzJBc5Ocq7pd36Y72grsLRcFkn9B2LKCioNMx2nGaIF7oDAQEyD6OsT_r4iUwGF90BmEOgp1UX2i6htlsi7tFH_-xzNpdD-K_AFTX7z20R-IcldNpf5Yg
Cookie β€œβ€ has been rejected as third-party. An8fM5enI6REZn6GwXtfHg_sN5I5xESstAq-iEHYBycQdkhwTmS64axG1EHCZ1bTdb__Q9sDQ0xAyQ5GJ8-tIidnX7LMYKeQVoGHf6wlQJTnE-1FzHmbLeBLhc91zWKVFVxntCiTh7Jm28tflkUKiQ
Cookie β€œβ€ has been rejected as third-party. An9QlKpbscmu0ORtwOuPHlZ7Xgk5mlUEVm_MXAAH8ANxzdP1hcP8P00XhgR4gB7Cw-aONJfTlZhPTw4IajsgCndFOD6EPwqA66gc6oMVwbB_CpIcQEaQM45JQ05hN8b2c5ln08d-J9UwSqsfBoJg8Xg
Cookie β€œβ€ has been rejected as third-party. An-HalVJXIwaD_sCWrT2cy54ccoyYcWfN80-TWTFMl3AUx8YWRixv_F6GbtWcNRPsKxhTUGImJeu38Jaly5p9RxvOQX4CBHoF-lK95CrM0lHikaifKyQ5MLnJrIiRqolw96rF3kRc3wPLY7thlPsjbM
Cookie β€œβ€ has been rejected as third-party. An_sDil7KpZ-H-LJ1cOANENwpBgGO1g41FhVr486M55Vy6Ur6gdIZldqpXmKUYSLOOgO8x-s9fo7Hkjcj0EEKIbdYO9tcy9ftE5P3f3AJvTm1kJ9l-aywdrgr62kCxb_9x5tbyF7k-4wvKBOsVpKOQ
Cookie β€œβ€ has been rejected as third-party. An_KO7PtVkYj5BW5GRu7O1NZXEs_svTPpwCxcCBFTipxDl7d4gwcZyP0EsEl1wXFwB5B2XA2hM1ChpLBaKVwwTokLsiGMNcpgEQYN_LqGg1Ts1J6BfN2oDYy6s2pqt5zl6J4tlg_wB1scZ69l_JzZg
Cookie β€œβ€ has been rejected as third-party. An9urdecq5eZkRuuuzHFq5tTlGb7wCNMiztDjDZPMJMkcG6T8JsqigZDGBNYELXMRYMi0LoCl4t7dlIeg1g63Aw3_3N5nahn_SWWTImRoAbje6-0kuYgqWE5lK8JmSkVgwP6_3hlq9hJoc3GllkcpQ
Cookie β€œβ€ has been rejected as third-party. An_DvDzFv54nyF2TiPjvmuORtTZ427ufdDQq31xSn3psjB2q1MElx78DrpYD5BQaDAHOd6ZE02aDD5Qf1mrLMtf_TaqZ0zUbVHjfCNKkR_C4KL_uV021XjaMRiLOSa-NpMtKREhKgliml51uBD2nO1w
Cookie β€œβ€ has been rejected as third-party. An9TmkbwyT9ZaQ1safOri-v3nuVVT5HK12yz658i9320siv4LZNNIY5ViOkrbcNeSjDHdqr8Bmog6fwjVRqKeQQIetf3PT25d5xRkoZip70nq3tUQe3KJY4I8iPka6E79a_oLvFq2cQ29w1NF08S0Q
Cookie β€œβ€ has been rejected as third-party. An8KktMu62PbgivUARrzklPQwY1AnM8-tBsZV3OPU3Xf_uDBOglKA3QIWF1iC26Dcx-hR3tp-DCXh642b_MytHKDGDRDXQaVPSuNAjGUlQvatfgDUEgGBdas89TDUTZprltCucsvrt3gn7_TVvGA7w
Cookie β€œβ€ has been rejected as third-party. An9uMMM0WaILQsyvTuYpk7jXRBm-IQL-8T3TLC1yruxxdOcmZJtkD1beq9Nr9fNP6_mGm59Uff_Bbg0g337jOj9-15w7SuyDmP2dYOBTAwzBltHRC0STWcex0A58Iv7JlfQkv7sqldbLYakqNK4u3g
Cookie β€œβ€ has been rejected as third-party. An9rLV0NhABSOXYnw1zyeKyIvoRA1fbBu1mpkT9sgLPyGO96aAqPu2am27df9hLN5lhr6KQfEcjhuk-P00lsxMF1ym2MWouJX-ar_seVjhj0qbZ-5IyBW5uSTysEloPmtHDxKu8JZQQ47-AxR6nN4A
Cookie β€œβ€ has been rejected as third-party. An8YUNYO2nEFwdmzUkkunWZVkoascoyvDlJgBCtHfO4QGMaKFMzgDPdAagihRyKrXgBAdiDkR7CmJyCWvLzBrWfGarKqRStp_q2otWp4GeQUrLY8RSMOqglBGtf1Bk0xgI4BI0fVF-nDg1-i-wFRDA
Cookie β€œβ€ has been rejected as third-party. An-iWYUMLo0Fo_Ni9IIM7PniDzIn5CuiE7-VXP8PXuQHB5SLEa_qfi3P8EDTJmxPUnUNtRWHjnhqehlaoffnaaZtVDyHqm_JhQSONMgN307XsOYfIzAJVFdnt5dmEZmqqAfRNi7o2z57_2aABrNB7w
Cookie β€œβ€ has been rejected as third-party. An9Z6WUQVMe6D4sGk-H4aKBGlUw6B_rn-YZL_Z-m9UoyLk_K1AtYO4mGP2pr_p0Jt1FjeaYmk9rP61jo-1ys1BUVZuBywamPBXFMCC3z4KLYPrt72E9_PV7tWNk_WRS5XUFx9t9C1CWB8ddyajnNuG0
Cookie β€œβ€ has been rejected as third-party. An-8rpEf7xa4GODcrJPi03Ytd-sM-UJl6p-8WtSuHcQm3pbqjj5_cuaoW2SYCTRBtUzBwqirMOvePmpQk0wkaErZdf-pkqUeRF0kQQeAfTkI0HpDDd1eQqsUdA8s9P85jt_c7DyPJgq8uq6KYkO6bQ
Cookie β€œβ€ has been rejected as third-party. An8ykROMSYJzTZEEMgQc59Ec8K4GFjZiKDMIwxGxnrz1inGURXDqczBpxL_N_j_5XaSzS9Fu6Ob7hKm2alwqpJWDKHQdvRwKZzlwX4BVOa4UtuS7dW5J6nxlwE3Xp8_1AkKv2AZGXmnllhq5LkSQ4fA
Image "wave-right" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event. main.fa41a69103e1a85b.js:284:594852
Image "wave-left" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event. main.fa41a69103e1a85b.js:284:594852
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
Image "park-small" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event. main.fa41a69103e1a85b.js:284:594852
Image "none" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event. main.fa41a69103e1a85b.js:284:594852
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 7
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 2
WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. 19
After reporting 32, no further warnings will be reported for this WebGL context.

Looks like this texImage WebGL warning could be the culprit because although it stops after 32 messages it continues to be a problem. :thinking: Something tells me that texImage() is called way too often here.

Image "arrow-large" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event. main.fa41a69103e1a85b.js:284:594852
Image "arrow-small" could not be loaded. Please make sure you have added the image with map.addImage() or a "sprite" property in your style. You can provide missing images by listening for the "styleimagemissing" map event. main.fa41a69103e1a85b.js:284:594852

Please also note the Image "" could not be loaded warnings. I am not sure where these might come about.

Thanks! I’ll look into these messages.

We’ve updated the web app to the latest version of MapLibre, you can try it out now!
We’ve also fixed the errors about the missing icons and β€œWebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads.” seems to be an old warning: WebGL warning: texImage: Alpha-premult and y-flip are deprecated for non-DOM-Element uploads. Β· Issue #10287 Β· mapbox/mapbox-gl-js Β· GitHub that shouldn’t affect performance.

1 Like

Thank you for investigating. :+1: However, I am afraid that things have not improved much. CPU load still hovers at 25% per core. In other words, while the Mapillary web app tab is active, everything continues to become quite sluggish.

I have also tested setting webgl.max-warnings-per-context to 0, just to rule out that processing the WebGL warning: texImage: … warning could be the culprit. As expected, WebGL stops producing warnings but CPU load does not improve.