在網上的無數地方,我看到了建議在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上面的微型服務器允許我為JavaScript文件(服務器和客戶端)設置任意延遲,以及CSS延遲。例如,http://10.0.0.50:8081/test.css?delay=500給我500毫秒的CSS傳輸延遲。當我首先包含CSS時,頁面需要1.5秒的時間來呈現:CSS優先當我首先包含JavaScript時,頁面需要1.4秒的時間呈現:JavaScript優先我在Chrome,Firefox和Internet Explorer中得到了類似的結果。但是,在Opera中,排序根本沒有關系。似乎正在發生的事情是JavaScript解釋器拒絕啟動,直到所有CSS被下載為止。因此,隨著JavaScript線程獲得更多的運行時間,似乎首先包含JavaScript會更有效。我是否遺漏了什么,建議將CSS包含放在JavaScript包含之前是不正確的?顯然,我們可以添加異步或使用setTimeout釋放渲染線程或將JavaScript代碼放在頁腳中,或使用JavaScript加載器。這里的重點是關于頭部中必需的JavaScript位和CSS位的排序。
建議在JavaScript之前包含CSS無效嗎?
哈士奇WWW
2019-12-06 16:01:32