Abstract
Modern web browsers allow asynchronous loading of JavaScript scripts in order to speed up parsing a web page. Instead of blocking until a script has been downloaded and evaluated, the async and defer tags in a script allow the browser to download the script in a background task, and either evaluate it as soon as it is available (for async) or evaluate it in load-order at the end of parsing (for defer). While asynchronous loading can significantly speed up the time-to-render, i.e., the time that passes until the first page elements are displayed on-screen, the specification for correct loading is complex and the programmer is responsible for understanding the circumstances under which a script can be loaded asynchronously in either mode without breaking page functionality. As a result, many complex web applications do not take full advantage of asynchronous loading. We present an automatic analysis of web pages which identifies which scripts may be safely deferred, that is, deferred without any observable behavior on the page. Our analysis defers a script if every other script that has a transitive read or modification dependency does not access the DOM. We approximate access and modification sets using a dynamic analysis. On a corpus of 462 professionally developed web pages from Fortune 500 companies, we show that on average, we can identify two or three scripts to defer (mean; median: 1). On 18 pages, we find at least 11 deferrable scripts. Deferring these scripts can have notable impact on time-to-render: in 49 pages, we could show that the median improvement in time-to-render was at least 100 ms, with improvements up to 890 ms.
Access provided by CONRICYT-eBooks. Download to read the full chapter text
Chapter PDF
Similar content being viewed by others
References
Adamsen, C.Q., Møller, A., Karim, R., Sridharan, M., Tip, F., Sen, K.: Repairing event race errors by controlling nondeterminism. In: ICSE 2017 (2017)
Aleen, F., Clark, N.: Commutativity analysis for software parallelization: letting program transformations see the big picture. In: ASPLOS 2009 (2009)
Bernstein, A.J.: Analysis of programs for parallel processing. IEEE Trans. Elec. Comp. 5, 757–763 (1966)
Bichhawat, A., Rajani, V., Garg, D., Hammer, C.: Information flow control in WebKit’s JavaScript bytecode. In: Abadi, M., Kremer, S. (eds.) POST 2014. LNCS, vol. 8414, pp. 159–178. Springer, Heidelberg (2014). https://doi.org/10.1007/978-3-642-54792-8_9
Bodin, M., Charguéraud, A., Filaretti, D., Gardner, P., Maffeis, S., Naudziuniene, D., Schmitt, A., Smith, G.: A trusted mechanised JavaScript specification. In: POPL 2014 (2014)
Bohannon, A., Pierce, B.C.: Featherweight firefox: formalizing the core of a web browser. In: WebApps 2010 (2010)
ECMA International: ECMAScript 2015 Language Specification (2015)
Facebook, Inc.: flow: A static type checker for JavaScript. https://flowtype.org
Fainberg, L., Ehrlich, O., Shai, G., Gadish, O., DOBO, A., Berger, O.: Systems and methods for acceleration and optimization of web pages access by changing the order of resource loading, February 3, 2011. https://www.google.com/patents/US20110029899, US Patent App. 12/848,559
Fortune 500 (2016). http://beta.fortune.com/fortune500/
Gao, Q., Dey, P., Ahammad, P.: Perceived performance of webpages in the wild: insights from large-scale crowdsourcing of above-the-fold QoE (2017). arXiv:1704.01220
Google, Inc.: Remove Render-Blocking JavaScript, April 2015. https://developers.google.com/speed/docs/insights/BlockingJS
Google, Inc.: Closure tools (2016). https://developers.google.com/closure/
Guha, A., Saftoiu, C., Krishnamurthi, S.: The essence of JavaScript. In: D’Hondt, T. (ed.) ECOOP 2010. LNCS, vol. 6183, pp. 126–150. Springer, Heidelberg (2010). https://doi.org/10.1007/978-3-642-14107-2_7. See also http://arxiv.org/abs/1510.00925
Jensen, S.H., Møller, A., Thiemann, P.: Type analysis for JavaScript. In: Palsberg, J., Su, Z. (eds.) SAS 2009. LNCS, vol. 5673, pp. 238–255. Springer, Heidelberg (2009). https://doi.org/10.1007/978-3-642-03237-0_17
Kashyap, V., Dewey, K., Kuefner, E.A., Wagner, J., Gibbons, K., Sarracino, J., Wiedermann, B., Hardekopf, B.: JSAI: a static analysis platform for JavaScript. In: FSE-22 (2014)
Kloos, J., Majumdar, R., McCabe, F.: Deferrability analysis for JavaScript. Tech. rep., MPI-SWS (2017). see http://www.mpi-sws.org/ jkloos/jsdefer-tr.pdf
Kuhn, B., Marifet, K., Wogulis, J.: Asynchronous loading of scripts in web pages, April 29, 2014. https://www.google.com/patents/US8713424
Lipton, E., Roy, B., Calvert, S., Gibbs, M., Kothari, N., Harder, M., Reed, D.: Dynamically loading scripts, March 30, 2010. https://www.google.com/patents/US7689665. US Patent 7,689,665
Livshits, V.B., Kiciman, E.: Doloto: code splitting for network-bound web 2.0 applications. In: FSE 2008 (2008)
Maffeis, S., Mitchell, J.C., Taly, A.: An operational semantics for JavaScript. In: Ramalingam, G. (ed.) APLAS 2008. LNCS, vol. 5356, pp. 307–325. Springer, Heidelberg (2008). https://doi.org/10.1007/978-3-540-89330-1_22
Petrov, B., Vechev, M.T., Sridharan, M., Dolby, J.: Race detection for web applications. In: PLDI 2012 (2012)
Raychev, V., Vechev, M.T., Sridharan, M.: Effective race detection for event-driven programs. In: OOPSLA 2013 (2013)
Rinard, M.C., Diniz, P.C.: Commutativity analysis: A new analysis framework for parallelizing compilers. In: PLDI 1996 (1996)
Sen, K., Kalasapur, S., Brutch, T.G., Gibbs, S.: Jalangi: a selective record-replay and dynamic analysis framework for Javascript. In: ESEC/FSE 2013 (2013)
Souders, S.: High-performance web sites. Commun. ACM 51(12), 36–41 (2008)
Viscomi, R., Davies, A., Duran, M.: Using WebPageTest: Web Performance Testing for Novices and Power Users, 1st edn. O’Reilly Media Inc. (2015)
WHATWG: HTML - Living Standard , September 2016. https://html.spec.whatwg.org/multipage/
Author information
Authors and Affiliations
Corresponding author
Editor information
Editors and Affiliations
Rights and permissions
Copyright information
© 2017 Springer International Publishing AG
About this paper
Cite this paper
Kloos, J., Majumdar, R., McCabe, F. (2017). Deferrability Analysis for JavaScript. In: Strichman, O., Tzoref-Brill, R. (eds) Hardware and Software: Verification and Testing. HVC 2017. Lecture Notes in Computer Science(), vol 10629. Springer, Cham. https://doi.org/10.1007/978-3-319-70389-3_3
Download citation
DOI: https://doi.org/10.1007/978-3-319-70389-3_3
Published:
Publisher Name: Springer, Cham
Print ISBN: 978-3-319-70388-6
Online ISBN: 978-3-319-70389-3
eBook Packages: Computer ScienceComputer Science (R0)