2021-09-16 TIL

TIL

목록 보기

17/19

크롤러가 사이트에 들어가서 링크가 있으면 모두 들어가 사이트를 수집하고 각 페이지에 관한 정보(콘텐츠, 이미지, 동영상 파일)를 분석하여 어떤 페이지인지 파악하고 데이터베이스에 저장한다는 사실
유저가 검색창에 검색어를 입력하면 크롤러가 수집한 웹사이트중에 검색어와 가장 연관성이 높은 순으로 순위를 매긴후 결과를 화면에 표시한다

사이트의 링크가 여러곳에 공유되 있으면 크롤러가 신뢰성 높은 사이트로 판단하여 점수를 높게 매긴다
크롤러가 사이트를 돌아다니면서 사이트 링크와 사이트에 존재하는 내용과의 연관관계를 저장해 놓기 때문에 페이스북, 인스타 등등에서 게시물로 특정 사이트 링크를 추가할때는 게시물 제목과 내용의 단어(관련있는 단어) 선택을 잘 해야한다
<head>에 페이지 정보를 잘 작성한다(title, meta 정보) - (📎 참고글)
robots.txt파일을 사용하면 원치 않는 크롤링을 차단할 수 있다(Disallow) - (📎 참고글)
sitemap.xml 파일을 사용하여 메뉴 구조 정보를 정리해서 제공하면 크롤러가 좀 더 쉽게 사이트를 파악할 수 있다. sitemap.xml 파일이 없으면 크롤러가 메뉴를 하나하나 눌러보면서 사이트를 파악해야 한다 🤭 - (📎 참고글)
시맨틱 태그는 브라우저, 검색엔진, 개발자 모두에게 콘텐츠의 의미를 명확하게 설명하는 역할을 한다. 시맨틱 태그에 의해 컴퓨터가 HTML 요소의 의미를 보다 명확하게 해석한다(📎 참고글)

사이트에 진입한다
html을 서버에 요청해서 받아온다
받아온 html 파일을 위에서부터 읽는다
link 태그를 만나면 css를 받아와서 파싱하여 CSSOM으로 만든다
- <link href="style.css" rel="stylesheet">
javascript 파일을 만나면 javascript 파일 해석이 끝날때까지 브라우저 렌더링을 멈춘다.
- 이러한 특징 때문에 자바스크립트 파일이 커지면 커질수록 렌더링이 느려진다
img, video, audio 를 만나면 외부 리소스를 다운받아 온다.
html을 파싱한 결과인 DOM과 css를 파싱한 결과인 CSSOM이 만들어진다
DOM과 CSSOM을 결합하여 렌더트리를 만든다
렌더트리를 바탕으로 Layout(reflow)을 수행한다
- 각각의 요소를 어디에 배치할지 정하는 단계이다
페인트를 실행한다 - Paint(Reflow)
- 각각의 요소에 픽셀을 화면에 렌더링한다
- 화면에 요소가 나타난다