Everything about Web and Network Monitoring
Everything about Web and Network Monitoring
JavaScript has emerged in the past couple years as the de facto expression of next generation web technologies, and a critical component of HTML5 technologies – along with CSS and JQuery. JavaScript is ubiquitous; it really is showing up everywhere – in websites, servers, games, operating systems, and robots! JavaScript is the #1 most-used language on GitHub, and this trend is only going to increase. Gartner stated last fall in its top strategic trends forecast of 2014 that JavaScript improvements will continue to “push HTML5 and the browser as a mainstream enterprise application development environment.”
In the battle for the development of the next generation web the star of the show has really become JavaScript. As one article put it, “JavaScript is the number one language in the world; it’s the language of the web, and a starting point for so many new developers . . .”
Given the increasing predominance of JavaScript in web and mobile app development, it’s important that your business be up-to-date on the latest performance best practices. If you think you could use 5 top tips to ensure your JavaScript environment is firing on all cylinders, then read on!
1. Learn the techniques of asynchronous programming
Your application will often require multiple internal calls to various APIs to fetch data. One way to address this would be to require different middleware for each function. JavaScript is single-threaded, which means that there are lots of synchronous components that can potentially lock up the entire application. Fortunately, JavaScript does a good job of handling asynchronous code through a feature called async.js. This means that rather than blocking the thread, async code gets pushed to an event queue that fires after all other code executes. But even with JavaScript’s async features in place, it’s still possible to inadvertently use an external library that reverts to a synchronous blocking call – and this can seriously reduce performance. The best way around this is always use asynchronous APIs in your code, especially in performance critical sections. Keep in mind as well that it can be especially challenging for novices to understand the intricacies of async programming in JavaScript and navigate the challenges of callbacks. There are useful resources out there, such as this book.
2. Pass local variables
Whenever you call a function certain, variables used to define that function are stored inside. Those that are defined only within the variable are called local variables and those used throughout the script are global. Whenever you call a function, the browser has to do something called scope lookup. As the number of scopes in the scope chain increases, so does the amount of time to access variables outside of the current scope. For this reason it always takes longer for the engine to access a global variable than a local one. In other words, when writing JavaScript define your variables locally as much as possible to decrease the time the engine has to go searching for the globals; this best practice will increase the overall speed of the application.
3. Keep code small and light
In the age of mobile where application performance is so critical, it’s especially important to keep your JavaScript code base as compact as possible to reduce latency and speed things up. One article provides some organizing questions that are worth asking in the development stage: “Do we really need this module?”, “Why are we using this framework? Is it worth the overhead?”, “Can we do this in a simpler way?” Another way to optimize application performance is by minifying and concatenating multiple JS files into one. For example, if your app has five JavaScript files the browser will make five separate HTTP requests to fetch them. To avoid the block and wait time, an alternative approach would be to minify and concatenate those 5 files into one streamlined one.
4. Avoid unwanted loops
The consensus is out that too much looping in JavaScript is not a good thing, and actually puts an unnecessary strain on your browser. One writer states the point this way: “The first thing to remember about loops, and this isn’t just for JavaScript, is to do as much work outside the loop as possible. The less you do in the loop, the faster your loop will be.” Some simple tweaks like storing the length of an array in a different variable instead of making it read the length at every iteration of the loop, can go a long way to optimizing your code and ensuring things run much more efficiently.
5. Cache objects to increase performance
It’s common practice in programming to have a script repeatedly access certain objects. For example, in the following example, notice how the browser must dynamically look up the object, “document.images” two times for each loop – once to see if i<document.images and the second time to change the images src. If you have 10 images then this amounts to 20 calls to the images object.
An alternative method is to “cache your object”; this means storing a repeatedly accessed object inside a user defined variable, and using that variable instead in subsequent references to the object. The performance improvement can be significant. In the following example, the number of times document.images is referenced is half of the previous version, which significantly reduces the load on the browser.
It is common practice for scripts to repeatedly access a certain object. By storing a repeated access object inside a user defined variable, as well as using a variable in subsequent references to that object, performance improvement can be achieved immediately.
