JS Capsules: A Framework for Capturing Fine-grained JavaScript Memory Measurements for the Mobile Web
Article No.: 14, Pages 1 - 26
Abstract
Understanding the resource consumption of the mobile web is an important topic that has garnered much attention in recent years. However, existing works mostly focus on the networking or computational aspects of the mobile web and largely ignore memory, which is an important aspect given the mobile web's reliance on resource-heavy JavaScript. In this paper, we propose a framework, called JS Capsules, for characterizing the memory of JavaScript functions and, using this framework, we investigate the key browser mechanics that contribute to the memory overhead. Leveraging our framework on a testbed of Android mobile phones, we conduct measurements of the Alexa top 1K websites. While most existing frameworks focus on V8 - the JavaScript engine used in most popular browsers - in the context of memory, our measurements show that the memory implications of JavaScript extends far beyond V8 due to the cascading effects that certain JavaScript calls have on the browser's rendering mechanics. We quantify and highlight the direct impact that website DOM have on JavaScript memory overhead and present, to our knowledge, the first root-cause analysis to dissect and characterize their impact on JavaScript memory overheads.
References
[1]
Lighthouse | tools for web developers | google developers.
[2]
Reference removed for double-blind review.
[3]
These were the 5 most popular phone brands in africa in 2018. bit.ly/30dI2OT.
[4]
A low-profile, chinese handset maker has taken over africa's mobile market. bit.ly/2W1wAGW.
[5]
V. Agababov, M. Buettner, V. Chudnovsky, M. Cogan, B. Greenstein, S. McDaniel, M. Piatek, C. Scott, M. Welsh, and B. Yin. Flywheel: Google's data compression proxy for the mobile web. In 12th {USENIX} Symposium on Networked Systems Design and Implementation ({NSDI} 15), pages 367--380, 2015.
[6]
S. Ahmad, A. L. Haamid, Z. A. Qazi, Z. Zhou, T. Benson, and I. A. Qazi. A view from the other side: Understanding mobile phone characteristics in the developing world. page 319--325, 2016.
[7]
android.com. Android (go edition). powering entry-level devices., 2020.
[8]
H. Archive. State of the web.
[9]
I. Archive. Wayback machine.
[10]
K. Basques. Fix memory problems, 2020.
[11]
A. Bhattacharya. Internet use in india proves desktops are only for westerners, 2017.
[12]
Z. S. Bischof, J. P. Rula, and F. E. Bustamante. In and out of cuba: Characterizing cuba's connectivity. In Proceedings of the 2015 Internet Measurement Conference, pages 487--493, 2015.
[13]
C. Blog. Protecting against resource-heavy ads in chrome. https://blog.chromium.org/2020/05/resource-heavy-adsin-chrome.html.
[14]
The chinese unknown that's making africa's phones. bit.ly/2VUl5kB.
[15]
J. W. Bojan Pavic, Chris Anstey. Why does speed matter? https://web.dev/why-speed-matters/.
[16]
J. Brutlag. Speed matters for google web search, 2009.
[17]
M. Butkiewicz, H. V. Madhyastha, and V. Sekar. Understanding website complexity: measurements, metrics, and implications. In Proceedings of the 2011 ACM SIGCOMM conference on Internet measurement conference, pages 313--328, 2011.
[18]
M. Butkiewicz, D. Wang, Z. Wu, H. Madhyastha, and V. Sekar. Klotski: Reprioritizing web content to improve user experience on mobile devices. In NSDI, 2015.
[19]
Y. Cao, J. Nejati, M. Wajahat, A. Balasubramanian, and A. Gandhi. Deconstructing the energy consumption of the mobile page load. Proceedings of the ACM on Measurement and Analysis of Computing Systems, 1(1):1--25, 2017.
[20]
J. C. Chang, N. Hahn, Y. Kim, J. Coupland, B. Breneisen, H. S. Kim, J. Hwong, and A. Kittur. When the tab comes due: challenges in the cost structure of browser tab usage. In Proceedings of the 2021 CHI Conference on Human Factors in Computing Systems, pages 1--15, 2021.
[21]
M. Chaqfeh, R. Coke, J. Hu, W. Hashmi, L. Subramanian, T. Rahwan, and Y. Zaki. Jsanalyzer: A web developer tool for simplifying mobile web pages through non-critical javascript elimination. ACM Transactions on the Web (TWEB).
[22]
M. Chaqfeh, M. Haseeb, W. Hashmi, P. Inshuti, M. Ramesh, M. Varvello, F. Zaffar, L. Subramanian, and Y. Zaki. To block or not to block: Accelerating mobile web pages on-the-fly through javascript classification. arXiv preprint arXiv:2106.13764, 2021.
[23]
M. Chaqfeh, Y. Zaki, J. Hu, and L. Subramanian. Jscleaner: De-cluttering mobile webpages through javascript cleanup. In Proceedings of The Web Conference 2020, pages 763--773, 2020.
[24]
chromium.org. Multi-process architecture. https://www.chromium.org/developers/design-documents/multi-processarchitecture/.
[25]
C. Cimpanu. All the chromium-based browsers. https://www.zdnet.com/pictures/all-the-chromium-based-browsers/ 12/. Proc. ACM Meas. Anal. Comput. Syst., Vol. 7, No. 1, Article 14. Publication date: March 2023. JS Capsules 14:25
[26]
J. Clement. Percentage of mobile device website traffic worldwide from 1st quarter 2015 to 2nd quarter 2022. https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/.
[27]
M. contributors. chrome-remote-interface. https://github.com/cyrus-and/chrome-remote-interface.
[28]
M. contributors. Css object model (cssom), 2020.
[29]
M. contributors. Introduction to dom, 2020.
[30]
A. Cortesi, M. Hils, T. Kriechbaumer, and contributors. mitmproxy: A free and open source interactive HTTPS proxy, 2010. [Version 6.0].
[31]
createjs.com. Createjs. https://createjs.com/.
[32]
cyren.com. Cyren website url category checker. https://www.cyren.com/security-center/url-category-check.
[33]
M. Dasari, S. Vargas, A. Bhattacharya, A. Balasubramanian, S. R. Das, and M. Ferdman. Impact of device performance on mobile internet qoe. In Proceedings of the Internet Measurement Conference 2018, pages 1--7. ACM, 2018.
[34]
developer.android.com. Activitymanager.memoryinfo. https://developer.android.com/reference/android/app/ ActivityManager.MemoryInfo.
[35]
A. Developers. Android debug bridge (adb). https://developer.android.com/studio/command-line/adb.
[36]
A. Developers. Memory allocation among processes.
[37]
A. Developers. Overview of memory management. https://developer.android.com/topic/performance/memoryoverview.
[38]
A. Developers. Dumpsys, 2020.
[39]
C. Developers. Chrome devtools protocol - domsnapshot domain. https://chromedevtools.github.io/devtoolsprotocol/tot/Tracing/#type-MemoryDumpConfig.
[40]
C. Developers. Chrome devtools protocol - tracing domain. https://chromedevtools.github.io/devtools-protocol/tot/ Tracing/.
[41]
C. Developers. Chrome devtools protocol - tracing domain. https://chromedevtools.github.io/devtools-protocol/tot/ Tracing/#type-MemoryDumpConfig.
[42]
C. Developers. Chrome devtools protocol - tracing domain. https://chromedevtools.github.io/devtools-protocol/tot/ Tracing/#method-requestMemoryDump.
[43]
C. developers. Memoryinfra. https://chromium.googlesource.com/chromium/src//master/docs/memory-infra/.
[44]
C. Developers. Timeline event reference. https://developer.chrome.com/docs/devtools/evaluate-performance/ performance-reference/.
[45]
developers.android.com. Logcat command-line tool. https://developer.android.com/studio/command-line/logcat.
[46]
D. Digital. Milliseconds make millions: A study on how improvements in mobile site speed positively affect a brand's bottom line. https://bit.ly/3rpm8WP.
[47]
H. Djirdeh. Apply instant loading with the prpl pattern.
[48]
H. Djirdeh. Reduce javascript payloads with code splitting.
[49]
H. Djirdeh. Reduce javascript payloads with code splitting.
[50]
docs.oracle.com. 10 garbage-first garbage collector tuning. https://docs.oracle.com/javase/9/gctuning/garbage-firstgarbage-collector-tuning.htm.
[51]
N. Dukkipati, T. Refice, Y. Cheng, J. Chu, T. Herbert, A. Agarwal, A. Jain, and N. Sutin. An argument for increasing tcp's initial congestion window. Computer Communication Review, 40(3):26--33, 2010.
[52]
J. et al. Visiblev8: In-browser monitoring of javascript in the wild. In IMC, 2019.
[53]
Facebook. Facebook lite, 2020.
[54]
geeksforgeeks.org. Why javascript is a single-thread language that can be non-blocking? https://www.geeksforgeeks. org/why-javascript-is-a-single-thread-language-that-can-be-non-blocking/.
[55]
A. Goel, V. Ruamviboonsuk, R. Netravali, and H. V. Madhyastha. Rethinking client-side caching for the mobile web. In Proceedings of the 22nd International Workshop on Mobile Computing Systems and Applications, pages 112--118, 2021.
[56]
GSMA. The mobile economy. sub-saharan africa 2020, 2020.
[57]
R. Hat. Interpreting /proc/meminfo and free output for red hat enterprise linux.
[58]
K. Hempenius. Use lazysizes to lazy-load images.
[59]
T. Hoff. Latency is everywhere and it costs you sales - how to crush it. http://highscalability.com/latency-everywhereand-it-costs-you-sales-how-crush-it.
[60]
P. Hulce. Long task attribution in lighthouse. https://docs.google.com/presentation/d/1sslnZi2MYyKlNb6LoS_ vTlcvshkUR0IUekacq4mZMhs.
[61]
U. T. Inc. Uber lite, 2020.
[62]
A. O. Jason Miller. Rendering on the web.
[63]
L. Johnson. 47 percent of top retailers have a mobile site and app: study. https://www.retaildive.com/ex/
[64]
B. Jun, F. E. Bustamante, S. Y. Whang, and Z. S. Bischof. Amp up your mobile web experience: Characterizing the impact of google's accelerated mobile project. In The 25th Annual International Conference on Mobile Computing and Networking, pages 1--14, 2019.
[65]
M. Kearney. Memory terminology.
[66]
M. Kearney. Record heap snapshots.
[67]
M. Kearney and K. Basques. Analyze runtime performance, 2020.
[68]
kernel.org. Out of memory management. https://www.kernel.org/doc/gorman/html/understand/understand016.html.
[69]
R. Ko, J. Mickens, B. Loring, and R. Netravali. Oblique: Accelerating page loads using symbolic execution. In 18th {USENIX} Symposium on Networked Systems Design and Implementation ({NSDI} 21), pages 289--302, 2021.
[70]
M. Kosaka. Inside look at modern web browser (part 1). https://developer.chrome.com/blog/inside-browser-part1/.
[71]
M. Kosaka. Inside look at modern web browser (part 1). https://developer.chrome.com/blog/inside-browser-part1/#siteisolation.
[72]
J. Kupoluyi, M. Chaqfeh, M. Varvello, R. Coke, W. Hashmi, L. Subramanian, and Y. Zaki. Assessing the impact of javascript dead code elimination on mobile web performance. In ACM Internet Measurement Conference, IMC 2022, Nice, France, October 25--27, 2022, page (Just Accepted), 2022.
[73]
P. Lewis. Avoid large, complex layouts and layout thrashing. https://developers.google.com/web/fundamentals/ performance/rendering/avoid-large-complex-layouts-and-layout-thrashing.
[74]
S. Mardani, A. Goel, R. Ko, H. V. Madhyastha, and R. Netravali. Horcrux: Automatic javascript parallelism for resource-efficient web computation. In 15th {USENIX} Symposium on Operating Systems Design and Implementation ({OSDI} 21), 2021.
[75]
MDN. Cross-origin resource sharing (cors).
[76]
MDN. Manipulating documents. https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Client-side_web_APIs/ Manipulating_documents.
[77]
MDN. Object prototypes.
[78]
L. M. m. Mikhail Korobov, Marcin Lyko. adblockparser. https://github.com/scrapinghub/adblockparser.
[79]
L. Myers and M. J. Sirois. Spearman correlation coefficients, differences between. Encyclopedia of statistical sciences, 12, 2004.
[80]
U. Naseer and T. Benson. Configtron: Tackling network diversity with heterogeneous configurations. In 9th {USENIX} Workshop on Hot Topics in Cloud Computing (HotCloud 17), 2017.
[81]
J. Nejati and A. Balasubramanian. An in-depth study of mobile browser performance. In Proceedings of the 25th International Conference on World Wide Web, pages 1305--1315, 2016.
[82]
R. Netravali and J. Mickens. Prophecy: Accelerating mobile page loads using final-state write logs. In NSDI, 2018.
[83]
R. Netravali, A. Sivaraman, J. Mickens, and H. Balakrishnan. Watchtower: Fast, secure mobile page loads using remote dependency resolution.
[84]
X. Nie, Y. Zhao, G. Chen, K. Sui, Y. Chen, D. Pei, M. Zhang, and J. Zhang. Tcp wise: One initial congestion window is not enough. In Performance Computing and Communications Conference (IPCCC), 2017 IEEE 36th International, pages 1--8. IEEE, 2017.
[85]
Opera. Opera mini, 2020.
[86]
oreilly.com. Bing and google agree: Slow pages lose users. http://radar.oreilly.com/2009/06/bing-and-google-agreeslow-pag.html.
[87]
A. Osmani. Adaptive loading - improving web performance on low-end devices.
[88]
A. Osmani. The cost of javascript in 2019.
[89]
A. Osmani. Loading web pages fast on a dollar 20 feature phone.
[90]
perfetto.dev. Debugging memory usage on android. https://perfetto.dev/docs/case-studies/memory.
[91]
B. Pourghassemi, J. Bonecutter, Z. Li, and A. Chandramowlishwaran. adperf: Characterizing the performance of third-party ads. arXiv preprint arXiv:2002.05666, 2020.
[92]
M. Ryanbr and Khrin. Easylist / easyprivacy / fanboy lists. https://github.com/easylist/easylist/.
[93]
S. S. Web performance risks: spotlight on javascript vs. low-end mobiles, 2020.
[94]
M. Saarela and S. Jauhiainen. Comparison of feature importance measures as explanations for classification models. SN Applied Sciences, 3(2):1--12, 2021.
[95]
P. Saxena, D. Akhawe, S. Hanna, F. Mao, S. McCamant, and D. Song. A symbolic execution framework for javascript. In 2010 IEEE Symposium on Security and Privacy, pages 513--528. IEEE, 2010.
[96]
P. Sinha. Determine the optimal value of k in k-means clustering. https://www.geeksforgeeks.org/ml-determine-theoptimal-value-of-k-in-k-means-clustering/.
[97]
statcounter.com. Mobile browser market share worldwide. https://gs.statcounter.com/browser-market-share/mobile/ worldwi
[98]
V. K. Tom Wiltzius and the Chrome Graphics team. Gpu accelerated compositing in chrome. https://www.chromium. org/developers/design-documents/gpu-accelerated-compositing-in-chrome.
[99]
M. H. Toon Verwaest. Blazingly fast parsing, part 2: lazy parsing. https://v8.dev/blog/preparser.
[100]
V8. V8 javascript engine. https://v8.dev/.
[101]
X. Wang, A. Balasubramanian, A. Krishnamurthy, and D. Wetherall. Demystifying page load performance with wprof. In NSDI, 2013.
[102]
X. S. Wang, A. Krishnamurthy, and D. Wetherall. Speeding up web page loads with shandian. In 13th {USENIX} Symposium on Networked Systems Design and Implementation ({NSDI} 16), pages 109--122, 2016.
[103]
R. Waugh. There are now more mobile phones on the planet than there are people.
[104]
M. web docs. Call stack. https://developer.mozilla.org/en-US/docs/Glossary/Call_stack.
[105]
M. web docs. Sec-fetch-site. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-Fetch-Site.
[106]
M. web docs. Using shadow dom. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_ DOM.
[107]
M. web docs. Window.requestanimationframe(). https://developer.mozilla.org/en-US/docs/Web/API/window/ requestAnimationFrame.
[108]
webpack. Tree shaking. https://webpack.js.org/guides/tree-shaking/.
[109]
W. Xu, F. Zhang, and S. Zhu. Jstill: mostly static detection of obfuscated malicious javascript code. In Proceedings of the third ACM conference on Data and application security and privacy, pages 117--128, 2013.
[110]
yoyo.org. Blocking with ad server and tracking server hostnames. https://pgl.yoyo.org/adservers/.
[111]
T. Zimmermann, J. Rüth, B. Wolters, and O. Hohlfeld. How http/2 pushes the web: An empirical study of http/2 server push. In 2017 IFIP Networking Conference (IFIP Networking) and Workshops, pages 1--9. IEEE, 2017.
Index Terms
- JS Capsules: A Framework for Capturing Fine-grained JavaScript Memory Measurements for the Mobile Web
Recommendations
WebMedic: Disentangling the Memory-Functionality Tension for the Next Billion Mobile Web Users
HotMobile '21: Proceedings of the 22nd International Workshop on Mobile Computing Systems and ApplicationsUsers in developing regions still suffer from poor web performance, mainly due to their unique landscape of low-end devices. In this paper, we uncover a root cause of this suboptimal performance by cross-analyzing longitudinal resource (in particular, ...
JS Capsules: A Framework for Capturing Fine-grained JavaScript Memory Measurements for the Mobile Web.
SIGMETRICS '23: Abstract Proceedings of the 2023 ACM SIGMETRICS International Conference on Measurement and Modeling of Computer SystemsUnderstanding the resource consumption of the mobile web is an important topic that has garnered much attention in recent years. However, existing works mostly focus on the networking or computational aspects of the mobile web and largely ignore memory, ...
JS Capsules: A Framework for Capturing Fine-grained JavaScript Memory Measurements for the Mobile Web.
SIGMETRICS '23Understanding the resource consumption of the mobile web is an important topic that has garnered much attention in recent years. However, existing works mostly focus on the networking or computational aspects of the mobile web and largely ignore memory, ...
Comments
Please enable JavaScript to view thecomments powered by Disqus.Information & Contributors
Information
Published In
Copyright © 2023 ACM.
Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. Copyrights for components of this work owned by others than the author(s) must be honored. Abstracting with credit is permitted. To copy otherwise, or republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee. Request permissions from [email protected].
Publisher
Association for Computing Machinery
New York, NY, United States
Publication History
Published: 02 March 2023
Published in POMACS Volume 7, Issue 1
Check for updates
Author Tags
Qualifiers
- Research-article
Funding Sources
- NSF
Contributors
Other Metrics
Bibliometrics & Citations
Bibliometrics
Article Metrics
- 0Total Citations
- 166Total Downloads
- Downloads (Last 12 months)73
- Downloads (Last 6 weeks)0
Reflects downloads up to 16 Nov 2024
Other Metrics
Citations
View Options
Login options
Check if you have access through your login credentials or your institution to get full access on this article.
Sign in