1. 首頁
  2. 問答
  3. Less.js需要一秒鐘才能加載樣式

Less.js需要一秒鐘才能加載樣式

2013-06-19 54 views
0

我的問題是當您轉到此頁面時http://www.executivetravelholdings.com頁面樣式加載時像一秒鐘。我希望它加載，如果我使用常規的CSS。我的頭部樣式表較少，身體底部的less.js較少。我使用less.js 1.3.3和PHP而不是html。任何幫助，這將不勝感激。Less.js需要一秒鐘才能加載樣式

來源

2013-06-19 dowomenfart

+0

問題不再有用，因爲提到的網站已經不存在了，並且沒有說明需要編譯的文件是多少。 –

+0

投票結束（儘管不難猜測答案是「只是不要使用客戶端腳本並將你的ls文件預編譯爲css」）。 –

+0

前段時間我試圖刪除這個問題，但它不讓我。 @七階段-MAX。不久前，我想出了這個問題的答案。但是，當我試圖刪除它說這個問題有答案，不能被刪除。 – dowomenfart

回答

1

你永遠不會像原生css那樣快，因爲腳本必須首先解析css。然而，這種強大的FOUC形式來自於這樣一個事實，即您在主體中提供的腳本較少，因此整個文檔在樣式轉換和應用之前得到呈現。解決方案是將less.js腳本放在首位。是的，這會減慢頁面加載過程，但我認爲這是更好的折衷。

就個人而言，我會從不（至少對於生產環境）使用js版本，但始終處理樣式serverside。想象一下，用戶已經阻止了JavaScript或根本沒有可用的JavaScript。

來源

2013-06-19 12:20:08 Christoph

+0

謝謝我現在把less.js放在頭上，它停止了懶加載。謝謝您的幫助！ – dowomenfart

+0

這不是延遲加載 - 瀏覽器在找到相應腳本標記時請求資源。由於您在正文底部請求較少的文件，文檔的其餘部分已經呈現（沒有樣式）。另一方面，延遲加載意味着在需要時加載資源（可能永遠不會）。如果您的問題得到解決，請接受您認爲最適合的答案，以表明您的問題已解決。 – Christoph

0

有一個備份樣式表，它至少將所有對象放置在正確的位置並具有簡單的格式。

這種方式當少踢時，變化並不那麼明顯。

還有你的less.js輸出由用戶瀏覽器和你的服務器緩存（如果可能的話）。這樣你也可以改善導航。

來源

2013-06-19 12:22:26 Tschallacka

+0

重複的代碼總是一個不好的解決方案... – Christoph

+0

不是。如果瀏覽器禁用JavaScript，該怎麼辦？仍然有很多人禁用JavaScript。 – Tschallacka

+0

正是我的想法（這是我在我的回答中所述）。儘管如此，重複的代碼是不可行的。你會比以後更早遇到許多問題。應該使用Rikkus解決方案來解決這個問題。 – Christoph

1

你只應該在開發過程中使用客戶端的LESS渲染：

客戶端是最簡單的入門方法和良好的發展 性較低。對於生產，特別是如果性能很重要，我們建議使用節點或許多第三方工具之一進行預編譯。

LESS homepage

在實踐中，您可以：

  1. 安裝的Node.js和渲染的文件，然後把（靜態）編譯的版本，並把它放到網上。
  2. 使用GUI應用程序編譯LESS文件，like SimppLESS。請確保它是最新版本，並且保持其內部LESS版本保持最新。 （更簡單）
  3. 如果您使用的是類似PHP的東西，則有LESS編譯器的PHP端口。這樣，它就呈現在服務器端並被緩存。 （更方便）

來源

2013-06-19 12:25:43 RikkusRukkus

+0

感謝您的幫助。這真的幫助我了！ – dowomenfart

相關問題

 相關問題