기본 // 성능 최적화

기본 성능 최적화

1.1 성능 최적화 원칙

① 더 많은 메모리, 캐시 또는 기타 방법 사용
② CPU 계산 및 네트워크 감소

1.2 성능을 향상시키는 방법은 무엇입니까?

1)로드 리소스 최적화

① 리소스 압축 및 병합을 통한 HTTP 요청 감소
② 비 코어 코드 비동기 로딩 → 비동기 로딩 방식 → 비동기 로딩의 차이
③ 브라우저 캐싱 사용 → 캐시 분류 → 캐싱 원칙
④CDN을 사용하여 리소스 로딩 속도
향상 ⑤DNS
메타 http- 사전 해결 equiv = "x-dns-prefetch-control"content = "on">
link rel = "dns-prefectch"href = "// host_to_prefetch.com"> ⑥SSR
백엔드 렌더링을 사용하고 데이터를 HTML로 직접 출력

• * CDN
  (콘텐츠 전송 네트워크) 콘텐츠 전송 네트워크
  는 네트워크 최적화입니다. 특히 처음으로 웹 사이트를 열 때이 말을해야합니다.
• * DNS 사전 확인
  일부 상위 수준 브라우저에서 a 태그는 기본적으로 DNS 사전 확인을 엽니 다.
  웹 사이트가 Https 프로토콜로 시작하는 경우 많은 브라우저가 기본적으로 DNS 사전 확인을 해제합니다.
• * 비동기 로딩
  방식 | 차이점

①动态脚本加载  |
②defer        |  defer在HTML解析完后才执行，如果是多个，按照加载的顺序执行
③async        |  async是在加载完后立即执行，如果是多个，执行顺序和加载顺序无关

• * 브라우저
  캐시 ① 강력한 캐시 (서버 리소스 사본 만료 여부 묻지 않고 직접 로컬 캐시 사용)

Expires    Expires: Thu, 21 Jan 2017 23:39:02 GMT（服务器与浏览器存在时间差）
Cache-Control    Cache-Control: max-age:3600 （相对时间）

② 협상 캐시 (서버 만료 여부 확인 및 재사용)

Last-Modified If-Modified-Since    Last-Modified: Web,26 Jan 2017 00:35:11 GMT
Etag If-None-Match

2) 렌더링 최적화

① CSS를 앞에두고 JS를 뒤에
② 지연 로딩 (그림 지연 로딩, 드롭 다운 로딩 더 많이) ③DOM
쿼리 감소, DOM 쿼리 캐시 ④DOM
작업 감소, 여러 작업을 결합하여 가능한 한 작동
⑤ 이벤트 조절 ⑥ 가능한 한 빨리 실행 작업 (예 : DOMContentLoaded)

1.3 캐싱과 관련된 http 프로토콜 헤더는 무엇입니까?

Expires / Cache-Control / Last-Modified / if-Modified-Since / Etag / If-None-Match