javascript (3) 썸네일형 리스트형 레이아웃 스래싱(Layout Thrashing) 다들 자바스크립트로 DOM 조작하면서왜 이렇게 버벅이지 하고 느껴본 적 있으시죠 저는 개발중에 수많은 리스트를 동적으로 추가하는 기능을 만들다가 페이지가 거의 멈추듯이 버벅거리는 경험을 했습니다.원인을 찾아보니 원인은 바로 레이아웃 스래싱(Layout Thrashing) 이었습니다. 오늘은 제가 공부하면서 알게 된, 이 레이아웃 스래싱을 피하고 DOM 성능을 확 끌어올리는 몇 가지 꿀팁을 공유해 보려고 합니다! 1. 레이아웃 스래싱 이란? 우리가 DOM의 스타일이나 구조를 바꾸면 브라우저는 화면을 새로 그리기 위해 꽤 복잡한 과정을 거칩니다.(DOM → CSSOM → 렌더 트리 → 레이아웃 → 페인트 → 합성) 여기서 중요한 게 레이아웃 단계입니다. (브라우저가 각 요소의 크기와 위치를 계산하는 과정).. 자바스크립트 기초: 객체, DOM, 이벤트 핸들링 객체에 대한 이해 JS 객체는 여러 데이터를 key-value 쌍으로 구성된 형태로 묶을 수 있는 자료형을 말합니다.객체는 데이터를 구조화하고, 이를 활용하는 과정에서 유용합니다.const person = { name: "Hong Gil Dong", // string age: 17, // number isMale: true, // boolean sayHello: function () { // method (함수도 객체의 value다!) console.log("Hi! My name is " + this.name); }}; DOM (Document Object Model)HTML 문서를 브라우저가 이해하고 “조작”할 수 있도.. CSS 심화 CSS 심화1 : Media Query 웹 페이지가 다양한 화면 크기나 디바이스에 맞춰 적절한 스타일을 적용할 수 있게 해주는 CSS 기능 media type:screenprintspeechall화면에 보여질 때출력될 때 음성 출력할 때모든 미디어 타입에 대하여/*화면에서만 적용될 스타일*/@media screen { body { background-color :#lightblue; }}/*인쇄할 때만 적용될 스타일*/@media print { body { background-color:white; color :black; } header ,footer { display:none; /*인쇄할 때 헤더와 푸터를 숨김*/ } } .. 이전 1 다음
