최근에는 페이지 로딩 및 성능에 대한 페이지 내 CSS 및 JS 위치의 영향에 대해 생각해 보았습니다. 또한 여러 데모를 작성했으며 시간이 많이 걸리는 JS를 하단에 배치하는 것과 같은 몇 가지 질문을 발견했습니다. 페이지 로딩을 차단하는 것을 방지합니다. 하지만 제가 입력한 데모는 모두가 말한 내용과 일치하지 않는 것 같습니다. 구체적인 코드는 다음과 같습니다:
으아악6개의 P 요소가 먼저 표시되고 경고(str)가 발생하기 전에 몇 초 동안 기다려야 하는 것은 당연합니다. 그러나 결과는 다음과 같습니다. 이 코드는 여러 브라우저에서 실행됩니다.
1. chrome 로딩 바가 바뀌고 경고가 표시되고 확인을 클릭하면 페이지가 표시됩니다.
2.ie 및 Firefox는 로딩 바가 바뀌고 바뀔 때까지 기다립니다. 그런 다음 페이지와 경고가 거의 동시에 나타납니다. 페이지를 먼저 렌더링한 다음 경고해야 합니다. 왜냐하면 경고가 나타날 때 요소가 나타났기 때문입니다.
내가 시도한 방법은 다음과 같습니다.
1. 본문에 onload 메서드 추가:
으아악결과에는 변화가 없습니다.
2. window.onload 방법을 사용하세요:
으아악결과는 동일하고 변화가 없습니다.
3. 스크립트를 외부링크로 작성했는데도 테스트 결과가 그대로네요.(어제 밤에 집에서 해봤는데 페이지 요소가 먼저 렌더링되고 그다음에 js가 로드되는거 같은데 방법이 없네요. 지금 확인해보니 브라우저 버전 문제인지 모르겠네요. )
첨부: 왜 브라우저마다 컴퓨팅 속도가 다른 것 같은 느낌이 드는데, 구글에서는 5억 루프가 6초밖에 걸리지 않나요? Firefox에서는 잘 이해가 안 돼요
처음으로 질문을 드리는건데, 편하게 봐주셨으면 좋겠습니다 0.0~ 미리 감사드립니다
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
위에서 말씀하신 내용은 for 루프가 CPU 리소스를 차지하여 첫 번째 화면이 느리게 로드되기 때문일 것입니다.
본문 하단에 있는 스크립트 태그라도 브라우저가 맨 처음에 해당 js 파일을 요청하기 때문에 첫 번째 화면의 속도가 느려집니다. 이로 인해 제한된 수의 TCP 링크, 대역폭, 심지어 걸리는 시간도 차지합니다. 실행하려면 필요한 CPU입니다.
스크립트 태그는 다른 페이지 리소스 파일의 다운로드를 차단하는 것을 방지하고 페이지 관련 리소스의 로딩 속도를 높이기 위해 본문 하단에 배치됩니다.
그러나 전체 페이지의 렌더링은 여전히 스크립트 태그에 의해 종료되므로 귀하의 예에서는 스크립트 작업이 완료될 때까지 페이지가 공백으로 유지되고 렌더링될 때까지 페이지가 표시되지 않습니다.
제공한 예에서 페이지를 먼저 표시한 다음 스크립트 계산을 수행하려면 setTimeout을 사용하여 다음과 같이 스크립트를 비동기적으로 실행할 수 있습니다.
으아악CPU 리소스를 너무 많이 잡아먹기 때문이 아닐까 싶고, 페이지 렌더링에도 CPU 리소스가 필요하기 때문인 것 같아요
이 시간이 많이 걸리는 작업을 IO로 대체한다면 기대에 부합할 것이라고 생각합니다
PS: 추측해 보세요. 비어 있을 때 시도해 보세요