JS基础知识

问答

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

• 一般来说css 放在Head标签里；Js放在body标签里最后面。
• css放在前端加载时因为页面渲染时首先是根据DOM结构生成一个DOM树，然后加上CSS样式生成一个渲染书，如果CSS放在后面可能页面会出现闪的感觉，或者是白屏，或者布局混乱样式很丑直到CSS加载完成。
• JS会阻塞加载，会影响到页面加载的速度，如果一个JS文件比较大，算法也比较复杂，会使得页面加载速度变得很慢。

2、解释白屏和FOUC

• 白屏与无样式内容闪烁(FOUC)是因为不同浏览器加载与显示页面的机制不同而造成的。

• 当把css样式放在底部或者使用@import方式引入样式时
  一些浏览器例如chrome和IE，他的加载和渲染机制是等css全部加载解析完后再渲染展示页面，而这个等待的时间就为白屏。

• 另一些浏览器例如Firefox,他会在css未加载前先展现页面,等css加载后再重绘一次,这就造成了FOUC (无样式内容闪烁)。

• 所以为了避免这些问题,最好使用LINK标签将样式表放在文档的HEAD中。

另外IE浏览器和Firefox的区别
Firfox浏览器：
•样式表位于顶部：页面内容逐步呈现
•样式表位于底部：
◦与页面呈现内容无关：页面内容逐步呈现
◦呈现与页面呈现内容有关：出现无样式内容闪烁

IE浏览器
•样式表位于顶部：逐步加载
•样式表位于底部：
◦出现白屏：当重新加载页面、将页面设置为默认首页并打开、在新窗口中打开页面时出现

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

1. 默认引用 script:<script type="text/javascript" src="x.min.js"></script>
   当浏览器遇到 script 标签时，文档的解析将停止，并立即下载并执行脚本，脚本执行完毕后将继续解析文档。

2. async模式 <script type="text/javascript" src="x.min.js" async="async"></script>
   当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，脚本下载完成后开始执行脚本，脚本执行的过程中文档将停止解析，直到脚本执行完毕。

3. defer模式 <script type="text/javascript" src="x.min.js" defer="defer"></script>
   当浏览器遇到 script 标签时，文档的解析不会停止，其他线程将下载脚本，待到文档解析完成，脚本才会执行。

下面来看一张图：

0_1481457585131_bVcQV0.jpg

蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。

此图告诉我们以下几个要点：

• defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
• 它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的
• 关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
• async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
• 仔细想想，async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

4. 简述网页的渲染机制

1、浏览器解析(包括HTML,SVG,XHTML,CSS,JavaScript等等)

• 解析HTML代码，构建Document Object Model (DOM)
• 解析CSS代码，构建CSS Object Model (CSSOM)
• JavaSript通过API操作DOM和CSSOM,

渲染树构建过程如下：

0_1481458149536_render-tree-construction.png

2、布局阶段

• 在屏幕上绘制渲染树中的所有节点的几何属性，比如： 位置，宽高，大小等等

3、绘制元素

• 绘制所有节点的可视属性，比如：颜色，背景，边框，背景图等，这期间可能会产生多个图层（堆叠上下文）。

4、合并渲染层

• 把以上绘制的所有图层（类似于PhotoShop中的“图层”）合并,最终输出一张图片。

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

在JavaScript中，有5种基本数据类型和1种复杂数据类型，可以使用typeof来检测是什么数据类型。

基本数据类型：

• 简单数据类型：
  1.number数据类型 —— var num=123;
  2.string数据类型 —— var str="abcd";
  3.boolean数据类型 —— var bool=ture;
• 特殊数据类型：
  4.未定义undefined —— var a;
  5.空 null —— var a=null

复杂数据类型：

• object —— var obj={"name":"小明"，"age"："14"};

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

• NaN是一个特殊值，表示非数(not a Number)例如Number ("123a") 得到的即为NaN;
  NaN 不等于自己.
• undefined表示"缺少值"——表明此处应该有一个值，但是没有定义.例如 var a;
• null表示"没有对象"——即该处不应该有值。

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

instanceof 和typeof都能用来判断一个变量是否为空或是什么类型的变量。

• typeof 用以获取一个变量的类型，typeof 一般只能返回如下几个结果：number,boolean,string,function,object,undefined。
• 我们可以使用 typeof 来获取一个变量是否存在，如 if(typeof a!="undefined"){}，而不要去使用 if(a) 因为如果 a 不存在（未声明）则会出错，对于 Array,Null 等特殊对象使用 typeof 一律返回 object。

这正是 typeof 的局限性。如果我们希望获取一个对象是否是数组，或判断某个变量是否是某个对象的实例则要选择使用instanceof。

• instanceof 用于判断一个变量是否某个对象的实例，如 var a=new Array();alert(a instanceof Array);会返回 true，
• 同时 alert(a instanceof Object) 也会返回 true;这是因为 Array 是 object 的子类。再如：function test(){};var a=new test();alert(a instanceof test) 会返回 true。

谈到instanceof 我们要多插入一个问题，就是 function 的 arguments，我们大家也许都认为 arguments 是一个 Array，但如果使用 instaceof 去测试会发现 arguments 不是一个 Array 对象，尽管看起来很像。

代码题

1. 完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）

function isNumber(el){
    return typeof(el)==="number";
  }
  function isString(el){
    return typeof(el)==="string";
  }
  function isBoolean(el){
    return typeof(el)==="boolean";
  }
  function isFunction(el){
    return typeof(el)==="function";
  }

  var a = 2,
      b = "jirengu",
      c = false;
  alert( "2是数字："+isNumber(a) );  //2是数字：true
  alert( "2是字符串："+isString(a) );  //2是字符串：false
  alert( '"jirengu"是字符串：'+isString(b) );  //"jirengu"是字符串：true
  alert( "false是boolean："+isBoolean(c) ); //false是boolean：true
  alert( "2是函数："+isFunction(a)); //2是函数：false
  alert( "isNumber是函数："+isFunction( isNumber ) ); //isNumber是函数：true

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

console.log(1+1); // 2  
console.log("2"+"4"); //24  
console.log(2+"4"); //24  
console.log(+new Date());// 1481460619667   
console.log(+"4"); //4   

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

var a = 1;
a+++a; // 3     解析：(a++)+a

typeof a+2; //"number2"     解析：先typeof a返回“number”，再+2

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

var arr = [3,4,5];
  for(var i=0;i<arr.length;i++){
    console.log(arr[i]*arr[i]);
  } // 输出 9, 16, 25

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

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

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

console.log(a); // undefined 
var a = 1;
console.log(a);//1
console.log(b);// Uncaught ReferenceError: b is not defined(…)   
/*第一个显示为undefinde 是因为JS的变量提升。相当于
var a;
console.log(a);
var a = 1;
console.log(a);
console.log(b);*/

变量提升,就是把变量提升提到函数的top的地方。需要说明的是，变量提升只是提升变量的声明，并不会把赋值也提升上来。