JS语法

本教程版权归小圆和饥人谷所有，转载须说明来源

问答

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

• CSS使用link标签放在页面顶部（里）
• JS放在页面底部（底部）

2. 解释白屏和FOUC

白屏：如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现。如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏。把javascript放在页面顶部也会导致白屏现象。
FOUC (Flash of Unstyled Content) 无样式内容闪烁：
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC。

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

作用：
aysnc：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。
defer：加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
区别：
aysnc：不保证顺序
defer：脚本延迟到文档解析和显示后加载，有顺序

4. 简述网页的渲染机制

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

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

JavaScript的数据类型共有六种：

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

简单类型：数值、字符串、布尔值
复杂类型：对象

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

NaN：含义是Nat a Number，不表示非数字，NaN和任何值都不相等，包括它本身
undefined：表示不存在值，即此处目前不存在任何值
null：表示空值，即该处的值现在为空

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

typeof：判断数据类型
instanceof：判断一个变量是否为某一个对象的实例