설 기간동안 쉬었으니 다시 공부시작!
아직도 대전에서 공부중이다!
오늘은 카페에와서 알고리즘 3문제와 간단한 브라우저 렌더링 관련 공부를 했다.
브라우저 렌더링 과정
- 브라우저가 화면에 나타나는 요소를 렌더링 할 때, 웹킷(Webkit)이나 게코(Gecko) 등과 같은 렌더링 엔진 을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript로 렌더링할 때 CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다.
- HTML 파싱 후, DOM(Document Object Model) 트리 구축
- CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축
- Javascript 실행
- 주의! HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다.
- DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축
- 주의! display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.
- 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout/Reflow 단계)
- 계산한 위치/크기를 기반으로 화면에 그림 (Paint 단계)
[baekjoon] 10709 기상캐스터
https://www.acmicpc.net/problem/10709 10709번: 기상캐스터 출력은 H 행으로, 각 행에는 공백으로 구분된 W 개의 정수를 출력한다. 출력의 i 번째 행 j 번째 정수 (1 ≦ i ≦ H, 1 ≦ j ≦ W) 는, 지금부터 몇 분후
mocha-blog.tistory.com
[baekjoon] 3474 교수가 된 현우 (javascript,c++)
https://www.acmicpc.net/problem/3474 3474번: 교수가 된 현우 첫째 줄에 테스트 케이스의 개수 T가 주어지고, 이어서 T개의 줄에 정수 N이 주어진다(1 +v); function solution() { while(t--){ let n = input.shift(); let five = 0
mocha-blog.tistory.com
[baekjoon] 2852 NBA농구 (Javascript)
https://www.acmicpc.net/problem/2852 2852번: NBA 농구 첫째 줄에 골이 들어간 횟수 N(1+v); const time = (+m * 60) + (+s); if(aScore > bScore) { aTime += time - cur; } else if (aScore < bScore) { bTime += time - cur; } if(team === 1) { aScore++;
mocha-blog.tistory.com
'TIL(Today I Learned)' 카테고리의 다른 글
| [TIL] 2023.1.26 (0) | 2023.01.26 |
|---|---|
| [TIL] 2023.1.24 (0) | 2023.01.24 |
| [TIL] 2023.1.17 (0) | 2023.01.17 |
| [TIL] 2023.1.16 (0) | 2023.01.16 |
| [TIL] 2023.1.13 (0) | 2023.01.13 |