BAC Software Consulting

Web & Document Accessibility | Drupal | WordPress | Web Programming | Web Design

Category: Mobile Development

Mobile Development

How To Improve jQuery Mobile Performance

If your jQuery Mobile App seems slow to load and a bit sluggish then don’t worry, here are some tips that you can use to help improve the performance of your jQuery Mobile Appplication.

But First: What is jQuery Mobile?

jQuery Mobile is a Touch-Optimized Web Framework that works on top of the jQuery Library. jQuery Mobile is a HTML5-based user interface system designed to make responsive websites and apps accessible on all smartphones, tablets and desktop devices. jQuery mobile framework allows you to design a single responsive website or application that will work on all popular handheld devices.

Below are 8 useful tips to optimize the performance/speed of your jQuery Mobile App.

1. Update jQuery Mobile and jQuery to the Latest Version

Besides fixing bugs and adding new features, upgrading to a new version of jQuery Mobile and jQuery can help boost the performance of your application.

You have to be careful when upgrading though, because jQuery mobile and jQuery are different projects under development by separate teams. Always check the main jQuery Mobile website to see what version of jQuery works with the latest version of jQuery Mobile. And always, test your application after you perform the upgrades to make sure that you did not break an existing functionality in your App.

2. Use: preventDefault(); Or Use: return false;

The jQuery event API incorporates a method called, event.preventDefault(). The system can spend a lot of time bubbling through events; therefore, once your code has handled an event use event.preventDefault(); or return false; to stop the browser from also handling the event.

return false; Versus preventDefault();

return false; does 2 things:

  1. event.preventDefault(); – Stops the browser’s default behavior.
  2. event.stopPropagation(); – Prevents the event from propagating the DOM. Whenever an event happens on an element, that event is triggered on every single parent element as well.

preventDefault(); method does one thing: It stops the browsers default behaviour.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("a").click(function(event){
        event.preventDefault();
	//Or, depending on your use, you could use: 
       //return false;		
    });
});
</script>
</head>

<body>
<!-- preventDefault() method prevents the links below from following the URLs. -->
<div id="parent">
<p><a href="https://bacsoftwareconsulting.com/">Go to Website</a></p>
</div>
</body>
</html>

3. Cache jQuery Selectors

Once you have used jQuery to find an element, store it in a variable since the next time around you don’t have to search the DOM for the same result again. That way the DOM doesn’t have to track down your element over and over again.

Every time you call jQuery with a selector it returns the results of the call. Normally you chain the results to another jQuery method, but you can also save the results of the call into a variable. Now this only works for elements that are not being dynamically modified. If you change the DOM, you will have to re-cache the selector. Never select elements multiple times inside a loop. It would be a performance-killer!

//Instead of
$('#someid').css ('color', '#333');
$('#someid').html ('Hi!');
$('#someid').css ('background-color', '#fff');
  
// you could use jQuery chaining.
$('#someid').css('color', '#333').html ('Hi!').css('background-color', '#fff');
  
// OR save the results of the call to a variable
var item = $('#someid');
item.css ('color', '#333');
item.html ('Hi!');
item.css ('background-color', '#fff');

4. Combine and Minify Your Scripts for Production. But keep a formatted version for Development

Reduce Network Requests: To minimize http requests and optimize your Web Application’s performance, consider combining all your scripts into a single file. If possible, combine your CSS files into one and your JavaScript files into another file. Then use a compression tool to compress the files. Smaller file sizes equal faster load times.

The goal of JavaScript and CSS minification is always to preserve the operational qualities of the code while reducing its overall byte footprint (both in raw terms and after gzipping, as most JavaScript and CSS served from production web servers is gzipped as part of the HTTP protocol). — From YUI compressor, an excellent tool to minify scripts.

5. Put Javascript/jQuery Scripts at the Bottom of the HTML File

Normally you should put the JavaScript or the jQuery calls (script tags) before the closing </body> tag. The reason for that is you want, in most websites, your content and presentation to load first, and then your interactivity to load later. Because any JavaScript file that you call is going to have to be loaded and processed before anything else. With most websites, you want interactivity to load after everything else.

However, with jQuery Mobile, because it injects some HTML and CSS into your document, you may want the scripts for the jQuery mobile to load before and thus the need to put it at the top of the document (before the closing </head> tag) otherwise you may see like a little bit of a refresh.

So, as an exception to the rule, put the script tag for the jQuery file call at the top of the document followed by the jQuery mobile next (before the </head>). Then put any other scripts at the very end before the closing body tag.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery Mobile Web App</title>
  <!-- Scripts -->
  <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   
  <!-- stylesheets -->
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
  <link rel="stylesheet" href="css/style.css">
</head>
 
<body>
  <section data-role="page" id="home">
    <article data-role="content">
      <!-- Stuff here -->
    </article>
  </section>
  <script src="js/script.js"></script>
</body>
</html>

6. Dynamically Load the Header/Footer Toolbar

Instead of manually adding the same header/footer on every page, dynamically generate the header/footer toolbar using jQuery in your external script file and insert it into your page element.

7. Pre-Render your CSS Classes

Whenever possible, add CSS classes manually.

Instead of writing to your HTML:

<div data-role="collapsible-set">
  <div data-role="collapsible" data-collapsed="false">
     <h3>Section 1</h3>
     <p>I am the collapsible set content for section 1.</p>
  </div>
  <div data-role="collapsible">
      <h3>Section 2</h3>
     <p>I am the collapsible set content for section 2.</p>
  </div>
</div>

Figure out what classes are rendered and manually add them to your HTML. Like so:

<div data-role="collapsible-set" class="ui-collapsible-set ui-group-theme-inherit ui-corner-all">
  <div data-role="collapsible" data-collapsed="false" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content">
    <h3>Section 1</h3> 
    <p>I am the collapsible set content for section 1.</p>
  </div>
  <div data-role="collapsible" class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content">
    <h3>Section 2</h3>
    <p>I am the collapsible set content for section 2.</p>
  </div>
</div>

8. Use the Components You need and No more

If you use jQuery Mobile for building hybrid Apps, then you can remove the components that you don’t use. Removing them from the CSS and JS can easily improve performance. Include only what you need and and remove any unused code from the CSS. Also you can use a jQuery Mobile Custom Download Builder to select only the components you need for you Mobile app.

Mobile Development

HTML5 Techniques for Optimizing Mobile Performance

The advent of diverse web application platforms, wireless networks and browsers added complexity to the mobile web environments in contrast to typical web environments. As a result, many performance issues such as slow loading, deferred tap events and jagged page transitions have come into the picture. Though experts are putting efforts to deliver a more native experience to the end user, still there are some roadblocks hindering them.

Factors such as limited screen size, packet latencies, battery life etc., have encouraged users to expect speedy performance from mobile web solutions. Sluggish loading can highly affect your conversion rates and hence search engine rankings. Moreover, more users are usually impatient and occasionally accept delays which make them leave the website due to loading issues. As the mobile traffic is increasing drastically, it is quite important to optimize the mobile web to avoid potential business loss.

Though there are numerous mobile web application frameworks available in the market, there are certain complexities involved. So, in this article I am sharing some useful tips to optimize mobile web solutions using HTML5. Read on.

Hardware acceleration

Usually, detailed 3D modeling as well as CAD diagrams are handled by GPU. However, here we want our primitive drawings, for example, backgrounds, div’s, images and text with shadows to animate and appear smoothly with GPU. One bad news is that majority of the developers are using third-party frameworks to dish out the animation process ignoring the semantics, however the question here is “do we really need to mask these core CSS3 features?”. Well, let me give you a clear picture of it.

1. Memory allocation and computational burden

If you constantly composite each element in the DOM to accelerate hardware, it becomes difficult for the next person who works on the same.

2. Power Consumption

It is very obvious that when battery kicks in synchronous with hardware. While working on mobile web solutions, developers are left with no choice than considering many device constraints while writing code. It is a very common practice as the browser developers tend to enable access to more device hardware.

3. Conflicts

Most of us have personally faced the issue of unusual behavior of browser while applying acceleration to some parts of web page which is accelerated already. Hence it is very important to know the importance of overlapping acceleration.

In order to improve the user interaction more smooth and native, it is important to make the browser convenient and flexible to you. Preferably, we want the CPU to start the initial animation and consequently take care of composing all the layers during the process of animation. The popular things like translate3d(), scale3d() and translate(), serve the same purpose- providing own layer to the animated elements and enabling the device to render all the elements together smoothly.

Hardware Consideration

A number of device-specific factors must be taken into account while developing web solutions for mobile. The elements including battery consumption, memory allocation and so on can bring about many challenges; and if not fixed appropriately they can ruin the overall performance of your mobile application. Not clear about this? Let me explain.

For example, take the case of battery consumption. We all know that hardware is always linked with battery, so it is very important to take this factor into consideration while developing an application. The main reason is that the browsers we are using now get a high level of access to the device hardware when compared to earlier browsers. Hence it can disturb the performance of the web.

To generate trouble-free, consistent user experience it is important to enable the CPU of mobile device to configure the first stage of animation and later on allow the GPU to proliferate different layers while executing an animation procedure.

Network type detection, handling, and profiling

With the ability to buffer the web application, it is essential to giver proper connection detection features to the app in order make it smarter. This is the most critical stage where the development completely depends on the connection speed and online or offline modes.

Let’s take a common scenario for instance. While using a mobile web from a high-speed train, there might be some issues with the network at different moments and various geographies may support dissimilar transmission speeds. For example 3G is not available in some areas of the city. However, remote areas support unique 2G technologies.

Verdict

The HTML5 mobile applications are becoming more popular now and it is just the beginning- lot more is yet to come. Now, we have discussed the simple tricks and tips to build a mobile web solution using only HTML5 and its compatible technologies. In my view, it is important for the programmers to work on the bottlenecks and solve them from the core.