日夜谈——js语法

今天我终于踏入JS的大门，想起来，真有点小兴奋，不过，听说大伙都说JS不太容易学懂，But I will try to learn it。

New day

1.CSS和JS在网页中的放置顺序是怎样的？

CSS一般放在head标签里面，JS一般放在body标签的尾部。
原因：

因为CSS在加载时，是并发加载，并发请求，不会阻碍其他资源同时加载，而JS加载时，会禁止并发，因此JS加载时，会阻塞其他资源的加载，只有等JS加载完之后，才能加载其他资源，因此把JS放在顶部会出现白屏现象，把CSS放在尾部，会出现FOUS（无样式内容闪烁），因此从用户体验和优化网页性能这点看，应该将CSS放在顶部，JS放在尾部。

2.解释白屏和FOUC

白屏——所谓的白屏，是指CSS加载时间过长，而HTML加载在CSS之后，因此会导致网页出现白屏——啥内容都没有，白茫茫一片。
1.如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。
2.如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏;
3.把js放在顶部也会出现白屏现象，因为加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载.

FOUC,全称叫做Flash of Unstyled Content，中文名为无样式内容闪烁,如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容(即html的内容）,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .

3.async和defer的作用是什么？有什么区别

defer:defer是script标签中处理脚本运行的属性之一，中文称作延时，作用是js在页面加载后才会运行脚本，即加载页面的同时加载js，加载完页面之后才1执行js。

async:async（HTML5）是script标签中处理脚本运行的另一属性，中文称作异步，作用是脚本会异步加载而不阻塞页面加载，并且js一旦下载完毕就会立即执行。

另外async和defer 属性仅适用于外部脚本（只有在使用 src 属性时）。

defer和async.png

区别：
1.html的4.0版本定义defer，到了html5.0定义anysc，这就造成浏览器的版本不同，对其的支持力度也就不同。
2.每一个async属性的脚本都在它下载结束之后立刻执行，同时会在window的load事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况；每一个defer属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在document的DOMContentLoaded之前执行。

4.简述网页的渲染机制

a:解析 HTML 标签, 构建 DOM 树。
b:解析 CSS 标签, 构建 CSSOM 树。
c:把DOM树和CSSOM树组合城（render tree）。
d:在渲染树的基础上进行布局, 计算每个节点的几何结构。
e:把每个节点绘制到屏幕上 (painting)。

webkit主流程.png

5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?

JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有六种。
即：

数值（number）：整数和小数（比如1和3.14）

字符串（string）：字符组成的文本（比如"Hello World"）

布尔值（boolean）：true（真）和false（假）两个特定值

undefined：表示“未定义”或不存在，即此处目前没有任何值

null：表示空缺，即此处应该有一个值，但目前为空

对象（object）：各种值组成的集合

其中简单类型：

数值（number）

字符串（string）

布尔值（boolean）

undefined

null

复杂类型:

对象（object）

对象（object）又可以分成三个子类型。

狭义的对象（object）

数组（array）

函数（function）

6.NaN、undefined、null分别代表什么?

NaN：表示Not a Number，不是一种独立的数据类型，而是一种特殊数值，它的数据类型依然属于Number，只不过数值计算时不符合计算法则。

undefined:表示“缺少值”，就是此处应该有一个值，但是还没有定义；

null:是一个表示"无"的对象，转为数值时为0；

7.typeof和instanceof的作用和区别?

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。

typeof和instance of.png

8.代码题

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

 
 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
 
 参考资料： 
 网站前端性能优化之CSS和JS 
 HTML 5