How to implement lazy loading in JavaScript applications

Home

Web Front-end

JS Tutorial

How to implement lazy loading in JavaScript applications_Basic knowledge

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:53 PM

javascript load

Whether it is simple or complex, web applications are composed of some HTML, JavaScript, and CSS files. Usually developers will use third-party JavaScript frameworks such as JQuery, Knockout, Underscore, etc. to improve development speed. Since these JavaScript frameworks have been developed for specific purposes and have been "proven", it is more appropriate to use them directly than to implement the required functions from scratch. However, as the complexity of applications continues to increase, it becomes increasingly important to write clean, low-coupling, and maintainable code. In this article, I will explain how the RequireJS framework helps application developers write more modular code and how it improves application performance by lazily loading JavaScript files. We will start without the RequireJS framework, and then refactor it using RequireJS in the next chapter.
The following HTML page contains a

element with the id "message". When the user visits this page, it will display the order ID and customer name information.

The Common.JS file contains the definitions of two modules - Order and Customer. The function showData is combined with the body of the page. It puts the information to be output into the page by calling the write function. As an example, I hardcoded the Id to be 1 and the customer name to be Prasad in the showData function.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript NonRequireJS</title>
<script src="common.js" type="text/javascript"></script>
</head>
<body>
<strong>Display data without RequireJS</strong>
<p id="message" />
<script type="text/javascript">
showData();
</script>
</body>
</html>
Common.JS

Copy after login

function write(message) {
  document.getElementById('message').innerHTML += message + '</br>';
}
  
function showData() {
  var o = new Order(1, "Prasad");
  write("Order Id : " + o.id + " Customer Name : " + o.customer.name);
}
  
function Customer(name) {
  this.name = name;
  return this;
}
  
function Order(id, customerName) {
  this.id = id;
  this.customer = new Customer(customerName);
  return this;
}

Copy after login

Open this page in your browser, you will see the following information.

201562590347564.png (300×172) Although the above code is able to display the output, it still has some problems:

The Common.JS file contains all the functions that need to be defined (write, showData), and the modules (Order, Customer) are difficult to maintain and reuse. If you want to reuse the write function in other pages and reference the above JavaScript file, then you have also imported other functions and modules that may not be needed for this page.

The Order module (or "class" in object-oriented terms) creates an instance of the Customer module during the initialization process. This means that the Order module depends on the Customer module. The tight coupling between these modules makes it difficult to refactor and maintain during future optimization.
Whenever the client requests this page, the Common.JS file will be loaded into the DOM. In the above example, although we only need to output information on the page, we still load those unnecessary modules (Customer, Order) into memory. Loading unnecessary application resources (JavaScript, CSS, image files, etc.) can reduce application performance.
The modules in the Common.JS file can be separated into different JavaScript files, but when the application becomes more and more complex, it is difficult to judge the dependencies between JavaScript files and the loading order of files that need to be loaded. .

Build applications with RequireJS

Now let’s look at the refactored code. The HTML code below references the Require.JS file. The data-main attribute defines the only entry point for this page. In the scenario below, it tells RequireJS to load Main.js on startup.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript RequireJS</title>
<script src="Require.Js" type="text/javascript" data-main="Main.js"></script>
</head>
<body>
<strong>Display data using RequireJS</strong>
<p id="message" />
</body>
</html>

Copy after login

Main.JS

Since this file has been specified via the data-main attribute, RequireJS will load it as quickly as possible. This file uses functions of the RequireJS framework to determine and define dependencies on other JavaScript files. In the code snippet below, the first parameter represents the dependency (depending on the Order.JS file), and the second parameter is a callback function. RequireJS analyzes all dependencies and loads them, then executes this callback function. Please note that the value of the first parameter (Order) must be consistent with the file name (Order.JS).

require(["Order"], function (Order) {
  var o = new Order(1, "Prasad");
  write(o.id + o.customer.name);
});

Copy after login

Order.JS

The RequireJS framework provides an easy way to define and maintain dependencies between JavaScript files. The define function in the code below declares that Customer.JS must be loaded before processing the Order callback function.

define(["Customer"],
function (Customer) {
function Order(id, custName) {
this.id = id;
this.customer = new Customer(custName);
}
return Order;
}
);

Copy after login

Customer.JS

This file does not depend on any other JavaScript files, so the value of the first parameter of the define function is an empty array.

Okay, now open this application with your browser, you will see the following output. Note that RequireJS only loads required JavaScript files.

201562590435120.png (300×172)

Summary

In this article, we analyze how the RequireJS framework handles dependencies between JavaScript files and loads them as needed. It helps developers write code that is more loosely coupled, modular, and maintainable.

Thank you

Download source code: Lazy Loading using RequireJS (Prasad Honrao, Codetails)

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

How to fix KB5055612 fails to install in Windows 10?

3 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Nordhold: Fusion System, Explained

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial

1668

CakePHP Tutorial

1426

Laravel Tutorial

1328

PHP Tutorial

1273

C# Tutorial

1256

Related knowledge

Error loading plugin in Illustrator [Fixed] Feb 19, 2024 pm 12:00 PM

When launching Adobe Illustrator, does a message about an error loading the plug-in pop up? Some Illustrator users have encountered this error when opening the application. The message is followed by a list of problematic plugins. This error message indicates that there is a problem with the installed plug-in, but it may also be caused by other reasons such as a damaged Visual C++ DLL file or a damaged preference file. If you encounter this error, we will guide you in this article to fix the problem, so continue reading below. Error loading plug-in in Illustrator If you receive an "Error loading plug-in" error message when trying to launch Adobe Illustrator, you can use the following: As an administrator

How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

Stremio subtitles not working; error loading subtitles Feb 24, 2024 am 09:50 AM

Subtitles not working on Stremio on your Windows PC? Some Stremio users reported that subtitles were not displayed in the videos. Many users reported encountering an error message that said "Error loading subtitles." Here is the full error message that appears with this error: An error occurred while loading subtitles Failed to load subtitles: This could be a problem with the plugin you are using or your network. As the error message says, it could be your internet connection that is causing the error. So please check your network connection and make sure your internet is working properly. Apart from this, there could be other reasons behind this error, including conflicting subtitles add-on, unsupported subtitles for specific video content, and outdated Stremio app. like

How to use JavaScript and WebSocket to implement a real-time online ordering system Dec 17, 2023 pm 12:09 PM

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to implement an online reservation system using WebSocket and JavaScript Dec 17, 2023 am 09:39 AM

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Outlook freezes when inserting hyperlink Feb 19, 2024 pm 03:00 PM

If you encounter freezing issues when inserting hyperlinks into Outlook, it may be due to unstable network connections, old Outlook versions, interference from antivirus software, or add-in conflicts. These factors may cause Outlook to fail to handle hyperlink operations properly. Fix Outlook freezes when inserting hyperlinks Use the following fixes to fix Outlook freezes when inserting hyperlinks: Check installed add-ins Update Outlook Temporarily disable your antivirus software and then try creating a new user profile Fix Office apps Program Uninstall and reinstall Office Let’s get started. 1] Check the installed add-ins. It may be that an add-in installed in Outlook is causing the problem.

See all articles