关于Javascript语法

---

* 这是关于JavaScript基本概念、基础数据类型、运算符、流程控制语句的一些小知识 *

---

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

CSS放在标签里面
JS最好放在前面

如

JS摆放位置.png

2.解释白屏和FOUC

• 两者是因为不同浏览器的加载顺序不同或者JS阻塞造成的
• 白屏：
  • 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
  • 如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏
• FOUC：
  • 如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。
  • 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象。

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

• 两者都是加载异步

  • async：
    • 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。** 其中，不保证顺序。 **

• defer：

  • 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。 ** 其中，脚本延迟到文档解析和显示后执行，有顺序。 **

关于Javascript中defer和async的区别总结

4.简述网页的渲染机制

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

网站渲染步骤图.png

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

1. 数值（Number）：普通的数字如1、23、456、1.99
2. 字符串（String）：字符组成的文本如 "test" 一定要加引号
3. 布尔值（boolean）：True False
4. undefined：只是声明但还没定义（或者不存在），也就是没有值
5. null：表示此处应该有一个值，但目前为空（空缺）
6. 对象（Object）：各种值组成的组合。
   • 数组

• 函数
• 狭义的对象

简单类型：Null、undefined、Boolean、Number、String
复杂类型：Object

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

1. NaN：Not a number 非数值，它不等于任何值（包括自己）
   2.undefined：声明但还没定义（或者不存在）
2. null：空，此处应该有一个值，但目前为空（也就是没有对象）

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

• typeof:可以判断变量的类型 如判断num,object,string

typeof举例.png

• instranceof:由于空数组([])类型为object,null也是object,对象也是object,typeof 无法区分,可用instanceof区分(细分object)

instanceof举例.png

---