1. Reflow와 Repaint란


웹페이지의 렌더링 과정중 발생하는 것으로 

부하가 높음. UI가 느려지는 원인이 됨.

특히 Refolw부하가 더 높기 때문에 최대한 피하는 편이 좋음


2. Reflow와 Repaint


-Reflow 

크기와 위치에 맞게 브라우져에 셋팅되는 과정


-Repaint

시각적인 요소가 셋팅되는 과정

배경색 -> 배경이미지 -> 테두리 -> 자식 -> 아웃라인


3. Reflow와 Repaint 사례


 Reflow 사례

 Repaint 사례

 Render Tree (Layout)에 영향을 주는 행동을 했을 경우 발생

 영향을 받은 모든 노드의 수치를 다시 계산하여 렌더트리 재생성

 Render Tree (Layout)에 영향을 주지 않는 것을 변경했을 경우 발생


 1) 윈도우 리사이징(너비 높이 변경)

 2) 폰트 변화

 3) 스타일 추가, 제거

 4) 내용 변화 (input 텍스트 입력)

 5) JS를 통한 DOM 동적 변화

 1) background-color

 2) visibillty, outline등 스타일 변경


* 단, 노드의 위치, 크기변경되는 경우, 노드가 추가, 삭제되는 경우는 Reflow, Repaint 모두 발생


4. Reflow 피하는 방법


1) 인라인 스타일 지양하기

2) table-layout:fixed 제외, 테이블은 사용 지양하기 (점진적 렌더링에 방해되지 않도록 table-layout:fixed사용)

3) 변경이 자주 일어나는 요소는 Absolute에 배치 (전체 노드에서 분리)


배치 방법

* Normal : 문서안 위치는 유형, 면적에 따라 배치, 랜더트리에서 DOM트리 위치와 동일

* Float Normal과 같이 배치된 후 왼쪽 or 오른쪽으로 이동

* Absolute : DOM트리와 다른 트리에 배치 (position:absolute, position:fixed)

4) 스타일 변경은 DOM구조상 제일 끝단 노드에서 수행

5) 스타일 변경은  한번에 처리하기

6) 스타일 최적화 하기(CSS최소화)

7) IE의 경우 CSS에서 js표현식 쓰지 않기

8) position:relative사용시 주의 하기



참고 : http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/

'Extra' 카테고리의 다른 글

[Extra] Reflow와 Repaint  (0) 2018.03.20
[Extra] Rendering  (0) 2018.03.19
[Extra] 순차탐색 이진탐색  (0) 2018.03.16
[Extra] 32비트와 64비트 운영체제 차이  (0) 2018.03.12
[Extra] Big-O(빅오 표기법)  (0) 2018.03.11

1. Rendering(렌더링)이란 


- 화면에 컨텐츠를 그리는 과정


2. 브라우져 별 렌더링 엔진


- 크롬, 사파리 : Webkit 엔진

- 파이어 폭스 : Gecko 엔진



3. 렌더링 순서

브라우져마다 기본적으로 아래와 같은 순서로 진행됨

(출처:http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/)

1. DOM 트리 구축을 위한 HTML을 파싱


2. Content Tree에서 태그를 DOM노드로 변환, 외부 CSS파일과 함께 포함된 스타일 요소들도 파싱 (style struct 생성)


3. 1,2번으로 Render Tree 생성


4. Render Tree를 새롭게 재정립함 (Reflow!!)


5. Render Tree 재배치 (Layout) (각 DOM노드가 정확한 위치에 표시되어야함)


6. Render Tree가 구성되고나면 브라우져에 그리기 시작함 (Repaint!!)


7. 페이지 기능에 따라 Reflow, Repaint추가 발생


* 점진적으로 수행함 (즉 1번이 모두 끝날때 까지 기다리지 않고 파싱되는대로 다음 단계 수행)

* Table의 경우 점진적 렌더링 불가 (table-layout:fixed일 경우에는 가능)


'Extra' 카테고리의 다른 글

[Extra] Reflow와 Repaint  (0) 2018.03.20
[Extra] Rendering  (0) 2018.03.19
[Extra] 순차탐색 이진탐색  (0) 2018.03.16
[Extra] 32비트와 64비트 운영체제 차이  (0) 2018.03.12
[Extra] Big-O(빅오 표기법)  (0) 2018.03.11



순차탐색(Sequential search)


선형 탐색(Linear search)이라고도함

전제조건 : 없음 (정렬되지 않은 리스트여도됨)

방법 : 찾을 숫자를 처음부터 나올때 까지 비교함



ex) 1-20중 숫자 고르기 (19)



source)

int j = [찾을 숫자]


int[] arrList;


for(int i = 0; i < arrList.length; i++)

{

if (arrList[i] == j)

{

return i;

}

}



빅오 표기법 : O(N)



이진탐색 (Binary search)


전제조건 : 정렬된 데이터

방법 : 정렬된 데이터 집합이분화하면서 탐색하는 방법 (관계 없는 1/2을 제외시킴)


ex) 1-20중 숫자 고르기 (19)


빅오 표기법 : O(log N)



* 반씩 잘라서 찾아나가는것 "이진탐색"

* 용량이 많아질 경우 눈에 띄게 연산 횟수 차이가 나게됨

'Extra' 카테고리의 다른 글

[Extra] Reflow와 Repaint  (0) 2018.03.20
[Extra] Rendering  (0) 2018.03.19
[Extra] 순차탐색 이진탐색  (0) 2018.03.16
[Extra] 32비트와 64비트 운영체제 차이  (0) 2018.03.12
[Extra] Big-O(빅오 표기법)  (0) 2018.03.11

32비트와 64비트 운영체제 차이


컴퓨터의 프로세서(CPU)가 정보를 처리하는 방식


 

 32비트

 64비트

메모리 최대 인식용량

 4GB

(윈도우용 메모리 약 3.5GB사용)

(윈도우 서버 에디션->최대 64GB까지 인식 가능한 툴(PAE) 제공)


 4GB이상의 RAM도 인식 

(최대 16EB(엑사바이트))

다룰 수 있는 데이터

 2^32 데이터를 다룰 수 있음

 2^64 데이터를 다룰 수 있음

기타

 데이터의 처리속도가 상대적으로 느림

 데이터의 처리속도가 상대적으로 빠름


'Extra' 카테고리의 다른 글

[Extra] Reflow와 Repaint  (0) 2018.03.20
[Extra] Rendering  (0) 2018.03.19
[Extra] 순차탐색 이진탐색  (0) 2018.03.16
[Extra] 32비트와 64비트 운영체제 차이  (0) 2018.03.12
[Extra] Big-O(빅오 표기법)  (0) 2018.03.11

Big-O (빅오 표기법)


- 프로그램의 시간 복잡도를 표기하는 방법

- 알고리즘의 성능을 표현하기 위해 사용



빅오 적용법


1. 입력값을 확인하여 무엇을 N 으로 놓을지 정함

2. 알고리즘에서 수행할 연산 횟수를 N의 식으로 표현

3. 차수가 가장 높은 N만 남김

4. 모든 상수인수를 없앰

(ex. O(n^2/2) -> O(n^2))



빅오 성능순서


0. O(1) (성능순서에 제외)

- 상수 실행 시간

- 항상 일정한 시간에 완료 되지만 현실적으로 거의 없는 알고리즘


1. O(log N)

- 로그 알고리즘

- 실행시간이 입력크기의 로그에 비해 늘어남

- 일반적으로 좋은 효율의 알고리즘


2. O(N)

- 선형 알고리즘

- 실행시간이 입력크기에 비례하여 늘어남


3. O(N log N)

- 초선형 알고리즘

- 처리 데이터의 양이 늘 수록 정비례보다 약간 더 실행시간 늘어남


4. O(N^C)

- 다항식 알고리즘

- 입력크기가 늘어날수록 빠르게 실행시간이 늘어남

- 대용량 데이터일수록 처리시간 망함


5. O(C^N)

- 지수 알고리즘

- 다항식 알고리즘보다 느림...

- 데이터가 조금만 늘어나도 망함


6. O(N!)

- 팩토리얼 알고리즘

- 제일 망함

- 5개만 들어와도 5*4*3*2*1


*일반적인 계산이긴 하나 면접 질문일 경우 최선, 평균, 최악 케이스인지 확인하는 것도 좋음



'Extra' 카테고리의 다른 글

[Extra] Reflow와 Repaint  (0) 2018.03.20
[Extra] Rendering  (0) 2018.03.19
[Extra] 순차탐색 이진탐색  (0) 2018.03.16
[Extra] 32비트와 64비트 운영체제 차이  (0) 2018.03.12
[Extra] Big-O(빅오 표기법)  (0) 2018.03.11

+ Recent posts