10
09/2014
FOUC and html class=no-js
FOUC (Flash of Unstyled Content)， 外部加载的 css 可能会导致页面闪烁。在 下载－解析－渲染 的反复迭代中，会有“页面闪动”现象。
html5 Boilerplate 头部在 html 加入 class=”no-js”
<!DOCTYPE html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"> <!--<![endif]-->
<head>
然后 modernizr 加载后会改为 html class=”js”
好处？
当 html class=”js” 的时候，css 知道，1.页面支持javascript，2.并且 dom 已经 ready，可以渲染了。
html.no-js body {display:none; }
html.js body {display:block;}
We use the same approach in Modernizr, because we want the classes to be all set on the HTML element right when the BODY content starts loading in. body 开始加载的时候，样式表已经准备好了。
注意：如果要反闪烁（prevent FOUC）的话 modernizr 的位置应该在 head 里面最后一个。
<html class="no-js">
<head>
<!--样式表-->
<script src="modernizr.js"></script>
</head>
<body>
内容
<script src="其它.js"></script>
</body>
</html>