level-16

JS基础知识

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

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

---

解释白屏和FOUC##

浏览器的白屏与无样式内容闪烁（FOUC）,是由于浏览器加载与显示页面方式不同造成的：

解决方式：使用link标签将样式表放置在head标签中。

IE————会出现白屏现象

• 原因是其等待页面组件包括样式表全部加载完成后才呈现整个页面。若样式表放在页面底部，将会出现白屏。样式表在页面中位置并不影响页面中组件的下载时间，但是会影响页面的呈现。
  如果样式表仍在加载，构建呈现树就是一种浪费，因为在所有样式表加载并解释完毕之前无需要绘制任何东西，否则，在其准备好之前显示的内容会遇到FOUC问题。

• 就好比IE不希望加载的时候页面字体颜色一会从黑色变成红色，一会没有下边框。一会又多出来个什么，IE浏览器会阻止页面页面的逐步呈现直至样式表加载解析完毕，然后页面所有的内容同时出现在屏幕上，就会出现白屏现象。不过貌似白屏用户体验度更差。

• 这样IE 就避免了FOUC问题，也就自然的会出现白屏现象。在IE中，将样式表放在文档底部公导致白屏问题的情形有以下几种：
  一、在新窗口中打开时
  二、重新加载时
  三、作为主页打开时

---

FireFox 当把样式表放在页面底部时，会遇到FOUC问题，因为FF为了用户体验，对所有都是对页面中的组件逐步呈现。

• 无论是将样式表置于顶部还是底部，FF总是采用逐步呈现的方式来加载组件。因此，若样式表不是最初页面呈现所必需的，则用户用户基本感觉不到有什么差别（当然加载时间是不一样的，最后会稍微再补充一下）；而当样式表为页面程序所必需的时候，则会出现无样式内容闪烁现象。
  另外IE浏览器和Firefox的区别
  Firfox浏览器：

• 样式表位于顶部：页面内容逐步呈现

• 样式表位于底部：

• 与页面呈现内容无关：页面内容逐步呈现

• 呈现与页面呈现内容有关：出现无样式内容闪烁

IE浏览器

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

---

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

• <script src="script.js"></script>
  没有 defer 或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
• <script async src="script.js"></script>
  有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
• <script defer src="myscript.js"></script>
  有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成。然后从实用角度来说呢，首先把所有脚本都丢到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。
  蓝色线代表网络读取，红色线代表执行时间，这俩都是针对脚本的；绿色线代表 HTML 解析。
  此图告诉我们以下几个要点：
• defer 和 async 在网络读取（下载）这块儿是一样的，都是异步的（相较于 HTML 解析）
• 它俩的差别在于脚本下载完之后何时执行，显然 defer 是最接近我们对于应用脚本加载和执行的要求的
• 关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
• async 则是一个乱序执行的主，反正对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行
• 仔细想想，async对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的，最典型的例子：Google Analytics

参考[defer和async的区别][2]

---

简述网页的渲染机制
渲染一个Web页面，浏览器执行的所有步骤如下：

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

• 解析HTML代码，构建Document Object Model (DOM)

• 解析CSS代码，构建CSS Object Model (CSSOM)

• JavaSript通过API操作DOM和CSSOM, 构建渲染树
  构建过程如下

  
  0_1458660207168_render-tree-construction.png

• 2.布局阶段

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

• 3.绘制元素

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

• 4.合并渲染层

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

---

JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
在JavaScript中，有5种基本数据类型和1种复杂数据类型，可以使用typeof来检测是什么数据类型。
基本数据类型：

• number数据类型 —— var num=123;
• string数据类型 —— var str="abcd";
• boolean数据类型 —— var bool=ture;
• 未定义undefined —— var a;
• 空 null —— var a=null

复杂数据类型：

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

简单数据类型：

• number数据类型 —— var num=123;
• string数据类型 —— var str="abcd";
• boolean数据类型 —— var bool=ture;

特殊数据类型：

• 未定义undefined —— var a;
• 空 null —— var a=null

---

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

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

---

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( 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   number
console.log("2"+"4"); //24   string
console.log(2+"4"); //24   string
console.log(+new Date());//1458661115766  number
console.log(+"4");//4 string

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++){
           console.log(arr[i]*arr[i]);
}
// todo..
// 输出 9, 16, 25 

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

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

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

console.log(a);//undefined  
var a = 1;
console.log(a);//1
console.log(b);//报错，因为变量b未定义。
第一个显示为undefinde 是因为JS的变量提升。相当于
var a;
console.log(a);
var a = 1;
console.log(a);
console.log(b);

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

@hunger