今天我终于踏入JS的大门，想起来，真有点小兴奋，不过，听说大伙都说JS不太容易学懂，But I will try to learn it。
<h3>1.CSS和JS在网页中的放置顺序是怎样的？</h3>
CSS一般放在head标签里面，JS一般放在body标签的尾部。
原因：
<li>因为CSS在加载时，是并发加载，并发请求，不会阻碍其他资源同时加载，而JS加载时，会禁止并发，因此JS加载时，会阻塞其他资源的加载，只有等JS加载完之后，才能加载其他资源，因此把JS放在顶部会出现白屏现象，把CSS放在尾部，会出现FOUS（无样式内容闪烁），因此从用户体验和优化网页性能这点看，应该将CSS放在顶部，JS放在尾部。
</br>
<h3>2.解释白屏和FOUC</h3>
<li>白屏——所谓的白屏，是指CSS加载时间过长，而HTML加载在CSS之后，因此会导致网页出现白屏——啥内容都没有，白茫茫一片。
1.如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。
2.如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏;
3.把js放在顶部也会出现白屏现象，因为加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载.
<li>FOUC,全称叫做Flash of Unstyled Content，中文名为无样式内容闪烁,如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容(即html的内容）,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .
</br>
<h3>3.async和defer的作用是什么？有什么区别</h3>
<li>defer:defer是script标签中处理脚本运行的属性之一，中文称作延时，作用是js在页面加载后才会运行脚本，即加载页面的同时加载js，加载完页面之后才1执行js。
<script src="dome.js" defer="defer"></script>
<li>async:async（HTML5）是script标签中处理脚本运行的另一属性，中文称作异步，作用是脚本会异步加载而不阻塞页面加载，并且js一旦下载完毕就会立即执行。
<script src="dome.js" async="async"></script>
另外async和defer 属性仅适用于外部脚本（只有在使用 src 属性时）。
<li>区别：
1.html的4.0版本定义defer，到了html5.0定义anysc，这就造成浏览器的版本不同，对其的支持力度也就不同。
2.每一个async属性的脚本都在它下载结束之后立刻执行，同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况；每一个defer属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在document的DOMContentLoaded之前执行。
</br>
<h3>4.简述网页的渲染机制</h3>
<b>a:</b>解析 HTML 标签, 构建 DOM 树。
<b>b:</b>解析 CSS 标签, 构建 CSSOM 树。
<b>c:</b>把DOM树和CSSOM树组合城（render tree）。
<b>d:</b>在渲染树的基础上进行布局, 计算每个节点的几何结构。
<b>e:</b>把每个节点绘制到屏幕上 (painting)。
<h3>5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?</h3>
JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有六种。
即：
<li>数值（number）：整数和小数（比如1和3.14）
<li>字符串（string）：字符组成的文本（比如"Hello World"）
<li>布尔值（boolean）：true（真）和false（假）两个特定值
<li>undefined：表示“未定义”或不存在，即此处目前没有任何值
<li>null：表示空缺，即此处应该有一个值，但目前为空
<li>对象（object）：各种值组成的集合
其中简单类型：
<li>数值（number）
<li>字符串（string）
<li>布尔值（boolean）
<li>undefined
<li>null
复杂类型:
<li>对象（object）
对象（object）又可以分成三个子类型。
<li>狭义的对象（object）
<li>数组（array）
<li>函数（function）
</br>
<h3>6.NaN、undefined、null分别代表什么?</h3>
NaN：表示Not a Number，不是一种独立的数据类型，而是一种特殊数值，它的数据类型依然属于Number，只不过数值计算时不符合计算法则。
undefined:表示“缺少值”，就是此处应该有一个值，但是还没有定义；
null:是一个表示"无"的对象，转为数值时为0；
</br>
<h3>7.typeof和instanceof的作用和区别?</h3>
typeof的作用是：用以获取一个变量或者表达式的数据类型。主要用来判断一个变量是否存在
返回结果如下：
typeof 12 === "number"
typeof "interest" === "string"
typeof ture === "boolean"
typeof undefined === undefined
typeof {a:1} === "object"
typeof [1, 2, 3] === 'object'
typeof function(){} === 'function';
instance of用来判断一个变量是否是某个对象的实例。返回结果：boolean值，true或false。
<h3>8.代码题</h3>
1.完成如下代码判断一个变量是否是数字、字符串、布尔、函数
function isNumber(el){
if (typeof el === "number"){
return true;
}else{
return false;
}
}
function isString(el){
if (typeof el === "string")
return true;
}else{
return false;
}
function isBoolean(el){
if {typeof el === "boolean"}
return true;
}else{
return false;
}
function isFunction(el){
if {typeof el ==="function"}
return ture;
}else{
return false;
}
var a = 2,
b = "jirengu",
c = false;
alert( isNumber(a) ); //true
alert( isString(a) ); //false
alert( isString(b) ); //true
alert( isBoolean(c) ); //true
alert( isFunction(a)); //false
alert( isFunction( isNumber ) ); //true
2.以下代码的输出结果是?（难度**）
console.log(1+1); //2
console.log("2"+"4"); //24
console.log(2+"4"); //24
console.log(+new Date()); //1479451763255
console.log(+"4"); //4
3.以下代码的输出结果是? （难度***）
var a = 1;
a+++a;
//a++=1>a=a+1=2>(a++)+a=3
typeof a+2;
//typeof a>"number">typeof "number"+2>number2
4.遍历数组，把数组里的打印数组每一项的平方 （难度**）
var arr = [3,4,5]
// todo..
// 输出 9, 16, 25
var arr = [3,4,5];
for (i=0;i<arr.length;i++){
array=Math.pow(arr[i],2);
console.log(array);
}//for循环
var arr = [3,4,5]
for(i in arr){
array=Math.pow(arr[i],2);
console.log(array);
}//for in 循环
var arr = [3,4,5];
var i = 0 ；
while(i<arr.length){
array=Math.pow(arr[i],2);
console.log(array);
i++;
}//while循环
5.遍历 JSON, 打印里面的值 （难度**）
var obj = {
name: 'hunger',
sex: 'male',
age: 28
};
for (var key in obj){
console.log(key + ":" + obj[key])
}
6.下面代码的输出是? 为什么 （难度 ***）
console.log(a);
var a = 1;
console.log(a);
console.log(b);
//相当于
var a;
console.log(a);//undefined
a=1;
console.log(a);//1
console.log(b)//b is not defined
因为JS存在变量提升机制，所以使得a的声明提升到最前面，但是此时a未赋值，因此第一个console.log(a)输出结果为undefined，之后a=1，轮到第二个console.log(a)输出结果为一，而最后的console.log(b)未声明，因此控制台报错：b is not defined
参考资料：
<a href="http://www.haorooms.com/post/web_xnyh_jscss">网站前端性能优化之CSS和JS</a>
<a href="http://www.w3school.com.cn/tags/att_script_async.asp">HTML 5 <script> async 属性</a>
<a href="http://w3school.com.cn/html5/att_script_defer.asp">HTML 5 <script> defer 属性</a>
<a href="http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html">阮一峰undefined与null的区别</a>
<a href="http://blog.sina.com.cn/s/blog_b2bdfef80102v3qt.html">js中typeof和instanceof的区别
</a>
注：版权归饥人谷和饥人谷peter所有，若有转载，请注明出处
感谢吃瓜子观众：
