1. CSS和JS在网页中的放置顺序是怎样的？
- css放在head标签里
- js放在body标签的最后
主要是为了避免白屏和FOUC,详见问答2
2. 解释白屏和FOUC
白屏与无样式内容闪烁(FOUC,Flash of Unstyled Content)是因为不同浏览器加载与显示页面的机制不同而造成的。
- 当把css样式放在底部或者使用@import方式引入样式时
一些浏览器例如chrome,他的加载和渲染机制是等css全部加载解析完后再渲染展示页面,而这个等待的时间就为白屏。 - 另一些浏览器例如Firefox,他会在css未加载前先展现页面,等css加载后再重绘一次,这就造成了FOUC (无样式内容闪烁)。
- 当<head>元素中包含JavaScript文件时
必须等到所有的JavaScript代码都被下载,解析和执行完成以后,才能开始呈现页面的内容(浏览器遇到<body>标签才开始呈现内容).如果JavaScript代码很多,这会导致页面呈现延时,延时期间浏览器窗口将是一片空白.
所以为了避免这些问题,最好使用LINK标签将CSS样式表放在<head>标签中,JavaScript引用放在<body>标签的末尾。
3. async和defer的作用是什么？有什么区别?
当浏览器碰到 script 脚本的时候：
- defer是script标签中处理脚本运行的属性之一，中文称作延时，作用是js在页面加载后才会运行脚本，即同时加载js，延时执行js。语法规则为：
<script src="demo.js" defer="defer"></script>
- async（HTML5）是script标签中处理脚本运行的另一属性，中文称作异 步，作用是脚本会异步加载而不阻塞页面加载，并且js一旦下载完毕就会立即执行。
<script src="demo.js" async="async"></script>
关于二者的加载和执行方式如下图所示：
【注意】无论是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
<script async defer src="script.js"></script>
所谓部分支持是指浏览器尽管已经支持 defer，但是没有严格按照 HTML5 标准处理，这会导致bug，这个bug在这个Issue中有描述
这也是为什么《javascript高级程序设计》一书中写过
“在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本”的原因
所以最保险的方法还是把JavaScrpipt引用放在<body>标签的末尾.
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)
