어떤 js 또는 css 파일을 먼저 소개해야 합니까?

사용자에게 지저분한 페이지가 표시되지 않도록 먼저 CSS 파일을 소개하고 CSS 스타일을 먼저 로드한 다음 js를 가져와 로드하세요. Node.js는 일반적으로 기능을 처리하므로 미리 로드할 필요가 없습니다. 먼저 사용자에게 모양과 느낌을 제공한 다음 사용자에게 실습 경험을 제공합니다.

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3&&javascript 버전 1.8.5, Dell G3 컴퓨터.

먼저 CSS 파일을 소개하고 로드한 다음, js를 소개하고 로드하세요.

우리는 일반적으로 CSS를 맨 위에 놓고 js를 맨 아래에 놓습니다. 먼저 CSS 파일을 로드하고(사용자에게 지저분한 페이지가 표시되지 않도록 함) 마지막으로 js 파일을 로드합니다. Node.js는 일반적으로 기능을 처리하므로 미리 로드할 필요가 없습니다. 먼저 사용자에게 모양과 느낌을 제공한 다음 사용자에게 실습 경험을 제공합니다.

js 스크립트 파일의 위치

js 스크립트는 맨 아래에 배치해야 합니다. 그 이유는 js 스레드와 GUI 렌더링 스레드가 상호 배타적이기 때문입니다. 페이지와 js의 주요 기능은 상호 작용을 처리하는 것이며 페이지가 발생하기 전에 상호 작용이 렌더링되어야 합니다. 따라서 사용자 경험을 보장하려면 다음을 수행하십시오. 페이지를 먼저 그리도록 하세요.

CSS 파일의 위치

CSS는 페이지 렌더링의 핵심 요소 중 하나입니다. (페이지에 외부 링크 CSS가 있는 경우) 브라우저는 페이지를 렌더링하기 전에 모든 CSS가 다운로드되고 구문 분석될 때까지 기다립니다. . 중요한 경로의 지연은 첫 번째 화면 표시 시간에 영향을 미치므로 가능한 한 빨리 CSS를 사용자 장치로 전송해야 합니다. 그렇지 않으면 페이지가 렌더링될 때까지 사용자에게 빈 화면만 표시됩니다.

CSS 파일은 배치 순서에 따라 다운로드 우선 순위가 결정되고 더 중요한 것은 브라우저의 렌더링 메커니즘이 결정되기 때문에 파일이 맨 위에 배치됩니다.

css는 로딩 과정에서 DOM 트리 생성에 영향을 미치지 않지만, 렌더 트리 생성에 영향을 미치고, 이는 결국 레이아웃에 영향을 줍니다. 따라서 일반적으로 스타일의 링크 태그를 배치해야 합니다. 왜냐하면 DOM을 파싱할 때 트리는 위에서 아래로 생성되고 CSS 스타일은 비동기적으로 로드되기 때문입니다. 이 경우 DOM 트리 아래의 바디 노드를 파싱하고 CSS 스타일을 로드하는 작업은 가능한 한 병렬화하여 렌더 트리 생성 속도를 높입니다.

CSS를 맨 아래에 넣으면 페이지가 점진적으로 렌더링될 수 있지만 CSS를 다운로드하고 구문 분석한 후에는 렌더링된 텍스트와 이미지를 새로운 스타일에 따라 다시 그려야 합니다. .

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 비디오를 방문하세요! !

위 내용은 어떤 js 또는 css 파일을 먼저 소개해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!