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

CSS和JS在网页中的放置顺序

二、解释白屏和FOUC

• 白屏问题

  如果把样式放在底部，对于IE浏览器，在某些场景下（新窗口打开、刷新等）页面会出现白屏，而不是内容逐步展现；
  如果使用@import标签，即使CSS放入link，并且放在头部，也可能出现白屏；
  把JavaScript放入页面顶部时会阻塞其后内容的呈现，所以也会导致白屏现象。

• FOUC（Flash Of Unstyled Content）无样式内容闪烁

  如果把样式放在底部，对于IE浏览器，在某些场景下（点击链接，输入URL，使用书签进入等），会出现FOUC现象（逐步加载无样式的内容，等CSS加载后页面突然展现样式）。对于Firefox会一直出现FOUC。

三、async和defer的作用是什么？有什么区别

• async和defer的作用
  当浏览器碰到script脚本的时候：
  1. <script src="script.js"><script>
     没有defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
  2. <script async src="script.js"><script>
     有async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）。
  3. <script defer src="script.js"><script>
     有defer，加载后续文档元素的过程将和script.js的加载并行进行（异步），但script.js的执行要在所有元素解析完成之后，DOMContentLoad事件触发之前完成。
• async和defer的区别
  • defer：脚本延迟到文档解析和显示后按顺序执行，有顺序
  • async：脚本的执行不保证顺序，只要加载完了就会立刻执行

四、简述网页的渲染机制

网页的渲染主要分为以下几步：

• 解析html构建DOM树
• 解析CSS构建CSSOM树
• 把DOM和CSSOM组合成渲染树（Render Tree）
• 在渲染树的基础上进行布局，计算每个节点的几何结构（Layout Tree）

• 把每个节点绘制到屏幕上（Painting）

  
  

当浏览器从服务器接收到了html文档，并把html在内存中转换成DOM树，在转换过程中如果发现某个节点上引用了CSS或者image，就会再发一个request去请求CSS或image，然后继续执行下面的转换，而不需要等待request的返回，当request返回后，只需要把返回的内容放入到DOM树中对应的位置就可以了。但当引用了JS的时候，浏览器发送一个JS request就会一直等待该request的返回。

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

JavaScript的数据类型共有六种：

• 数值（Number）：整数和小数（比如1和3.14）
• 字符串（String）：字符组成的文本（比如“Hello World”）
• 布尔值（Boolean）：true（真）和false（假）两个特定值
• Undefined：表示“未定义”或不存在，及此处目前没有任何值
• Null：表示空缺，及此处应该有一个值，但目前为空
• 对象（Object）：各种指组成的集合

其中有5种简单数据类型（基本数据类型）：数值（Number）、字符串（String）、布尔值（Boolean）、Undefined、Null；

1种复杂数据类型：对象（Object）

对象又可以分成三个子类型：

• 狭义的对象（Object）
• 数组（Array）
• 函数（Function）

六、NaN、undefined、null分别代表什么?

• NaN：即非数值（Not a Number）是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况

NaN有两个特点：
* 任何涉及NaN的操作（例如NaN/10）都会返回NaN
* NaN与任何值都不相等，包括NaN本身

• undefined：表示不存在值，就是此处不存在任何值。典型的用法是：

  • 变量被声明了，但没有赋值时，这个变量的值就是undefined
    
  • 调用函数时，应该提供的参数没有提供，该参数等于undefined
    
  • 对象没有赋值的属性，该属性的值为undefined
    
  • 函数没有返回值时，默认返回undefined
    

• null：表示空值，即该处的值现在为空。从逻辑角度来看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null时会返回“object”的原因，如下面例子所示：
  

  
  如果定义的变量准备在将来用于保存对象，那么最好将该变量初始化为null而不是其他值。这样一来，只要直接检查null值就可以知道相应的变量是否已经保存了一个对象引用，如下面的例子所示：

    if(car != null){
        //对car对象执行某些操作
    }
  

七、typeof和instanceof的作用和区别?

• typeof：用于获取给定变量的数据类型。对一个值使用typeof操作符可能返回下列某个字符串：

  • “undefined”——如果这个值未定义；

    
    

  • “boolean”——如果这个值是布尔值；

    
    

  • “string”——如果这个值是字符串；

    
    

  • “number”——如果这个只是数值；

    
    
  • “object”——如果这个值是对象或null；
    
  • “function”——如果这个值是函数；
    
    
    我们可以使用typeof来获取一个变量是否存在，如if(typeof a!="undefined"){}，而不要去使用if(a)，因为如果a不存在（为声明）则会出错，对于Array，Null等特殊对象使用typeof一律返回object，这正是typeof的局限性。
    

• instanceof：用于判断一个变量是否属于某个对象的实例。返回结果为boolean值，true或false。用法：

    var a=new Array();
    alert(a instanceof Array); //返回true
    alert(a instanceof Object)  //也会返回true，因为Array是object的子类  
  

代码实例

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

操作符"+"对不同的数据类型有不同的含义：

• 两个操作数都是数字的时候，会做加法运算
• 参数中至少有一个是字符串时，会把另外的非字符串参数转换成字符串做字符串拼接
• 在参数有对象的情况下会调用其valueOf或toString
• 在只有一个字符串参数的时候会尝试将其转换为数字
• 在只有一个数字参数的时候返回其正数值

3.以下代码的输出结果是？（难度***）

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

4.遍历数组，把数组里的打印数组每一项的平方（难度**）

var arr = [3,4,5];
for(var i = 0; i < arr.length; i++)
{
    var a = arr[i];
    console.log(a*a);
}

5.遍历JSON，打印里面的值（难度**）

var obj = {
    name: 'hunger',
    sex: 'male',
    age: 28
};
for(var prop in obj)
{
   console.log(prop+":"+obj[prop]); 
}

6.下面代码的输出是？为什么（难度***）

console.log(a);  //undefined
var a = 1;
console.log(a);  //1
console.log(b);  //报错

JavaScript引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升

由于变量提升，我们如果声明了变量，即使在声明语句前使用也是可以的，只不过其值是初始值undefined

本文版权属吴天乔所有，转载务必注明出处。