Является ли рекомендация включать CSS перед JavaScript недействительной?
в бесчисленных местах в Интернете я видел рекомендацию включать 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. В опере, однако, заказ просто не делает вопрос.
похоже, что интерпретатор JavaScript отказывается запускаться до тех пор, пока не будет загружен весь CSS. Таким образом, кажется, что наличие JavaScript includes first более эффективно, поскольку поток JavaScript получает больше времени выполнения.
Я что-то упустил, рекомендация разместить CSS включает до JavaScript включает не правильно?
понятно, что мы могли бы добавить async или использовать setTimeout, чтобы освободить поток рендеринга или поставить код JavaScript в нижнем колонтитуле или используйте загрузчик JavaScript. Дело здесь в том, чтобы упорядочить основные биты JavaScript и биты CSS в голове.
Comments