Index

A

Android Virtual Device Manager, 198, 199

apply() function, 61

axis() function, 55

B

Balancing performance

practical application

monitoring web performance, 192

sharing findings, 201–202

site instrumentation, 192–193

test lab benchmark (see Test lab benchmark) readability, modularity, and design, 175–176

scorched-earth performance (see Scorched-earth performance)

C

Carakan, 6

Chakra, 7

comparePerfMetricsbyURL() function, 126

Conditional compilation, 7

constructScriptTag() function, 112, 113, 124

createDataFrameByURL() function, 54, 61

D, E

Data visualization, 9, 10

document.createElement() function, 112

F

Firebug

filtering results, 15, 16

in-browser tool, 13

installation, 13

network monitoring, 15

waterfall chart, 15

Firefox memory window, 98

G, H, I

Garbage collection, 97

Gecko, 6

getDFByBrowser () function, 145

J, K

JavaScript benchmarking and logging, 65

appendToFile() function, 77

architecture

ad hoc code, 67

associative array, 67

code execution, 65

decision tree, 66

high-level sequence diagram, 67

metadata, 68

object diagram, 68

perfLogger, 67

savePerfData process, 67

stopTimeLogging () function, 67

testresult object, 68

workflow, runtime calculation, 65, 66

by() function, 80

calculateResults() function, 69

cleanCommas() function, 77

complete R script, 82

data frame, 80, 81

data saving, 70

debug information, 69

formatDebugInfo() function, 70

formatNewLog() function, 78

open source, 82

page_render, 79, 81

public API crafting finished library function, 73–75

logBenchmark() function, 72

passed-in properties, 71

startTimeLogging () function, 71

stopTimeLogging () function, 71

remote logging, 75

runtimePerformance.R document, 80

runtimeperf_results.txt file, 79

saveLog () function, 76

savePerfData.php file, 78

self-executing function, 68

setResultsMetaData() method, 69

JavaScriptCore, 6

JQuery vs. Javascript author-time efficiency, 151

DOM access

benchmark test result, 160

benchmark timing data, 159

JQueryDOM function, 158, 160

JSDOM function, 158

populateArray function, 157–158

looping

average benchmark results chart, 154, 155

create variables, 153

data frame creation, 153

DRY principle concept, 155–157

jquerycomparison.html page, 151

JQueryEach function, 152

JSForLoop function, 152, 153

populateArray function, 151–152

R code, 154

L

Lazy loading

anti-patterns, 122

core algorithmic patterns, 122

CSS

average load time, 133

average page load time, with perfLogger, 135

average page render time, 134

average page render time with perfLogger, 135

constructTag function, 129–130

fetch function, 129

lazyloadcss.html, 129

processURLs function, 130–131

WebPagetest summary results, 132

WebPagetest waterfall view, 132

definition, 121

images, 136

implementations, 121

lazy initialization pattern, 122

scripts

average load time, 127

average render time, 126

callback function, 123–124

comparePerfMetricsbyURL() function, 125

lazyloadscript.html, 123

meanRenderTimes and meanLeadTimes data frames, 125–126

perfLogger.showPerformanceMetrics() function, 123, 125

remoteLoader.loadJS function, 123

WebPagetest summary results, 128

WebPagetest waterfall view, 128

window.addEventListener(), 123

window.attachEvent function, 123

sequence diagram, 121

value holder pattern, 122

virtual proxy pattern, 122

legend() function, 58

line() function, 56

loadtime column, 57–58

M, N, O

Meenan, Patrick (WebPagetest)

agent architecture, 63–64

applications, 64

average test time, 62

callback method, 63

challenges, 62

creation inspiration, 61

goal of WebPagetest LLC, 62

HTTP Archive, 63

memory profiler, 64

open source project, 62

test process, 63

test results storage time, 62

Minification

analysis and visualization, 27, 28

Closure Compiler, 24–27

definition, 23

Minify, 23–24, 26

waterfall chart, 26

YUI compressor, 24

P, Q

Page render bottlenecks

annotated browser architecture, 109, 110

async attribute, 114, 115

Waterfall chart, 117, 118

WebPagetest results, 115, 116

average load timer, 119, 120

average render time, 119, 120

baseline file, 114

Waterfall chart, 117

WebPagetest results, 115, 116

client-facing interface, 109

comparePerfMetricsbyURL, 118

data frame, 119

DOM elements, 110

getDFByURL() function, 118

network layer, 109–110

perfLogger metrics, 118

rendering engine workflow, 110, 111

R function, 118

script loading

array, 113

constructScriptTag() function, 112, 113

document.createElement() function, 112

instanceof operator, 113

loadJS() function, 112

remoteLoader function, 112–114

src attribute, 112

Waterfall chart, 117

WebPagetest results, 116

script tags, parsing, 111

tokenization, 111

UI layer, 109

Parsing and rendering

browser architecture, 4, 5

JavaScript engines, 6–7

rendering engines, 6

paste() function, 53

Perflogger

jsonConcat() function, 89, 90

logToServer(), 89–91

public functions, 90–91

self-executing function, 88

TestResults object, 88, 89

updation, 90

perfLogger library, 109

plot() function, 55, 58

PlotResultsofTestsByBrowser function, 156

Presto, 6

R

R

apply() function, 41

barplot function, 38

charting, 34–37

data frame, 38

dev.off(), 39

getPercentImproved function, 40–41

graphical parameters, 38

installing and running, 29–30

mincompare, 38

opar variable, 38

par() function, 38–39

passed-in vector, 40

percentVector, 40

primer

bug backlog, 33

functions, 33

loops, 33

read.table() function, 32

variables and data types, 31–32

statistical computing, 28

workflow, 28

rel attribute, 136

R language, 11

Runtime performance, 139

caching variables and properties

ad hoc timing data capture, 141, 144

benchmarking results, 145–147, 150

cache_locationcomparison.html, 140, 143

cacheLoc function, 143

data frame, 150

document location, 140

global scope, 140

local variable creation, 140

loop terminator, 147, 148

perfLogger.logBenchmark, 142

perfLogger.startTimeLogging, 148

perfLogger.stopTimeLogging, 141

populateArray, 141

tempArray, 141

test output, 142

tests result, 149

uncachedLoc () function, 142, 145

DOM access, 164

node addition, queue, 166–168

queue change, DOM element, 164–166

eval true cost, 161

benchmarking function, 162, 163

code injection, 161

evalAverage () function, 162

getAvg function, 161

HTML skeletal structure, 161

interpreter, 161

perfLogger.logBenchmark, 162

JQuery vs. Javascript (see JQuery vs. Javascript)

nested loop benchmarking function results, 170

code execution, 168

increasing depth chart, 171–173

script tag and tempArray variable creation, 168

slow script warnings, 169–170

numbers, 139

S

Scorched-earth performance

Closure Compiler

Advanced mode, 183, 191

basic skeletal HTML structure, 183

benchmarkobjects.html, 183

completed page, 184–185

debugging, 191

favoriteList, 184

JavaScript error, 187

printInfo(), 183

running perfLogger, 187

Simple mode, 183

test file, 187–190

testUserObject function, 184

UI, 185, 186

URLs test, 190

user object, 183

video function, 183

web performance results, 191

inlining functions

basic skeletal HTML structure, 177

coalescing functionality, 182

getAvg() function, 178

getSum() function, 178

PlotResultsofTestsByBrowser() function, 181

simpleMath function, 178

test page, 179–181

unwoundfunction() function, 177

usingfunctions() function, 178

usingobjects function, 179

Session/site abandonment, 8

SpiderMonkey, 6

src attribute, 136

statusCode node, 48

T

Test lab benchmark

Android SDK

Device Manager, 198–200

download page, 196, 197

emulator, 200, 201

Manager, 197, 198

browser support matrix, 193, 194

iOS simulator, 196

Keynote Device Anywhere, 196

Virtual Box download page, 195

homepage, 194, 195

with multiple VMs, 195, 196

Threads, 3

Transmission Control Protocol (TCP), 3

Trident, 6

U, V

useAppendChild function, 166

W, X

W3C Web Performance, 83

Webkit, 6

WebPagetest

Auth tab, 20

Block tab, 21

code repository, 19

document.onload event, 19

performance optimization checklist, 22

pie charts, 22

Preserve original User Agent string option, 20

public web site, 19

results page, 21

Script tab, 20

setUserAgent command, 21

SSL certification errors, 19

Video tab, 21

waterfall charts, 22

Web performance

definition, 1

network transactions diagram, 2

optimizations lazy loading (see Lazy loading)

page render bottlenecks (see Page render bottlenecks)

parsing and rendering (see Parsing and rendering)

runtime performance, 8

site abandonment, 8

TCP/IP model

Application layer, 3

communication, 3

HTTP requests, 5

HTTP Response, 4

Internet layer, 3

Network Access layer, 3

specification, 3

total page size, 4

Transport layer, 3

user experience, 8

Window performance

data visualization

average perceived load time, browser, 106

avgTimeBreakdownInRequest, 102

Avg time, HTTP request, 103, 104

data.frame() function, 103

exponential notation, 103

frequency distribution, 102

getDFByBrowser(), 105

grep() function, 105

HTTP transaction process, 101

loadtime_bybrowser, 105

negative numbers, 103

updated R file, 106

high-resolution time, 98–101

logging functionality updation, 93

memory object, 96–98

Navigation object, 94–96

object

Chrome 20 beta, 84

JavaScript console, 83

perfLogger (see Perflogger)

timing, 84

W3C web performance, 83

Worldwide Web Consortium (W3C), 11

wpochart variable, 53

wpologs data frame, 53

wpt_credentials_urls.php, 47

$wpt_response variable, 47

WPTRunner

architecture

directory structure, 45

finished sequence diagram, 44, 45

first iteration sequence diagram, 44

process_wpt_response, 43

sequence diagram, 43

webpagetest_responses.txt, 44

wpo_log.txt, 44

charting with R, 53

completed process_wpt_response file, 52–53

data parsing, 54–55

interview (Meenan, Patrick) (see Meenan, Patrick (WebPagetest))

parsing test results

appendToFile, 51

fileio() function, 49

firstView node, 51

formatted result, 49

formatWPOLog() function, 51–52

looping, 50–51

$newline, 51

readCSVurls() function, 49

repeatView node, 51

statusCode node, 49–51

$xml object conversion, 50

plotting

load time, 55–57

payload and number of HTTP requests, 57–61

shared configuration file API key, 45

appendToFile() function, 46

fileio.php, 46

URLs storage, 45

WebPagetest API access, 46–49

wpt_credentials_urls.php, 46

Y, Z

YSlow

components section, 17

etags, 17

in-browser tool, 16

installation, 16, 17

and Page Speed test, 18, 19

results screen, 17, 18

rule set, 17

screen—statistics, 18

splash screen, 17

sub-navigation bar, 17