음악, 삶, 개발

https://css-tricks.com/lets-take-a-deep-dive-into-the-css-contain-property/ .foo { contain: size; /* foo 요소의 자식들이 foo 의 size 를 키울수없음 */ } .foo { contain: layout; /* 외부 요소가 foo 요소의 layout 에 영향을 주지않음, 또는 foo 요소가 외부 요소의 layout 에 영향을 주지않음을 브라우져에게 알려줌. */ } .foo { contain: paint; /* foo 요소의 자식 요소들이 foo 요소 밖으로 빠져 나갔을때 그려지지않음. overflow hidden 과 비슷함. 예를 들어, foo 요소의 자식 요소가 -100% 로 밖으로 나가있다면, 브라우저가 contai..

1. 랜더링 Pipeline 이해하기. https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/ 2. CSS 의 contain 속성. https://www.youtube.com/watch?v=iqcO-5_KkJ4 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Containment https://developer.mozilla.org/en-US/docs/Web/CSS/contain https://www.smashingmagazine.com/2019/12/browsers-containment-css-contain-property/ https://css-trick..

CSS grid 를 사용할때, item 의 width 를 px 로 static 하게 조정한후 다시 수평 정렬이나 수직정렬을 하고싶을수있다. 이때 사용하는 중요한 속성이 justify-self 와 align-self 이다. .item { width: 100px; height: 50px; justify-self: center; /* 수평 정렬. width 와 연관. */ align-self: center; /* 수직 정렬 height 와 연관. */ } 꼭 width 가 특정되지않아도, 자식을 통해 설정된 width 상태에서도 justify-self 나 alight-self 를 사용할수있다. .item { grid-area: 1 / 1 / 2 / -1; /* width 가 1000px 이라고 가정. */ d..

https://stackoverflow.com/questions/41830529/optimizing-native-hit-testing-of-dom-elements-chrome

관련된 아주 좋은 설명들.. (감사합니다) https://blinders.tistory.com/92 https://blinders.tistory.com/93 https://sculove.github.io/slides/improveBrowserRendering/#/7 중요한건 아래와 같다. .foo { transform: scale(0) } /* 반드시. 초기값 설정해줘야함. 없으면 reflow 발생 */ .foo.visible { transform: scale(1) } 만약 transform 의 초기값이 없이 classlist 에 transform 을 하기위한 class 가 추가된다면 reflow 가 발생한다. 또 하나 "update layer tree" 라는것이 transform 을 통해 trigger..

그동안 개발을 1년간 해오면서, UI 의 성능을 저해하는 녀석들을 찾아냈고 정리해놓으려한다. 추후 더 찾아내면 이 포스팅에 업데이트하도록 하겠다. css 의 속성 하나를 추가하고 빼느냐에 따라 cpu 사용량이 3배가 넘게 나는것을 경험했기때문이다. 나는 나의 js 코드가 문제인가 하며 여기저기 말도 안되는곳을 들쑤고다녔었다. width, height 대신 transform 을 사용하라 같은 이야기가 아니다. 1. box-shadow 정말 사용하지 말아야 할 악마같은 녀석중 첫번째이다. 편하긴한데, 이게 ui 의 레이아웃이 변경할때 굉장히 CPU 나 GPU 를 spike 튀게했다. 무언가를 그리게 하는것은 UI 에서 피할수없지만, box-shadow 는 절대 다시 그리면 안되는 녀석이며.. 그냥 사용하지말..

AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGrey, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGra..

document.body.oncontextmenu = () => false

https://www.svgrepo.com/ https://www.onlinewebfonts.com/icon/

const toNumString = (index: number): string => { let indexStr = index + '' while (indexStr.length { let indexCounter = 128 for (let i = 0; i < 32; ++i) { let padStrings: string[] = [] for (let j = 0; j < 4; ++j) { padStrings.push (`pad_${toNumString(indexCounter)}`) indexCounter-- } const result = JSON.stringif..