亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

建議在JavaScript之前包含CSS無效嗎?

建議在JavaScript之前包含CSS無效嗎?

哈士奇WWW 2019-12-06 16:01:32
在網上的無數地方,我看到了建議在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位的排序。
查看完整描述

3 回答

?
瀟湘沐

TA貢獻1816條經驗 獲得超6個贊

我不會在您獲得的結果上強調太多,我相信這是主觀的,但是我有理由向您解釋,最好將CSS放在js之前。


在加載網站期間,您會看到兩種情況:


案例1:白屏>無樣式的網站>樣式化的網站>交互>樣式化和交互式的網站


案例2:白屏>無樣式的網站>交互性>樣式化的網站>樣式化和交互式的網站


我真的無法想象有人選擇案例2。這意味著使用慢速互聯網連接的訪問者將面臨一個無樣式的網站,該網站允許他們使用Javascript與該網站進行互動(因為該網站已經加載)。此外,通過這種方式可以最大程度地增加花在瀏覽無樣式網站上的時間。為什么有人要那個?


正如jQuery所述,它也可以更好地工作


“當使用依賴CSS樣式屬性值的腳本時,在引用腳本之前引用外部樣式表或嵌入樣式元素很重要”。


當文件以錯誤的順序加載(首先是JS,然后是CSS)時,依賴于CSS文件中設置的屬性(例如div的寬度或高度)的任何Javascript代碼都將無法正確加載。似乎使用錯誤的加載順序,正確的屬性有時是Javascript已知的(也許這是由競爭條件引起的嗎?)。根據使用的瀏覽器,此效果似乎更大或更小。


查看完整回答
反對 回復 2019-12-06
  • 3 回答
  • 0 關注
  • 598 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號