一、CSS和JS在网页中的放置顺序是怎样的？
- 首先页面对于CSS的依赖很大，要是先加载HTML的话，页面没有CSS渲染的话将会面目全非，所以CSS必须在HTML之前，又因html都在body里面，因此css要想在他前面加载就放在head标签里面即可；
- 所有浏览器在下载 JS 的时候，会阻止一切其他活动，比如其他资源的下载，内容的呈现等等。直到 JS 下载、解析、执行完毕后才开始继续并行下载其他资源并呈现内容。所以一般会将JS放置在html的后面，即body的最底部；
二、解释白屏和FOUC
浏览器在对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载，不同的浏览器对于CSS和HTML的处理方式不同，有的是等待CSS加载完成之后，对HTML元素进行渲染和展示（白屏问题）。有的是先对HTML元素进行展示，然后等待CSS加载完成之后重新对样式进行修改（FOUC无样式内容闪烁）
- 如果把CSS样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现，如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。
- 如果把CSS样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。
- 如果把js文件放在头部，脚本会阻塞后面内容的呈现，脚本会阻塞其后组件的下载，出现白屏问题。
三、async和defer的作用是什么？有什么区别
- 什么是加载异步：异步加载又叫非阻塞，浏览器在下载执行 js 同时，还会继续进行后续页面的处理。
- defer和asnyc是脚本异步加载的两种方式。
- defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。脚本延迟到文档解析和显示后执行，有顺序
- async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。即不保证顺序；
- 区别：
- async是HTML5新增的属性，它的作用是能够异步的加载和执行脚本，不因为加载脚本而阻塞页面的加载。一旦加载到就会立即执行。不影响页面的其他操作。
- defer如果给script标签添加了defer属性，即使js放在head里面，它也会在HTML页面解析完毕之后再执行，也就是类似于把这个js放在了页面底部。简单来说就是等页面的html和css加载完毕之后再加载js。
四、简述网页的渲染机制
-
浏览器解析：
- 浏览器通过请求的url进行域名解析，向服务器发起请求，接受文件(HTML、CSS、JS、Images)
- HTML加载后开始构建DOM树；
- CSS加载后开始构建CSSOM树；
- Javascript脚本文件加载后，通过DOM API和 CSSOM API来操作DOM Tree和CSSOM Tree；
-
浏览器渲染：
- 浏览器引擎通过 DOM Tree 和 CSSOMTree 构建 Rendering Tree
- 通过 CSSOM Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout 。
- 最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint 。当用户在浏览网页时进行交互或通过 js 脚本改变页面结构时，以上的部分操作有可能重复运行，此过程称为 Repaint 或 Reflow。
Repaint
当元素改变的时候，将不会影响元素在页面当中的位置（比如 background-color, border-color, visibility），浏览器仅仅会应用新的样式重绘此元素，此过程称为 Repaint。Reflow
当元素改变的时候，将会影响文档内容或结构，或元素位置，此过程称为 Reflow。（ HTML 使用的是 flow based layout ，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫 Reflow。）
五、JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有六种。
- 简单类型：
- string（字符串）：字符组成的文本(带有引号)
- number（数值）：整数和小数
- boolean（布尔值）：布尔表示一个逻辑实体，true or false
- undefined：表示“未定义”或不存在，即此处目前没有任何值
- null：可以通过将变量的值设置为 null 来清空变量。
- 复杂类型： object（对象）：在计算机科学中, 对象是指内存中的可以被 标识符引用的一块区域.是JavaScript的核心概念，也是最重要的数据类型。JavaScript的所有数据都可以被视为对象，这也是我们常说的一切皆为对象。
通常，我们将数值、字符串、布尔值称为原始类型（primitive type）的值，即它们是最基本的数据类型，不能再细分了。而将对象称为合成类型（complex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined
和null，一般将它们看成两个特殊值。
六、NaN、undefined、null分别代表什么?
-
NAN: 指的是not a number，表示非数字，NaN和任何值都不相等，包括自己 -
undefined：表示“未定义”或不存在，即此处目前没有任何值。
undefined表示不存在值，就是此处目前不存在任何值。典型用法是：
1.变量被声明了，但没有赋值时，就等于undefined。并且变量没有被声明也是undefined；
2.调用函数时，应该提供的参数没有提供，该参数等于undefined。
3.对象没有赋值的属性，该属性的值为undefined。
4.函数没有返回值时，默认返回undefined。
-
null：表示空值，即该处的值现在为空。也可理解为空对象
1.作为函数的参数，表示该函数的参数不是对象。
2.作为对象原型链的终点。
七、typeof和instanceof的作用和区别?
-
typeof运算符可以返回一个值的数据类型，可能有以下结果。- 原始类型string、number、boolean
- function
- undefined
- object
-
instanceof在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。
