js 와 css 의 차단 문제 에 대한 상세 한 분석

6403 단어 jscss가로막다
DOMContent Loaded 와 load
우 리 는 먼저 두 사건 을 이해 하면 뒤의 분석 에 도움 이 된다.
load 이벤트:load 는 완전히 불 러 온 페이지 를 검사 하 는 데 만 사용 되 어야 합 니 다.자원 과 의존 자원 이 로드 되 었 을 때 load 이 벤트 를 촉발 합 니 다.즉,페이지 의 html,css,js,이미지 등 자원 을 모두 불 러 온 후에 야 load 사건 을 촉발 할 수 있 습 니 다.
DOMContentLoaded 이벤트:초기 HTML 문서 가 완전히 불 러 오고 해석 되면 DOMContentLoaded 이벤트 가 실 행 됩 니 다.스타일 시트,이미지,하위 프레임 워 크 가 불 러 올 때 까지 기다 리 지 않 아 도 됩 니 다.DOM 트 리 가 구축 되면 DOMContentLoaded 이 벤트 를 촉발 한 다 는 것 이다.
뭐 공부 해요?
js 가 실행 하 는 과정 에서 DOM 을 조작 할 수 있 기 때문에 환류 와 재 그리 기 가 발생 할 수 있 기 때문에 GUI 렌 더 링 스 레 드 와 JS 엔진 스 레 드 는 서로 배척 합 니 다.
HTML 을 분석 하 는 과정 에서 script 라벨 을 만나면 렌 더 링 스 레 드 는 렌 더 링 과정 을 중단 하고 JS 엔진 에 제어 권 을 맡 깁 니 다.내 연 된 js 코드 는 직접 실 행 됩 니 다.js 외부 파일 이 라면 이 js 파일 을 다운로드 하고 다운로드 가 완 료 된 후에 실행 해 야 합 니 다.JS 엔진 이 실행 되면 브 라 우 저 는 제어 권 을 렌 더 링 스 레 드 에 돌려 주 고 DOM 의 분석 을 계속 합 니 다.
따라서 js 는 DOM 트 리 의 구축 을 막는다.
그렇다면 페이지 의 표 시 를 막 을 수 있 습 니까?우 리 는 아래 의 코드 로 테스트 해 보 자.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>hello world</div>
  <script>
    debugger
  </script>
  <div>hello world2</div>
</body>
</html>

이 페이지 의 DOMContentLoaded 가 2.23s 에서 발생 한 것 을 볼 수 있 습 니 다.이 를 통 해 js 가 DOM 트 리 의 구축 을 막 았 음 을 알 수 있 습 니 다.그러나 페이지 에 hello World 가 거의 한 순간 에 표 시 된 것 은 js 가 그 전에 있 는 dom 요소 의 렌 더 링 을 막 지 않 는 다 는 것 을 의미한다.
현대 브 라 우 저 는 더 좋 은 사용자 체험 을 위해 렌 더 링 엔진 이 가능 한 한 빨리 화면 에 표 시 된 내용 을 시도 할 것 입 니 다.모든 DOM 해석 이 끝 날 때 까지 렌 더 링 트 리 를 배치 하지 않 습 니 다.js 차단 이 발생 하면 이미 구 축 된 DOM 요 소 를 화면 에 렌 더 링 하여 흰색 화면의 시간 을 줄 입 니 다.
이것 도 바로 우리 가 script 라벨 을 body 라벨 의 아래쪽 에 놓 는 이유 입 니 다.그러면 앞의 페이지 의 렌 더 링 에 영향 을 주지 않 기 때 문 입 니 다.
css 가 뭘 막 았 어 요?
HTML 을 분석 할 때 링크 탭 이나 style 탭 을 만 났 을 때 스타일 을 계산 하여 CSSOM 을 구축 합 니 다.
css 는 dom 트 리 의 구축 을 막 지 는 않 지만 페이지 의 표 시 를 막 을 수 있 습 니 다.우 리 는 여전히 하나의 예 로 테스트 한다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</head>
<body>
  <div class="woo-spinner-filled">hello world</div>
  <div>hello world2</div>
</body>
</html>

외부 css 파일 을 사용 하여 Slow 3G 시 뮬 레이 션 이 느 린 네트워크 속 도 를 엽 니 다.DOMContentLoaded 이벤트 트리거 는 30ms 만 사 용 했 습 니 다.페이지 는 여전히 공백 상태 이 고 거의 loaded 이벤트 2.92s 가 발생 했 을 때 페이지 에 내용 이 나타 납 니 다.
브 라 우 저가 CSSOM 을 구축 하 는 과정 에서 처 리 된 내용 을 과장 하지 않 기 때문이다.DOM 이 해석 이 끝 났 더 라 도 CSSOM 이 구축 되 지 않 으 면 페이지 에 내용 이 표시 되 지 않 습 니 다.
링크 탭 이나 style 탭 을 만 났 을 때 만 CSSOM 을 구축 할 수 있 습 니 다.따라서 링크 탭 에 dom 요소 가 있 으 면 css 를 불 러 오 는 데 장애 가 발생 합 니 다.

<body>
  <div class="woo-spinner-filled">hello world</div>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
  <div>hello world2</div>
</body>
이렇게 하면 페이지 가 반 짝 이 는 문제 가 발생 할 수 있 습 니 다.css 가 불 러 오기 전에 브 라 우 저 는 기본 스타일 로 렌 더 링 합 니 다. 
hello world
,css 로드 가 완료 되면 이 div 에 새로운 스타일 을 계산 하고 다시 렌 더 링 하여 반 짝 이 는 효과 가 나타 납 니 다.
페이지 가 깜빡 이 는 것 을 피하 기 위해 서,보통 링크 탭 은 헤드 에 놓 여 있 습 니 다.
css 가 뒤의 js 실행 을 막 을 수 있 습 니까?정 답 은 회!
JS 의 역할 은 웹 페이지 의 모든 면 을 수정 하 는 데 도움 을 주 는 것 입 니 다.내용,스타일 과 사용자 의 상호작용 에 어떻게 응답 하 는 지.이'모든 면'의 수정 은 본질 적 으로 DOM 과 CSSDOM 에 대한 수정 이다.JS 에서 CSSDOM 의 한 요소 의 스타일 을 방 문 했 을 때 이 스타일 이 다운로드 되 기 를 기 다 려 야 JS 스 크 립 트 를 계속 실행 할 수 있 습 니 다.
다음 예 를 실행 하면 css 로드 가 완료 되 어야 콘 솔 에서"this is a test"를 인쇄 할 수 있 습 니 다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://h5.sinaimg.cn/m/weibo-pro/css/chunk-vendors.d6cac585.css">
</head>
<body>
  <div class="woo-spinner-filled">hello world</div>
  <div>hello world2</div>
  <script>
    console.log('this is a test')
  </script>
</body>
</html>
최적화 하 다.
내 연 된 자 바스 크 립 트 와 CSS 를 사용 하면 HTML 파일 을 가 져 온 후에 바로 렌 더 링 프로 세 스 를 시작 할 수 있 습 니 다.
모든 상황 이 내 연 에 적합 한 것 은 아니 므 로 웹 팩 등 구축 도 구 를 통 해 무용 코드 삭제,css 압축,자바 스 크 립 트 파일 의 부 피 를 최대한 줄 일 수 있 습 니 다.또한 CDN 을 사용 하여 파일 다운로드 속 도 를 빠르게 합 니 다.
큰 CSS 파일 에 대해 서 는 미디어 를 통 해 속성 을 조회 하고 다양한 용도 의 CSS 파일 로 나 눌 수 있어 특정 장면 에서 만 특정 CSS 파일 을 불 러 올 수 있다.
자 바스 크 립 트 파일 에 DOM 관련 코드 가 작 동 하지 않 으 면 이 자 바스 크 립 트 스 크 립 트 를 비동기 로 불 러 오고 async 나 defer 를 통 해 코드 를 표시 할 수 있 습 니 다.

<script src="index.js"></script>
//        index.js                。

<script async src="index.js"></script>
//index.js        ，                  。
//      ，JS        。

<script defer src="index.js"></script>
//JS        ，       。
//    defer        ，          ，  DOMContentLoaded
총결산
js 와 css 의 차단 문제 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 js 와 css 의 차단 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
Android 가 간단 한 로그 인 등록 논 리 를 실현 하 는 인 스 턴 스 코드
vue 4 급 네 비게 이 션 및 인증 코드 를 실현 하 는 방법 인 스 턴 스

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage