ในสถานที่นับไม่ถ้วนออนไลน์ฉันได้เห็นข้อเสนอแนะเพื่อรวม 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=500ให้ฉันล่าช้า 500 ms ในการถ่ายโอน CSS
ฉันใช้หน้าต่อไปนี้เพื่อทดสอบ
<!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 ทำให้ใช้เวลามากขึ้น
ฉันขาดอะไรไปบ้างข้อเสนอแนะในการวาง CSS รวมไว้ก่อนหน้า JavaScript รวมถึงไม่ถูกต้องหรือไม่
เป็นที่ชัดเจนว่าเราสามารถเพิ่ม async หรือใช้ setTimeout เพื่อเพิ่มเธรดการแสดงผลหรือวางโค้ด JavaScript ในส่วนท้ายหรือใช้ตัวโหลด JavaScript จุดที่นี่คือเกี่ยวกับการจัดลำดับของบิต JavaScript ที่จำเป็นและบิต CSS ในส่วนหัว
delay=400&jsdelay=1000และdelay=500อยู่ที่ไหนใกล้ 100ms หรือ 89ms ฉันเดาว่าฉันไม่แน่ใจว่าคุณกำลังอ้างถึงตัวเลขใด
