任务16-JS语法，JS基础知识1

1.CSS和JS在网页中的放置顺序是怎样的？为什么会出现白屏和FOUC？

在写HTML代码时，我们都是将CSS文件的引入位置放在头部（标签内部），将js文件的引入位置放在底部（前面）。
出现白屏的原因：
CSS：未将CSS置于首部，浏览器加载页面过程中，首先加载了html内容，此时还未加载CSS，需将CSS完全加载完成，页面才会显示出来（白屏现象）。
另一种浏览器的加载方式是先对页面内容进行展示，然后再加载CSS修改页面样式（FOUC: flash of unstyled )。 若是使用@import ，即使把此样式放在顶部，也可能会出现白屏。

JS： 由于JS的特性，如果把JS放在页面顶部，在JS未加载完成之时，脚本就会阻塞后面组件的加载，从而出现白屏问题。

---

2.加载异步：async和defer的作用是什么？有什么区别

如果在某些场景下，需要将JS不置于页面底部，此时就要使用 async或defer 来做异步处理。


defer: 加载JS与页面并行进行，但是要在页面元素解析完成之后，defer才会被执行。
async:加载JS与页面并行进行，对页面的渲染也会并行进行。

---

3.简述网页的渲染机制

1、Create/Update DOM And request css/image/js：浏览器请求到HTML代码后，在生成DOM的最开始阶段（应该是 Bytes → characters 后），并行发起css、图片、js的请求，无论他们是否在HEAD里。
2、Create/Update Render CSSOM：CSS文件下载完成，开始构建CSSOM
3、Create/Update Render Tree：所有CSS文件下载完成，CSSOM构建结束后，和 DOM �一起生成 Render Tree。
4、Layout：有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout，顾名思义就是计算出每个节点在屏幕中的位置。
5、Painting：Layout后，浏览器已经知道了哪些节点要显示（which nodes are visible）、每个节点的CSS属性是什么（their computed styles）、每个节点在屏幕中的位置是哪里（geometry）。就进入了最后一步：Painting，按照算出来的规则，通过显卡，把内容画到屏幕上。

浏览器渲染页面顺序.jpg

---

4.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?NaN、undefined、null分别代表什么?

简单类型：

数字 number

字符串 string

布尔 boolean

数组 （数组也是对象）

未定义 undefined

复杂类型：

对象 object

NaN:

Number.NaN 是一个特殊值，说明某些算术运算（如求负数的平方根）的结果不是数字。
JavaScript 以 NaN 的形式输出 Number.NaN。NaN 与其他数值进行比较的结果总是不相等的，包括它自身在内。因此，不能与 Number.NaN 比较来检测一个值是不是数字，而只能调用 isNaN() 来比较。

undefined:

表示未赋值，比如说 var = a 占据了空间，却未对 a 赋值。

null：

表示一个不存在的元素，空指针。

---

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

typeof:

作用是查看元素类型。它返回值是一个字符串，该字符串说明运算数的类型。typeof 一般只能返回如下几个结果：
返回值：
数字：number
字符串：string
布尔：boolean
函数：function
undefined: function
其他值全部为 object
例：

通过typeof来获取一个变量的类型

通过typeof来获取一个变量素是否存在

instanceof:

判断一个变量的类型常常会用 typeof 运算符，在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 “object”。这就需要用到instanceof来检测某个对象是不是另一个对象的实例。
instanceof用于判断一个变量是否某个对象的实例,其返回值是布尔类型。
例：
a instanceof b?console.log"true"):conlose.log("false"); //a是b的实例？真:假

---

代码题：

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 true;
      }
      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());//1470630425859
console.log(+"4");//4

3.以下代码的输出结果是?

var a = 1;
a+++a;//3
typeof a+2;//number2

4.遍历数组，把数组里的打印数组每一项的平方
```var arr = [3,4,5]```

![](http://upload-images.jianshu.io/upload_images/2399926-c7744b31362292ac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5.遍历 JSON, 打印里面的值 （难度**）

var obj = {
name: 'hunger', sex: 'male', age: 28
}
//todo ...
// 输出 name: hunger, sex: male, age:28```

6.下面代码的输出是? 为什么

console.log(a);//1，js变量提升
var a = 1;// 1
console.log(a); // 1, 通过var a = 1;进行声明并赋值，调用a后，得到 1
console.log(b);//b is not defined,未对 b 进行声明。

关于变量提升：

var v='Hello World'; 
(function(){ 
alert(v); 
})() // 输出 Hello World

但是：

var v='Hello World'; 
(function(){ 
alert(v);
 var v='I love you';
 })() ```
却会输出  undefined
其原因是作用域的问题，变量提升，就是把变量提升提到函数的top的地方。变量提升 只是提升变量的声明，并不会把赋值也提升上来。 
其实只是：

var v='Hello World';
(function(){
var v;
alert(v);
v='I love you';
})() ```

---

本文版权归本人和饥人谷所有，转载请注明来源。