DepTracker : tracking JavaScript dependencies on the web

Abstract

Identifying the performance bottlenecks of Web pages is often the first step in reducing page load times. Existing models of Web pages (dependency graphs) ignore the dynamic interactions of JavaScript objects along these critical paths. Current dependency graphs solely include the dependencies that arise from a Web object triggering a new HTTP request. This thesis presents DepTracker, a tool that captures dynamically generated dependencies between JavaScript objects on a Web page. These JavaScript dependencies give a more accurate picture of the network and computational resources contributing to the critical path. DepTracker works in conjunction with an HTTP record-and-replay framework, Mahimahi [17], to track reads and writes to the JavaScript global namespace during actual page loads. We classify dependencies into three categories: write-read, read-write, and write-write. Preserving each of these dependencies maintains the consistency of JavaScript execution on Web pages. For each dependency tracked, DepTracker provides developers with relevant line numbers in the source code, variable names, and values that are assigned and read. This information is particularly useful to Web developers seeking to speed up accesses to their websites by reordering individual objects. We use DepTracker, along with Mahimahi, to expose dependencies on 10 popular Web pages. We find that each Web page includes dependencies between JavaScript objects that are not captured by existing dependency graphs. For our corpus of test sites, we find that graphs that include JavaScript dependencies tracked by DepTracker include 32% and 73% more edges than default dependency graphs, at the median and 95th percentile, respectively.