任务16-JS 语法

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

• css放在head标签里
• js放在body标签的最后
  主要是为了避免白屏和FOUC,详见问答2

2. 解释白屏和FOUC

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

• 当把css样式放在底部或者使用@import方式引入样式时
  一些浏览器例如chrome,他的加载和渲染机制是等css全部加载解析完后再渲染展示页面,而这个等待的时间就为白屏。
• 另一些浏览器例如Firefox,他会在css未加载前先展现页面,等css加载后再重绘一次,这就造成了FOUC (无样式内容闪烁)。
• 当元素中包含JavaScript文件时
  必须等到所有的JavaScript代码都被下载,解析和执行完成以后,才能开始呈现页面的内容(浏览器遇到标签才开始呈现内容).如果JavaScript代码很多,这会导致页面呈现延时,延时期间浏览器窗口将是一片空白.

所以为了避免这些问题,最好使用LINK标签将CSS样式表放在标签中,JavaScript引用放在标签的末尾。

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

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

• defer是script标签中处理脚本运行的属性之一，中文称作延时，作用是js在页面加载后才会运行脚本，即同时加载js，延时执行js。语法规则为：

• async（HTML5）是script标签中处理脚本运行的另一属性，中文称作异 步，作用是脚本会异步加载而不阻塞页面加载，并且js一旦下载完毕就会立即执行。

关于二者的加载和执行方式如下图所示：

Paste_Image.png

【注意】无论是defer还是async都仅适用于外部脚本
还有几点要注意：

• defer脚本会在DOMContentLoaded和load事件之前执行;如果有多个声明了defer的脚本，则会按顺序下载和执行
• async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序;如果有多个声明了async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序(谁先下载完先执行)
• Js可以改变DOM树,所以操作 DOM 的Js脚本不要使用 async和defer 如果一定要使用,需要把需要操作 DOM 的部分放在 DOMContentLoaded 事件回调中执行

---

关于兼容性:
由CanIUSe可知,
async在IE<=9时不支持，其他浏览器OK
defer在IE<=9时部分支持，其他浏览器OK
所以有时会在async不支持的时候启用defer，但defer在某些情况下还是有bug

所谓部分支持是指浏览器尽管已经支持 defer，但是没有严格按照 HTML5 标准处理，这会导致bug，这个bug在这个Issue中有描述
这也是为什么《javascript高级程序设计》一书中写过

“在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本”的原因
所以最保险的方法还是把JavaScrpipt引用放在标签的末尾.

4. 简述网页的渲染机制

• 解析文档并构建树：Html解析以构建DOM Tree和Css解析以构建Style Rules Tree
• 构建渲染树Render Tree：此时渲染引擎会将DOM Tree和Style Rules Tree结合在一起形成Render树，它由一些包含有颜色和大小等属性的矩形组成
• 布局Layout：Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。

• 绘制paint：再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。　　
  

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

ES5有五种数据类型：

• 数值（number）：整数和小数（比如1和3.14）
• 字符串（string）：字符组成的文本（比如”Hello World”）
• 布尔值（boolean）：true（真）和false（假）两个特定值
• undefined：表示“未定义”或不存在，即此处目前没有任何值
• null：表示空缺，即此处应该有一个值，但目前为空
• 对象（object）：各种值组成的集合 。object为复杂类型，其他为简单类型。

---

通常，我们将数值、字符串、布尔值称为原始类型（primitive type）的值，即它们是最基本的数据类型，不能再细分了。而将对象称为合成类型（complex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined和null，一般将它们看成两个特殊值。

---

【注】
1.数组和函数算是广义的对象，null也属于对象
2.NaN是一种特殊的数值

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

• NaN：表示Not a Number，不是一种独立的数据类型，而是一种特殊数值，它的数据类型依然属于Number，只不过数值计算时不符合计算法则
  0/0//NaNMath.sqrt(-5)//NaN
• null 是一个表示"无"的对象，转为数值时为0；
• undefined是一个表示"无"的原始值，转为数值时为NaN。

---

[注意]
设置一个值为 null 是合理的，如objA.valueA = null;但设置一个值为 undefined 是不合理的

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

• typeof是返回一个字符串并显示为参数数据类型的运算符，但它无法区分数据类型object究竟是出自狭义的对象object还是数组
  示例如下：

typeof 37 === 'number';
typeof "bla" === 'string';
typeof true === 'boolean';
typeof Symbol('foo') === 'symbol';
typeof undefined === 'undefined';
typeof {a:1} === 'object';
typeof [1, 2, 4] === 'object';
typeof function(){} === 'function';

---

• instanceof运算符可以用来判断某个构造函数的prototype属性所指向的對象是否存在于另外一个要检测对象的原型链上，简单的讲就是判断一个变量是否是某个对象（类）的实例，返回值是布尔类型的。

function C(){}     //构造函数
function D(){}     //构造函数
var a = new C();   //创建实例
var b = new D();   //创建实例
var bool1=a instanceof C
var bool2=a instanceof D
//bool1是C对象的实例
console.log(bool1)
//bool2不是C对象的实例
console.log(bool2)