CSS和JS在网页中的放置顺序是怎样的？
- 对于CSS，应该使用
<link>标签放在<head>标签内，当直接写在html文档中时应该在<head>标签内写一个<style>标签然后放在<style>标签内。/*CSS外部引用*/ <head> <link rel="stylesheet" type="text/css" href="styles/index.css"> </head>/*内部样式表*/ <head> <style> body{ margin:0; } </style> </head> - 对于JS通常放在
<body>的内容的最后面，但是个别特殊JS内容应该尽量放在最前面。
/*外部引用*/
<body>
<script type="text/javascript" src="index.js"></script>
</body>
/*内部引用*/
<body>
<script>
alert(1);
</script>
</body>
解释白屏和FOUC
- 白屏问题：如果把样式放在底部，对于IE浏览器，在某些场景下页面会出现白屏，而不是内容逐步展现，如果使用
@import标签，即使CSS放入<link>并且放在头部也可能出现白屏。
在加载JS文件时，会警用并发，并阻止其他内容的下载，所以把JS放入页面顶部也会导致白屏现象。 - FOUC无样式内容闪烁
如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .
将JS放在底部
- 脚本会阻塞后面内容的呈现
- 脚本会阻塞其后组建的下载
async和defer的作用是什么？有什么区别
async和defer都时异步加载。
没有defer或async，浏览器会立即加载并执行指定的脚本，立即指的是在渲染该<script>之下的文档元素之前，也就时说不等待后续载入的元素，读到就加载并执行。
- 有
async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（异步）。
<script async type="text/javascript" src="index.js"></script>
- 有
defer，加载后续文档元素的过程将和script.js的加载并行进行，但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。
defer和async的区别：
-
defer：脚本延迟到文档解析和显示后执行，有顺序 -
async：不保证顺序
简述网页的渲染机制
- 浏览器打开页面时，先加载HTML的内容，然后解析HTML文件解析成DOM树。
- 解析CSS构建CSSOM树
- 把DOM和CSSOM组合成渲染树
- 在渲染树的基础上进行布局，计算每个节点的几何结构
- 把每个节点绘制到屏幕上
JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
- 简单类型
- Number类型：整数和小数
- String类型：字符组成的文本
- Boolean类型：true和false的两个特定值
- Null：表示已经定义了一个变量，但是目前没有赋值，即为空
- Undefined类型：表示未定义或不存在
- 复杂类型
Object类型
NaN、undefined、null分别代表什么?
-
NaN表示非数字，但是属于Number类型。NaN和任何数值都不相等，包括它自己 -
undefined表示不存在值，就是此处目前不存在任何值。典型用法：
- 变量被声明了，但没有赋值时，就等于
undefined - 调用函数时，应该提供的参数没有提供，该参数等于
undefined - 对象没有复制的属性，该属性的值为
undefined - 函数没有返回值时，默认返回
undefined
-
null表示空值，即该处现在为空，用法：
- 作为函数的参数，表示该函数的参数是一个没有任何内容的对象
- 作为对象原型链的终点
typeof和instanceof的作用和区别?
typeof和instanceof都能用来判断变量的类型或者是否为空。
typeof用以获取一个变量的类型，一半只能返回number,boolean,string,function,object,undefined类型。
- 而
instaceof用来判断一个变量是否是某个对象的实例，返回值是布尔类型，已确定该变量是否为指定类型。
代码
- 完成如下代码判断一个变量是否是数字、字符串、布尔、函数
function isNumber(el){
}
function isString(el){
}
function isBoolean(el){
}
function isFunction(el){
}
var a = 2,
b = 'jirengu',
c = false;
alert( isNumber(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()); //1470814913028
console.log(+"4"); //4
- 以下代码的输出结果是?
var a = 1;
a+++a; //3
typeof a+2; //number2
- 遍历数组，把数组里的打印数组每一项的平方
var arr = [3,4,5]
// todo..
// 输出 9, 16, 25
- 遍历 JSON, 打印里面的值
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
//todo ...
// 输出 name: hunger, sex: male, age:28
- 下面代码的输出是? 为什么
console.log(a);//undefined 变量提升 a未赋值
var a = 1;
console.log(a); //1
console.log(b); //b is undefined,未声明b
本文版权归本人和饥人谷所有，转载请注明来源。
