FE Study) STEP 16 리뷰

pul8219 commented 3 years ago

STEP 16 문서 링크

jeongshin commented 3 years ago

DOM Fragment 에 대한 내용 잘 읽었습니다. 나중에 활용해보고 싶네요 !

khw970421 commented 3 years ago

잘읽었습니다. 그중에서

JavaScript를 통해 스타일 변경시 .cssText 사용 부분에 대해서 질문이 2가지가 생겨 남기는데요

cssText관련해서 reflow 한 번만 발생 이라고 써있는데 이부분이

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트의 디폴트 행동 취소</title>
<style>
    td{
        border: 1px solid black;
        width:80px;
        height:80px;
    }
</style>
</head>
<body >
<div id='reflow-test1' style='background-color:red;' >hi</div>
<div id='reflow-test2' style='background-color:red;'>hi</div>
<div id='reflow-test3' style='background-color:red;'>hi</div>
</body>

 <script>
var el1 = document.getElementById("reflow-test1");
el1.style.padding = "8px";
el1.style.width = "320px";
el1.style.height = "240px";

var el2 = document.getElementById("reflow-test2");
el2.style = "padding: 8px; width: 320px; height: 240px;";

var el3 = document.getElementById("reflow-test3");
el3.style.cssText = "padding: 8px; width: 320px; height: 240px;";

</script>
</html>

이럴때 el2에서 el2.style과 el3에서 el3.style.cssText도 시도해보니 같은 결론이 나는데 같은 의미로 보고 cssText는 안써도 될지 부분에 대해서 궁금하고

2번째는 el1과 el3를 비교하면 el1은 기존의 background가 적용된거로 나타나고 el3는 background가 없어진것으로 나타나는데 혹시 어떤이유인것 같으신지 저도 궁금해서 의견을 물어보고싶어서 질문남깁니다.

개인적으로는 결과론적이지만 el1은 el2와 el3에 비해 기존에 있는것을 하나하나 추가하는 상황이고 el2와 el3는 기존의 style을 없애고 새로 reflow를 진행하는것이라생각합니다만

이 부분은 혹시 다른 분들도 본다면 의견 남겨주시면 감사하겠습니다. @pul8219 @JeongShin

eyabc commented 3 years ago

@khw970421 정말 훌륭한 질문이네요! 고민해 보겠습니다

eyabc commented 3 years ago

el1

<div id='reflow-test1' style='background-color:red;' >hi</div>

el1.style.padding = "8px";
el1.style.width = "320px";
el1.style.height = "240px";

eyabc commented 3 years ago

e2

<div id='reflow-test2' style='background-color:red;'>hi</div>
const el2 = document.getElementById("reflow-test2");
el2.style = "padding: 8px; width: 320px; height: 240px;";

background-color :red 스타일이 적용되지 않는 이유는 https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/style 기존의 스타일을 덮어 썼기 때문입니다

그 결과 el2.style 의 객체는 아래와 같습니다. style 을 수정하면 cssText 도 변경 되어 집니다. 결과는 비슷하지만 기술적으로는 어떻게 구현이 되어있는지 잘모르겠네요 dom.style.cssText="..." 이 올바른 명세서의 표현이기 때문에 제 생각에는 파싱을 할 때 dom.style="..." 을 dom.style.cssText="..." 으로 바꾸어 주는 것이 아닐까 생각됩니다

따라서 다음과 같이 사용한다면 background-color 를 유지할 수 있습니다

  el2.style = el2.style.cssText + "; padding: 8px; width: 320px; height: 240px";

eyabc commented 3 years ago

성능

크롬 84 의 performance 메뉴에서 확인한 결과

el1

위 이미지를 시간별로 확인을 해보면

....

el2

el3

거의 비슷한 시간과 렌더링 과정을 가지는 것을 보아 엔진이 최적화를 하는 것 같습니다

크롬 84 기준.

의외로 첫 방법이 평균적으로 제일 빨랐습니다. 크롬에서 사용하는 엔진 동작을 잘 모르기 때문에 상세한 이유는 잘 모르겠네요

khw970421 commented 3 years ago

제 질문에 대해 궁금한부분을 설명해주신 긴 답변 감사합니다. @eyabc

dom.style.cssText="..." 이 올바른 명세서의 표현이기 때문에
제 생각에는 파싱을 할 때 dom.style="..." 을 dom.style.cssText="..." 으로 바꾸어 주는 것이 아닐까 생각됩니다

저도 이부분이 조금 더 궁금해서 console.log를 통해 시도해본결과

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트의 디폴트 행동 취소</title>
<style>
    td{
        border: 1px solid black;
        width:80px;
        height:80px;
    }
</style>
</head>
<body >
<div id='reflow-test1' style='background-color:red;' >hi</div>
<div id='reflow-test2' style='background-color:red;'>hi</div>
<div id='reflow-test3' style='background-color:red;'>hi</div>
</body>

 <script>
var el1 = document.getElementById("reflow-test1");
el1.style.padding = "8px";
el1.style.width = "320px";
el1.style.height = "240px";

var el2 = document.getElementById("reflow-test2");
console.log(el2.style);                               //CSSStyleDeclaration {0: "background-color", alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}

console.log(el2.style.cssText);                  //background-color: red;
el2.style.cssText = el2.style.cssText + " padding: 8px; width: 320px; height: 240px";

var el3 = document.getElementById("reflow-test3");
el3.style.cssText = "padding: 8px; width: 320px; height: 240px;";

console.log(el2.style);
console.log(el2.style.cssText);
</script>
</html>

저렇게 el2.style은 나타나고 el2.style.cssText는 저렇게 나타나는데 type도 확인 해본 결과 el2.style은 object이고 el2.style.cssText는 string으로 나타났습니다. 아마 둘다 다르지만 결과는 같은 건 뭔가 js가 확실히 초반에 잘 만들어진 언어는 아니다 보니 이런 부분도 처리할때는 같은 결과로 처리하지않나 싶습니다. 가능한 다음부터 사용할때는 좀더 확실하게 cssText부분을 같이 써서 사용하는 편이 혼동되지않을거 같다고 생각합니다.

khw970421 commented 3 years ago

background-color :red 스타일이 적용되지 않는 이유는 https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/style 기존의 스타일을 덮어 썼기 때문입니다

역시 기존의 스타일을 덮어쓰는거로 인해 기존에 있던것을 없애는 것이라고 생각한게 맞군요

khw970421 commented 3 years ago

리플로우를 가장많이 한 첫번째방법이 가장 빠른것은 저도 흥미롭네요

의외로 첫 방법이 평균적으로 제일 빨랐습니다. 크롬에서 사용하는 엔진 동작을 잘 모르기 때문에 상세한 이유는 잘 모르겠네요 답변

pul8219 / TIL

FE Study) STEP 16 리뷰 #13

el1

e2

성능

el1

el2

el3