作者srwhite (魯蛇阿白)
看板Web_Design
標題[問題] RWD放置順序效能請益
時間Wed Apr 19 00:33:12 2017
最近在研究RWD時看到一種說法
說是以mobile first的設計模式下
可以讓手機顯示的速度更快
所以應該盡量用min-width取代max-width
我想請問的是瀏覽器是在哪個階段進行螢幕寬度判定的
一般來說css會寫在head
如果是按照順序一行一行判定的話
在載入body之前整份css就載完了
也確定螢幕寬度要採用哪種樣式
例如
<html>
<head>
<style>
body{background-color:yellow;}
@media only screen and (min-width: 768px) {
body{background-color:red;}
}
</style>
</head>
<body>
</body>
</html>
在進入body之前不管手機還是電腦都載入了一樣多的東西
也各自確定了該顯示的顏色
這樣應該沒有所謂的效能問題阿
反之如果不是依序載入的話
模仿某些js放置的做法
把RWD的部分獨立出來放在body結束前
寫成下面這樣效能會不會更好
<html>
<head>
<style>
body{background-color:yellow;}
</style>
</head>
<body>
//something
<style>
@media only screen and (min-width: 768px) {
body{background-color:red;}
}
</style>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 119.77.156.56
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1492533197.A.FF0.html
1F：→ Ken52039: 頗深奧的問題 04/19 09:44
2F：推 Kenqr: 我想他說的效能不是指需要下載多少東西 04/19 10:11
3F：→ Kenqr: 而是指瀏覽器需要處理多少樣式 04/19 10:11