渐进增强（向上兼容）：先针对低版本浏览器构建页面，完成基本功能后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（向下兼容）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。
如何为有功能限制的浏览器提供网页？
功能限制的浏览器, 比如低版本IE, 手机浏览器, 等会在很多功能上不符合Web标准, 而应对方式主要有:
- 只提供符合Web标准的页面
- 提供另一个符合那些浏览器标准的页面
- 兼容: 两种思路:
渐进增强:
先提供一个可用的原型，
再为高级浏览器提供优化
优雅降级:
据高级浏览器提供一个版本，
后为有功能限制的浏览器...
- 相关技术:
Media Query
CSS hack
条件判断
<! --[if !IE]><!-->
除IE外都可识别
<!--<![endif]-->
其他...
script标签到底该放在哪里?
一般script标签会被放在头部<head>或尾部<body>。
放在<head>，浏览器解析HTML，发现script标签时，会先下载完所有script，再往下解析。不管JS是否来自同一host，浏览器最多只能同时下载两个JS，且下载时，就block掉解析工作。放在头部，会让网页呈现滞后，导致用户感觉到卡。所以yahoo建议将script放在尾部，这样能加速网页加载。
放在<body>，浏览器先解析整个HTML页面，再下载JS。而对于一些高度依赖于JS的网页，就会显得慢了。所以将script放在尾部也不是最优解，最优解是一边解析页面，一边下载JS。
使用async和defer
80%的现代浏览器都认识async和defer属性，这两个属性能让浏览器做到一边下载JS(还是只能同时两个)，一边解析HTML。他的优点不是增加JS的并发下载数量，而是做到下载时不block解析HTML。
<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>
带async属性的script会异步执行，只要下载完就执行，这会导致script2.js可能先于script1.js执行（如果script2.js比较大，下载慢）。
defer就能保证script有序执行，script1.js先执行，script2.js后执行。
结论
- 如果可以不考虑支持
<IE9的IE，最好将script放在head中，并使用async/defer属性。这样浏览器就能一边下载JS，一边解析其他的HTML。 -
Google自己的代码script放的也有点乱，<body>后面/里面，<head>里面都有。总体来说，放在<body>里是最常见的做法。 - 至于
link和style，放在head里比较常见。CSS的link放在body也可以，只是可能导致页面暂时没有样式。
网友评论