JavaScript 최적화 주제: 로드 및 실행 로드 및 running_javascript 기술
- WBOY원래의
- 2016-05-16 15:19:101003검색
브라우저에서 JavaScript의 성능은 개발자가 직면한 가장 중요한 사용성 문제로 간주될 수 있습니다. 이 문제는 JavaScript의 차단 특성으로 인해 더욱 악화됩니다. 즉, JavaScript가 실행되는 동안 브라우저에서 다른 작업을 처리할 수 없습니다. 실제로 대부분의 브라우저는 단일 프로세스를 사용하여 UI 업데이트, JavaScript 실행 등 여러 작업을 처리하며 동시에 하나의 작업만 실행할 수 있습니다.
JavaScript가 실행되는 시간과 브라우저가 사용자 입력에 응답하기 위해 유휴 상태가 될 때까지 기다리는 시간입니다.
기본적으로 이는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 있으면 전체 페이지가 스크립트가 구문 분석되고 실행될 때까지 기다리게 된다는 의미입니다. 실제 JavaScript 코드가 인라인인지 관련 없는 외부 파일에 포함되어 있는지에 관계없이 페이지 다운로드 및 구문 분석 프로세스는 계속하기 전에 스크립트가 이 처리를 완료할 때까지 중지하고 기다려야 합니다. 스크립트가 실행되는 동안 페이지 콘텐츠를 수정할 수 있으므로 이는 페이지 수명 주기의 필수적인 부분입니다.
전형적인 예는 document.write() 함수입니다. 예를 들면 다음과 같습니다.
<html> <head> <title>Script Example</title> </head> <body> <p> <script type=”text/javascript”> document.write(“The date is ” + (new Date()).toDateString()); </script> </p> </body> </html>
위의 HTML 페이지에서와 같이 브라우저가 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 발견하면 JavaScript가 e388a4556c0f65e1904146cc1a846bee 태그에 콘텐츠를 추가할지 여부를 예측할 수 없습니다. 따라서 브라우저는 중지되고 이 JavaScript 코드를 실행한 다음 페이지 구문 분석 및 번역을 계속합니다. src 속성을 사용하여 JavaScript를 로드할 때도 동일한 일이 발생합니다. 브라우저는 먼저 외부 파일용 코드를 다운로드해야 하는데, 이 작업에는 시간이 좀 걸립니다. 그런 다음 이 코드를 구문 분석하고 실행합니다. 이 과정에서 페이지 구문 분석 및 사용자 상호 작용이 완전히 차단됩니다.
HTML 4 문서에는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 HTML 문서의 93f0f5c25f18dab9d176bd4f6de5d30e 또는 6c04bd5ca3fcae76e30b72ad730ca86d 태그에 포함될 수 있다고 명시되어 있습니다. 전통적으로 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 외부 JavaScript 파일을 로드하는 데 사용됩니다. 이러한 코드 외에도 93f0f5c25f18dab9d176bd4f6de5d30e 섹션에는 외부 CSS 파일 및 기타 페이지 미들웨어를 로드하기 위한 2cdf5bf648cf2f33323966d7f58a7f3f 태그도 포함되어 있습니다. 즉, 페이지가 올바른 모양과 동작을 얻을 수 있도록 스타일과 동작이 의존하는 부분을 함께 모아서 먼저 로드하는 것이 좋습니다. 예:
<html> <head> <title>Script Example</title> <– Example of inefficient script positioning –> <script type=”text/javascript” src=”file1.js”></script> <script type=”text/javascript” src=”file2.js”></script> <script type=”text/javascript” src=”file3.js”></script> <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> <body> <p>Hello world!</p> </body> </html>
이 코드는 무해해 보이지만 성능 문제가 있습니다. 세 개의 JavaScript 파일이 93f0f5c25f18dab9d176bd4f6de5d30e 섹션에 로드됩니다. 각 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 페이지의 구문 분석 프로세스를 차단하므로 외부 JavaScript 코드를 완전히 다운로드하고 실행할 때까지 페이지 처리를 계속할 수 없습니다. 사용자는 이러한 인지된 지연을 견뎌야 합니다.
브라우저는 6c04bd5ca3fcae76e30b72ad730ca86d 태그를 만날 때까지 페이지의 어떤 부분도 렌더링하지 않는다는 점을 기억하세요. 이러한 방식으로 페이지 상단에 스크립트를 배치하면 눈에 띄는 지연이 발생하며, 이는 일반적으로 페이지가 열릴 때 처음에는 빈 페이지가 표시되고 사용자는 페이지를 읽거나 상호 작용할 수 없습니다.
Internet Explorer 8, Firefox 3.5, Safari 4 및 Chrome 2에서는 JavaScript 파일의 병렬 다운로드가 가능합니다. 이 좋은 소식은 하나의 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 외부 리소스를 다운로드할 때 다른 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 차단할 필요가 없다는 것을 의미합니다. 불행하게도 JavaScript 다운로드는 여전히 다른 리소스의 다운로드 프로세스를 차단합니다. 스크립트 간의 다운로드 프로세스가 서로를 차단하지 않더라도 페이지는 계속 진행되기 전에 모든 JavaScript 코드가 다운로드되고 실행될 때까지 기다려야 합니다. 따라서 브라우저는 병렬 다운로드를 허용하여 성능을 향상시켰지만 문제는 완전히 해결되지 않았으며 스크립트 차단은 여전히 문제였습니다.
스크립트는 다른 페이지 리소스의 다운로드 프로세스를 차단하므로 모든 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 가능한 한 6c04bd5ca3fcae76e30b72ad730ca86d 태그의 아래쪽에 배치하여 전체 다운로드에 미치는 영향을 최소화하는 것이 좋습니다. 페이지. 예:
<html> <head> <title>Script Example</title> <link rel=”stylesheet” type=”text/css” href=”styles.css”> </head> <body> <p>Hello world!</p> <– Example of recommended script positioning –> <script type=”text/javascript” src=”file1.js”></script> <script type=”text/javascript” src=”file2.js”></script> <script type=”text/javascript” src=”file3.js”></script> </body> </html>
이 코드는 HTML 파일에서 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그의 권장 위치를 보여줍니다. 스크립트 다운로드가 서로 차단되기는 하지만, 페이지가 다운로드되어 사용자 앞에 표시되므로 페이지 진입 속도가 그리 느리게 느껴지지는 않습니다.
위 내용은 JavaScript 최적화 콘텐츠의 Loading and Execution 로딩 및 실행에 대한 관련 소개입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.