SlideShare a Scribd company logo
Messing with JS & the DOM to analyse the
                Network

     Philip Tellis / philip@bluesmoon.info


                 JSConf.eu / 2011-10-01




      JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   1
HTTP/TCP/IP

  Developed by three guys with one beard between them




              JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   2
JavaScript: The good parts

   Discovered by one guy with one beard on him




               JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   3
Let’s play with the nasty parts




             JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   4

Recommended for you

H2O - making the Web faster
H2O - making the Web fasterH2O - making the Web faster
H2O - making the Web faster

Introduction to the H2O HTTP/2 server, and discusses the improvements in first-paint time from previous generation protocols

web http
Reorganizing Website Architecture for HTTP/2 and Beyond
Reorganizing Website Architecture for HTTP/2 and BeyondReorganizing Website Architecture for HTTP/2 and Beyond
Reorganizing Website Architecture for HTTP/2 and Beyond

This document discusses reorganizing website architecture for HTTP/2 and beyond. It summarizes some issues with HTTP/2 including errors in prioritization where some browsers fail to specify resource priority properly. It also discusses the problem of TCP head-of-line blocking where pending data in TCP buffers can delay higher priority resources. The document proposes solutions to these issues such as prioritizing resources on the server-side and writing only what can be sent immediately to avoid buffer blocking. It also examines the mixed success of HTTP/2 push and argues the server should not push already cached resources.

http2webperfhttp
Promise of Push (HTTP/2 Web Performance)
Promise of Push (HTTP/2 Web Performance)Promise of Push (HTTP/2 Web Performance)
Promise of Push (HTTP/2 Web Performance)

This document discusses HTTP/2 server push and how it can be used to improve web performance. It begins with an overview of existing techniques for pushing content like polling, long polling, pushlets, and server-sent events. It then provides details on how HTTP/2 server push works, including the new PUSH_PROMISE frame that allows the server to push associated resources to the client. It examines the benefits of HTTP/2 push like reduced latency and improved caching as well as challenges around flexibility and complexity compared to other push techniques.

webperfhttp2push
1
                  Latency



JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   5
1 Blinkenlichten




             It takes about 23ms for light to get from Berlin to NY
                             (35ms through fibre)
   Image from http://cablemap.info

                          JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   6
1 HTTP




         JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   7
So to measure latency, we need to send 1 packet each way, and
                           time it




           JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   8

Recommended for you

Enabling Googley microservices with HTTP/2 and gRPC.
Enabling Googley microservices with HTTP/2 and gRPC.Enabling Googley microservices with HTTP/2 and gRPC.
Enabling Googley microservices with HTTP/2 and gRPC.

Slides from my #JavaDay2016 talk "Enabling Googley microservices with HTTP/2 and gRPC. A high performance, open source, HTTP/2-based RPC framework."

microserviceshttp2google
DVC: O'Reilly Artificial Intelligence Conference 2019 - New York
DVC: O'Reilly Artificial Intelligence Conference 2019 - New YorkDVC: O'Reilly Artificial Intelligence Conference 2019 - New York
DVC: O'Reilly Artificial Intelligence Conference 2019 - New York

This document discusses open source tools for machine learning workflows. It introduces MLFlow for tracking metrics and versions of models, Git-LFS for versioning large datasets, and DVC for versioning datasets, models, and connecting data and code. DVC allows for reproducible experiments, tracking basic metrics, and managing ML pipelines with commands like 'dvc repro' and 'dvc pipeline show'. The document argues that new tools are needed to address the specific needs of machine learning compared to traditional software development.

machine learningartificial intelligencedata versioning
HTTP/2 for Developers
HTTP/2 for DevelopersHTTP/2 for Developers
HTTP/2 for Developers

HTTP/2 for Developers: How It Changes Developer's Life? by Svetlin Nakov (SoftUni) - http://www.nakov.com jProfessionals Conference - Sofia, 22-Nov-2015 Key new features in HTTP/2 - Multiplexing: multiple streams over a single connection - Header compression: reuse headers from previous requests - Sever push: multiple parallel responses for a single request - Prioritization and flow control: resources have priorities

multiplexinghttphttp/2
1   Network latency in JavaScript




      var ts, rtt, img = new Image;
      img.onload=function() { rtt=(+new Date - ts) };
      ts = +new Date;
      img.src="/1x1.gif";




              JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   9
TCP handshake
                   2
JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   10
2 ACK-ACK-ACK




          JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   11
2 Connection: keep-alive




             JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   12

Recommended for you

Bulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless Spaces
Bulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless SpacesBulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless Spaces
Bulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless Spaces

The document proposes a Bulk-n-Pick method for one-to-many data transfer in dense wireless spaces. It begins by outlining problems with congested WiFi networks and inefficient HTTP requests. The solution involves pushing data to clients using circuits rather than individual packet pulls, which reduces overhead. The Bulk-n-Pick method bulk transfers data then allows clients to pick relevant portions, improving throughput. Modeling suggests it completes transfers much faster than traditional methods, especially with multiple parallel sessions. The approach reintroduces benefits of circuits for bulk data transfer over wireless networks.

educational applicationswireless interferencebulk versus sync
"Enabling Googley microservices with gRPC" at JEEConf 2017
"Enabling Googley microservices with gRPC" at JEEConf 2017"Enabling Googley microservices with gRPC" at JEEConf 2017
"Enabling Googley microservices with gRPC" at JEEConf 2017

This document summarizes a presentation given by Alex Borysov on enabling microservices with gRPC. gRPC is an open-source, high performance RPC framework that is based on HTTP/2. Borysov discusses what gRPC is, why it provides advantages over JSON/HTTP especially for high throughput services, how to define services with protocol buffers, implement gRPC servers and clients, and develop microservices using gRPC. He provides examples of unary, asynchronous and streaming calls between services.

grpcjeeconfnetty
Megalodon-Challenge-Solution
Megalodon-Challenge-SolutionMegalodon-Challenge-Solution
Megalodon-Challenge-Solution

The document provides an analysis of a "Megalodon Challenge" network issue where page requests were going unanswered at high loads. The analysis found: 1) Packet losses occurred regularly between the capture points and content server. 2) There were two types of packet loss - one consistent throughout and another only at high loads, causing failed connections. 3) At high loads in the fourth test, the content server terminated 11 connections and ignored 47, resulting in failed transactions from the web server.

2   Network latency & TCP handshake in JavaScript
    var t=[], n=2, tcp, rtt;
    var ld = function() {
        t.push(+new Date);
        if(t.length > n)
          done();
        else {
          var img = new Image;
          img.onload = ld;
          img.src="/1x1.gif?" + Math.random()
                               + ’=’ + new Date;
        }
    };
    var done = function() {
       rtt=t[2]-t[1];
       tcp=t[1]-t[0]-rtt;
    };
    ld();
              JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   13
The astute reader will notice that we’ve ignored DNS lookup
          time here... how would you measure it?




          JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   14
1 Notes


    • 1x1 gif is 35 bytes
    • including HTTP headers, is smaller than a TCP packet
    • Fires onload on all browsers
    • 0 byte image fires onerror
    • which is indistinguishable from network error




               JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   15
Network Throughput
                   3
JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   16

Recommended for you

Revisiting HTTP/2
Revisiting HTTP/2Revisiting HTTP/2
Revisiting HTTP/2

RFC 7540 was ratified over 2 years ago and, today, all major browsers, servers, and CDNs support the next generation of HTTP. Just over a year ago, at Velocity (https://www.slideshare.net/Fastly/http2-what-no-one-is-telling-you), we discussed the protocol, looked at some real world implications of its deployment and use, and what realistic expectations we should have from its use. Now that adoption is ramped up and the protocol is being regularly used on the Internet, it's a good time to revisit the protocol and its deployment. Has it evolved? Have we learned anything? Are all the features providing the benefits we were expecting? What's next? In this session, we'll review protocol basics and try to answer some of these questions based on real-world use of it. We'll dig into the core features like interaction with TCP, server push, priorities and dependencies, and HPACK. We'll look at these features through the lens of experience and see if good practice patterns have emerged. We'll also review available tools and discuss what protocol enhancements are in the near and not-so-near horizon.

cdnfuture of cdnscloud
Developing the fastest HTTP/2 server
Developing the fastest HTTP/2 serverDeveloping the fastest HTTP/2 server
Developing the fastest HTTP/2 server

Presentation material for TokyoRubyKaigi11. Describes techniques used by H2O, including: techniques to optimize TCP for responsiveness, server-push and cache digests.

programmingnetworkhttp2
H2O - the optimized HTTP server
H2O - the optimized HTTP serverH2O - the optimized HTTP server
H2O - the optimized HTTP server

Introduction of H2O, an optimized HTTP server / library implementation with support for HTTP/1, HTTP/2, websocket

web programming software optimization
3 Measuring Network Throughput



                                    size
                               download_time




            JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   17
3   Network Throughput in JavaScript




    // Assume global object
    // image={ url: ..., size: ... }
    var ts, rtt, bw, img = new Image;
    img.onload=function() {
       rtt=(+new Date - ts);
       bw = image.size*1000/rtt;     // rtt is in ms
    };
    ts = +new Date;
    img.src=image.url;




              JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   18
3 Measuring Network Throughput



   If it were that simple, I wouldn’t be doing a talk at @jsconfeu




               JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   19
3 TCP Slow Start




            JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   20

Recommended for you

Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"

The document is a presentation about abusing JavaScript to measure web performance. It discusses using JavaScript to measure network latency, TCP handshake time, network throughput, DNS lookup time, IPv6 support and latency, and other performance metrics. It provides code examples for measuring each metric in JavaScript and notes challenges to consider. The presentation encourages the use of the open source Boomerang library for accurate performance measurement.

webperfboomerangnetwork
Extending the life of your device (firmware updates over LoRa) - LoRa AMM
Extending the life of your device (firmware updates over LoRa) - LoRa AMMExtending the life of your device (firmware updates over LoRa) - LoRa AMM
Extending the life of your device (firmware updates over LoRa) - LoRa AMM

This document discusses extending the lifespan of IoT devices through firmware updates and outlines some challenges and solutions. It proposes a standardized approach using multicast transmissions, forward error correction, and an update server to efficiently deliver firmware over constrained low-power wide area networks. An open-source reference implementation is available to demonstrate feasibility on current hardware within radio regulations.

loralorawanlpwan
An Optics Life
An Optics LifeAn Optics Life
An Optics Life

The goal of the project “An optic’s life” is, to predict the time when an optical transceiver will reach its real end-of-life-time based on the actual setup in the datacenter / colocation.

xfptransceiversfp
3 Measuring Network Throughput



   So to make the best use of bandwidth, we need resources that fit
                         in a TCP window




               JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   21
3 There is no single size that will tax all available networks




   http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/




                         JSConf.eu / 2011-10-01       Messing with JS & the DOM to analyse the Network   22
3   Network Throughput in JavaScript – Take 2

    // image object is now an array of multiple images
    var i=0;
    var ld = function() {
       if(i>0)
          image[i-1].end = +new Date;
       if(i >= image.length)
          done();
       else {
          var img = new Image;
          img.onload = ld;
          image[i].start = +new Date;
          img.src=image[i].url;
       }
       i++;
    };

              JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   23
3 Measuring Network Throughput



        Slow network connection, meet really huge image




             JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   24

Recommended for you

Tech 2 Tech: Network performance
Tech 2 Tech: Network performanceTech 2 Tech: Network performance
Tech 2 Tech: Network performance

This document provides an overview and agenda for a Janet Tech 2 Tech session on network performance. It discusses challenges in achieving optimal network performance, tools for troubleshooting issues like congestion and packet loss, best practices like implementing a Science DMZ, and Janet-hosted test tools including perfSONAR, iperf3, and a data transfer node for file transfers. The session aims to help members make the most of their Janet network connection and minimize data shipped by hard disk.

 
by Jisc
tech2techjanet network#t2t
Mobile web performance - MoDev East
Mobile web performance - MoDev EastMobile web performance - MoDev East
Mobile web performance - MoDev East

This document summarizes a presentation on high performance mobile web. The presentation covers: - Delivering fast mobile experiences by making fewer HTTP requests, using CDNs, browser prefetching, and other techniques. - Measuring web performance using Navigation Timing, Resource Timing, custom timing marks, and tools like WebPagetest and Google Analytics. - Typical mobile network performance statistics like average latency, download speeds, and how these numbers impact page load times.

mobile webwebperfweb performance
A Method for Dynamic Packing of Data Blocks for Over-the-Network Indexing
A Method for Dynamic Packing of Data Blocks for Over-the-Network IndexingA Method for Dynamic Packing of Data Blocks for Over-the-Network Indexing
A Method for Dynamic Packing of Data Blocks for Over-the-Network Indexing

The problem of over-the-network indexing has been raised in recent literature. Indexing is traditionally done on a local filesystem. When processing/access and storage are separated by network, traditional methods perform poorly, even if rewritten for over-the-network logic. The new engine called Stringex was newly proposed with over-the-network efficiency in mind. However, although blocksize is optimized by the method, it is fixed for the entire index. This paper looks into a way to allow for dynamic blocksize. The problem is formulated as dynamic packing of unit blocks for optimal over-the-network access. The new method also takes into account the issue of atomicity of operations in multiuser environments, where each of the multiple users can experience drastically different performance on end-to-end network paths.

resource efficiencyresource-efficient indexingresource optimization
3   Network Throughput in JavaScript – Take 3




       var img = new Image;
       img.onload = ld;
       image[i].start = +new Date;
       image[i].timer =
             setTimeout(function() {
                            image[i].expired=true
                        },
                        image[i].timeout);
       img.src=image[i].url;




              JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   25
3   Network Throughput in JavaScript – Take 3




    if(i>0) {
       image[i-1].end = +new Date;
       clearTimeout(image[i-1].timer);
    }




              JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   26
3   Network Throughput in JavaScript – Take 3




    if(i >= image.length
          || (i > 0 && image[i-1].expired)) {
       done();
    }




              JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   27
3 Measuring Network Throughput



                             Are we done yet?




            JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   28

Recommended for you

Glomosim scenarios
Glomosim scenariosGlomosim scenarios
Glomosim scenarios

This document provides instructions for creating scenarios in the GloMoSim network simulator. It discusses the key input and output files used, including the scenario configuration file, node placement file, and application configuration file. It also describes how to design both wired and wireless networks as scenarios in GloMoSim, including defining the network topology and components, configuring applications and traffic, and analyzing output statistics files.

DevCon 5 (July 2013) - WebSockets
DevCon 5 (July 2013) - WebSocketsDevCon 5 (July 2013) - WebSockets
DevCon 5 (July 2013) - WebSockets

WebSockets and browser-based real-time communications allow for two-way communication between client-side code and remote servers. This enables web applications to maintain bidirectional communications using a simple API. While other options like AJAX exist, WebSockets provide more efficient bidirectional communications by keeping the connection open. The technology has evolved from static web pages to enable rich applications through standards like WebSockets and WebRTC.

kamailiodevcon5sip
The Network Ip Address Scheme
The Network Ip Address SchemeThe Network Ip Address Scheme
The Network Ip Address Scheme

Here is a draft proposal for migrating the Windows XP machines in the new LSDG research group to Linux: Proposal to Migrate LSDG Desktops from Windows XP to Linux Introduction The new LSDG research group at Linx LLC will be using desktop operating systems. Currently, some machines in the larger Linx LLC organization run Windows XP and Windows 7. As LSDG will be a separate research group, we need to consider the best desktop OS choice for their needs and the longevity of the machines. Analysis Windows XP is no longer supported by Microsoft, so continuing to use it poses major security risks. Without updates and patches, XP machines are vulnerable to exploits. Support for Windows 7 will also end

thenetworkip
3 Measuring Network Throughput



                             Are we done yet?
                                 sure...




            JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   28
3 Measuring Network Throughput



    Except network throughput is different every time you test it




               JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   29
Statistics to the Rescue




flickr/sophistechate/4264466015/
                                  JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   30
3 Measuring Network Throughput



          The code for that is NOT gonna fit on a slide




             JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   31

Recommended for you

TLD Anycast DNS servers to ISPs
TLD Anycast DNS servers to ISPsTLD Anycast DNS servers to ISPs
TLD Anycast DNS servers to ISPs

This document summarizes a joint research project between JPRS and several Japanese ISPs to enhance DNS resiliency. The goals were to install DNS servers in multiple regions of Japan to distribute query load and ensure continuity of DNS services during natural disasters. ISPs configured their networks to direct queries to local DNS nodes hosted by JPRS within their networks. Evaluation found queries shifted towards local nodes, response times improved, and Internet services remained available within ISP networks even when other DNS sites were unreachable, demonstrating increased DNS resiliency.

apricot2017tld
The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...
The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...
The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...

Jose Saldana, Julian Fernandez-Navajas, Jose Ruiz-Mas, Eduardo Viruete Navarro, Luis Casadesus, "The Effect of Router Buffer Size on Subjective Gaming Quality Estimators based on Delay and Jitter," in Proc. CCNC 2012- 4th IEEE International Workshop on Digital Entertainment, Networked Virtual Environments, and Creative Technology (DENVECT), pp. 502-506, Las Vegas. Jan 2012. ISBN 9781457720697.

Addressing Network Operator Challenges in YANG push Data Mesh Integration
Addressing Network Operator Challenges in YANG push Data Mesh IntegrationAddressing Network Operator Challenges in YANG push Data Mesh Integration
Addressing Network Operator Challenges in YANG push Data Mesh Integration

This document discusses several challenges with integrating YANG push data into a data mesh architecture, and proposes solutions to address those challenges. Specifically, it discusses: 1. The need to unify observations from network events that occur at different times into single alerts. 2. The lack of standardization around aspects of YANG push like transport protocols, encodings, subscriptions, metadata, and versioning. 3. A proposal to integrate YANG push into a data mesh to produce standardized metrics with timestamps, and control semantic changes end-to-end.

ietf116
4     DNS



JSConf.eu / 2011-10-01    Messing with JS & the DOM to analyse the Network   32
4 Measuring DNS



           time_with_dns − time_without_dns




           JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   33
4   Measuring DNS in JavaScript
    var t=[], dns, ip, hosts=[’http://hostname.com/’,
                               ’http://ip.ad.dr.ess/’];
    var ld = function() {
        t.push(+new Date);
        if(t.length > hosts.length)
          done();
        else {
          var img = new Image;
          img.onload = ld;
          img.src=hosts[t.length-1] + "/1x1.gif";
        }
    };
    var done = function() {
       ip=t[2]-t[1];
       dns=t[1]-t[0]-ip;
    };
    ld();
              JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   34
4 Measuring DNS



              What if DNS were already cached?




           JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   35

Recommended for you

Edge optimized architecture for fabric defect detection in real-time
Edge optimized architecture for fabric defect detection in real-timeEdge optimized architecture for fabric defect detection in real-time
Edge optimized architecture for fabric defect detection in real-time

In textile industry, fabric defect relies on human inspection traditionally, which is inaccurate, inconsistent, inefficient and expensive. There were automatic systems developed on the defect detection by identifying the faults in fabric surface using the image and video processing techniques. However, the existing solution has insufficiencies in defect data sharing, backhaul interconnect, maintenance and etc. By evolving to an edge-optimized architecture, we can help textile industry improve fabric quality, reduce operation cost and increase production efficiency. In this session, I’ll share: What’s edge computing and why it’s important to intelligence manufacturing What’s the characteristics, strengths and weaknesses of traditional fabric defect detection method Why textile industry can benefit from edge computing infrastructure How to design and implement an edge-enabled application for fabric defect detection in real-time Insights, synergy and future research directions

edge computingopenstackfabric defect detection
[NDC 2017] Icarus: Utilize beta service on NA and EU
[NDC 2017] Icarus: Utilize beta service on NA and EU[NDC 2017] Icarus: Utilize beta service on NA and EU
[NDC 2017] Icarus: Utilize beta service on NA and EU

The document discusses plans to set up game servers for an action RPG game for beta testing in North America and Europe. It describes analyzing latency data from previous closed betas to select optimal server locations that can provide latency below 200ms for over 75% of players. The analysis identified US East and Frankfurt as locations that met the criteria. The open beta will launch with servers in Las Vegas and Frankfurt based on the latency analyses.

engineeringusabeta
Osol Netadmin Solaris Administrator
Osol Netadmin Solaris AdministratorOsol Netadmin Solaris Administrator
Osol Netadmin Solaris Administrator

The document discusses four OpenSolaris projects - Network Auto-Magic, Clearview, Brussels, and Crossbow - that aim to simplify and enhance network administration on the Solaris platform. Network Auto-Magic seeks to automate basic network configuration. Clearview aims to unify and enhance features across different network interfaces. Brussels looks to simplify network interface configuration and tuning. Crossbow integrates network interface virtualization and resource management.

4 Measuring DNS



              What if DNS were already cached?
                Use a wildcard DNS entry




           JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   35
4 Measuring DNS



         What if you map DNS based on geo location?




            JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   36
4 Measuring DNS



         What if you map DNS based on geo location?
           A little more complicated, but doable




            JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   36
4 Measuring DNS



           Full code in boomerang’s DNS plugin




           JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   37

Recommended for you

Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster

How to tackle real-world web platform performance problems in modern websites and apps? This session starts with a basic understanding of the web platform and then explores to a set of problem/solution pairs built from industry-standard performance guidance. In the talk, we will demonstrate performance tips and tricks that will help you improve the performance of your apps and sites today. We will discuss the following respond to network requests, speed and responsiveness, optimizing media usage, and writing fast JavaScript. These performance tips and tricks apply equally to web sites that run on standards based web browsers, as well as to modern apps.

performance tipsweb performancehtml5
Envoy @ Lyft: Developer Productivity
Envoy @ Lyft: Developer ProductivityEnvoy @ Lyft: Developer Productivity
Envoy @ Lyft: Developer Productivity

How can infrastructure engineers empower their product developers with easy-to-use systems and processes that abstract the complexity of core infrastructure? This talk focuses on Envoy configuration management, and how the networking team at Lyft builds on top of Envoy to allow Lyft engineers to focus on business logic.

envoyservice meshcloud native
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ

ESnet has led the way in helping national facilities—and many other institutions in the research community—configure Science DMZs and troubleshoot network issues to maximize data transfer performance. In this talk we will present a summary of approaches and tips for getting the most out of your network infrastructure using Globus Connect Server.

esnetscience dmzglobus
5     IPv6



JSConf.eu / 2011-10-01    Messing with JS & the DOM to analyse the Network   38
5 Measuring IPv6 support and latency


    1   Try to load image from IPv6 host
          • If timeout or error, then no IPv6 support
          • If successful, then calculate latency and proceed
    2   Try to load image from hostname that resolves only to IPv6
        host
          • If timeout or error, then DNS server doesn’t support IPv6
          • If successful, calculate latency




                JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   39
5 Measuring IPv6 support and latency



             Full code in boomerang’s IPv6 plugin




             JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   40
6
Private Network Scanning



  JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   41

Recommended for you

opnet lab report
opnet lab reportopnet lab report
opnet lab report

The document describes two experiments conducted using the OPNET simulation tool. Experiment 1 involves simulating a TCP network using different congestion control mechanisms and analyzing OSPF routing. Experiment 2 compares the bus and star network topologies by creating networks with each in OPNET and collecting statistics on traffic and delay. The objectives are to get familiar with OPNET, study TCP algorithms, simulate OSPF routing, and understand the pros and cons of different topologies. Tasks for each experiment are described in detail, including how to set up the simulations, configure nodes and links, select statistics, and run the simulations.

Web Machine Learning (ML) API POC march update
Web Machine Learning (ML) API POC march updateWeb Machine Learning (ML) API POC march update
Web Machine Learning (ML) API POC march update

The document proposes a new WebML API to optimize machine learning workloads on the web by integrating them with OS-level ML APIs and hardware accelerators. It provides an overview of existing web ML frameworks and limitations. The WebML API would standardize ML inference on the web and allow web apps to fully utilize CPU, GPU and dedicated ML accelerators for near-native performance. The document includes a prototype WebML API implementation and initial performance results showing significant speedups compared to existing web APIs.

webmachine learning
Improving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other HacksImproving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other Hacks

This document discusses techniques for improving the performance of D3 visualizations. It begins with an overview of D3 and some basic tutorials. It then describes issues with performance for force-directed layouts and edge-bundled layouts as the number of nodes and links increases. Solutions proposed include using canvas instead of SVG for rendering, reducing unnecessary calculations, and caching repeated drawing states. The document concludes that the number of DOM nodes has major performance implications and techniques like canvas can help when exact mouse interactions are not required.

6 Private Network Scanning



      JavaScript in the browser runs with the User’s Security
                            Privileges




              JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   42
6 Private Network Scanning



         This means you can see the user’s private LAN




             JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   43
6 Private Network Scanning – Gateways


    1   Look at common gateway IPs: 192.168.1.1, 10.0.0.1, etc.
    2   When found, look for common image URLs assuming
        various routers/DSL modems
    3   When found, try to log in with default username/password
        if you’re lucky, the user is already logged in




                JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   44
6 Private Network Scanning – Services


    1   Scan host range on private network for common ports (80,
        22, 3306, etc.)
    2   Measure how long it takes to onerror
          • Short timeout: connection refused
          • Long timeout: something listening, but it isn’t HTTP
          • Longer timeout: probably HTTP, but not an image
    3   Try an iframe instead of an image




                JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   45

Recommended for you

Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person

There’s no such thing as fast enough. You can always make your website faster. This talk will show you how. The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get tired and leave.In this talk we’ll start with the basics and get progressively insane. We’ll go over several frontend performance best practices, a few anti-patterns, the reasoning behind the rules, and how they’ve changed over the years. We’ll also look at some great tools to help you.

webperfjavascripthtml
Frontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou FurieuxFrontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou Furieux

Frontend Performance Beginner to Expert to Crazy Person The very first requirement of a great user experience is actually getting the bytes of that experience to the user before they they get tired and leave. In this talk we'll start with the basics and get progressively insane. We'll go over several frontend performance best practices, a few anti-patterns, the reasoning behind the rules, and how they've changed over the years. We'll also look at some great tools to help you. La performance front-end de débutant, à expert, à fou furieux ! La toute première condition nécessaire à une bonne expérience utilisateur est de pouvoir obtenir les octets de cette expérience avant que l'utilisateur ne se lasse et parte. Nous débuterons cette conférence avec les bases pour progressivement devenir démentiel. Nous aborderons plusieurs des meilleurs pratiques de la performance front-end, quelques anti-patterns à éviter, le raisonnement derrière les règles, et comment ces dernières ont changé au fil des ans. Nous regarderons d'un peu plus près quelques très bon outils qui peuvent vous aider.

paris-webjavascripttcp
Frontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy PersonFrontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy Person

The document outlines steps for front-end performance optimization, beginning with basic techniques like caching, compression and domain sharing and progressing to more advanced strategies involving preloading, parallel downloads, and predicting response times. It was presented by Philip Tellis at WebPerfDays New York and includes references for further reading on topics like CDNs, TCP tuning, and the page visibility API.

webperfperformancehttp
–
                   .done()



JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   46
Code/References




    • http://github.com/bluesmoon/boomerang
    • http://samy.pl/mapxss/




             JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   47
• Philip Tellis
• LogNormal.com
• philip@bluesmoon.info
• @bluesmoon
• geek paranoid speedfreak
• http://bluesmoon.info/




            JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   48
Thank you




JSConf.eu / 2011-10-01   Messing with JS & the DOM to analyse the Network   49

Recommended for you

Beyond Page Level Metrics
Beyond Page Level MetricsBeyond Page Level Metrics
Beyond Page Level Metrics

RUM isn’t just for page level metrics anymore. Thanks to modern browser updates and new techniques we can collect real user data at the object level, finding slow page components and keeping third parties honest. In this talk we will show you how to use Resource Timing, User Timing, and other browser tricks to time the most important components in your page. We’ll also share recipes for several of the web’s most popular third parties. This will give you a head start on measuring object level performance on your own site.

rumwebperfnavtiming
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...

The document outlines steps web performance experts take to optimize frontend performance, moving from beginner to advanced techniques. It starts with basic optimizations like enabling gzip, caching, and image optimization. It then discusses more advanced strategies like using a CDN, splitting JavaScript, auditing CSS, and parallelizing downloads. Finally it discusses very advanced techniques like pre-loading assets, detecting broken Accept-Encoding headers, and understanding how to optimize for HTTP/2. The document provides references for further information on each topic.

javascriptwebperfperformance
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person

The document discusses front-end web performance optimization from beginner to expert levels. At the beginner level, it recommends starting with basic optimizations like measuring performance, enabling gzip compression, optimizing images, and caching. At the expert level, it discusses more advanced techniques like using a CDN, splitting JavaScript files, auditing CSS, and flushing content early. Finally, it outlines "crazy" optimizations like pre-loading assets, post-load fetching, and understanding round-trip network latency.

httpfrontendwebperf

More Related Content

What's hot

Boosting command line experience with python and awk
Boosting command line experience with python and awkBoosting command line experience with python and awk
Boosting command line experience with python and awk
Kirill Pavlov
 
HTTP/2で 速くなるとき ならないとき
HTTP/2で 速くなるとき ならないときHTTP/2で 速くなるとき ならないとき
HTTP/2で 速くなるとき ならないとき
Kazuho Oku
 
How happy they became with H2O/mruby and the future of HTTP
How happy they became with H2O/mruby and the future of HTTPHow happy they became with H2O/mruby and the future of HTTP
How happy they became with H2O/mruby and the future of HTTP
Ichito Nagata
 
H2O - making the Web faster
H2O - making the Web fasterH2O - making the Web faster
H2O - making the Web faster
Kazuho Oku
 
Reorganizing Website Architecture for HTTP/2 and Beyond
Reorganizing Website Architecture for HTTP/2 and BeyondReorganizing Website Architecture for HTTP/2 and Beyond
Reorganizing Website Architecture for HTTP/2 and Beyond
Kazuho Oku
 
Promise of Push (HTTP/2 Web Performance)
Promise of Push (HTTP/2 Web Performance)Promise of Push (HTTP/2 Web Performance)
Promise of Push (HTTP/2 Web Performance)
Colin Bendell
 
Enabling Googley microservices with HTTP/2 and gRPC.
Enabling Googley microservices with HTTP/2 and gRPC.Enabling Googley microservices with HTTP/2 and gRPC.
Enabling Googley microservices with HTTP/2 and gRPC.
Alex Borysov
 
DVC: O'Reilly Artificial Intelligence Conference 2019 - New York
DVC: O'Reilly Artificial Intelligence Conference 2019 - New YorkDVC: O'Reilly Artificial Intelligence Conference 2019 - New York
DVC: O'Reilly Artificial Intelligence Conference 2019 - New York
Dmitry Petrov
 
HTTP/2 for Developers
HTTP/2 for DevelopersHTTP/2 for Developers
HTTP/2 for Developers
Svetlin Nakov
 
Bulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless Spaces
Bulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless SpacesBulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless Spaces
Bulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless Spaces
Tokyo University of Science
 
"Enabling Googley microservices with gRPC" at JEEConf 2017
"Enabling Googley microservices with gRPC" at JEEConf 2017"Enabling Googley microservices with gRPC" at JEEConf 2017
"Enabling Googley microservices with gRPC" at JEEConf 2017
Alex Borysov
 
Megalodon-Challenge-Solution
Megalodon-Challenge-SolutionMegalodon-Challenge-Solution
Megalodon-Challenge-Solution
Philip Storey
 
Revisiting HTTP/2
Revisiting HTTP/2Revisiting HTTP/2
Revisiting HTTP/2
Fastly
 
Developing the fastest HTTP/2 server
Developing the fastest HTTP/2 serverDeveloping the fastest HTTP/2 server
Developing the fastest HTTP/2 server
Kazuho Oku
 
H2O - the optimized HTTP server
H2O - the optimized HTTP serverH2O - the optimized HTTP server
H2O - the optimized HTTP server
Kazuho Oku
 

What's hot (15)

Boosting command line experience with python and awk
Boosting command line experience with python and awkBoosting command line experience with python and awk
Boosting command line experience with python and awk
 
HTTP/2で 速くなるとき ならないとき
HTTP/2で 速くなるとき ならないときHTTP/2で 速くなるとき ならないとき
HTTP/2で 速くなるとき ならないとき
 
How happy they became with H2O/mruby and the future of HTTP
How happy they became with H2O/mruby and the future of HTTPHow happy they became with H2O/mruby and the future of HTTP
How happy they became with H2O/mruby and the future of HTTP
 
H2O - making the Web faster
H2O - making the Web fasterH2O - making the Web faster
H2O - making the Web faster
 
Reorganizing Website Architecture for HTTP/2 and Beyond
Reorganizing Website Architecture for HTTP/2 and BeyondReorganizing Website Architecture for HTTP/2 and Beyond
Reorganizing Website Architecture for HTTP/2 and Beyond
 
Promise of Push (HTTP/2 Web Performance)
Promise of Push (HTTP/2 Web Performance)Promise of Push (HTTP/2 Web Performance)
Promise of Push (HTTP/2 Web Performance)
 
Enabling Googley microservices with HTTP/2 and gRPC.
Enabling Googley microservices with HTTP/2 and gRPC.Enabling Googley microservices with HTTP/2 and gRPC.
Enabling Googley microservices with HTTP/2 and gRPC.
 
DVC: O'Reilly Artificial Intelligence Conference 2019 - New York
DVC: O'Reilly Artificial Intelligence Conference 2019 - New YorkDVC: O'Reilly Artificial Intelligence Conference 2019 - New York
DVC: O'Reilly Artificial Intelligence Conference 2019 - New York
 
HTTP/2 for Developers
HTTP/2 for DevelopersHTTP/2 for Developers
HTTP/2 for Developers
 
Bulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless Spaces
Bulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless SpacesBulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless Spaces
Bulk-n-Pick Method for One-to-Many Data Transfer in Dense Wireless Spaces
 
"Enabling Googley microservices with gRPC" at JEEConf 2017
"Enabling Googley microservices with gRPC" at JEEConf 2017"Enabling Googley microservices with gRPC" at JEEConf 2017
"Enabling Googley microservices with gRPC" at JEEConf 2017
 
Megalodon-Challenge-Solution
Megalodon-Challenge-SolutionMegalodon-Challenge-Solution
Megalodon-Challenge-Solution
 
Revisiting HTTP/2
Revisiting HTTP/2Revisiting HTTP/2
Revisiting HTTP/2
 
Developing the fastest HTTP/2 server
Developing the fastest HTTP/2 serverDeveloping the fastest HTTP/2 server
Developing the fastest HTTP/2 server
 
H2O - the optimized HTTP server
H2O - the optimized HTTP serverH2O - the optimized HTTP server
H2O - the optimized HTTP server
 

Similar to Messing with JavaScript and the DOM to measure network characteristics

Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Philip Tellis
 
Extending the life of your device (firmware updates over LoRa) - LoRa AMM
Extending the life of your device (firmware updates over LoRa) - LoRa AMMExtending the life of your device (firmware updates over LoRa) - LoRa AMM
Extending the life of your device (firmware updates over LoRa) - LoRa AMM
Jan Jongboom
 
An Optics Life
An Optics LifeAn Optics Life
An Optics Life
Thomas Weible
 
Tech 2 Tech: Network performance
Tech 2 Tech: Network performanceTech 2 Tech: Network performance
Tech 2 Tech: Network performance
Jisc
 
Mobile web performance - MoDev East
Mobile web performance - MoDev EastMobile web performance - MoDev East
Mobile web performance - MoDev East
Patrick Meenan
 
A Method for Dynamic Packing of Data Blocks for Over-the-Network Indexing
A Method for Dynamic Packing of Data Blocks for Over-the-Network IndexingA Method for Dynamic Packing of Data Blocks for Over-the-Network Indexing
A Method for Dynamic Packing of Data Blocks for Over-the-Network Indexing
Tokyo University of Science
 
Glomosim scenarios
Glomosim scenariosGlomosim scenarios
Glomosim scenarios
Kathirvel Ayyaswamy
 
DevCon 5 (July 2013) - WebSockets
DevCon 5 (July 2013) - WebSocketsDevCon 5 (July 2013) - WebSockets
DevCon 5 (July 2013) - WebSockets
Crocodile WebRTC SDK and Cloud Signalling Network
 
The Network Ip Address Scheme
The Network Ip Address SchemeThe Network Ip Address Scheme
The Network Ip Address Scheme
Erin Rivera
 
TLD Anycast DNS servers to ISPs
TLD Anycast DNS servers to ISPsTLD Anycast DNS servers to ISPs
TLD Anycast DNS servers to ISPs
APNIC
 
The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...
The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...
The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...
Jose Saldana
 
Addressing Network Operator Challenges in YANG push Data Mesh Integration
Addressing Network Operator Challenges in YANG push Data Mesh IntegrationAddressing Network Operator Challenges in YANG push Data Mesh Integration
Addressing Network Operator Challenges in YANG push Data Mesh Integration
ThomasGraf42
 
Edge optimized architecture for fabric defect detection in real-time
Edge optimized architecture for fabric defect detection in real-timeEdge optimized architecture for fabric defect detection in real-time
Edge optimized architecture for fabric defect detection in real-time
Shuquan Huang
 
[NDC 2017] Icarus: Utilize beta service on NA and EU
[NDC 2017] Icarus: Utilize beta service on NA and EU[NDC 2017] Icarus: Utilize beta service on NA and EU
[NDC 2017] Icarus: Utilize beta service on NA and EU
David Kim
 
Osol Netadmin Solaris Administrator
Osol Netadmin Solaris AdministratorOsol Netadmin Solaris Administrator
Osol Netadmin Solaris Administrator
Opeyemi Olakitan
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Doris Chen
 
Envoy @ Lyft: Developer Productivity
Envoy @ Lyft: Developer ProductivityEnvoy @ Lyft: Developer Productivity
Envoy @ Lyft: Developer Productivity
Jose Ulises Nino Rivera
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
Globus
 
opnet lab report
opnet lab reportopnet lab report
opnet lab report
Sadia Shachi
 
Web Machine Learning (ML) API POC march update
Web Machine Learning (ML) API POC march updateWeb Machine Learning (ML) API POC march update
Web Machine Learning (ML) API POC march update
huningxin
 

Similar to Messing with JavaScript and the DOM to measure network characteristics (20)

Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
Abusing JavaScript to measure Web Performance, or, "how does boomerang work?"
 
Extending the life of your device (firmware updates over LoRa) - LoRa AMM
Extending the life of your device (firmware updates over LoRa) - LoRa AMMExtending the life of your device (firmware updates over LoRa) - LoRa AMM
Extending the life of your device (firmware updates over LoRa) - LoRa AMM
 
An Optics Life
An Optics LifeAn Optics Life
An Optics Life
 
Tech 2 Tech: Network performance
Tech 2 Tech: Network performanceTech 2 Tech: Network performance
Tech 2 Tech: Network performance
 
Mobile web performance - MoDev East
Mobile web performance - MoDev EastMobile web performance - MoDev East
Mobile web performance - MoDev East
 
A Method for Dynamic Packing of Data Blocks for Over-the-Network Indexing
A Method for Dynamic Packing of Data Blocks for Over-the-Network IndexingA Method for Dynamic Packing of Data Blocks for Over-the-Network Indexing
A Method for Dynamic Packing of Data Blocks for Over-the-Network Indexing
 
Glomosim scenarios
Glomosim scenariosGlomosim scenarios
Glomosim scenarios
 
DevCon 5 (July 2013) - WebSockets
DevCon 5 (July 2013) - WebSocketsDevCon 5 (July 2013) - WebSockets
DevCon 5 (July 2013) - WebSockets
 
The Network Ip Address Scheme
The Network Ip Address SchemeThe Network Ip Address Scheme
The Network Ip Address Scheme
 
TLD Anycast DNS servers to ISPs
TLD Anycast DNS servers to ISPsTLD Anycast DNS servers to ISPs
TLD Anycast DNS servers to ISPs
 
The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...
The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...
The Effect of Router Buffer Size on Subjective Gaming Quality Estimators base...
 
Addressing Network Operator Challenges in YANG push Data Mesh Integration
Addressing Network Operator Challenges in YANG push Data Mesh IntegrationAddressing Network Operator Challenges in YANG push Data Mesh Integration
Addressing Network Operator Challenges in YANG push Data Mesh Integration
 
Edge optimized architecture for fabric defect detection in real-time
Edge optimized architecture for fabric defect detection in real-timeEdge optimized architecture for fabric defect detection in real-time
Edge optimized architecture for fabric defect detection in real-time
 
[NDC 2017] Icarus: Utilize beta service on NA and EU
[NDC 2017] Icarus: Utilize beta service on NA and EU[NDC 2017] Icarus: Utilize beta service on NA and EU
[NDC 2017] Icarus: Utilize beta service on NA and EU
 
Osol Netadmin Solaris Administrator
Osol Netadmin Solaris AdministratorOsol Netadmin Solaris Administrator
Osol Netadmin Solaris Administrator
 
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps FasterPractical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
Practical Performance Tips and Tricks to Make Your HTML/JavaScript Apps Faster
 
Envoy @ Lyft: Developer Productivity
Envoy @ Lyft: Developer ProductivityEnvoy @ Lyft: Developer Productivity
Envoy @ Lyft: Developer Productivity
 
Enhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZEnhancing Performance with Globus and the Science DMZ
Enhancing Performance with Globus and the Science DMZ
 
opnet lab report
opnet lab reportopnet lab report
opnet lab report
 
Web Machine Learning (ML) API POC march update
Web Machine Learning (ML) API POC march updateWeb Machine Learning (ML) API POC march update
Web Machine Learning (ML) API POC march update
 

More from Philip Tellis

Improving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other HacksImproving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other Hacks
Philip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
Philip Tellis
 
Frontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou FurieuxFrontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou Furieux
Philip Tellis
 
Frontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy PersonFrontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy Person
Philip Tellis
 
Beyond Page Level Metrics
Beyond Page Level MetricsBeyond Page Level Metrics
Beyond Page Level Metrics
Philip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Philip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
Philip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
Philip Tellis
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
Philip Tellis
 
mmm... beacons
mmm... beaconsmmm... beacons
mmm... beacons
Philip Tellis
 
RUM Distillation 101 -- Part I
RUM Distillation 101 -- Part IRUM Distillation 101 -- Part I
RUM Distillation 101 -- Part I
Philip Tellis
��
Improving 3rd Party Script Performance With IFrames
Improving 3rd Party Script Performance With IFramesImproving 3rd Party Script Performance With IFrames
Improving 3rd Party Script Performance With IFrames
Philip Tellis
 
Extending Boomerang
Extending BoomerangExtending Boomerang
Extending Boomerang
Philip Tellis
 
The Statistics of Web Performance Analysis
The Statistics of Web Performance AnalysisThe Statistics of Web Performance Analysis
The Statistics of Web Performance Analysis
Philip Tellis
 
Rum for Breakfast
Rum for BreakfastRum for Breakfast
Rum for Breakfast
Philip Tellis
 
A Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web TrafficA Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web Traffic
Philip Tellis
 
Input sanitization
Input sanitizationInput sanitization
Input sanitization
Philip Tellis
 
Boomerang: How fast do users think your site is?
Boomerang: How fast do users think your site is?Boomerang: How fast do users think your site is?
Boomerang: How fast do users think your site is?
Philip Tellis
 
Boomerang at FOSS.IN/2010
Boomerang at FOSS.IN/2010Boomerang at FOSS.IN/2010
Boomerang at FOSS.IN/2010
Philip Tellis
 
Measuring the web with Boomerang (YUIConf 2010)
Measuring the web with Boomerang (YUIConf 2010)Measuring the web with Boomerang (YUIConf 2010)
Measuring the web with Boomerang (YUIConf 2010)
Philip Tellis
 

More from Philip Tellis (20)

Improving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other HacksImproving D3 Performance with CANVAS and other Hacks
Improving D3 Performance with CANVAS and other Hacks
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
Frontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou FurieuxFrontend Performance: De débutant à Expert à Fou Furieux
Frontend Performance: De débutant à Expert à Fou Furieux
 
Frontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy PersonFrontend Performance: Expert to Crazy Person
Frontend Performance: Expert to Crazy Person
 
Beyond Page Level Metrics
Beyond Page Level MetricsBeyond Page Level Metrics
Beyond Page Level Metrics
 
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
Frontend Performance: Beginner to Expert to Crazy Person (San Diego Web Perf ...
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
Frontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy PersonFrontend Performance: Beginner to Expert to Crazy Person
Frontend Performance: Beginner to Expert to Crazy Person
 
mmm... beacons
mmm... beaconsmmm... beacons
mmm... beacons
 
RUM Distillation 101 -- Part I
RUM Distillation 101 -- Part IRUM Distillation 101 -- Part I
RUM Distillation 101 -- Part I
 
Improving 3rd Party Script Performance With IFrames
Improving 3rd Party Script Performance With IFramesImproving 3rd Party Script Performance With IFrames
Improving 3rd Party Script Performance With IFrames
 
Extending Boomerang
Extending BoomerangExtending Boomerang
Extending Boomerang
 
The Statistics of Web Performance Analysis
The Statistics of Web Performance AnalysisThe Statistics of Web Performance Analysis
The Statistics of Web Performance Analysis
 
Rum for Breakfast
Rum for BreakfastRum for Breakfast
Rum for Breakfast
 
A Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web TrafficA Node.JS bag of goodies for analyzing Web Traffic
A Node.JS bag of goodies for analyzing Web Traffic
 
Input sanitization
Input sanitizationInput sanitization
Input sanitization
 
Boomerang: How fast do users think your site is?
Boomerang: How fast do users think your site is?Boomerang: How fast do users think your site is?
Boomerang: How fast do users think your site is?
 
Boomerang at FOSS.IN/2010
Boomerang at FOSS.IN/2010Boomerang at FOSS.IN/2010
Boomerang at FOSS.IN/2010
 
Measuring the web with Boomerang (YUIConf 2010)
Measuring the web with Boomerang (YUIConf 2010)Measuring the web with Boomerang (YUIConf 2010)
Measuring the web with Boomerang (YUIConf 2010)
 

Recently uploaded

20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
Sally Laouacheria
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
Eric D. Schabell
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
ishalveerrandhawa1
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
rajancomputerfbd
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
Stephanie Beckett
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
Adam Dunkels
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
Aurora Consulting
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
Matthew Sinclair
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
BookNet Canada
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
Enterprise Wired
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
Neo4j
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 

Recently uploaded (20)

20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf20240702 Présentation Plateforme GenAI.pdf
20240702 Présentation Plateforme GenAI.pdf
 
Observability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetryObservability For You and Me with OpenTelemetry
Observability For You and Me with OpenTelemetry
 
Calgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptxCalgary MuleSoft Meetup APM and IDP .pptx
Calgary MuleSoft Meetup APM and IDP .pptx
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Choose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presenceChoose our Linux Web Hosting for a seamless and successful online presence
Choose our Linux Web Hosting for a seamless and successful online presence
 
What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024What’s New in Teams Calling, Meetings and Devices May 2024
What’s New in Teams Calling, Meetings and Devices May 2024
 
How to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptxHow to Build a Profitable IoT Product.pptx
How to Build a Profitable IoT Product.pptx
 
Quality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of TimeQuality Patents: Patents That Stand the Test of Time
Quality Patents: Patents That Stand the Test of Time
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
20240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 202420240702 QFM021 Machine Intelligence Reading List June 2024
20240702 QFM021 Machine Intelligence Reading List June 2024
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024Details of description part II: Describing images in practice - Tech Forum 2024
Details of description part II: Describing images in practice - Tech Forum 2024
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf7 Most Powerful Solar Storms in the History of Earth.pdf
7 Most Powerful Solar Storms in the History of Earth.pdf
 
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-InTrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
TrustArc Webinar - 2024 Data Privacy Trends: A Mid-Year Check-In
 
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdfBT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
BT & Neo4j: Knowledge Graphs for Critical Enterprise Systems.pptx.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 

Messing with JavaScript and the DOM to measure network characteristics

  • 1. Messing with JS & the DOM to analyse the Network Philip Tellis / philip@bluesmoon.info JSConf.eu / 2011-10-01 JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 1
  • 2. HTTP/TCP/IP Developed by three guys with one beard between them JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 2
  • 3. JavaScript: The good parts Discovered by one guy with one beard on him JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 3
  • 4. Let’s play with the nasty parts JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 4
  • 5. 1 Latency JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 5
  • 6. 1 Blinkenlichten It takes about 23ms for light to get from Berlin to NY (35ms through fibre) Image from http://cablemap.info JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 6
  • 7. 1 HTTP JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 7
  • 8. So to measure latency, we need to send 1 packet each way, and time it JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 8
  • 9. 1 Network latency in JavaScript var ts, rtt, img = new Image; img.onload=function() { rtt=(+new Date - ts) }; ts = +new Date; img.src="/1x1.gif"; JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 9
  • 10. TCP handshake 2 JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 10
  • 11. 2 ACK-ACK-ACK JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 11
  • 12. 2 Connection: keep-alive JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 12
  • 13. 2 Network latency & TCP handshake in JavaScript var t=[], n=2, tcp, rtt; var ld = function() { t.push(+new Date); if(t.length > n) done(); else { var img = new Image; img.onload = ld; img.src="/1x1.gif?" + Math.random() + ’=’ + new Date; } }; var done = function() { rtt=t[2]-t[1]; tcp=t[1]-t[0]-rtt; }; ld(); JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 13
  • 14. The astute reader will notice that we’ve ignored DNS lookup time here... how would you measure it? JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 14
  • 15. 1 Notes • 1x1 gif is 35 bytes • including HTTP headers, is smaller than a TCP packet • Fires onload on all browsers • 0 byte image fires onerror • which is indistinguishable from network error JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 15
  • 16. Network Throughput 3 JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 16
  • 17. 3 Measuring Network Throughput size download_time JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 17
  • 18. 3 Network Throughput in JavaScript // Assume global object // image={ url: ..., size: ... } var ts, rtt, bw, img = new Image; img.onload=function() { rtt=(+new Date - ts); bw = image.size*1000/rtt; // rtt is in ms }; ts = +new Date; img.src=image.url; JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 18
  • 19. 3 Measuring Network Throughput If it were that simple, I wouldn’t be doing a talk at @jsconfeu JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 19
  • 20. 3 TCP Slow Start JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 20
  • 21. 3 Measuring Network Throughput So to make the best use of bandwidth, we need resources that fit in a TCP window JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 21
  • 22. 3 There is no single size that will tax all available networks http://www.yuiblog.com/blog/2010/04/08/analyzing-bandwidth-and-latency/ JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 22
  • 23. 3 Network Throughput in JavaScript – Take 2 // image object is now an array of multiple images var i=0; var ld = function() { if(i>0) image[i-1].end = +new Date; if(i >= image.length) done(); else { var img = new Image; img.onload = ld; image[i].start = +new Date; img.src=image[i].url; } i++; }; JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 23
  • 24. 3 Measuring Network Throughput Slow network connection, meet really huge image JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 24
  • 25. 3 Network Throughput in JavaScript – Take 3 var img = new Image; img.onload = ld; image[i].start = +new Date; image[i].timer = setTimeout(function() { image[i].expired=true }, image[i].timeout); img.src=image[i].url; JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 25
  • 26. 3 Network Throughput in JavaScript – Take 3 if(i>0) { image[i-1].end = +new Date; clearTimeout(image[i-1].timer); } JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 26
  • 27. 3 Network Throughput in JavaScript – Take 3 if(i >= image.length || (i > 0 && image[i-1].expired)) { done(); } JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 27
  • 28. 3 Measuring Network Throughput Are we done yet? JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 28
  • 29. 3 Measuring Network Throughput Are we done yet? sure... JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 28
  • 30. 3 Measuring Network Throughput Except network throughput is different every time you test it JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 29
  • 31. Statistics to the Rescue flickr/sophistechate/4264466015/ JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 30
  • 32. 3 Measuring Network Throughput The code for that is NOT gonna fit on a slide JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 31
  • 33. 4 DNS JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 32
  • 34. 4 Measuring DNS time_with_dns − time_without_dns JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 33
  • 35. 4 Measuring DNS in JavaScript var t=[], dns, ip, hosts=[’http://hostname.com/’, ’http://ip.ad.dr.ess/’]; var ld = function() { t.push(+new Date); if(t.length > hosts.length) done(); else { var img = new Image; img.onload = ld; img.src=hosts[t.length-1] + "/1x1.gif"; } }; var done = function() { ip=t[2]-t[1]; dns=t[1]-t[0]-ip; }; ld(); JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 34
  • 36. 4 Measuring DNS What if DNS were already cached? JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 35
  • 37. 4 Measuring DNS What if DNS were already cached? Use a wildcard DNS entry JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 35
  • 38. 4 Measuring DNS What if you map DNS based on geo location? JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 36
  • 39. 4 Measuring DNS What if you map DNS based on geo location? A little more complicated, but doable JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 36
  • 40. 4 Measuring DNS Full code in boomerang’s DNS plugin JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 37
  • 41. 5 IPv6 JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 38
  • 42. 5 Measuring IPv6 support and latency 1 Try to load image from IPv6 host • If timeout or error, then no IPv6 support • If successful, then calculate latency and proceed 2 Try to load image from hostname that resolves only to IPv6 host • If timeout or error, then DNS server doesn’t support IPv6 • If successful, calculate latency JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 39
  • 43. 5 Measuring IPv6 support and latency Full code in boomerang’s IPv6 plugin JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 40
  • 44. 6 Private Network Scanning JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 41
  • 45. 6 Private Network Scanning JavaScript in the browser runs with the User’s Security Privileges JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 42
  • 46. 6 Private Network Scanning This means you can see the user’s private LAN JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 43
  • 47. 6 Private Network Scanning – Gateways 1 Look at common gateway IPs: 192.168.1.1, 10.0.0.1, etc. 2 When found, look for common image URLs assuming various routers/DSL modems 3 When found, try to log in with default username/password if you’re lucky, the user is already logged in JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 44
  • 48. 6 Private Network Scanning – Services 1 Scan host range on private network for common ports (80, 22, 3306, etc.) 2 Measure how long it takes to onerror • Short timeout: connection refused • Long timeout: something listening, but it isn’t HTTP • Longer timeout: probably HTTP, but not an image 3 Try an iframe instead of an image JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 45
  • 49. .done() JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 46
  • 50. Code/References • http://github.com/bluesmoon/boomerang • http://samy.pl/mapxss/ JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 47
  • 51. • Philip Tellis • LogNormal.com • philip@bluesmoon.info • @bluesmoon • geek paranoid speedfreak • http://bluesmoon.info/ JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 48
  • 52. Thank you JSConf.eu / 2011-10-01 Messing with JS & the DOM to analyse the Network 49