스타일을 바꿨을 뿐인데 왜 느려지는가?

무엇을 바꿨느냐에 따라 브라우저가 다시 하는 일의 범위가 다르기 때문이다.

너비나 위치를 바꾸면 맨 앞부터 다시 한다. 한 곳을 바꿔도 옆과 아래가 밀리므로 다시 재야 할 범위가 넓다.

색만 바꾸면 재는 일은 건너뛴다. 어디 있는지는 그대로이므로 칠하기만 다시 한다.

transform이나 opacity는 한 걸음 더 건너뛸 수 있다. 그 요소가 따로 떼어져 있으면 이미 그려 둔 것을 옮기기만 하므로 합성만 다시 한다. 떼어져 있지 않으면 다시 칠한다.

읽기와 쓰기를 번갈아 하면 최악이다. 크기를 물어보면 브라우저는 밀린 계산을 그 자리에서 끝내야 답할 수 있다. 반복문 안에서 그러면 매번 다시 잰다.