LESS，媒體查詢和性能

我最近開始使用LessCSS，並且我已經在CSS的清晰度和可讀性方面取得了相當大的成功。但是，我不認爲我使用Less來發揮最大的優勢。LESS，媒體查詢和性能

我現在正在編寫我的第一個完全響應的網站使用較少，我關心的性能和速度。 有一件事要注意是我不堅持一個「斷點」方法 - 我擴大和縮小事情，直到他們休息，然後我寫CSS來修復它們;通常會導致20-100個媒體查詢。

我想開始使用較少的嵌套的媒體查詢我的元素，如下面的例子裏：

.class-one { 
    //styles here 

    @media (max-width: 768px) { 
     //styles for this width 
    } 
} 
.class-two { 
    //styles here 

    @media (max-width: 768px) { 
     //styles for this width 
    } 
}

經過我的初步測試，我發現，審查編譯CSS輸出時 - 此方法會導致多個（很多！）@media (max-width: ___px)的實例。我搜索了互聯網，並沒有發現任何明確解釋嵌套/冒泡媒體查詢的性能影響的內容。

更新1：我意識到更多的CSS信息導致需要下載更大的CSS文件 - 但我並不擔心網站加載時間作爲唯一指標。在DOM準備就緒後，我對瀏覽器對內存和性能的處理更感興趣。

更新2 &半解決方案：我找到了this article which discusses the four main categories of CSS selectors and their efficiencies。我強烈推薦閱讀，幫助我理清如何最好地解決我的過度媒體查詢的CSS。

所以我的問題是這樣的：DOM準備就緒後，我的編譯樣式表中會有這麼多媒體查詢會影響加載時間&的性能？

來源

2013-05-09 MikeZ

許多媒體查詢將絕對誇大你的文件大小（它怎麼不能？），這反過來影響下載需要多長時間。 – cimmanon 2013-05-09 14:49:32

感謝@cimmanon的快速回復，文件大小的含義並不是我在此之後的真正含義。爲了更具體地說明，我在DOM準備好之後提供有關網站性能，響應能力和瀏覽器資源使用情況的信息。 – MikeZ 2013-05-09 15:23:48

那麼做一個性能測試，讓我們知道？ – cimmanon 2013-05-09 15:41:42

它幾乎不可能給你一個完全準確的答案。

當詢問性能時，典型的答案是對其進行配置並查看獲得的結果。先修復最慢的部分，然後重複。

您可以在Chrome開發人員工具簡介CSS選擇器：

enter image description here

最後，我不認爲媒體查詢將有附近表現，其效果的影響相比，甚至稍微複雜的選擇的任何地方。

您可以在此處看到關於編寫有效的CSS的更多信息：

https://developers.google.com/speed/docs/best-practices/rendering

至於文件大小和重複CSS，gzip的

而且幾乎完全勾銷這是gzip算法效果最好的重複數據。

來源

2013-05-15 01:52:44 Petah

謝謝@Petah。我仍然在等待有人發佈一個工具來評估現場特定CSS選擇器的效率。您的回答非常有用，尤其是參考Google的最佳做法。 – MikeZ 2013-05-15 13:42:47

LESS，媒體查詢和性能

回答

相關問題