问答：
1.CSS和JS在网页中的放置顺序是怎样的？
CSS一般放在 <head>标签内，为了避免白屏和FOUC
JS一般放在<body>标签的底部 原因如下：
在网页渲染时 如果遇到<javascript>标签时，网页会暂停渲染，等待脚本加载并执行完全后，再继续渲染。这就是阻塞效应，如果脚本过大就会影响到网页的渲染。
将脚本放在<body>标签的底部，这时网页的效果已经出来了， 可以获得更好的用户体验。
//<javascript>标签放在<body>标签中部时，网页先会弹出alert，再出来<h2>标签
<body>
<h1>我是头标题</h1>
<script type="text/javascript">
alert(1);
</script>
<h2>我是副标题</h2>
</body>
Paste_Image.png
<body>
///而将<javascript>标签放在<body>标签底部时，网页效果已经出来了，不影响用户体验
<h1>我是头标题</h1>
<h2>我是副标题</h2>
<script type="text/javascript">
alert(1);
</script>
</body>
Paste_Image.png
2.async和defer的作用是什么？有什么区别
async和defer 都是为了解决javascript代码阻塞效应的
1.defer属性
- 写法
<script src="1.js" defer></script>
<script src="2.js" defer></script>
当遇到defer属性的<script>标签时，浏览器会继续向下解析Html,同时并行下载脚本。
等到页面加载完成在DOMContentLoaded事件触发前执行（即刚刚读取完</html>标签），而且可以保证执行顺序就是它们在页面上出现的顺序。
也就是说defer属性的作用是，告诉浏览器，等到DOM加载完成后，再执行指定脚本（推迟执行）。
2.async属性
- 写法
<script src="1.js" async></script>
<script src="2.js" async></script>
async属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。
但是需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。
defer和 async的区别：
async不能保证脚本的执行顺序，而defer可以保证。如果脚本之间的不存在依赖关系就使用 async属性，如果脚本间存在先后顺序的关系就使用defer。
3.简述网页的渲染机制
渲染引擎处理网页，通常分成四个阶段
1.解析代码：HTML代码解析为DOM，CSS代码解析为CSSOM（CSS Object Model）
2.对象合成：将DOM和CSSOM合成一棵渲染树（render tree）
3.布局：计算出渲染树的布局（layout）
4.绘制：将渲染树绘制到屏幕
4.解释白屏和FOUC
- 白屏
打开页面的时候会出现白屏，而不是显示内容，当CSS放在页面底部时，一些浏览器（比如IE的某些版本）会等待html和css加载完毕后才进行页面渲染，这样就造成页面内容不会逐步出现，而是白屏。
@import加载样式时即使放在link里也会造成白屏。
js是阻塞加载，放在头部时会阻塞加载，等js加载完成后再继续加载后续内容，这也会造成白屏。 - FOUC
flash of unstyled content（无样式内容闪烁）
指的是加载网页时会出现短暂的CSS样式失效。
下面几种原因可能导致白屏 或者FOUC
使用import方法导入样式表。
将样式表放在页面底部
多个样式表，放在了html结构的不同位置。
有些浏览器是解析一个标签就渲染一步，
如果把CSS放在底部,逐步加载无样式的内容, CSS在页面内容加载完后突然展现出现. 就会发生闪烁;
Firefox 是 FOUC的典型
5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
.JavaScript定义了6中数据类型，
其中5中是简单类型
Null
Undefined
Boolean
Number
String()
还有一个是复杂类型
object（一组无序的键值对集合）
6.NaN、undefined、null分别代表什么?
NaN (Not a Number) :代表非数字 与任何数都不相等 包括本身，我们可以利用这个特性来判断是不是NaN
NaN==NaN //false
undefined:表示变量只被声明，没有被初始化，也就是有这个指针，但是这个指针没有指向任何空间
var a ;
console.log(a); //undefined
null:表示空指针，也就是不存在的东西 我们可以通过它来取消引用
<script type="text/javascript">
var obj={name:"小韩"};
var a=obj;
console.log("a",a) //a Object {name: "小韩"}
a=null;
console.log("a",a) //a null
console.log("obj",obj)//obj Object {name: "小韩"}
</script>
7.typeof和instanceof的作用和区别?
1.typeof运算符可以返回一个值的数据类型
<script type="text/javascript">
//原始类型
console.log(typeof 123); //number
console.log(typeof NaN); //number
console.log( typeof "xiaohan"); //string
console.log(typeof true); //boolean
console.log(typeof null); //object 这里null返回的是object！
console.log(typeof undefined); //undefined
//函数
console.log(typeof fn) ; //function
function fn(){};
//其他都返回object
console.log(typeof {name:"小韩"}); //object
console.log(typeof {}); //object
console.log(typeof [1,2]); //object
console.log(typeof[]); //object
</script>
2.instanceof 是用来判断对象是否是某个类型的实例，返回值为Boolean值
var a = new Number(1);
console.log(a instanceof Number); //true a是Number对象
function Person(name,age){
this.name=name;
this.age=age;
}
var b = new Person("小花",18);
console.log(b instanceof Person); //true
var c =1;
console.log(c instanceof Number) //false c不是对象
代码
1.完成如下代码判断一个变量是否是数字、字符串、布尔、函数 （难度*）
function isNumber(el){
return "number"=== typeof el;
}
function isString(el){
return "string" ===typeof el;
}
function isBoolean(el){
return "boolean" ===typeof el;
}
function isFunction(el){
return "function" ===typeof 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
2.以下代码的输出结果是?（难度**）
console.log(1+1); //2
console.log("2"+"4"); //24
console.log(2+"4"); //24
console.log(+new Date()); //输出1970 年 1 月 1 日至今的毫秒数
console.log(+"4"); //4
3.以下代码的输出结果是? （难度***）
var a = 1;
a+++a; //a变为2 表达式值为3 相当于(a++)+a
typeof a+2; //munber2 相当于(typeof a) +2
4.遍历数组，把数组里的打印数组每一项的平方 （难度**）
var arr = [3,4,5]
for(var i=0;i<arr.length;i++){
console.log(i*i);
}
5.遍历 JSON, 打印里面的值 （难度**）
var obj = {
name: 'hunger',
sex: 'male',
age: 28
}
for(var k in obj){
console.log(k+":",obj[k]);
}
6.下面代码的输出是? 为什么 （难度***）
console.log(a); //undefined
var a = 1;
console.log(a); //1
console.log(b); //b is not defined
本教程版权归本博主和饥人谷所有，转载须说明来源
网友评论