Have you ever used that cool button on your BlackBerry® PlayBook™ tablet Browser that looks like a book? It’s the icon in the top left that enables Reader Mode. This is a neat feature which takes away all the advertisements and extraneous features from the page and shows you a clean summary of the content. Today I wanted to tell you about how this feature came to be, how we optimized its performance, and how it would not have been possible without BlackBerry® Web Inspector.

Using some clever JavaScript®, we created a mechanism that extracted the page contents and stripped out unwanted HTML. The problem was that it took a really long time to parse a page and display the content — or so we thought. We knew that this would not be a good user experience and the page load time needed to be optimized, especially when compared to the better performance we observed for the same content running in a desktop browser.

As I started my investigation, I wanted to look at the JavaScript to see how it worked so I could start to tweak it, and I thought to myself, “I should use Web Inspector to profile this.” I didn’t know it yet but this idea would save me lots of time and effort to get the feature working.

After adding some profiling information to the script, I discovered that most of the code was already relatively fast. However, after it had reloaded the page in a new WebView, it was doing its removal of the unwanted tags on the live DOM. This incurred a whole page request with sub-resources and content that we were going to be stripped out as soon as the page loaded.

Instead of incurring a page load, I did a deep copy of the DOM using document.body.cloneNode(true), and then manipulated the HTML fragment off DOM. Finally I loaded the resulting HTML in a new WebView. The result of this change was an immediate gain in performance, reducing the amount of processing time from 45 seconds down to less than 5 seconds. But that wasn’t enough — no user should have to wait 5 seconds after hitting a button to see any results.

I then enlisted the help of a colleague, and we were able to optimize the script even further by making changes to our logging. If you log things in JavaScript inline via console.log(), they’re expensive. Instead, add your log message to a buffer and then print the results after the main processing is complete. The DOM was traversed several times during the algorithm’s run. We ended up using a TreeWalker instead of a for loop of document.getElementsByTagName(“*”) being used. With these simple changes and further optimizations to the script, we further reduced the page processing time from 5 seconds down to under 1.5, which in and of itself is still a gain of over 300%.

So in summary, we went from 45 seconds down to less than 1.5 seconds — an astonishing 3000% performance boost that we could not have done without Web Inspector running on device.

Lessons:

1. Add logs to your scripts for performance profiling, but buffer them and don’t print to console right away.
2. Don’t reload the page when you don’t need to. If you want to modify the DOM, use HTML fragments.
3. Profile individual methods and try different things. You’d be surprised how changing one line can make all the difference.

The BlackBerry® PlayBook™ OS 2.0 software upgrade provided major enhancements to the web developer platform, and I wanted to highlight some of the key improvements to Web Inspector that are now available in OS 2.0 as well. These enhancements can make it easier for developers to fix bugs, improve performance and create positive experiences for their users.

Quick access settings menu

A settings panel is now available to help developers configure how information is presented within Web Inspector. Developers can define default formats for colors, text indentation and word wrap behavior.

Network panel

The new networking panel displays helpful information about HTTP request and responses made by your application. This includes network traffic logging about documents, style sheets, images, scripts, XmlHttpRequest, fonts and even web sockets.

Click on any resource displayed on the left side panel to view its request and response HTTP headers as well as a preview of the actual resource.

Context Menu

Right-clicking on any panel in Web Inspector will now display a new context menu. This menu contains items that are relevant to the current window. For example, within the “Elements” panel developers can edit or copy selected HTML elements, while in the Network panel, developers can copy link addresses as well as HTTP request and response headers.

Note: Access to the system clipboard is restricted by JavaScript®, so in order to implement this copy feature, Web Inspector will instead open a new tab or window in your browser and display the selected information in plain text. If you have popup blocking enabled, you may not see this new tab or window.

Console window auto-complete

Another great improvement is that Web Inspector has been designed to respond to what you type in the console window. Often the console is used to make dynamic calls to JavaScript loaded on the page. This can be a helpful practice for checking variable values or running debug code.
To see this in action, start typing some JavaScript from within the console window, such as the example shown in the following screenshot. After each period, you should be prompted with a drop-down list of available method or property names for the current JavaScript object you have provided.

Custom User Agent

Web Inspector can now be used to change the value of the user agent header. This header is often used by web servers to detect which browser is currently being used to access a web page, and provide custom content targeted to that browser. Open up the settings window and select the “Override User Agent” checkbox. You can then select from a list of default user agent values, or provide your own.

See the “How to detect the BlackBerry Browser” developer article for more information about the format of the user agent header on the BlackBerry web platform.

JavaScript “pretty print”

Minifying JavaScript is an excellent way of improving web page performance by reducing unneeded bandwidth. However, it can become very difficult to debug minified JavaScript as finding the right place to set breakpoints can be challenging.

When JavaScript is minified, all whitespace and comments are removed. This often results in an entire library being displayed as a single line of code.

Fortunately for BlackBerry developers, Web Inspector now provides a “Pretty print” feature, which can be found at the bottom of the status bar in the Scripts panel. When clicked, it will automatically re-format all JavaScript using appropriate indentation and whitespace.

Don’t forget to use Web Inspector as part of developing and testing your HTML5 and BlackBerry WebWorks applications. It can save you a lot of time and frustration in tracking down a bug, or finding ways to optimize your web content.

Try it out for yourself, and let us know how it helps with your BlackBerry development.