* 这是关于JavaScript基本概念、基础数据类型、运算符、流程控制语句的一些小知识 *
1.CSS和JS在网页中的放置顺序是怎样的？
CSS放在<head>标签里面
JS最好放在</body>前面
如
JS摆放位置.png
2.解释白屏和FOUC
- 两者是因为不同浏览器的加载顺序不同或者JS阻塞造成的
- 白屏：
- 如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
- 如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏
- FOUC：
- 如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC 。
- 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致白屏现象。
3. async和defer的作用是什么？有什么区别
-
两者都是加载异步
- async：
<script async src="script.js"></script>- 有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。** 其中，不保证顺序。 **
- async：
-
defer：
<script defer src="script.js"></script>- 有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。 ** 其中，脚本延迟到文档解析和显示后执行，有顺序。 **
4.简述网页的渲染机制
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
网站渲染步骤图.png
5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
- 数值（Number）：普通的数字如1、23、456、1.99
- 字符串（String）：字符组成的文本如 "test" 一定要加引号
- 布尔值（boolean）：True False
- undefined：只是声明但还没定义（或者不存在），也就是没有值
- null：表示此处应该有一个值，但目前为空（空缺）
- 对象（Object）：各种值组成的组合。
- 数组
- 函数
- 狭义的对象
简单类型：Null、undefined、Boolean、Number、String
复杂类型：Object
6. NaN、undefined、null分别代表什么
- NaN：Not a number 非数值，它不等于任何值（包括自己）
2.undefined：声明但还没定义（或者不存在） - null：空，此处应该有一个值，但目前为空（也就是没有对象）
7.typeof和instanceof的作用和区别?
- typeof:可以判断变量的类型 如判断num,object,string
typeof举例.png
- instranceof:由于空数组([])类型为object,null也是object,对象也是object,typeof 无法区分,可用instanceof区分(细分object)
instanceof举例.png
