프런트 엔드 최적화 요약

자원 통합

// 未合并
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>

// 合并之后，可以减少请求
<script src="abc.js"></script>

은닉처

• 정적 리소스에 해시 접미사를 추가하고 파일 콘텐츠를 기반으로 해시를 계산합니다.
• 파일의 내용은 변경되지 않고 해시는 변경되지 않으며 URL은 변경되지 않습니다.
• URL과 파일이 변경되지 않으면 http 캐싱 메커니즘이 자동으로 트리거되고 304가 반환됩니다.

CDN 사용

예 : https : //www.bootcdn.cn/

SSR 서비스 렌더링 (서버 측 렌더링)

• 서버 측 렌더링 : 웹 페이지와 데이터를 함께로드하고 함께 렌더링
• 비 SSR (프런트 엔드 및 백 엔드 분리) : 먼저 웹 페이지를로드 한 다음 데이터를로드 한 다음 데이터를 렌더링합니다.

이미지 지연 로딩

캐시 DOM 쿼리

여러 DOM 작업이 함께 DOM 구조에 삽입됩니다.

가능한 한 빨리 JS 실행을 시작하십시오.