전에는 나 자신도 미처 눈치채지 못하고 그냥 버릇처럼 써왔던 것인데, 자주는 아니지만 그래도 간혹, 지금도 html body 끝에 링크된 jQuery 사용 JavaScript 파일이 아래처럼 무조건 jQuery의 ready() 함수로 감싸서 작성된 것을 목격하게 된다.

$(document).ready(function() {
  // Stuff to do as soon as the DOM is ready;
});

혹은 더 짧게,

$(function() {
 // Handler for .ready() called.
});

하지만 DOM parsing 작업을 방해하지 않으려고 </body> tag 바로 위에다 스크립트를 추가했다면, 이미 웹 브라우저에선 DOM 해석을 끝낸 시점이기 때문에, 굳이 DOM이 준비되어 있는지 확인하는 작업은 불필요하단 얘기다.

물론 이렇게 한다고 해서 얻을 수 있는 성능상의 이득은 거의 없지만, 불필요한 작업인 것은 분명하다.
추가 참고 문서: You Don't Need the DOM Ready Event

가령, CSS3 애니메이션 효과를 적용할 때 미지원 브라우저한테는 대신에 JavaScript를 써서 애니메이션 효과를 대체하려고 할 때 유용한 gist로 jQuery plugin 형태로 다음과 같은 것이 있다.

$.support.cssProperty = (function() {
  function cssProperty(p, rp) {
    var b = document.body || document.documentElement,
    s = b.style;
 
    // No css support detected
    if(typeof s == 'undefined') { return false; }
 
    // Tests for standard prop
    if(typeof s[p] == 'string') { return rp ? p : true; }
 
    // Tests for vendor specific prop
    v = ['Moz', 'Webkit', 'Khtml', 'O', 'ms', 'Icab'],
    p = p.charAt(0).toUpperCase() + p.substr(1);
    for(var i=0; i<v.length; i++) {
      if(typeof s[v[i] + p] == 'string') { return rp ? (v[i] + p) : true; }
    }
  }
 
  return cssProperty;
})();

출처 – Extends the jQuery.support object to CSS Properties

처음부터 무조건 JavaScript를 써서 애니메이션 효과를 주지 않는 이유는, 당연 CSS3 애니메이션 효과를 지원하는 브라우저에선 더 매끄러울 테니까 그렇다.
사용 예: CSS3 Dropdown Menu – CodePen

function clearAllCookies(domain, path) {
  var doc = document,
      domain = domain || doc.domain,
      path = path || '/',
      cookies = doc.cookie.split(';'),
      now = +(new Date);
  for (var i = cookies.length - 1; i >= 0; i--) {
    doc.cookie = cookies[i].split('=')[0] + '=; expires=' + now + '; domain=' + domain + '; path=' + path;
  }
}

다만, HttpOnly cookie는 지울 방법이 없다.
단순히 쿠키에 남겨진 방문 흔적을 지우는 데 사용될 수도 있다.

jQuery에서 많이 사용되는 이벤트(event) 심는 방법에는 옛 버전부터 최근까지 여러 용법이 소개되고 쓰여왔다. 이런 많은 용법이 함께 사용되면서 상황에 따라 어떤 것을 써야 할지 고민하게 되고, 또 서로 다른 용법으로 혼란을 줄 수도 있었다.
그래서 최신 1.7 버전부턴 과거부터 축적돼서 사용되던 이런 여러 방법을 통합하려는 시도로 .on() method가 소개되었는데, 이런 여러 용법을 잘 정리해서 비교해 놓은 글. – Differences Between jQuery .bind() vs .live() vs .delegate() vs .on()

결국, 전부터 쓰던 .bind(), .live(), .delegate() method는 더 일관된 사용법의 통합된 .on() method를 써서 다음과 같이 적용해 줄 수 있다.

/* The jQuery .bind(), .live(), and .delegate() methods are just one 
   line pass throughs to the new jQuery 1.7 .on() method */

// Bind
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );

// Live
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );

// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );

jQuery 1.7.x 버전부턴 .on() method가 대세.

덧붙임: jQuery 1.7 버전의 문법을 지원하는 TextMate jQuery Bundle

switch(foo) {
  case 'alpha':
    // do X
    break;
  case 'beta':
    // do Y
    break;
  default:
    // do Z
    break;
}

위와 같은 구문을 다음처럼 Object notation을 써서 약간 더 빠르게 실행될 수 있도록 구현할 수 있다.

var switchObj = {
  'alpha': function() {
    // do X
  },
  'beta': function() {
    // do Y
  },
  '_default': function() {
    // do Z
  }
};
(switchObj.hasOwnProperty(foo) && switchObj[foo] || switchObj._default)(args);

물론 비교 대상의 case가 별로 많지 않을 땐 속도의 차이는 크게 나지 않는다.

따온 곳 – How DRY Affects JavaScript Performance — Faster JavaScript Execution For The Lazy Developer