2021-09-16 TIL

yhe228·2021년 9월 16일
0

TIL

목록 보기
17/18
post-thumbnail

한일

  • 검색엔진, SEO 학습
  • The RED : 조은의 프론트엔드 실무 가이드 강의중 브라우저 동작 원리 시청 및 정리

배운것

크롤러 - 📎 참고글

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

검색 엔진 최적화

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

브라우저 동작 원리

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

DOM을 변경하면 발생하는 일

  1. DOM이 변견된다
  2. 렌더트리를 다시 그린다
  3. 레이아웃
    • 배치가 바뀌지 않았다면 생략 가능한 단계이다
      - 배치 관련된 속성 - widths, height ... 등등
    • 배치가 바뀌었다면 레이아웃 + 페인트 모두 실행된다
      - 텍스트가 바뀌어도 레이아웃 + 페인트가 동시에 일어난다
    • 불필요한 레이아웃을 발생시키지 않을수록 성능 향상에 좋다
    • 레이아웃을 발생시키는 css 속성들에 대한 이해가 필요하다
      예시 )
      1. position:absolute; top, bottom, left, right 속성은 기본적으로 레이아웃을 발생시킨다. 이것을 사용해서 애니메이션을 만들면 60프레임을 보장하기가 어려워진다
      2. 같은 역할을 하는 속성중에 transform 속성에서 translate 값을 사용하게 되면 위치 이동이 발생하지만 레이아웃을 발생시키지는 않고 페인트만 다시한다. 그래서 이 속성을 사용해서 애니메이션을 구현하면 기본적으로 레이아웃이 발생하지 않기 때문에 60프레임이 기본적으로 유지가 된다
    • 레이아웃 과정을 하나 줄이는것만으로도 렌더링 퍼포먼스가 향상된다
    • 레아아웃을 발생시키는 속성을 사용하면 60프레임을 유지하기가 어렵다
  4. 페인트

느낀것

  • 검색 엔진 최적화 작업을 하면서 그때 그때 SEO 가이드라인을 참고하며 학습하는 것이 좋을 것 같습니다!
  • 그동안 SEO를 신경쓰지않고 작업한 것을 반성합니다! 앞으로 SEO 가이드를 꼭 준수해서 작업하겠습니다 🔥
  • 애니메이션 작업시 레이아웃을 발생시키는 css는 조심해서 사용해야겠습니다.

자기선언

  • 나는 SEO 가이드를 준수하여 작업하는 사람이다
profile
함께 자라기를 지향합니다 ☺️

0개의 댓글