SlideShare a Scribd company logo
PrairieDevCon 2014 -  Web Doesn't Mean Slow
● Maintains jQuery code and docs
● Supports web developers and standards
● Participates in standards process
○ W3C web standards
○ ECMA 262 (JavaScript)
jQuery Foundation
builtwith.com
jQuery Team - World Wide

Recommended for you

New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance

This document discusses improving website performance. It outlines three pillars of performance: visibility, interactivity, and responsiveness. For each pillar, it recommends books and techniques. Tips include using tools like Firebug and YSlow, delaying initialization, throttling and debouncing events, and profiling code. While optimizations can improve performance, they also increase costs. The document emphasizes establishing a baseline and focusing first on low-hanging fruit before more complex optimizations. It concludes by thanking the sponsors and providing contact information.

Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps

As browsers explode with new capabilities and migrate onto devices users can be left wondering, “what’s taking so long?” Learn how HTML, CSS, JavaScript, and the web itself conspire against a fast-running application and simple tips to create a snappy interface that delight users instead of frustrating them.

wpohtml5css3
The Onion
The OnionThe Onion
The Onion

This document discusses strategies for adding features to jQuery plugins without causing bloat. It suggests using metaplugins that handle cross-browser compatibility issues and provide core functionality. Wrapper plugins are also proposed to extend existing plugins through extension points like callbacks. The document uses the Treeview plugin as an example, explaining how an AsyncTreeview wrapper plugin was created to add Ajax support by wrapping the Treeview plugin instead of modifying it directly. This allows features to be added modularly without changing the original plugins.

http://contribute.jquery.org
PERFORMANCE
"JavaScript / jQuery /
browsers are a bad
developer environment!"
A poor
workman
blames his
tools

Recommended for you

Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT

jQuery is an open source JavaScript library that simplifies HTML and JavaScript interaction. It uses CSS to layer functionality and has a quick, terse syntax. jQuery selects elements and allows something to be done with them, like adding a class. It has a large plugin ecosystem managed through a plugin tracker. jQuery UI provides cross-browser user interface components. The library is fully documented, has a great community, many plugins, and small size. It works in all major browsers and is used by many large companies and projects.

jqueryjavascriptmit
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace

This document summarizes the history and evolution of web browsers and internet technologies from the early 1990s to the late 1990s. It traces the development of key browsers like Netscape Navigator and Internet Explorer. It also outlines the introduction of important web standards like HTML, CSS, JavaScript and XML. Major events included the commercialization of the web in the mid-1990s, the browser wars between Netscape and Microsoft in the late 90s, and the consolidation of online services providers toward the end of the decade.

wwwinternetjavascript
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link

This document discusses using jQuery Templates and Data Link to build dynamic data-driven browser applications. It describes how jQuery Templates can be used to render templates from data but offers limited interactivity. jQuery Data Link allows binding data to HTML but has no templating. The presentation previews a new approach called JsViews that integrates Templates and Data Link to provide both fast rendering of templates to static HTML strings as well as fully interactive and responsive views through two-way data binding between templates and JavaScript data objects.

templatesdata linkjavascript
How the Programmer Sees It
JavaScript Browser
Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTML
Content caching
Keyboard
Touch
Screen paints
Layout calculation
Image decoding
Focus management
Network requests
Web Developer's Reality
Browser JavaScript
Mouse
CSS
HTML
Content caching
Keyboard
Touch
Screen paints
Layout calculation
Image decoding
Focus management
Network requests
Optional
How Do I Make My Page Fast?

Recommended for you

jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013

The document summarizes information about the jQuery Foundation. It discusses that the Foundation coordinates work on the jQuery code, documentation, infrastructure and events. It is a non-profit organization funded through conferences, donations and memberships. The Foundation supports jQuery projects and web developers, and participates in standards processes. Upcoming releases of jQuery will be published on Bower and npm for dependency management, use AMD internally, defer feature detects, and aim to reduce forced layouts to improve performance. Developers are encouraged to understand how browsers work and avoid patterns that can cause layout thrashing.

layoutreflowperformance
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)

The document summarizes techniques for improving JavaScript performance in web applications. It discusses how JavaScript execution blocks the browser UI thread, leading to unresponsive user experiences if scripts run for too long. It then provides recommendations to limit JavaScript execution times to under 50ms and describes load time techniques like placing scripts at the bottom of the page, combining files, and loading scripts dynamically or deferring their execution to improve page load performance.

amazonjavascriptperformance
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers

An overview of web development essentials that will help you as a user experience designer to not only understand how to integrate designs with development components, but also to learn some tips on interacting effectively with developers.

user experience designhtml5web development
How Do I Make My Page Fast?
1) Find slow stuff
2) Make it not slow
What you can
measure using
tools today
How Do I Find the Slow Stuff?
What you can
measure using
tools today
What you
should
measure
How Do I Find the Slow Stuff?
JavaScript Loop Optimization

Recommended for you

State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference

The document discusses the state of jQuery and the jQuery Foundation. It provides an overview of the non-profit jQuery Foundation organization and its projects. It also summarizes the jQuery team's initiatives and contributors from around the world. The document outlines the plans for future versions of jQuery, including jQuery 1.11/2.1, and discusses strategies and tools for web performance and browser compatibility.

asp.netjquerye-commerce
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!

Vue.js is a JavaScript framework that provides two-way binding between DOM and JavaScript, a template language for declarative rendering, and supports installation via npm, direct download, or a script tag. It allows defining where rendering will occur, setting up data, and rendering data to the DOM. Components provide reusability through templates, logic, and styles. Additional features include routing, state management with Vuex, and use of the Vue CLI for scaffolding single file components.

javascriptvuejs
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques

Responsive Web design challenges Web designers to adapt a new mindset to their design and coding processes. This talk provides an overview of various practical techniques, tips and tricks that you might want to be aware of when working on a new responsive design project.

cssweb design and developmentresponsive
JavaScript Loop Optimization
Slowest looping style still only
takes 140 microseconds to do
10 iterations of a loop
“Programmers waste enormous amounts of
time thinking about, or worrying about, the
speed of noncritical parts of their
programs, and these attempts at efficiency
actually have a strong negative impact
when debugging and maintenance are
considered. We should forget about small
efficiencies, say about 97% of the time;
premature optimization is the root of all
evil. Yet we should not pass up our
opportunities in that critical 3%.”
--Donald Knuth
“Programmers waste enormous amounts of
time thinking about, or worrying about, the
speed of noncritical parts of their
programs, and these attempts at efficiency
actually have a strong negative impact
when debugging and maintenance are
considered. We should forget about small
efficiencies, say about 97% of the time;
premature optimization is the root of all
evil. Yet we should not pass up our
opportunities in that critical 3%.”
--Donald Knuth
PrairieDevCon 2014 -  Web Doesn't Mean Slow

Recommended for you

jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Merger

The document discusses plans to merge jQuery UI and jQuery Mobile to create code that works across all devices and environments. Key points include: 1) Creating a shared CSS framework and responsive widgets for layouts and user interfaces. 2) Developing techniques like SVG icons with PNG fallbacks to optimize performance across different platforms and devices. 3) Building a common widget factory and APIs to create reusable and customizable interface elements that work with or without JavaScript. 4) Continuing to improve form controls and other widgets to provide consistent styling and interactions across all form factors.

Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSChristmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JS

The document provides instructions for creating a Christmas tree using HTML, CSS, and JavaScript. It discusses using HTML and CSS to build the basic tree structure and appearance. It then explains how to add JavaScript functionality to draw the tree on a canvas element, including drawing the triangle base and adding circular decorations. Steps are provided for setting up the file directories and boilerplate code needed to build the tree with each technology.

htmlcodingchristmas
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)

Zoe Mickley Gillenwater gave a talk at Generate Conference in London where she shared several mistakes she made while learning CSS flexbox and other techniques. These included misunderstanding how flex-basis works, incorrectly using CSS transforms like rotateX, and making assumptions about screen reader support that caused accessibility issues. She emphasized that vulnerability and sharing mistakes openly can help both oneself and others learn. Making mistakes is a natural part of the learning process, and perfection should not be expected or feared.

failuresuccesscss
Client-side issues often can be solved by
"peephole" optimizations and don't require
massive architecture changes
Many — most! — speedups can be done near
the end of the project (or even after
deployment, cough)
Finding and Fixing the 3 Percent
With all the other things going on in a web
page, it's unlikely the run time of your
JavaScript is in the 3% worst case.
However, your JavaScript may be doing
things that cause bad performance by
making the browser do more work.
It's Not the JavaScript, Probably
Use the tools available (online and inside
the browser) to determine where the
bottlenecks lie, and fix them.
Don't Guess, Measure
How the Browser
Loads Web Pages

Recommended for you

Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015

My presentation as delivered at the Denver Java User Group on April 8, 2015. Building a modern web (or mobile) application requires a lot of tools, frameworks and techniques. This session shows how JHipster unites popular frameworks like AngularJS, Spring Boot and Bootstrap. Using Yeoman, a scaffolding tool for modern webapps, JHipster will generate a project for you and allow you to use Java 7 or 8, SQL or NoSQL databases, Spring profiles, Maven or Gradle, Grunt or Gulp.js, WebSockets and BrowserSync. It also supports a number of different authentication mechanisms: classic session-based auth, OAuth 2.0, or token-based authentication. For cloud deployments, JHipster includes out-of-the-box support for Cloud Foundry, Heroku and Openshift.

angularjsjhipsterspring-boot
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications

Slides from a brownbag tech talk at eBay. A holistic approach to web performance and intimate details on YSlow's points and grading algorithm.

ebaystoyanyahoo
Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia

Bruce Lawson of Opera toured Indonesian Universities discussing web standards, HTML5, CSS Media Queries and cross-device development.

web standardshtml5css
Your Browser
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<p>An awesome web page</p>
<img src="cat.jpg" alt="Kitty!" />
<script>
document.write('<img src="nope.gif" />');
</script>
Browser Fetches the HTML Page
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<p>An awesome web page</p>
<img src="cat.jpg" alt="Kitty!" />
<script>
document.write('<img src="nope.jpg" />');
</script>
Scan for Fetchable Resources
<!doctype html>
<html>
<head>
<script src="jquery.js"></script>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<p>An awesome web page</p>
<img src="cat.jpg" alt="Kitty!" />
<script>
document.write('<img src="nope.gif" />');
</script>
Parse/Run JavaScript (In-Place)

Recommended for you

Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker

A brief talk on web application performance and responsiveness. Why it is important and how web worker can help achieve it. It also covers a simple example implementing web workers.

html5web workerwebworker
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow

This presentation is about implementing the performance as first approach in web development and a bit of real case study. Then implement the Lighthouse-CI in the development workflow to keep the site performance high.

lighthouseperfromanceweb
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course

This document discusses key aspects of web design including the human, server, search engine, and browser. It covers topics like accessibility, performance, semantics, standards, and technologies like HTML, CSS, PHP, JavaScript that comprise the foundation of web development. The document provides an overview of considerations and best practices for the different components that make up the web.

● HTML is fully loaded, may be partially
shown to the user already
● Images may not be loaded yet
● DOMContentLoaded event
● jQuery lets you have functions to run
○ $(document).ready()
● These may modify the document
Document Ready
The User Sees Your Page!
Now It May Seem Obvious, But...
Resources outside the HTML file can't be
prefetched, resulting in further delays
e.g. stuff injected by JavaScript/jQuery
JS frameworks (Angular, Backbone) or
initial content from client-side templates
can make the prefetcher useless
From top to bottom of the page:
● Render-blocking CSS
● Fonts
● Scripts
Avoid CSS @import and font loading when
possible, they block rendering
Resource Order Is Important

Recommended for you

Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course

This document discusses various aspects of web design including the human, server, search engine, and browser. It covers topics like accessibility, performance, semantics, standards compliance, and different technologies involved in web development like HTML, CSS, PHP, JavaScript, and databases. The document provides examples and recommendations for proper use of these technologies to build effective and user-friendly websites.

coursewebdesign
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...

Do you want to find out, how inefficient use of JS is preventing you from passing CWV and what to do about it? Click through!

brightonseo
20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performance

Lets look at an example of what a performant website can look like. This discuss what concepts should we be considering when looking at website performance. Next we will go over two areas pertaining to website performance: 1) website performance tweaks that you as a web developer can directly make 2) website performance tweaks that you may have to work with your hosting provider or IT department to achieve

website performanceweb performance testingweb performance monitoring
Maximize the
Network Connection
PrairieDevCon 2014 -  Web Doesn't Mean Slow
● Avoid 3xx redirects
● Start requests early
● Minimize number of requests
● Minimize byte size of requests
● Maximize browser cache usage
● Spread requests across domains
● Load non-critical stuff later
Rules of the Road
Redirecting to another page penalizes load
time by a full network round-trip!
Unfortunately this can't always be avoided,
search engines like "canonical URLs".
Avoid 3xx redirects

Recommended for you

Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps

The document provides an overview of developing high performance web applications, focusing on optimizing front-end performance. It discusses why front-end performance matters, and provides best practices for optimizing page load time, developing responsive interfaces, and efficiently loading and executing JavaScript. The document also covers DOM scripting techniques, tools for profiling and analyzing performance, and how the performance monitoring service Gomez can be extended to better measure client-side metrics.

developercompuwaregomez
Validating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data IntegrityValidating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data Integrity

Deep dive into session isolation and why search engines render pages in isolated rendering sessions to avoid having the rendering of one web page affect the functionality or the content of another. Web crawling tools aim to replicate search engines' crawling and rendering behaviours by implementing and using web rendering systems. This offers insights into what search engines might see when they are crawling and rendering web pages. While there is no defined standard for an automated rendering process, search engines (e.g. Google, Bing, Yandex) render pages in isolated rendering sessions. This way, they avoid having the rendering of one web page affect the functionality or the content of another. Isolated rendering sessions should have isolated storage and avoid cross-tab talking.

web crawlingweb renderingsearch engine
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development

1) Rachel Andrew discusses considerations when choosing tools and frameworks for front-end development projects, emphasizing progressive enhancement and ensuring the core experience works for all. 2) She argues against over-reliance on frameworks, which can mask issues and prevent learning core skills. Frameworks should be used lightly and evaluated on a case-by-case basis. 3) Andrew talks about the importance of standards-based development and contributing to emerging specifications like CSS Grid Layout, rather than depending entirely on pre-processors. Her goal is to encourage continued progress of the open web.

html5cssfront-end
Put references to resources (e.g., images)
in the HTML first delivered to the browser,
so the prefetcher can "see" them.
Start Requests Early
Manual Prefetching
Lets the browser get a running start on
template content or later pages.
<link rel="dns-prefetch" href="http://media.mysite.com">
<link rel="prefetch" href="/img/kitten.jpg">
<link rel="prefetch" href="/step2.html">
Combine similar resources (scripts, CSS,
images) and download as a single file (or at
least a small number of files).
Weigh tradeoff of combining vs. CDNs or
reusing subsets on multiple pages to take
advantage of browser caching.
Minimize Number of Requests
Use tools like CSSMin and Uglify.js to
squeeze out useless bytes in source files.
Compress images, avoid HTML cropping.
Enable gzip compression on the server.
Minimize Size of Requests

Recommended for you

What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?

Web Developers are excited to use HTML 5 features but sometimes they need to explain to their non-technical boss what it is and how it can benefit the company. This presentation provides just enough information to share the capabilities of this new technologies without overwhelming the audience with the technical details. "What is HTML5?" covers things you might have seen on other websites and wanted to add on your own website but you didn't know it was a feature of HTML 5. After viewing this slideshow you will probably give your web developer the "go ahead" to upgrade your current HTML 4 website to HTML 5. You will also understand why web developers don't like IE (Internet Explorer) and why they always want you to keep your browser updated to latest version. "I have seen the future. It's in my browser" is the slogan used by many who have joined the HTML 5 revolution.

html 5microdatahtml5
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications

This is an older slide deck I realized I never uploaded. It is a slightly longer deck than the Night at the SPA deck. This features many concepts that are forerunners to the modern progressive web application. There are slides related to web performance best practices, JavaScript architecture, responsive web design, touch and much more.

single page appresponsive web designweb performance
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers

This document discusses the JavaScript library Prototype and how it can be used to build dynamic user interfaces with Ajax techniques. It provides an overview of Prototype's features for simplifying Ajax calls, enhancing DOM manipulation, adding visual effects, and debugging JavaScript across browsers. The document promotes Prototype as a way to focus on applications rather than browser bugs and contains links to documentation, extensions, and debugging tools to support Prototype development.

javascript
Make sure your server sets appropriate
headers on content so the client can cache
it. Don't expire content quickly unless it
changes quickly! (Hint: Your company logo
doesn't change quickly.)
Maximize Browser Cache Usage
To maximize bandwidth, request resources
from 2 or 3 domains at once; this is called
domain sharding.
A Content Distribution Network (CDN) can
provide high-speed delivery of commonly
used resources like jQuery.
Spread Requests Across Domains
Wait until after page load to fetch things
that aren't needed until well after the page
has been loaded:
● Content not initially visible
● Social media scripts and styles
● Advertising
● Page analytics
Load Non-Critical Stuff Later
Any code you include via a <script> tag has
complete control over the performance and
functionality of the page. It can do
anything it wants to the user.
Do You Trust Third-Party Code?

Recommended for you

orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers

This document discusses the JavaScript library Prototype and how it can be used to build dynamic user interfaces with Ajax techniques. It provides an overview of Prototype's features for simplifying Ajax calls, enhancing DOM manipulation, adding visual effects, and debugging JavaScript across browsers. The document promotes Prototype as a way to focus on applications rather than browser bugs and contains links to documentation, extensions, and debugging tools to support Prototype development.

javascript
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21

At Pinterest, we've begun experimenting in production with Web Components. This talk will discuss some challenges of implementing Web Components in a large scale production environment such as SEO concerns, reasonable fallbacks for browsers not supported by Platform.js, migrating a large code base component-by-component to mitigate risk, and optimizing page load and scroll performance.

polymerweb componentspinterest
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages

The document discusses how web browsers render web pages in 5 stages: 1) Constructing the object model from HTML tags and content 2) Creating the render tree by omitting non-visible nodes 3) Calculating layout and positioning during the layout stage 4) Painting pixels on the screen during the paint stage 5) Composite layers are ordered and combined during the composite stage It provides tips for optimizing performance such as minimizing critical resources, leveraging caching, prioritizing content, and reducing reflows and repaints.

high performing web pagesmake your website load fasterhow to build fast loading web sites
Internet Explorer
Compatibility Views
PrairieDevCon 2014 -  Web Doesn't Mean Slow
● Revives old crusty cold inside IE
● Restores old incompatible behavior
● Removes new fast JavaScript APIs
● Makes IE much slower and stranger
● Makes me (and users) cry
<meta http-equiv="X-UA-Compatible" content="IE=8">
How Compat View Works
● Don't use outdated jQuery or plugins
● Always specify a VALID doctype
● Don't use browser sniffing
○ Use Modernizr instead
How to Avoid Compat View

Recommended for you

wt mod3.pdf
wt mod3.pdfwt mod3.pdf
wt mod3.pdf

The document provides information about JavaScript and web development technologies. It includes a syllabus covering JavaScript concepts like client-side scripting, the Document Object Model, events, and forms. It also discusses JavaScript syntax like variables, conditionals, loops, functions, and objects. Key principles around progressive enhancement and graceful degradation are explained. The document contains examples and explanations of JavaScript features.

JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction

What is JavaScript? JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for enhancing the interaction of a user with the webpage. In other words, you can make your webpage more lively and interactive, with the help of JavaScript. JavaScript is also being used widely in game development and Mobile application development.

javascriptwebstack academy bangalorefullstack web developer
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance

The technology landscape is changing with every passing year. The technology landscape is changing with every passing year. More people than ever before are now online. It also means that the ways that people are accessing the web all over the world are changing, too. In this talk, I talk about the different techniques coupled with few case studies on how to improve front-end performance.

awscase studyperfmatters
modern.IE
Tools for Finding
Page Loading Issues
YSlow
Google PageSpeed

Recommended for you

Java script Session No 1
Java script Session No 1Java script Session No 1
Java script Session No 1

The document provides an overview of JavaScript including its history, uses, and how to implement it. Some key points covered include: - JavaScript was originally created by Netscape under the names Mocha and LiveScript, and is now known as ECMAScript. It is an interpreted scripting language that can be added to HTML pages or linked via external files. - JavaScript can be used to make web pages more dynamic by manipulating HTML objects, validating forms, detecting browsers, and handling events. It runs in the browser rather than on the server. - The document discusses different ways of implementing JavaScript including embedding it directly in HTML, linking external .js files, and issues around browser compatibility. -

historydata typesjavascript
Responsibilities of Fleet Managers and How TrackoBit Can Assist.pdf
Responsibilities of Fleet Managers and How TrackoBit Can Assist.pdfResponsibilities of Fleet Managers and How TrackoBit Can Assist.pdf
Responsibilities of Fleet Managers and How TrackoBit Can Assist.pdf

What do fleet managers do? What are their duties, responsibilities, and challenges? And what makes a fleet manager effective and successful? This blog answers all these questions.

fleet managersresponsibilities of fleet mana
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...

Unlock the full potential of mobile monitoring with ONEMONITAR. Our advanced and discreet app offers a comprehensive suite of features, including hidden call recording, real-time GPS tracking, message monitoring, and much more. Perfect for parents, employers, and anyone needing a reliable solution, ONEMONITAR ensures you stay informed and in control. Explore the key features of ONEMONITAR and see why it’s the trusted choice for Android device monitoring. Share this infographic to spread the word about the ultimate mobile spy app!

hidden mobile spy appmobile spy app for parentsmobile spy app for android
webpagetest.org
Scan Results Summary
Scan with IE9, Virginia, DSL
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
lang="en" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>Breaking News and Opinion on The Huffington Post</title>
IE Parser Restart (IE9 or earlier)

Recommended for you

Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx

Splunk Presentation

Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx

In this talk, we will explore strategies to optimize the success rate of storing and retaining new information. We will discuss scientifically proven ideal learning intervals and content structures. Additionally, we will examine how to create an environment that improves our focus while you remain in the “flow”. Lastly we will also address the influence of AI on learning capabilities. In the dynamic field of software development, this knowledge will empower you to accelerate your learning curve and support others in their learning journeys.

CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.

CViewSurvey is a SaaS-based Web & Mobile application that provides digital transformation to traditional paper surveys and feedback for customer & employee experience, field & market research that helps you evaluate your customer's as well as employee's loyalty. With our unique C.A.A.G. Collect, Analysis, Act & Grow approach; business & industry’s can create customized surveys on web, publish on app to collect unlimited response & review AI backed real-time data analytics on mobile & tablets anytime, anywhere. Data collected when offline is securely stored in the device, which syncs to the cloud server when connected to any network.

saasapplicationdigital marketing
Blocking Resources (Horizontal)
Invalid doctype, restarts because
of an X-UA-Compatible tag
Ran out of connections, had to wait
for previous downloads
Some JS files loaded before CSS,
which will delay rendering
TOO MANY REQUESTS FOR
JAVASCRIPT FILES !!!!!1!ONE!
Same Site with IE11
Same Site with Chrome
Same Site with iPhone 5 (3G)

Recommended for you

Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website

Lots of bloggers are using Google AdSense now. It’s getting really popular. With AdSense, bloggers can make money by showing ads on their websites. Read this important article written by the experienced designers of the best website designing company in Delhi –

website designing company in d
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …

Prada Group Reports Strong Growth in First Quarter …

Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies

A captivating AI chatbot PowerPoint presentation is made with a striking backdrop in order to attract a wider audience. Select this template featuring several AI chatbot visuals to boost audience engagement and spontaneity. With the aid of this multi-colored template, you may make a compelling presentation and get extra bonuses. To easily elucidate your ideas, choose a typeface with vibrant colors. You can include your data regarding utilizing the chatbot methodology to the remaining half of the template.

chatbot ppt
In this case, IE11 CPU usage was very high
starting at 2.5 seconds from initial request
and all during DOMContentLoaded
CPU and Bandwidth Usage
PrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean Slow
PrairieDevCon 2014 -  Web Doesn't Mean Slow

Recommended for you

A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf

A robust software testing strategy encompassing functional and non-functional testing is fundamental for development teams. These twin pillars are essential for ensuring the success of your applications. But why are they so critical? Functional testing rigorously examines the application's processes against predefined requirements, ensuring they align seamlessly. Conversely, non-functional testing evaluates performance and reliability under load, enhancing the end-user experience.

non functional testingfunctional testing
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)

Free ad-supported streaming takes off! Dive into the projected surge of FAST channels & market size from 2024 to 2027.

fast channelsfree streaming tvott
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024

Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024

Content Type by Count/Bytes
Filmstrip/Movie Views
But Wait … There's More!
Lots of Settings You Can Tweak

Recommended for you

ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation

ENISA Threat Landscape 2023

COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...

Hironori Washizaki, "Charting a Course for Equity: Strategies for Overcoming Challenges and Promoting Inclusion in the Metaverse", IEEE COMPSAC 2024 D&I Panel, 2024.

Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx

This PowerPoint presentation provides a comprehensive overview of Enterprise Resource Planning (ERP) systems. It covers the fundamental concepts, benefits, and key functionalities of ERP software, illustrating how it integrates various business processes into a unified system. From finance and HR to supply chain and customer relationship management, ERP facilitates efficient data management and decision-making across organizations. Whether you're new to ERP or looking to deepen your understanding, this presentation offers valuable insights into leveraging ERP for business success.

erp development serviceserp software developmenterp software services
● Simple scripting language
○ Lets you e.g. automate a login
● Share links to test runs
○ "Here's what our site looks like from Toronto
using IE8 on a DSL-speed link."
Even More!
Get to know
webpagetest.org
Are You Convinced Yet?
Maintaining a
Good Frame Rate
You Have 16 Milliseconds … Begin
60 frames/second ~ 16 milliseconds/frame
Long-running operations can make the page
appear "janky" rather than smooth.
Really long-running operations can make
the page appear unresponsive to the user.

Recommended for you

ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf

Ansys Mechanical enables you to solve complex structural engineering problems and make better, faster design decisions. With the finite element analysis (FEA) solvers available in the suite, you can customize and automate solutions for your structural mechanics problems and parameterize them to analyze multiple design scenarios. Ansys Mechanical is a dynamic tool that has a complete range of analysis tools.

mechanical engineeringsoftware3d software
active-directory-auditing-solution (2).pptx
active-directory-auditing-solution (2).pptxactive-directory-auditing-solution (2).pptx
active-directory-auditing-solution (2).pptx

Active Directory Audit

Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf

Discover the rich history of US Independence Day 2024, tracing its origins and evolution as a national holiday, and its significance today.

us independence day 2024us independence dayindependence day 2024
It Happens in 16 Milliseconds?
From High Performance Browser Networking by Ilya Grigorik (O'Reilly)
Your JavaScript shares a thread with the
browser's layout calculation and screen
painting; they can't happen in parallel.
Only a few things like downloading, image
decoding, and garbage collection are done
on independent threads.
To Make Things Worse...
Don't ask the browser to do a bunch of work
to answer a question if you could easily
find/remember the answer yourself.
Forced Layouts
Adventures in Dirty Layout
:visible
:hidden

Recommended for you

Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)

Our world runs on software. It governs all major aspects of our life. It is an enabler for research and innovation, and is critical for business competitivity. Traditional software engineering techniques have achieved high effectiveness, but still may fall short on delivering software at the accelerated pace and with the increasing quality that future scenarios will require. To attack this issue, some software paradigms raise the automation of software development via higher levels of abstraction through domain-specific languages (e.g., in model-driven engineering) and empowering non-professional developers with the possibility to build their own software (e.g., in low-code development approaches). In a software-demanding world, this is an attractive possibility, and perhaps -- paraphrasing Andy Warhol -- "in the future, everyone will be a developer for 15 minutes". However, to make this possible, methods are required to tweak languages to their context of use (crucial given the diversity of backgrounds and purposes), and the assistance to developers throughout the development process (especially critical for non-professionals). In this keynote talk at ICSOFT'2024 I presented enabling techniques for this vision, supporting the creation of families of domain-specific languages, their adaptation to the usage context; and the augmentation of low-code environments with assistants and recommender systems to guide developers (professional or not) in the development process.

softwaremodel-driven engineeringdomain-specific languages
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI

Sami provided a beginner-friendly introduction to Amazon Web Services (AWS), covering essential terms, products, and services for cloud deployment. Participants explored AWS' latest Gen AI offerings, making it accessible for those starting their cloud journey or integrating AI into coding practices.

cfmlcoldfusionboxlang
Cultural Shifts: Embracing DevOps for Organizational Transformation
Cultural Shifts: Embracing DevOps for Organizational TransformationCultural Shifts: Embracing DevOps for Organizational Transformation
Cultural Shifts: Embracing DevOps for Organizational Transformation

Mindfire Solutions specializes in DevOps services, facilitating digital transformation through streamlined software development and operational efficiency. Their expertise enhances collaboration, accelerates delivery cycles, and ensures scalability using cloud-native technologies. Mindfire Solutions empowers businesses to innovate rapidly and maintain competitive advantage in dynamic market landscapes.

devops servicesdevops consulting servicesexpertise devops
"The Dot That Ate Performance"
console.time("init");
$("body").removeClass("activated");
$("p:visible").css("color", "blue");
console.timeEnd("init");
● Select all <p> in the document
● Ask the browser if any are visible
○ Browser may need to recalculate layout
dimensions if the document has changed
What $("p:visible") Means
"Hey Browser Can I Bug You?"
30 ms
What If We Track Visibility?
console.time("init");
$("body").removeClass("activated");
$("p.visible").css("color", "blue");
console.timeEnd("init");
Note: Normally you'd use a more descriptive class name than "visible"!

Recommended for you

"Hey Browser, I Know This"
8 ms
● Avoid document-wide style/class change
○ Use data- attrs or jQuery .data() to store
non-stylistic data unrelated to presentation
● Get JavaScript out of the path
○ CSS transitions
○ CSS animations
Avoiding Forced Layout
The Softer Side
of Performance
A page that loads quickly is great, but
letting the user accomplish their task is
your ultimate goal. Reduce the amount of
waiting, clicking, typing, and searching the
user must do to accomplish their task.
Optimize for User Tasks

Recommended for you

Twitter: @davemethvin
GitHub: @dmethvin
IRC-Freenode: DaveMethvin #jquery-dev
Email: dave@jquery.com
$("#talk")
.find(".useful")
.append(contactInfo)
.end();

More Related Content

What's hot

Real World Web components
Real World Web componentsReal World Web components
Real World Web components
Jarrod Overson
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
Marc Grabanski
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
mennovanslooten
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
Nicholas Zakas
 
The Onion
The OnionThe Onion
The Onion
Jörn Zaefferer
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
jeresig
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
Nicholas Zakas
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
BorisMoore
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
dmethvin
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
Nicholas Zakas
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
Ashlimarie
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
dmethvin
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
Raymond Camden
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Merger
scottgonzalez
 
Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSChristmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JS
Niamh Foley
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
Zoe Gillenwater
 
Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015
Matt Raible
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
Stoyan Stefanov
 

What's hot (20)

Real World Web components
Real World Web componentsReal World Web components
Real World Web components
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
Learning from the Best jQuery Plugins
Learning from the Best jQuery PluginsLearning from the Best jQuery Plugins
Learning from the Best jQuery Plugins
 
New Perspectives on Performance
New Perspectives on PerformanceNew Perspectives on Performance
New Perspectives on Performance
 
Mobile Web Speed Bumps
Mobile Web Speed BumpsMobile Web Speed Bumps
Mobile Web Speed Bumps
 
The Onion
The OnionThe Onion
The Onion
 
Learning jQuery @ MIT
Learning jQuery @ MITLearning jQuery @ MIT
Learning jQuery @ MIT
 
Browser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom MenaceBrowser Wars Episode 1: The Phantom Menace
Browser Wars Episode 1: The Phantom Menace
 
Harness jQuery Templates and Data Link
Harness jQuery Templates and Data LinkHarness jQuery Templates and Data Link
Harness jQuery Templates and Data Link
 
jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013jQuery Conference Austin Sept 2013
jQuery Conference Austin Sept 2013
 
High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)High Performance JavaScript (Amazon DevCon 2011)
High Performance JavaScript (Amazon DevCon 2011)
 
Web Development for UX Designers
Web Development for UX DesignersWeb Development for UX Designers
Web Development for UX Designers
 
State of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront ConferenceState of jQuery - AspDotNetStorefront Conference
State of jQuery - AspDotNetStorefront Conference
 
Don't Over-React - just use Vue!
Don't Over-React - just use Vue!Don't Over-React - just use Vue!
Don't Over-React - just use Vue!
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
jQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great MergerjQuery UI & Mobile - The Great Merger
jQuery UI & Mobile - The Great Merger
 
Christmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JSChristmas Trees Made with HTML CSS and JS
Christmas Trees Made with HTML CSS and JS
 
CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)CSS Lessons Learned the Hard Way (Generate Conf)
CSS Lessons Learned the Hard Way (Generate Conf)
 
Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015Get Hip with JHipster - Denver JUG 2015
Get Hip with JHipster - Denver JUG 2015
 
Don't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web ApplicationsDon't make me wait! or Building High-Performance Web Applications
Don't make me wait! or Building High-Performance Web Applications
 

Similar to PrairieDevCon 2014 - Web Doesn't Mean Slow

Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
brucelawson
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
Suresh Patidar
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
WordPress
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbbas
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
MrAbas
 
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Izabela Wisniewska
 
20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performance
Andrew Siemer
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
Timothy Fisher
 
Validating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data IntegrityValidating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data Integrity
Giacomo Zecchini
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
Rachel Andrew
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
Susan Winters
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
Chris Love
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
tutorialsruby
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
tutorialsruby
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
Chris Danford
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
Nilesh Bafna
 
wt mod3.pdf
wt mod3.pdfwt mod3.pdf
wt mod3.pdf
VinayKumarV24
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
WebStackAcademy
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
Sagar Desarda
 
Java script Session No 1
Java script Session No 1Java script Session No 1
Java script Session No 1
Saif Ullah Dar
 

Similar to PrairieDevCon 2014 - Web Doesn't Mean Slow (20)

Bruce Lawson Opera Indonesia
Bruce Lawson Opera IndonesiaBruce Lawson Opera Indonesia
Bruce Lawson Opera Indonesia
 
Developing high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web workerDeveloping high performance and responsive web apps using web worker
Developing high performance and responsive web apps using web worker
 
implement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflowimplement lighthouse-ci with your web development workflow
implement lighthouse-ci with your web development workflow
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Web Fundamentals Crash Course
Web Fundamentals Crash CourseWeb Fundamentals Crash Course
Web Fundamentals Crash Course
 
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...Brighton SEO July 2021   How JavaScript is preventing you from passing Core W...
Brighton SEO July 2021 How JavaScript is preventing you from passing Core W...
 
20 tips for website performance
20 tips for website performance20 tips for website performance
20 tips for website performance
 
Developing High Performance Web Apps
Developing High Performance Web AppsDeveloping High Performance Web Apps
Developing High Performance Web Apps
 
Validating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data IntegrityValidating Session Isolation for Web Crawling to Provide Data Integrity
Validating Session Isolation for Web Crawling to Provide Data Integrity
 
Business of Front-end Web Development
Business of Front-end Web DevelopmentBusiness of Front-end Web Development
Business of Front-end Web Development
 
What is HTML 5?
What is HTML 5?What is HTML 5?
What is HTML 5?
 
A Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page ApplicationsA Day Building Fast, Responsive, Extensible Single Page Applications
A Day Building Fast, Responsive, Extensible Single Page Applications
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
orcreatehappyusers
orcreatehappyusersorcreatehappyusers
orcreatehappyusers
 
Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21Web Components at Scale, HTML5DevConf 2014-10-21
Web Components at Scale, HTML5DevConf 2014-10-21
 
Building high performing web pages
Building high performing web pagesBuilding high performing web pages
Building high performing web pages
 
wt mod3.pdf
wt mod3.pdfwt mod3.pdf
wt mod3.pdf
 
JavaScript - Chapter 3 - Introduction
 JavaScript - Chapter 3 - Introduction JavaScript - Chapter 3 - Introduction
JavaScript - Chapter 3 - Introduction
 
Improving frontend performance
Improving frontend performanceImproving frontend performance
Improving frontend performance
 
Java script Session No 1
Java script Session No 1Java script Session No 1
Java script Session No 1
 

Recently uploaded

Responsibilities of Fleet Managers and How TrackoBit Can Assist.pdf
Responsibilities of Fleet Managers and How TrackoBit Can Assist.pdfResponsibilities of Fleet Managers and How TrackoBit Can Assist.pdf
Responsibilities of Fleet Managers and How TrackoBit Can Assist.pdf
Trackobit
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
onemonitarsoftware
 
Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx
sudsdeep
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
SimonedeGijt
 
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
bhatinidhi2001
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
e-Definers Technology
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
908dutch
 
Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
MaisnamLuwangPibarel
 
A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf
kalichargn70th171
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
Roshan Dwivedi
 
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
ThousandEyes
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
sofiafernandezon
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
Hironori Washizaki
 
Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx
Mitchell Marsh
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
sachin chaurasia
 
active-directory-auditing-solution (2).pptx
active-directory-auditing-solution (2).pptxactive-directory-auditing-solution (2).pptx
active-directory-auditing-solution (2).pptx
sudsdeep
 
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Livetecs LLC
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
miso_uam
 
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI
Ortus Solutions, Corp
 
Cultural Shifts: Embracing DevOps for Organizational Transformation
Cultural Shifts: Embracing DevOps for Organizational TransformationCultural Shifts: Embracing DevOps for Organizational Transformation
Cultural Shifts: Embracing DevOps for Organizational Transformation
Mindfire Solution
 

Recently uploaded (20)

Responsibilities of Fleet Managers and How TrackoBit Can Assist.pdf
Responsibilities of Fleet Managers and How TrackoBit Can Assist.pdfResponsibilities of Fleet Managers and How TrackoBit Can Assist.pdf
Responsibilities of Fleet Managers and How TrackoBit Can Assist.pdf
 
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
Discover the Power of ONEMONITAR: The Ultimate Mobile Spy App for Android Dev...
 
Splunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptxSplunk_Remote_Work_Insights_Overview.pptx
Splunk_Remote_Work_Insights_Overview.pptx
 
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptxWired_2.0_Create_AmsterdamJUG_09072024.pptx
Wired_2.0_Create_AmsterdamJUG_09072024.pptx
 
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.CViewSurvey Digitech Pvt Ltd that  works on a proven C.A.A.G. model.
CViewSurvey Digitech Pvt Ltd that works on a proven C.A.A.G. model.
 
Top 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your WebsiteTop 10 Tips To Get Google AdSense For Your Website
Top 10 Tips To Get Google AdSense For Your Website
 
Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …Prada Group Reports Strong Growth in First Quarter …
Prada Group Reports Strong Growth in First Quarter …
 
Development of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML TechnologiesDevelopment of Chatbot Using AI\ML Technologies
Development of Chatbot Using AI\ML Technologies
 
A Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdfA Comparative Analysis of Functional and Non-Functional Testing.pdf
A Comparative Analysis of Functional and Non-Functional Testing.pdf
 
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
FAST Channels: Explosive Growth Forecast 2024-2027 (Buckle Up!)
 
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
Cisco Live Announcements: New ThousandEyes Release Highlights - July 2024
 
ENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentationENISA Threat Landscape 2023 documentation
ENISA Threat Landscape 2023 documentation
 
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
COMPSAC 2024 D&I Panel: Charting a Course for Equity: Strategies for Overcomi...
 
Overview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptxOverview of ERP - Mechlin Technologies.pptx
Overview of ERP - Mechlin Technologies.pptx
 
ANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdfANSYS Mechanical APDL Introductory Tutorials.pdf
ANSYS Mechanical APDL Introductory Tutorials.pdf
 
active-directory-auditing-solution (2).pptx
active-directory-auditing-solution (2).pptxactive-directory-auditing-solution (2).pptx
active-directory-auditing-solution (2).pptx
 
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdfIndependence Day Hasn’t Always Been a U.S. Holiday.pdf
Independence Day Hasn’t Always Been a U.S. Holiday.pdf
 
Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)Software development... for all? (keynote at ICSOFT'2024)
Software development... for all? (keynote at ICSOFT'2024)
 
Intro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AIIntro to Amazon Web Services (AWS) and Gen AI
Intro to Amazon Web Services (AWS) and Gen AI
 
Cultural Shifts: Embracing DevOps for Organizational Transformation
Cultural Shifts: Embracing DevOps for Organizational TransformationCultural Shifts: Embracing DevOps for Organizational Transformation
Cultural Shifts: Embracing DevOps for Organizational Transformation
 

PrairieDevCon 2014 - Web Doesn't Mean Slow

  • 2. ● Maintains jQuery code and docs ● Supports web developers and standards ● Participates in standards process ○ W3C web standards ○ ECMA 262 (JavaScript) jQuery Foundation
  • 4. jQuery Team - World Wide
  • 7. "JavaScript / jQuery / browsers are a bad developer environment!"
  • 9. How the Programmer Sees It JavaScript Browser
  • 10. Web Developer's Reality Browser JavaScript Mouse CSS HTML Content caching Keyboard Touch Screen paints Layout calculation Image decoding Focus management Network requests
  • 11. Web Developer's Reality Browser JavaScript Mouse CSS HTML Content caching Keyboard Touch Screen paints Layout calculation Image decoding Focus management Network requests Optional
  • 12. How Do I Make My Page Fast?
  • 13. How Do I Make My Page Fast? 1) Find slow stuff 2) Make it not slow
  • 14. What you can measure using tools today How Do I Find the Slow Stuff?
  • 15. What you can measure using tools today What you should measure How Do I Find the Slow Stuff?
  • 17. JavaScript Loop Optimization Slowest looping style still only takes 140 microseconds to do 10 iterations of a loop
  • 18. “Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time; premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.” --Donald Knuth
  • 19. “Programmers waste enormous amounts of time thinking about, or worrying about, the speed of noncritical parts of their programs, and these attempts at efficiency actually have a strong negative impact when debugging and maintenance are considered. We should forget about small efficiencies, say about 97% of the time; premature optimization is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.” --Donald Knuth
  • 21. Client-side issues often can be solved by "peephole" optimizations and don't require massive architecture changes Many — most! — speedups can be done near the end of the project (or even after deployment, cough) Finding and Fixing the 3 Percent
  • 22. With all the other things going on in a web page, it's unlikely the run time of your JavaScript is in the 3% worst case. However, your JavaScript may be doing things that cause bad performance by making the browser do more work. It's Not the JavaScript, Probably
  • 23. Use the tools available (online and inside the browser) to determine where the bottlenecks lie, and fix them. Don't Guess, Measure
  • 26. <!doctype html> <html> <head> <script src="jquery.js"></script> <link rel="stylesheet" href="main.css" /> </head> <body> <p>An awesome web page</p> <img src="cat.jpg" alt="Kitty!" /> <script> document.write('<img src="nope.gif" />'); </script> Browser Fetches the HTML Page
  • 27. <!doctype html> <html> <head> <script src="jquery.js"></script> <link rel="stylesheet" href="main.css" /> </head> <body> <p>An awesome web page</p> <img src="cat.jpg" alt="Kitty!" /> <script> document.write('<img src="nope.jpg" />'); </script> Scan for Fetchable Resources
  • 28. <!doctype html> <html> <head> <script src="jquery.js"></script> <link rel="stylesheet" href="main.css" /> </head> <body> <p>An awesome web page</p> <img src="cat.jpg" alt="Kitty!" /> <script> document.write('<img src="nope.gif" />'); </script> Parse/Run JavaScript (In-Place)
  • 29. ● HTML is fully loaded, may be partially shown to the user already ● Images may not be loaded yet ● DOMContentLoaded event ● jQuery lets you have functions to run ○ $(document).ready() ● These may modify the document Document Ready
  • 30. The User Sees Your Page!
  • 31. Now It May Seem Obvious, But... Resources outside the HTML file can't be prefetched, resulting in further delays e.g. stuff injected by JavaScript/jQuery JS frameworks (Angular, Backbone) or initial content from client-side templates can make the prefetcher useless
  • 32. From top to bottom of the page: ● Render-blocking CSS ● Fonts ● Scripts Avoid CSS @import and font loading when possible, they block rendering Resource Order Is Important
  • 35. ● Avoid 3xx redirects ● Start requests early ● Minimize number of requests ● Minimize byte size of requests ● Maximize browser cache usage ● Spread requests across domains ● Load non-critical stuff later Rules of the Road
  • 36. Redirecting to another page penalizes load time by a full network round-trip! Unfortunately this can't always be avoided, search engines like "canonical URLs". Avoid 3xx redirects
  • 37. Put references to resources (e.g., images) in the HTML first delivered to the browser, so the prefetcher can "see" them. Start Requests Early
  • 38. Manual Prefetching Lets the browser get a running start on template content or later pages. <link rel="dns-prefetch" href="http://media.mysite.com"> <link rel="prefetch" href="/img/kitten.jpg"> <link rel="prefetch" href="/step2.html">
  • 39. Combine similar resources (scripts, CSS, images) and download as a single file (or at least a small number of files). Weigh tradeoff of combining vs. CDNs or reusing subsets on multiple pages to take advantage of browser caching. Minimize Number of Requests
  • 40. Use tools like CSSMin and Uglify.js to squeeze out useless bytes in source files. Compress images, avoid HTML cropping. Enable gzip compression on the server. Minimize Size of Requests
  • 41. Make sure your server sets appropriate headers on content so the client can cache it. Don't expire content quickly unless it changes quickly! (Hint: Your company logo doesn't change quickly.) Maximize Browser Cache Usage
  • 42. To maximize bandwidth, request resources from 2 or 3 domains at once; this is called domain sharding. A Content Distribution Network (CDN) can provide high-speed delivery of commonly used resources like jQuery. Spread Requests Across Domains
  • 43. Wait until after page load to fetch things that aren't needed until well after the page has been loaded: ● Content not initially visible ● Social media scripts and styles ● Advertising ● Page analytics Load Non-Critical Stuff Later
  • 44. Any code you include via a <script> tag has complete control over the performance and functionality of the page. It can do anything it wants to the user. Do You Trust Third-Party Code?
  • 47. ● Revives old crusty cold inside IE ● Restores old incompatible behavior ● Removes new fast JavaScript APIs ● Makes IE much slower and stranger ● Makes me (and users) cry <meta http-equiv="X-UA-Compatible" content="IE=8"> How Compat View Works
  • 48. ● Don't use outdated jQuery or plugins ● Always specify a VALID doctype ● Don't use browser sniffing ○ Use Modernizr instead How to Avoid Compat View
  • 50. Tools for Finding Page Loading Issues
  • 51. YSlow
  • 55. Scan with IE9, Virginia, DSL
  • 56. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" /> <title>Breaking News and Opinion on The Huffington Post</title> IE Parser Restart (IE9 or earlier)
  • 57. Blocking Resources (Horizontal) Invalid doctype, restarts because of an X-UA-Compatible tag Ran out of connections, had to wait for previous downloads Some JS files loaded before CSS, which will delay rendering TOO MANY REQUESTS FOR JAVASCRIPT FILES !!!!!1!ONE!
  • 59. Same Site with Chrome
  • 60. Same Site with iPhone 5 (3G)
  • 61. In this case, IE11 CPU usage was very high starting at 2.5 seconds from initial request and all during DOMContentLoaded CPU and Bandwidth Usage
  • 65. Content Type by Count/Bytes
  • 67. But Wait … There's More!
  • 68. Lots of Settings You Can Tweak
  • 69. ● Simple scripting language ○ Lets you e.g. automate a login ● Share links to test runs ○ "Here's what our site looks like from Toronto using IE8 on a DSL-speed link." Even More!
  • 70. Get to know webpagetest.org Are You Convinced Yet?
  • 72. You Have 16 Milliseconds … Begin 60 frames/second ~ 16 milliseconds/frame Long-running operations can make the page appear "janky" rather than smooth. Really long-running operations can make the page appear unresponsive to the user.
  • 73. It Happens in 16 Milliseconds? From High Performance Browser Networking by Ilya Grigorik (O'Reilly)
  • 74. Your JavaScript shares a thread with the browser's layout calculation and screen painting; they can't happen in parallel. Only a few things like downloading, image decoding, and garbage collection are done on independent threads. To Make Things Worse...
  • 75. Don't ask the browser to do a bunch of work to answer a question if you could easily find/remember the answer yourself. Forced Layouts
  • 76. Adventures in Dirty Layout :visible :hidden
  • 77. "The Dot That Ate Performance" console.time("init"); $("body").removeClass("activated"); $("p:visible").css("color", "blue"); console.timeEnd("init");
  • 78. ● Select all <p> in the document ● Ask the browser if any are visible ○ Browser may need to recalculate layout dimensions if the document has changed What $("p:visible") Means
  • 79. "Hey Browser Can I Bug You?" 30 ms
  • 80. What If We Track Visibility? console.time("init"); $("body").removeClass("activated"); $("p.visible").css("color", "blue"); console.timeEnd("init"); Note: Normally you'd use a more descriptive class name than "visible"!
  • 81. "Hey Browser, I Know This" 8 ms
  • 82. ● Avoid document-wide style/class change ○ Use data- attrs or jQuery .data() to store non-stylistic data unrelated to presentation ● Get JavaScript out of the path ○ CSS transitions ○ CSS animations Avoiding Forced Layout
  • 83. The Softer Side of Performance
  • 84. A page that loads quickly is great, but letting the user accomplish their task is your ultimate goal. Reduce the amount of waiting, clicking, typing, and searching the user must do to accomplish their task. Optimize for User Tasks
  • 85. Twitter: @davemethvin GitHub: @dmethvin IRC-Freenode: DaveMethvin #jquery-dev Email: dave@jquery.com $("#talk") .find(".useful") .append(contactInfo) .end();