饥人谷-任务十六

一、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。

四、简述网页的渲染机制

• 浏览器解析：

  1. 浏览器通过请求的url进行域名解析，向服务器发起请求，接受文件(HTML、CSS、JS、Images)
  2. HTML加载后开始构建DOM树；
  3. CSS加载后开始构建CSSOM树；
  4. Javascript脚本文件加载后，通过DOM API和 CSSOM API来操作DOM Tree和CSSOM Tree；

• 浏览器渲染：

  1. 浏览器引擎通过 DOM Tree 和 CSSOMTree 构建 Rendering Tree
  2. 通过 CSSOM Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout 。
  3. 最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint 。当用户在浏览网页时进行交互或通过 js 脚本改变页面结构时，以上的部分操作有可能重复运行，此过程称为 Repaint 或 Reflow。

• Repaint
  当元素改变的时候，将不会影响元素在页面当中的位置（比如 background-color, border-color, visibility），浏览器仅仅会应用新的样式重绘此元素，此过程称为 Repaint。

• Reflow
  当元素改变的时候，将会影响文档内容或结构，或元素位置，此过程称为 Reflow。（ HTML 使用的是 flow based layout ，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫 Reflow。）

参考资料1

参考资料2

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

JavaScript语言的每一个值，都属于某一种数据类型。JavaScript的数据类型，共有六种。

• 简单类型：
  1. string（字符串）：字符组成的文本(带有引号)
  2. number（数值）：整数和小数
  3. boolean（布尔值）：布尔表示一个逻辑实体，true or false
  4. undefined：表示“未定义”或不存在，即此处目前没有任何值
  5. null：可以通过将变量的值设置为 null 来清空变量。
• 复杂类型： object（对象）：在计算机科学中, 对象是指内存中的可以被 标识符引用的一块区域.是JavaScript的核心概念，也是最重要的数据类型。JavaScript的所有数据都可以被视为对象，这也是我们常说的一切皆为对象。

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

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

• NAN: 指的是not a number，表示非数字，NaN和任何值都不相等，包括自己
• undefined：表示“未定义”或不存在，即此处目前没有任何值。
  undefined表示不存在值，就是此处目前不存在任何值。典型用法是：
  1.变量被声明了，但没有赋值时，就等于undefined。并且变量没有被声明也是undefined；

没赋值.png

2.调用函数时，应该提供的参数没有提供，该参数等于undefined。

没提供参数.png

3.对象没有赋值的属性，该属性的值为undefined。

对象没有赋值

4.函数没有返回值时，默认返回undefined。

• null：表示空值，即该处的值现在为空。也可理解为空对象

1.作为函数的参数，表示该函数的参数不是对象。
2.作为对象原型链的终点。

七、typeof和instanceof的作用和区别?

• typeof运算符可以返回一个值的数据类型，可能有以下结果。
  1. 原始类型string、number、boolean
  2. function
  3. undefined
  4. object
• instanceof在使用 typeof 运算符时采用引用类型存储值会出现一个问题，无论引用的是什么类型的对象，它都返回 "object"。ECMAScript 引入了另一个 Java 运算符 instanceof 来解决这个问题。instanceof 运算符与 typeof 运算符相似，用于识别正在处理的对象的类型。与 typeof 方法不同的是，instanceof 方法要求开发者明确地确认对象为某特定类型。

instanceof用法