JavaScript

23 Nov 09

18 Nov 09

Closures - Secrets of the JavaScript Ninja

jsninja.com/Closures - Preview

JavaScript Closures jResig Memoization Advanced

It's not uncommon to find closures permeating JavaScript libraries, and other
advanced code bases, due to their ability to drastically simplify complex
operations.
there is a direct cost to storing and referencing your information in this
manner. It's important to remember that each function that accesses information
via a closure immediately has at "ball and chain," if you will, attached to them
carrying this information
13 more annotations...
- Memoization is the process of building a function which is capable of
  remembering its previously computed answers.
- by adding a new .memoized() method we do have the ability to modify
  and attach properties that are associated with the function itself. This allows
  us to create a data store (._values) in which all of our
  pre-computed values can be saved
- Function wrapping is a means of encapsulating the functionality of a function,
  and overwriting it, in a single step. It is best used when you wish to override
  some previous behavior of a function, while still allowing certain use-cases to
  still execute
- a function can be safely overriden without any loss of functionality.
- Their technique is interesting, as opposed to having a large if/else block
  within their readAttribute function (debatably messy and not a good
  separation of concerns) they, instead, opt to completely override the old
  method, simply implementing this fix, and deferring the rest of the
  functionality back to the original function
- (function(){})(). This single piece of code is incredibly versatile
  and ends up giving the JavaScript language a ton of unforeseen power
  - Module Pattern - on 2009-11-18
  Add Sticky Note
- a code block which is instantly created, executed, and discarded. Additionally,
  since we're dealing with a function that can have a closure, we also have access
  to all outside variables
- a common issue with closures and looping, namely that the variable that's being
  enclosed (i) is being updated after the function is bound
- This means that every bound function handler will always alert the last value
  stored in i (in this case, '2'). This is due to the fact that
  closures only remember references to variables - not their actual values at the
  time at which they were called
- Note that, in order to achieve this, we pass in the iterator value to the
  anonymous function and then re-declare it in the arguments. This means that
  within the scope of each step of the for loop the i variable is
  defined anew, giving our click handler closure the value that it expects.
- Keep as much of the library private as possible and only selectively introduce
  variables into the global namespace
- - Module Pattern - on 2009-11-18
  Add Sticky Note
- - Lazy Initialization / evaluation - on 2009-11-18
  Add Sticky Note

Overview - Secrets of the JavaScript Ninja

JS Ninja book contents

jsninja.com/Overview - Preview

JavaScript jResig Book Advanced

17 Nov 09

JScript Blog : Scope chain of JScript Functions

blogs.msdn.com/...hain-of-jscript-functions.aspx - Preview

JavaScript Function Scope

Scope chain refers to the chain of objects whose
properties are looked for when a variable is looked for its existence and its
value. Functions in JScript have their scope chain saved when they are
defined

Functions and function scope - MDC

fucntion scoping

developer.mozilla.org/...Functions_and_function_scope - Preview

JavaScript Function MDC Scope

Learning Advanced JavaScript

jhon resig

ejohn.org/learn - Preview

JavaScript Tutorial Advanced

High Performance Ajax Applications

www.slideshare.net/...-performance-ajax-applications - Preview

JavaScript Ajax Tips Presentation Performance

Less is more
– Don’t do anything unnecessary.
– Don’t do anything until it becomes absolutely necessary.
Work on improving perceived performance
– Users can deal with some reasonable amount of slowness if:
• They are informed appropriately that an operation is pending.
• The user interface remains reactive at all time.
– Cheat whenever you can by first updating the UI and then do the work.
17 more annotations...
- Consider flushing the apache buffer very early on:
  – The download of external CSS files (should be at the top of the page!) may get a head start.
  –
- Load only essential assets / load assets on a delay or on demand
- Reduce the amount of symbolic
  look-up: The prototype chain
- Never pass a string to the setTimeout and setInterval functions. Instead, pass an
  anonymous function
- Memoization
- Store value in function object Lazy function definition
- avoid using try...catch in performance-critical sections
- Document tree modification
  Using innerHTML
- Document tree modification
  Using cloneNode
- Document tree modification
  Using DocumentFragment
  • A DocumentFragment (DOM Level 1 Core) is a lightweight Document object.
  • It supports only a subset of the regular DOM methods and properties.
  • IE’s implementation of the DocumentFragment interface does not comply with the W3C
  specification and returns a regular Document object
- Use event delegation, a technique that relies on event bubbling
- Limiting reflows
- Modifying an invisible element (display:none) does not trigger reflow
  – Modifying an element “off-DOM” does not trigger reflow
- Improving perceived network
  latency using the optimistic pattern
- Favor JSON over XML as your data exchange format
  – Accessing a JSON data structure is easier and cheaper than accessing XML data.
  – JSON has less overhead than XML.
- Consider using local storage to cache data locally, request a diff from the server:
  – Internet Explorer’s userData
  – Flash local storage
  – DOM:Storage (WhatWG persistent storage API, implemented in Firefox 2)
  – Google Gears
  –
- Therefore, to maintain a decent user experience, make sure that JavaScript
  threads never take more than ~ 300 msec (at most) to complete.

Julien Lecomte's Blog » Running CPU Intensive JavaScript Computations in a Web Browser

www.julienlecomte.net/...28 - Preview

JavaScript Performance CPU User-Interface UsereXperience HCI

The biggest deterrent for running CPU intensive computations in a web browser is
the fact that the entire browser user interface is frozen while a JavaScript
thread is running
under no circumstance should a script ever take more than 300 msec (at most) to
complete. Breaking this rule inevitably leads to bad user experience.

13 Nov 09

jQuery Performance Rules - Best Practices for Speeding Up jQuery

www.artzstudio.com/...jquery-performance-rules - Preview

JavaScript jQuery Performance

10 Nov 09

jQuery TOOLS - The missing UI library for the Web

flowplayer.org/index.html - Preview

JavaScript jQuery Tools library

09 Nov 09

Online javascript beautifier

jsbeautifier.org - Preview

JavaScript

beautifier

26 Aug 09

String performance in Internet Explorer - Crisp's blog

crisp.tweakblogs.net/...ance-in-internet-explorer.html - Preview

JavaScript Benchmark IE Broser Sting Performance

30 Jul 09

IEBlog : IE8 Performance

IE8 performance improvements. Faster rendering

blogs.msdn.com/...ie8-performance.aspx - Preview

IE8 Performance NewFeatures JavaScript CSS Rendering DataURI

With IE8 we have significantly augmented the garbage collector so that it can
break many circular references over the lifetime of a site, reducing the burden
on developers
key improvements we made with IE8 were to unblock downloads in the presence of
external scripts and to increase the number of parallel connections per server
that we support
13 more annotations...
- When IE8 encounters an external script we continue parsing on a second thread to
  ensure that we continue downloading page elements as fast as possible
- In IE8 Beta 1 we also increased our per-server connection limit from 2 to 6.
- new CSS 2.1 compliant rendering engine
- rendering and layout performance is a large component of overall browsing speed.
- With IE8 we add support for RFC 2397’s Data URIs. Instead of
  using a URL to point to an image file (and incurring additional round trip costs
  to transfer that file to the browser), you can use Data URIs to encode the data
  directly
- Data URIs should be used sparingly because they incur some client processing
  overhead due to their base64 encoding and because they cannot be cached in the
  same as images retrieved over the network. Since Data URIs are embedded directly
  into a document, script, or stylesheet you should try to embed them within one
  such element that is in turn cacheable.
- IE8 also supports the Selector APIs querySelector and querySelectorAll to let
  you lookup selectors from JScript orders of magnitude faster than you would
  previously using implementations included in frameworks
- support for JSON,
- JScript engine implements the ECMAScript 3.1 JSON proposal’s JSON.stringify and
  JSON.parse methods, providing a speedy and secure solution to a common developer
  problem.
- support for DOM storage (10mb of local storage per site
- XDomainRequest (secure cross-domain communication without a server-side proxy
- Connectivity Events (script can now tell if a user is connected to the internet
- IE7's biggest performance problem, which is sometimes it takes up to 12 seconds
  merely to open a new tab