{"id":1772,"date":"2013-10-09T22:11:17","date_gmt":"2013-10-09T22:11:17","guid":{"rendered":"http:\/\/www.sitekickr.com\/blog\/?p=1772"},"modified":"2013-10-12T10:30:51","modified_gmt":"2013-10-12T10:30:51","slug":"lazy-definition-load-javascript","status":"publish","type":"post","link":"https:\/\/www.sitekickr.com\/blog\/lazy-definition-load-javascript\/","title":{"rendered":"Using Lazy Definition to load JavaScript libraries on demand"},"content":{"rendered":"

I've been told on more than one occasion not to spend too much time perfecting the performance on a website or app before gauging consumer interest. In other words, don't spend time hyper-optimizing something that hasn't yet proven it's worth. Only after a project has taken off does it warrant your valuable time for performance tuning.<\/p>\n

That is one philosophy. The other way of thinking is the "now or never" approach. If you don't optimize all your code as you go along, you may very well never afford the time to do it again. If your app takes off, you'll be too busy handling feature requests to revisit that old sloppy code you wrote just to get the project out the door faster.<\/p>\n

Regardless of the stance you take, some optimizations are so simple to implement and provide such a dramatic performance enhancement that they're hard to overlook, even in a time crunch.<\/p>\n

One optimization that fits this description is lazy definition<\/strong>. If you're already familiar with the term, then you may be wondering how it can improve performance in any significant way. This brings us to another concept called lazy loading<\/strong>. They sound similar, right? But, they're actually two different techniques that can work together to improve the load time of a website.<\/p>\n

 <\/p>\n

Lazy Definition<\/h3>\n
\n

Is Lazy the right word?<\/h4>\n

I'm not one to argue with the terminology set forth by our computer science pioneers, but… When I think about the term lazy, poor coding practices or inefficient algorithms come to mind.<\/p>\n

I could just as easily call the old array bubble sorting<\/a> method "Lazy Sorting". So, you could see how this terminology could easily confuse a programmer who is first hearing about this technique. The term "Lazy Loading" doesn't quite convey the fact that a function is redefining itself to execute in a more optimized way the next time it's called.<\/p>\n

A better term might be "On-Demand Definition". It doesn't carry the same ring, but it's a little more accurate as to what's actually happening.<\/p>\n<\/div>\n

Because of JavaScript's liberal nature, you're actually able to let a function definite itself. It defines itself by replacing it's own code, once it executes for the first time. Let's demonstrate this with an example:<\/p>\n

myFunction = function () {\r\n    if (browser === 'IE') {\r\n        myFunction = function() {\r\n            return 'This is IE.';\r\n        }\r\n    }\r\n    else if (browser === 'Chrome') {\r\n        myFunction = function() {\r\n            return 'This is Chrome';\r\n        }\r\n    }\r\n}<\/code><\/pre>\n
So what's going on here when myFunction <\/em>is executed?<\/p>\n
    \n
  1. A conditional checks a variable which indicates which type of browser is being used.<\/li>\n
  2. Depending on the result, myFunction is redefined, replacing the entire code within myFunction<\/li>\n<\/ol>\n
    Essentially, once myFunction <\/em>is called (let's say browser = 'IE'), it is now defined as:<\/p>\n
    myFunction = function() {\r\n    return 'This is IE.';\r\n}<\/code><\/pre>\n
    After a single call to the function, it self-optimizes by removing the unnecessary conditional.<\/p>\n
    Okay, cool, I guess. But, how do we use that to improve page load time in a significant way? That's where lazy loading<\/strong> comes in.
    \n\t <\/div>\n
    \"function<\/a><\/div>\n
     <\/div>\n
    Lazy Loading<\/h3>\n
    \n
    When to use Lazy Loading<\/h4>\n
    Lazy loading sounds so good that you might be tempted to use it as a rule, rather than when it makes the most sense. Here are a few tips that might help:<\/p>\n
    Use Lazy Loading when<\/h5>\n