[Browser] Index

프론트엔드 개발자로서 브라우저에 대해 알고 있어야 하는 사항들을 정리해보고자 목차를 적어보았습니다. 

1. 브라우저의 기본 구조 

https://develop-dbd.tistory.com/208

1. 브라우저 엔진
2. 랜더링 엔진
3. Network
4. 자바스크립트 인터프리터 
5. UI Backend
6. DOM (Document Object Model)

2. DOM (Document Object Model)

https://develop-dbd.tistory.com/208

1. DOM tree 구조
2. DOM 조작

3. CSSOM (CSS Object Model)

https://develop-dbd.tistory.com/208

1. CSS 파싱
2. CSSOM 트리

4. 렌더링 파이프라인

1. 파싱
2. 스타일 계산
3. 레이아웃
4. 페인팅 // https://develop-dbd.tistory.com/208
5. 합성 및 레스터화
6. 브라우저 이벤트

5. 브라우저 이벤트

1. 이벤트 버블링 및 캡처링
2. 이벤트 위임
3. 기본 이벤트 및 커스텀 이벤트

6. 브라우저 API

1. DOM API
2. Fetch API
3. Web Storage API
4. Geolocation API
5. Canvas API
6. Web Workers

7. 브라우저 보안

1. CORS (Cross-Origin Resource Sharing)
2. Content Security Policy (CSP)
3. HTTPS 및 SSL/TLS
4. Same-origin Policy

8. 성능 최적화

1. 페인팅과 레이아웃 최적화
2. 비동기 로딩 (Async/Await)
3. 리소스 최적화 (이미지, 스크립트)
4. Lazy Loading

9. 브라우저 호환성

1. 크로스 브라우저 테스트
2. Polyfills
3. CSS 프리픽스

 

참고할 사이트 

• inflearn https://www.inflearn.com/blogs/3138
• Naver O2 browser 검색결과: https://d2.naver.com/search?keyword=%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80 
• 최신 브라우저 내부 살펴보기 시리즈 : https://d2.naver.com/helloworld/2922312 
• frontendMasters https://frontendmasters.com/guides/front-end-handbook/2018/learning/browsers.html

네이버의 O2 블로그에서 브라우저로 검색하니 꽤 재밌어보이는 글들이 많다.