Pageflakes.com의 Omar AL Zabir씨가 ensure에 대해 포스팅했습니다. ensure는 그가 작성한 JavaScript 라이브러리로, JavaScript, HTML, CSS를 요청하고 그 후 코드를 실행하게 할 수 있는 간편한 함수를 제공합니다.

Ensure는 특정 코드에 의존적인 어떠한 코드를 실행하고자 할 때 관련된 JavaScript와 HTML 코드 조각이 브라우저에 이미 브라우저 DOM 에 로딩되어 있을 것임을 보증해줍니다.

예제입니다:
[code:js]
ensure( { js: "Some.js" }, function() {
    SomeJS(); // The function SomeJS is available in Some.js only
});
또한 여러개의 JavaScript, html, CSS 파일을 지정할 수 있습니다.
[code:js]
ensure( { js: ["blockUI.js","popup.js"], html: ["popup.html", "blockUI.html"], css: ["blockUI.css", "popup.css"] }, function() {
    BlockUI.show();
    PopupManager.show();
});
Omar씨의 말씀입니다:
풍부한 클라이언트측 효과(애니메이션, 검증, 메뉴, 팝업)를 가진 웹 사이트와 Ajax 웹사이트는 같은 페이지에서 브라우저가 전달하는 큰 용량의 JavaScript, HTML, CSS가 필요합니다. 그러므로 풍부한 웹페이지의 초기 로딩 시간은 필요한 컴포넌트를 다운로드하는 시간만큼 명백히 계속 증가하고 있습니다. 게다가, 모든 가능한 컴포넌트를 전송하는 것은 페이지를 무겁게 하고 액션에 대한 브라우저의 응답을 둔하게 합니다. 때때로 풀다운 메뉴가 걸려있거나 팝업이 천천히 나타나거나 윈도우 스크롤이 둔하거나 하는 등의 것을 본 적이 있으실 겁니다.

해결책은 모든 가능한 HTML, JavaScript, CSS를 초기에 모두 전송하는 대신 필요할 때만 읽어들이는 것입니다. 예를 들어, 사용자가 메뉴바에 마우스를 올리면, 풀다운 메뉴 내부에 나타날 메뉴 HTML 뿐만 아니라 풀다운 메뉴 효과에 필요한 JavaScript 와 CSS도 다운로드하는 것입니다. 비슷하게 클라이언트측 검증(validation)이라면, 사용자가 "전송(submit)" 버튼을 클릭할 때, 클라이언트 검증 라이브러리와 관련된 경고 HTML 코드와 CSS를 전송하는 것입니다. 요청이 오면 페이지를 보여주는 Ajax 사이트라면, 사용자가 Ajax 호출을 할 경우에만 Ajax 라이브러리를 읽어들이는 것입니다. 즉, 복잡한 페이지의 전체 HTML, CSS, JavaScript를 작은 조각으로 나누는 것으로 초기 전송량을 확실히 줄일 수 있습니다. 그러므로 초기 페이지는 정말 빨라지고 여러분에게 빠르고 부드러운 브라우징 경험을 제공합니다.
동작 방법에 대해서 자세하게 작성된 글도 있습니다. 이는 또한 리소스를 다운로드 할 때에 대한 최근의 성능 제안과 관련이 있습니다(때때로 요청시에 로딩하느라 기다리는 것을 원하지 않을 수도 있습니다).

from ensure: on demand resources
Posted by 행복한고니 트랙백 0 : 댓글 0