JavaScript performance optimization: measurement, monitoring and visualization 1

Steps required by the HTTP transaction:

Next, the browser and the remote Web server through the TCP three handshake negotiation to establish a TCP/IP connection, similar to the Walkie-talkie over (complete) Roger (understand)

TCP/IP model

TCP is the Transmission Control Protocol (transmission Con-trol Protocol)

Once a TCP/IP connection is established, the browser sends a GET request for HTTP to the remote server through the connection

The remote server locates the resource and uses the HTTP response to return the resource, which is commonly used:

• 200 indicates a successful response from the server; 404 means the server does not find the requested resource; • 500 indicates an error occurred while executing the request.

The IPV4 and IPV6 protocols specify a maximum value of 65535 bytes for an IP packet, converting your total page size to bytes, divided by the maximum IP packet bytes worth the server's response times

Each resource on the page--every picture, external JavaScript file, and CSS file--needs to go back and forth from the server to the local. Each resource request opens a new thread and a new process (flow) instance, each of which results in a DNS query, TCP connection, HTTP request, and response

1.2 Parsing and rendering

The browser parses and renders the code of the Web page schema () browser schema processing UI (user interface), including the address bar and fallback (history) button, to parse and draw the rendering engine for all objects in the page, to interpret JavaScript's JavaScript engine, and a network layer that handles HTTP requests

The browser reads the content from the top down, so the location where the resource is placed affects the site's access speed, and if the JavaScript tag is placed in front of the HTML content, the browser first calls the JavaScript interpreter to parse the JavaScript. The rest of the HTML content will not be rendered until finished

1.2.1 Rendering Engine

The browser architecture can be divided into multiple modules, and the browser manufacturer has been building the browser through a combination of modules.

Chrome and Safari Use the WebKit rendering engine http://www.webkit.org/

1.2.2 JavaScript engine

The JavaScript interpreter also applies the concept of modularity and can be embedded in other tools

Firefox's SpiderMonkey

Chrome's V8

1.3 Run-time performance

The so-called runtime is the length of time that an application executes or runs. Run-time performance refers to the speed at which the application runs when it responds to user input (such as when saving attributes or accessing elements in the DOM)

2nd tools and techniques for measuring and influencing performance

2.1 Firebug

2.2 YSlow

For more in-depth analysis of Web page performance, you can use Ys-low, which can be ported to most browsers http://yslow.org/,Google ever developed a page speed similar to YSlow product

2.3 Webpagetest

http://www.webpagetest.org/

Webpagetest is a Web application that takes a URL and a series of configuration parameters as input and runs performance tests on that URL. Webpagetest the number of configurable parameters is very large, the range is very wide

2.4 Reduction

Need to reduce JavaScript

2.4.1 Minify

http://code.google.com/p/minify/

Minify, read the URL of the JavaScript file. Minify remove unnecessary characters and set the response header (response header) to GZIP encoded format, return the result to the script tag, and load the results into the browser, to use Minify, only from http://code.google.com/ Download it on the p/minify/website, unzip it to the/min folder and place it under the Web site root, and then open the Minify Control Panel to the/min/builder/directory. In Control Panel, you can add JavaScript files that you want to reduce, and page generation can link to JavaScript files with reduced script tags

2.4.2 YUI Compressor

Another tool for downsizing is Yahoo's Yui com-pressor, which can be found here: http://yuili-brary.com/download/yuicompressor/

2.4.3 Closure Compiler https://developers.google.com/closure/com-piler/It not only reduces JavaScript, but also compresses JavaScript further by rewriting Optimization strategy-It expands functions, overrides variable names, removes functions that are never called (as long as it can be judged)

2.5 R Getting Started

http://cran.r-project.org/using R for data visualization

I'll fill this hole later.

JavaScript performance optimization: measurement, monitoring and visualization 1