1. CSS 和 JS 在网页中的放置顺序是怎样的？
通常，CSS 会放在 <head> 中，JS 会放在 </body> 之前。
浏览器会按照从上到下的顺序解析文档内容，而且默认在解析到 JavaScript 代码时，其他文档无法加载或显示，只有等待 JavaScript 代码下载并执行完毕才能显示文档。
2. 解释 白屏 和 FOUC
白屏问题：
如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
如果使用 @import 标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏
FOUC (Flash of Unstyled Content) 无样式内容闪烁：
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .
对于 JS
- 脚本会阻塞后面内容的呈现
- 脚本会阻塞其后组件的下载
所以：
对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.
CSS 放在前面，是因为：页面渲染时，首先是根据DOM结构生成一个 DOM 树，然后再加上 CSS 样式生成一个渲染树 (render tree)，如果 CSS 放在后面可能页面会出现闪跳的感觉 (FOUC - Flash of Unstyled content)，或者是白屏或者布局混乱样式很丑直到 CSS 加载完成。
3. async 和 defer 的作用是什么？有什么区别？
首先，如果没有 asynv 或者 defer ，浏览器会立刻加载脚本。（不等待后面载入的元素，直接读到这个脚本的时候就立刻执行。）
所以，如果这个脚本下载时间长，浏览器就可能出现“白屏”的现象。因为在加载完成这个脚本之前，浏览器都不会加载后面的元素。
另外，如果有 async 或者 defer 的话，
async 会将“脚本加载”和“加载后面元素”并行进行。（异步）
defer 也会“异步”，但加载脚本是等到页面元素全部渲染完成之后（这也是与 async 的区别）。
4. 简述网页的渲染机制
- 解析 HTML 标签，构建 DOM 树
- 解析 CSS 文件，构建 CSSOM 渲染树
- DOM 树和 CSSOM 树组合，形成渲染树（render tree）
- Render 树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历 render 树，并使用UI后端层绘制每个节点。即在渲染树的基础上进行布局, 计算每个节点的几何结构把每个节点绘制到屏幕上 (painting)
网页渲染机制
拓展：
- 浏览器的工作原理,可参考How browsers work
- �JS 一定要放在 Body 的最底部么？聊聊浏览器的渲染机制
- CSS、JS 放置位置与前端性能的关系？
- 网页 head 标签中的 JS 和 CSS，哪种文件放在前面，哪种放在后面比较好？
- 网站为什么 JS 调用尽量放到网页底部？
5. JavaScript 定义了几种数据类型？哪些是简单类型？哪些是复杂类型？
-
简单数据类型
- Null，空指针，也就是不存在的东西
- Undefined，Undefined 类型也只有一个值 underfined ，表示变量只被声明，没有被初始化，也就是有了这个指针，但是这个指针没有指向任何空间
- Boolean，有 2 个值：true / flase
- Number JavaScript 的数字类型和其他类型有所不同，没有“整形”和“浮点数”的区别，统一都是 Number 类型，可以表示十进制、八进制、十六进制
- String，Unicode 字符组成的序列，俗称字符串，可以用单引号或者双引号表示。字符串有一些转义字符。
-
复杂数据类型
- Object，对象是 JavaScript 的核心概念，也是最重要的数据类型。 JavaScript 的所有数据都可以被视为对象，“一切皆对象”。
另外，null 的类型也是 object ，这是由于历史原因造成的，为了兼容以前的代码，后来就没法修改了，并不是 null 就属于 object ，本质上，null 是一个类似 undefined 的特殊值。
6. NaN、underfined、null 分别代表什么？
NaN，Not a Number，表示非数字，但是它是一个数字类型。NaN 和任何值都不相等，包括它自己。
NaN == NaN; //false
typeof NaN; //"number"
null 表示“没有对象”，此处不应该有值。
undefined 表示“缺少值”，就是此处应该有一个值，但是还没有定义。
拓展：
7. typeof 和 instanceof 的作用和区别？
typeof 运算符可以返回 1 个值的数据类型。
instanceof，判断一个变量是否属于某个对象的实例。返回值：true / false
typeof 用来获取一个变量的类型，typeof 一般只能返回以下几个结果：number、boolean、string、function、object、undefined。对于 Array、Null 等特殊对象，使用 typeof 都是返回 object ，这正是 typeof 的局限性。
如果想知道一个对象是不是数组，或者判断一个变量是不是某个对象的实例，就要使用 instanceof。
var a = [1,2,3,4,5];
undefined
typeof (a);
"object"
a instanceof Array
true
代码部分：
funcition isNumber(el) {
return (typeof(el) === 'number');
}
function isString(el) {
return (typeof(el) === 'string');
}
function isBoolean(el) {
return (typeof(el) === 'boolean');
}
function isFunciton(el) {
return (typeof(el) === 'function');
}
var a = 2;
b = "test";
c = false;
alert (is Number(a)); //true
alert (isString(a)); //false
alert (isString(b)); //true
alert (isBoolean(c)) //true
alert (isFunction(a)); //false
alert (isFunction( isNumber )); //true
以下代码输出结果是？
console.log(1+1);
2
console.log("2"+"4");
24
console.log(2+"4");
24
console.log(+new Date()); //1971年至今的毫秒总数
1472952291950
console.log(+"4");
4
以下代码的输出结果是？
var a = 1;
a+++a;
typeof a+2;
"number2" //typeof a 为 "number"
//如果是 typeof (a+2);
"number"
//另外
var a = 1;
a
1
a++
1
++a
3
遍历数组，把数组里的打印数组每一项的平方
var arr = [3,4,5];
for (i=0; i<arr.length; i++) {
console.log(arr[i] * arr[i]);
}
遍历 JSON ，打印里面的值
var obj = {
name : "haha",
sex : "male",
age : 28
}
for (key in obj) {
console.log(obj[key]);
}
下面代码的输出是？为什么？
console.log(a); //undefined －－> 变量提升
var a = 1;
console.log(a); //1
console.log(b); //b is not defined(...)
网友评论