본문 바로가기

공부 정리/웹(Web)39

Critical Rendering Path(CRP) CRP이란 CRP은 브라우저가 HTML, CSS, JS를 변환하여 스크린으로 보여주는 과정을 의미합니다. CRP을 최적화한다면 웹페이지의 성능을 크게 향상할 수 있다고 합니다. CRP은 그림에서 보다시피 Request/Response => loading => scripting => rendering => layout => painting으로 구분됩니다. Requset/Response : 브라우저가 서버에게 요청/응답을 보냄 loading : 브라우저가 서버에서 파일 받아옴(html, css, js) scripting : html파일을 DOM요소로, css 파일을 cssom요소로 (DOM : document object model) (DOM + CSS = CSSOM) rendering : DOM 과 CSS.. 2022. 2. 8.
async Vs defer 비교 html에서 외부의 js파일을 불러올때 로 불러옵니다. 근데 이 코드의 위치에 따른 의미가 있다고 하여 공부해보았습니다. 1. 안에 있을 때 그냥 단순히 안에 작성한경우, 브라우저가 html 가져오다가 + js가져오기 + js 실행 + 나머지 html 가져오기 => 중간에 html 가져오는거 끊김 ! => 유저가 불편 2. 맨 밑에 있을 때 1에서 중간에 html이 끊기는 이슈가 있었기 때문에, 마지막에 넣음으로써, html이 안끊기게함 브라우저가 html 가져오기 + js가져오기 + js실행 => html 다 가져올 때까지 js기능을 못씀 => 유저의 불편 유발 가능성 UP! 3. 안에 쓰지만 async 추가 를 추가하면 말 그대로 비동기적으로 진행합니다. 브라우져 가져오기와 js가져오기를 동시에 합니.. 2022. 2. 2.
getBoundingClientRect() Vs css 좌표 getBoundingClientRect()는 엘리먼트의 좌표값을 알 수 있는 api입니다. 그런데, 이 좌표값이 css와 혼동이 있어서 정리 해 보았습니다. getBoundingClientRect() css ex) (getBoundingClientRect()) right:1240px; bottom:569 (css) position: fixed right:40px; bottom:40px; 두 좌표가 같은 element를 의미하고 있습니다. (화면크기에 따라 위에 해당 하는 값 다를 수 있음) 결론 getBoundingClientRect()를 이용할 때는 right, bottom의 기준이 왼쪽 상단이지만, css에서 right, bottom을 측정할 때는 element를 기준으로 값을 지정했습니다. 2022. 2. 1.
[CSS] box-sizing 어느 날 css 파일 속 box-sizing 역할이 궁금하여 알아보았습니다. * { box-sizing: border-box; } box-sizing값을 content-box(default)로 설정하면 박스의 width를 content의 길이만큼 설정하고, box-sizing값을 border-box로 설정하면 width를 border*2 + padding*2 + content의 길이로 설정 가능하여 css작업 시 더 편하게 width값을 설정할 수 있습니다. Example s box-sizing: border-box; width를 100으로 설정하고 border를 5로 설정했지만, border-box를 기준으로 하기때문에 content사이즈가 자동으로 90이 됩니다. box-sizing: content-.. 2022. 1. 24.
[CSS] position position이란? css 문서상에서 요소를 배치할때 사용하는 속성입니다. 속성은 static, relative, absolute, fixed, sticky 총 5가지인데, 여기서는 static, relative, absolute를 집중적으로 알아보겠습니다. static position: static; 이 속성의 값은 기본값입니다. position에 대한 값을 쓰지 않으면 요소는 기본적으로 static으로 할당됩니다. 예시와 그림을 보겠습니다. 코드 더보기 html css .container { position: static; top: 40px; width:500px; height:400px; background-color: antiquewhite; } .ex2 { width: 200px; height.. 2021. 12. 21.
[자바스크립트] Array.some() Array.some()이란 메서드중 하나로, 주어진 배열안에서 하나라도 주어진 조건을 통과하는지 테스트하는 함수 입니다. 예시 코드1 const arr =[1,1,3,1,5]; const even = (element) => element%2 === 0; console.log(arr.some(even)); true 예시 코드2 const arr =[1,2,3,1,5]; const even = (element) => element%2 === 0; console.log(arr.some(even)); true 예시 코드3 console.log([1,2,3,4,5].some((element) => { if(element %2 ===0) console.log("even"); else console.log("odd".. 2021. 12. 14.
반응형

티스토리툴바