У незліченних місцях в Інтернеті я побачив рекомендацію включати CSS до JavaScript. Міркування, як правило, такої форми :
Що стосується замовлення 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 мс при передачі 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яка ніде не становить 100 мс або 89 мс. Напевно, мені незрозуміло, на які цифри ви посилаєтесь.
