初识JS

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

CSS
引用外部样式表时，使用<link>标签，将样式放在<head>标签中；直接在html中使用样式时，在<head>标签中添加<style>标签，将样式写在<style>标签中。
JS
如果在<head>里有javascript文件，那么必须是先要把这些文件都下载，解析，然后执行之后，程序才会继续往下走。这样势必会影响速度，阻塞其他资源的加载，影响页面速度，所以一般将JS的内容放在<body>标签的末尾，写在<script>标签中；但如果是希望DOM还没加载而要先加载的js会放置在<head>中,有些加了defer、async的<script>也会放在<head>中。

2.解释白屏和FOUC

不同浏览器对于CSS和HTML的处理方式不同，一些浏览器如chrome，它的加载和渲染机制是等css全部加载解析完成后再渲染展示整个页面，这个等待的时间就造成了白屏，而另一些浏览器如Firefox，它在css没有加载前先展示页面，等css加载后在重绘一次，这就造成了FOUC（(Flash of Unstyled Content）,即无样式闪烁。
如果把css样式放在底部，对于IE浏览器，在某些场景下（新窗口打开、刷新等）会出现白屏；同样对于IE浏览器，如果把css样式放在底部，在某些场景下（点击链接，输入URL，使用书签进入等），会出现FOUC现象；对于Firefox，会一直表现出FOUC
如果把JS文件放在头部，脚本会阻塞后面内容的呈现，出现白屏。

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

<script defer src="script.js"></script>
<script async src="script.js"></script>
如图，蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

defer和async是脚本异步加载的两种方式，加载后续文档元素的过程和script.js的加载并行进行（异步），不因为脚本的加载阻塞页面其他元素的加载。【async和defer均只适用在外部js文本，不支持嵌入式脚本】
async：告诉浏览器立刻下载其指定的JS，很有可能不是按照原来的顺序来执行，如果JS前后有依赖关系，就会报错
defer：script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成，也就是说defer会按照加载顺序执行脚本

4.简述网页的渲染机制

1.解析HTML标签，构建为DOM树
2.解析CSS文件，构建为CSSOM树
3.构建render树，render树由DOM树与CSSOM树组合而成
4.布局render树，确定每个节点在屏幕上的确切坐标
5.绘制，遍历render树，使用UI后端层绘制每个节点
更多参考见浏览器内部工作原理

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

简单类型：
1.数字 number
2.字符串 string
3.布尔 boolean
4.未定义 undefined
5.空 null
复杂类型：
1.对象 object
2.数组 array
3.函数 function

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

NaN：Not a Number，代表非数字值的特殊值，用来指示某个值不是数字（如求负数的平方根）。方法parseInt（）和parseFloat()在不能解析指定的字符串就返回这个值。
要注意的是，NaN与其他数值进行比较的结果总是不相等的，包括它自身在内，所以要使用isNaN（）来判断一个值知否是数字

NaN == NaN; //false
NaN===NaN;//false

undefined：表示“缺少值”，就是此处应该有一个值，但是还没有定义
(1).变量被声明了，但没有赋值，就等于undefined
(2).调用函数时，应该提供的参数没有提供，该参数等于undefined
(3).对象没有赋值的属性，该属性为undefined

var i;
i // undefinedfunction
 f(x){console.log(x)}
f() // undefined
var o = new Object();
o.p // undefined
var x = f();
x // undefined

null：一个空对象指针，表示“没有对象”，即该处不应该有值
(1).作为函数参数，表示该函数的参数不是对象
(2).作为原型链的终点

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

由于ECMAScript是松散型的，因而需要一种方式来检测给定变量的数据类型。

typeof：返回一个值的数据类型，可以是数字number，字符串string，布尔值boolean，函数function，对象object,方法typeof中无论引用什么类型的对象，都只会返回object
instanceof:只有true和false两个输出结果，可以进一步判断引用类型是什么类型

代码

1.完成如下代码判断一个变量是否是数字、字符串、布尔、函数（难度*）ps: 做完后可参考 underscore.js 源码中部分实现

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

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

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

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

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

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

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

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

console.log(a);//undefined,变量声明提升，a已经声明过，会被提到全局作用域的开头
var a = 1;
console.log(a);//1
console.log(b);//报错

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