JavaScript High Performance
3.9 (21 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
422 students enrolled
Wishlisted Wishlist

Please confirm that you want to add JavaScript High Performance to your Wishlist.

Add to Wishlist

JavaScript High Performance

Leverage the power of several performance enhancing coding techniques in JavaScript and take your app to the next level
3.9 (21 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
422 students enrolled
Last updated 7/2015
Current price: $10 Original price: $95 Discount: 89% off
1 day left at this price!
30-Day Money-Back Guarantee
  • 4.5 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Have a coupon?
What Will I Learn?
Learn how to cache and minify HTML, CSS and JavaScript to optimize app performance
Familiarise yourself with best practices in order to create effective code
Implement various efficient methods for referring to functions and classes
Simplify loops and arrays to make your app faster than ever
Beautify your app without compromising speed, using smoother animations
Identify memory leaks and avoid them, using various techniques to improve app functionality
Improve app stability by enhancing JavaScript events
View Curriculum
  • The course follows a strict hands-on approach and introduces you to various methods which will help you maintain and rev-up your JavaScript based app. Using bad sample code, learn various ways to transform code and discover how to implement this yourself in your own app.

One of the most common challenges JavaScript developers face is creating a number of applications and maintaining them to run smoothly. The aim of this course is to deliver critical tips and techniques to help you create smarter and faster applications.

JavaScript High Performance focusses on making your JavaScript code run more efficiently, raising your app performance.Start off by minifying and caching your code, be it JavaScript, HTML or CSS. Walk through different methods including creating location references, condensing var definitions and so on, helping you gain a solid foundation of the basic practical approaches. Next, discover the most potent ways to refer to functions and classes, learn how to streamline loops and arrays, and detect and avoid any memory leaks. Also, improve the appearance of your app by using sleek animations, without compromising performance.

By the end of this course, you'll be confident in dynamically improving the performance of your app.

The course follows a strict hands-on approach and introduces you to various methods which will help you maintain and rev-up your JavaScript based app. Using bad sample code, learn various ways to transform code and discover how to implement this yourself in your own app.

About the Author

Ben Fhala discovered his passion for data visualization six years ago while he was working at Parsons in New York, in their data visualization department PIIM. He is the owner of the online video training school and an Adobe ACP. He enjoys spending most of his time learning and teaching, and has a love for visual programming and visualization in general. Ben has had the honour of developing applications for US Congress members, Prime Ministers, and Presidents around the world. He has built many interactive experiences for companies such as Target, AT&T, Crayola, Marriott, Neutrogena, and Nokia. He has technically directed many award-winning projects and has been a part of teams that have won three Agency of the Year awards.

Who is the target audience?
  • Are you familiar with JavaScript? Do you want to develop brilliant responsive apps? Then this course is perfect for you! Discover not only problem-solving techniques, but also various tricks to totally avoid problems and build powerful apps.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 40 Lectures Collapse All 40 Lectures 04:14:46
Minifying and Caching Your Site
4 Lectures 27:13

One of the simplest and yet the most critical things is to cache your code so that it's served in the best way possible to your users.
Caching Your Scripts

The problem with the caching mechanism is that it is complicated to make changes to our code. In this video, we will together create a solution that will work around this problem, making our code robust.

Creating a Cache Buster

For an application to work effectively, it is necessary to send out the smallest possible files. In this video, you will learn how to create a dynamic minifying mechanism to make sure that our code will always be sent in its smallest possible size.
Minifying Your Output
Covering the Foundations
6 Lectures 26:51
Declaring a variable properly is an important step in making your application functional. In this video, you will understand the best ways to declare and define variables.
Preview 03:18

One more important approach towards improving performance of an application is to define it at the right place. In this video, we'll take a look at the best place and scope to define our variables.
Creating Location References

Condensing var definitions is very helpful in improving the processing speed. In this video, we'll see how exactly we can do that.
Condensing var Definitions

Many a times while coding, comparing variables in an exact manner is a very important factor. In this video, we'll see how to compare variables explicitly.
Comparing Explicitly When Appropriate

One of the most common actions with strings is concatenating them. The question is: Is there a better way to concatenate strings? The answer is yes, and you will learn how to do it better in this video.
Using String Accumulator-style

At times, you might have too many strings to concatenate. One of the effective ways to do so is by using arrays. We will see why and how it works in this video.

Building Strings with Arrays
Going Beyond the Basics
5 Lectures 18:23
The eval function is an important factor when it comes to coding in JavaScript. We'll see what exactly it does and how we can avoid it.
Preview 04:04

We'll take a deeper look into eval and try to avoid it by using a different method to call the function.

Talking to Functions

Using eval can lead to some security issues. We'll see how to create a function without using eval dynamically.

Avoiding eval

At times, there might be a lot of anonymous functions, and they can easily create memory leaks. We'll see the steps involved in avoiding the usage of anonymous functions and why it's so important.
Reducing the Use of Anonymous Functions

While working with OOP, there are a few things we need to avoid to improve the performance of our app. We'll take a look at the best places to define our properties and methods when it comes to JavaScript OOP.
OOP – Defining Class Methods and Properties
Looping, Arrays, and Conditions
7 Lectures 48:59
There are different loops we can use in coding. Let's take a look at which is the best type of loop to use and why it is more effective.
Preview 02:29

One of the most important rules when it comes to effective code is the simplicity of your code. Let's take a look at how we can simplify our code and start with loops and events.

Simplifying Your Loops – Round 1

We can improve our performance further by reducing the footprint of various loops. We'll do it by resetting our functions.

Reducing the Loop Footprint

Memory leak is one of the many things you would really want to avoid to improve an app's performance. The most common places where you find them are inside loops and the structures of arrays. We will figure out a way to find and avoid memory leaks.

Loops, Arrays, and Memory Leaks

Arrays are another important factor in coding. We will focus on the best ways to define arrays.
Preallocating Size to an Array

Doing more with less is probably the most important aspect of building an application. We'll see how we can write effective code by avoiding the unnecessary code.

Avoiding the Unnecessary

Reducing the loop footprint improves our code drastically, and we will continue looking at ways by which we can reduce it. The less we have of them, the better.
Putting Code Where It Should Be
Optimizing Events and Time
5 Lectures 42:06
Circular references usually lead to memory leaks. We will dedicate some time to circular references, and you will learn what they are and how to avoid them.
Preview 10:49

We can reuse events to improve the performance of our app, as fewer events are always better. You will learn how to reuse events when possible.
Using Less Events to Do More

Usually, performance ends up being a question of speed as well. What is more important? More details or more speed? The less activitiesgoing on, the less application will refreshe and the more stable it becomes.
Trading Smoothness for Speed

There are a few common mistakes that developers make while working with intervals. We will take a look at intervals, common mistakes made with them, and how to avoid them, eventually getting rid of some more memory leaks from our application.
Clearing Memory Leaks by Always Clearing Intervals

More intervals mean more things going on at the same time, which leads to a higher chance of memory leaks. You will learn how to reduce your interval footprint.

How to Avoid Running Multiple Intervals
The DOM and CSS
5 Lectures 43:12

The less the time for which you interact with the DOM, the better. Each manipulation forcesthe screen to refresh, and as such we wish to avoid making DOM calls as much as we can. We will improve DOM multiplication.

Preview 13:24

Document reflow is another thing we need to take care of when coding. We will fix our original code to create fewer DOM updates.
Reducing Document Reflows

Finding a balance between animation and performance is a major task and we will see how exactly we can do this.

Making It Animate Smoothly

Animating classes instead of styles is very important for improving performance. We'll take a look at how we can do this.
Changing Classes and Not Styles

We will talk about dynamically loading up scripts when we need them instead of loading them up in advance.
Adding Scripts as You Need Them Dynamically
Data and leaks
8 Lectures 48:02
When sending information to a server, the first thing is you would want to validate is that the data was filled out correctly on your client-side. HTML5 comes with built-in capabilities when it comes to form validation, which we will take a look at.
Preview 04:44

As there are some browsers that do not support HTML5 validation, we can create our own logic to validate the form. We'll create logic for this purpose.
Moving Data Processing to the Client Side

There are different data types we can use to transfer information from the server to the client. We'll take a look at which data type is best when it comes to this.
What Data Types to Use?

When it comes to data, the less it travels the better. We will try to do this using caching.
Caching Data

Working with HTML collections directly can create a memory leak. We will discuss why this is so and how to avoid it.

The Issue with Working Directly with HTML Collections

There are a few problems while working directly with HTML collections. You will learn how to convert these collections into arrays to avoid these issues.
Converting Collection Objects into Arrays

Analyzing our app performance will help us to avoid app crashing. We will create an FPS counter that will help us measure how well our application refresh content on the screen.
FPS and High Resolution Time – HRT

Profiling help us understand what is happening under the hood of our application. These tools help you get a better understanding of the code behind the hood and its effects on the CPU, memory distribution, and object allocation over time.

JavaScript Profiling and Memory Leaks
About the Instructor
Packt Publishing
3.9 Average rating
4,083 Reviews
32,735 Students
318 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.