jquery2 Script 로딩 방식 비교: defer vs $(document).ready() JQuery로 개발하던 중, script를 로딩할 때 defer와 $(document).ready()의 차이가 뭔지 궁금해졌습니다.이 포스트에서는 두 가지 방식인 HTML 파싱과 병렬로 스크립트 다운로드HTML 파싱 완료 후 스크립트 실행$(document).ready()$(document).ready(function() { // 코드 실행});스크립트 즉시 다운로드 및 실행DOM 완전 로드 후 내부 코드 실행2. 스크립트 위치별 비교스크립트 선언 위치에 따른 특징은 다음과 같습니다. 끝defer: HTML 파싱 중단 없이 다운로드, 파싱 후 실행$(document).ready():다운로드 즉시 실행, 내부 코드는 DOM 로드 후 실행스크립트 태그를 만나면 다운로드 되는 동안 HTML 파싱 중단차이.. 2024. 7. 31. Fabric.js에서 디바운싱을 활용한 정렬 가이드 기능 최적화 Fabric.js와 jQuery를 사용하여 웹 에디터를 개발하면서, 객체를 정렬할 때 정렬 가이드를 표시하는 기능을 구현했습니다. 처음에는 객체가 이동할 때마다 object:moving 이벤트에서 직접 정렬 가이드를 그리는 방식으로 구현했습니다. 하지만 이 방법은 객체를 빠르게 이동할 때 불필요한 계산과 렌더링이 반복되어 성능 문제가 발생했습니다. 이를 해결하기 위하여 디바운싱을 적용한 사례를 소개해드리고자합니다. 정렬 가이드란?정렬 가이드는 사용자가 객체를 이동할 때 다른 객체와의 정렬을 쉽게 할 수 있도록 도와주는 시각적 보조 도구입니다. Figma, Sketch 등의 디자인 툴에서 흔히 볼 수 있는 이 기능은 사용자 경험을 크게 향상시킵니다.기본 코드먼저, 디바운싱을 적용하지 않은 기본적인 정렬 가.. 2024. 7. 25. 이전 1 다음 반응형
