作者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/cn.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