수많은 온라인 사이트에서 JavaScript보다 CSS를 포함하는 것이 좋습니다. 추론은 일반적으로 다음 과 같은 형식입니다 .
CSS와 JavaScript를 주문할 때는 CSS가 우선입니다. 렌더링 스레드에는 페이지를 렌더링하는 데 필요한 모든 스타일 정보가 있기 때문입니다. JavaScript가 먼저 포함되면 JavaScript 엔진은 다음 리소스 세트를 계속하기 전에이를 모두 구문 분석해야합니다. 이는 렌더링 스레드에 필요한 모든 스타일이 없기 때문에 페이지를 완전히 표시 할 수 없음을 의미합니다.
실제 테스트 결과는 상당히 다릅니다.
내 테스트 하네스
다음 Ruby 스크립트를 사용하여 다양한 자원에 대한 특정 지연을 생성합니다.
require 'rubygems'
require 'eventmachine'
require 'evma_httpserver'
require 'date'
class Handler < EventMachine::Connection
include EventMachine::HttpServer
def process_http_request
resp = EventMachine::DelegatedHttpResponse.new( self )
return unless @http_query_string
path = @http_path_info
array = @http_query_string.split("&").map{|s| s.split("=")}.flatten
parsed = Hash[*array]
delay = parsed["delay"].to_i / 1000.0
jsdelay = parsed["jsdelay"].to_i
delay = 5 if (delay > 5)
jsdelay = 5000 if (jsdelay > 5000)
delay = 0 if (delay < 0)
jsdelay = 0 if (jsdelay < 0)
# Block which fulfills the request
operation = proc do
sleep delay
if path.match(/.js$/)
resp.status = 200
resp.headers["Content-Type"] = "text/javascript"
resp.content = "(function(){
var start = new Date();
while(new Date() - start < #{jsdelay}){}
})();"
end
if path.match(/.css$/)
resp.status = 200
resp.headers["Content-Type"] = "text/css"
resp.content = "body {font-size: 50px;}"
end
end
# Callback block to execute once the request is fulfilled
callback = proc do |res|
resp.send_response
end
# Let the thread pool (20 Ruby threads) handle request
EM.defer(operation, callback)
end
end
EventMachine::run {
EventMachine::start_server("0.0.0.0", 8081, Handler)
puts "Listening..."
}
위의 미니 서버를 사용하면 JavaScript 파일 (서버 및 클라이언트 모두) 및 임의의 CSS 지연에 대한 임의 지연을 설정할 수 있습니다. 예를 들어 http://10.0.0.50:8081/test.css?delay=500CSS를 전송하는 데 500ms 지연이 발생합니다.
다음 페이지를 사용하여 테스트합니다.
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script type='text/javascript'>
var startTime = new Date();
</script>
<link href="http://10.0.0.50:8081/test.css?delay=500" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://10.0.0.50:8081/test2.js?delay=400&jsdelay=1000"></script>
</head>
<body>
<p>
Elapsed time is:
<script type='text/javascript'>
document.write(new Date() - startTime);
</script>
</p>
</body>
</html>
CSS를 먼저 포함하면 페이지를 렌더링하는 데 1.5 초가 걸립니다.
JavaScript를 먼저 포함하면 페이지를 렌더링하는 데 1.4 초가 걸립니다.
Chrome, Firefox 및 Internet Explorer에서 비슷한 결과를 얻습니다. 그러나 Opera에서는 순서가 중요하지 않습니다.
일어나고있는 것처럼 보이는 것은 JavaScript 해석기가 모든 CSS를 다운로드 할 때까지 시작을 거부한다는 것입니다. 따라서 JavaScript 스레드를 더 많이 실행하면 JavaScript를 먼저 포함하는 것이 더 효율적입니다.
내가 빠뜨린 것이 있습니까? JavaScript가 포함되기 전에 CSS를 포함시키는 것이 좋습니다?
비동기를 추가하거나 setTimeout을 사용하여 렌더링 스레드를 비우거나 JavaScript 코드를 바닥 글에 넣거나 JavaScript 로더를 사용할 수 있음이 분명합니다. 여기서 요점은 필수 JavaScript 비트와 CSS 비트의 순서에 관한 것입니다.
delay=400&jsdelay=1000과 delay=500아무 곳에도 가까운이 100ms 또는 89ms입니다있다. 당신이 말하는 숫자가 확실하지 않은 것 같습니다.
