JavaScript High Performance

Leverage the power of several performance enhancing coding techniques in JavaScript and take your app to the next level
3.9 (17 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.
396 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 40
  • Length 4.5 hours
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 6/2015 English

Course Description

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.

What are the requirements?

  • 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.

What am I going to get from this course?

  • 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

What 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.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Minifying and Caching Your Site
Course Overview
Preview
02:02
11:12
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.
04:57

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.

09:02
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.
Section 2: Covering the Foundations
03:18
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.
09:02
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.
05:00
Condensing var definitions is very helpful in improving the processing speed. In this video, we'll see how exactly we can do that.
02:53
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.
03:26
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.
03:12

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.

Section 3: Going Beyond the Basics
04:04
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.
02:13

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

04:48

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

03:23
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.
03:55
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.
Section 4: Looping, Arrays, and Conditions
02:29
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.
05:11

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.

09:30

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

05:21

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.

09:15
Arrays are another important factor in coding. We will focus on the best ways to define arrays.
08:43

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.

08:30
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.
Section 5: Optimizing Events and Time
10:49
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.
08:09
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.
07:11
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.
03:04
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.
12:53

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.

Section 6: The DOM and CSS
13:24

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.

07:00
Document reflow is another thing we need to take care of when coding. We will fix our original code to create fewer DOM updates.
11:30

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

07:11
Animating classes instead of styles is very important for improving performance. We'll take a look at how we can do this.
04:07
We will talk about dynamically loading up scripts when we need them instead of loading them up in advance.
Section 7: Data and leaks
04:44
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.
09:41
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.
01:24
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.
01:44
When it comes to data, the less it travels the better. We will try to do this using caching.
04:44

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

03:22
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.
16:52
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.
05:31

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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Packt Publishing, Tech Knowledge in Motion

Over the past ten years Packt Publishing has developed an extensive catalogue of over 2000 books, e-books and video courses aimed at keeping IT professionals ahead of the technology curve. From new takes on established technologies through to the latest guides on emerging platforms, topics and trends – Packt's focus has always been on giving our customers the working knowledge they need to get the job done. Our Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.

Ready to start learning?
Take This Course