我的前端学习笔记14——js基础

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

• css放在 标签里，js放在 标签最后面。

• 原因：

1. css放在前面是因为浏览器在加载过程中，会现根据html生成DOM树，然后再加上css形成渲染树，如果css过大还被 放在了后面，会导致出现闪屏、白屏的现象。
2. js本身的特性是加载时会阻塞后面文件的加载，因此不放在后面会导致后面文件加载速度慢，而且js重复加载的现象，页面整体加载慢，用户体验差。

2，解释白屏和FOUC。

• 白屏和fouc并不是bug，而是不同浏览器加载和显示机制不同造成的。
• 白屏: 即网页空白, 不显示任何内容
  当CSS放置在代码的最后面, 如果浏览器是等待CSS加载完成之后对HTML元素进行渲染和展示, 在新窗口打开或刷新页面时, 可能因为未加载完成而出现白屏, 使用@import导入CSS和把JS放在顶部也可能导致白屏。
• FOUC: (Flash of Unstyled Content) 无样式内容闪烁
  当CSS放置在代码的最后面, 如果浏览器是先对HTML元素进行展示，然后等待CSS加载完成之后重新对样式进行修改, 在新窗口打开或刷新页面时, 可能会逐步加载无样式内容, 然后再CSS加载完成后突然展现样式。

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

• 当浏览器碰到 script 脚本的时候：

1. 
   没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。

2. 
   有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

3. 
   有 defer ，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。

• 从实用角度来说呢，首先把所有脚本都丢到 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

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

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

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

4，简述网页的渲染机制。

• 解析 HTML 标签, 构建 DOM 树
• 解析 CSS 标签, 构建 CSSOM 树
• 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
• 在渲染树的基础上进行布局, 计算每个节点的几何结构
• 把每个节点绘制到屏幕上

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

• 简单数据类型：

1. number数据类型 —— var num=123;
2. string（字符串）数据类型 —— var str=“abcd”;
3. boolean数据类型 —— var bool=ture;
4. 浮点数数据类型——var float=.89;

• 特殊数据类型：

4. 未定义undefined —— var a;
5. 空 null —— var a=null

• 复杂数据类型：

1. object —— var obj={“name”:“小明”，“age”：“14”};

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

• NaN是一个特殊数字，表示非数(not alike 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 对象，尽管看起来很像。

---

• typeof 返回一个值的数据类型：
• 数值、字符串、布尔值分别返回number、string、boolean
• 函数返回function
• undefined返回undefined
• 除此以外，其他情况都返回object
• instanceof 测试它左边的对象是否是它右边的类的实例，返回布尔型数据, a.instanceof(b);就是判断a是否是b的一个实例

• typeof对数组（array）和对象（object）的显示结果都是object, 无法进行区分, instanceof可以帮助区分