1.CSS和JS在网页中的放置顺序是怎样的?
将CSS link标签放在html文档靠前位置。JS代码放在html文档底部,body结束标签前
2.解释白屏和FOUC
(1)当js文件放在文本的顶部会造成以下两种情况
1.1脚本会阻塞后面内容的呈现
1.2脚本会阻塞其后组件的下载
(2)白屏
2.1在 Google Chrome 浏览器中,渲染会等到CSS加载完成后才开始。如果 CSS 文件没有放在页面头部,而是中间的位置,那么在加载 CSS 文件之前的时间段内,页面会呈现出白屏现象。
2.2如果使用@import标签,即使 CSS 放入link标签中,并且放在头部,也可能出现白屏现象。
2.3如果 JS 文件放到文件开始,也会因为等待加载和执行 JS 文件而导致后面的文档元素加载被阻断,页面呈现白屏。
(3)FOUC(Flash of Unstyled Content,无样式内容闪烁)现象。
3.1所谓的无样式闪烁(IE、firefox都有)是浏览器边加载边执行,逐步加载无样式的内容,等CSS加载后页面突然展现样式。
3.2FOUC现象主要体现在firefox浏览器下,firefox为了增强用户体验,选择在加载样式的同时绘制树,导致用户在加载页面的同时会看到渲染绘制的过程,也就出现了FOUC现象。
3.async和defer的作用是什么?有什么区别
(1)一般情况可不加上async/defer,若加上如这样
(2)假设一定想把js文件放顶部,就得加上defer和async来异步加载
(3)如果不加[async]和[defer],浏览器读到script里的脚本就马上加载并且执行,不会去等后续渲染元素
(4)js加载并执行与渲染后续文档并发执行(异步),当时不保证顺序
(5)js加载后暂不执行,脚本延迟到文档解析和显示后才执行,有顺序之分
4.简述网页的渲染机制
步骤一:解析HTML,构建DOM树
步骤二:解析CSS,构建CSSOM树
步骤三:把DOM、CSSOM组合成渲染树(render tree)
步骤四:在渲染树基础上进行布局,把每一个节点绘制到屏幕上。
5.JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
简单类型:Null、undefined、Boolean、Number、String 复杂类型:Object
Null:空指针,也就是不存在的东西
undefined:表示变量只是被声明,没有被初始化,有指针,但是不指向任何空间
Boolean:布尔值,只有true和false之分
Number:数字 var a=1,b=0.2,c=1e10
String:Unicode 字符组成的序列,俗称字符串,可以用单引号或者双引号表示。 字符串有一些转义字符。 var str =“ ”
Object对象 :对象是 JavaScript 的核心概念
复杂类型又分为: function 函数 Array 数组 Data日期
6.NaN、undefined、null分别代表什么?
(1)NaN表示JS的特殊值,表示“非数字”(Not a Nember); NaN不是一种独立的数据类型;
NaN === NaN //false
(2)undefined本身自成一个数据类型。表示“缺少值”,就是此处应该有一个值,但是还没有定义。
2.1声明变量后,如果没有给变量赋值,那么变量值等于undefined。
2.2调用函数时,如果没有给函数提供应有的参数,那么参数值默认为undefined。
2.3对象的属性没有进行赋值,那么该属性的值为undefined。
2.4函数没有返回值时,默认返回undefined。
(3)null本身也自成一个数据类型。表示“没有对象”,即该处不应该有值。
7.typeof和instanceof的作用和区别?
(1)typeof是检测简单类型及function检测,但是遇到null无效,null还是要用=== typeof(1)//Number
typeof(“str”)//string
typeof(true)//boolean
typeof([1,2])//Object
typeof (new Object()) //Object
typeof (null) //Object
(2)instanceof 常用作判断对象类型
obj(对象) instanceof Object(构造系)
instanceof运算符返回一个布尔值,表示指定对象是否为某个构造函数的实例。
eg:[1,2] instanceof Array === true
eg: new Object() instanceof Array === false
8.代码
1.完成如下代码判断一个变量是否是数字、字符串、布尔、函数
function isNumber(el){
if(typeof(el) === "number"){
return true
}else{
return false
}
}
function isString(el){
if(typeof(el) === "string"){
return true
}else{
return false
}
}
function isBoolean(el){
if(typeof(el) === "boolean"){
return true
}else{
return false
}
}
function isFunction(el){
if(typeof(el) === "function"){
return true
}else{
return false
}
}
var a = 2,
b = "jirengu",
c = false;
console.log( isNumber(a) ); //true
console.log( isString(a) ); //false
console.log( isString(b) ); //true
console.log( isBoolean(c) ); //true
console.log( isFunction(a)); //false
console.log( isFunction( isNumber ) ); //true
2.以下代码的输出结果是?(难度**)
console.log(1+1); //2 两个数相加,输出数值
console.log("2"+"4");//24 字符串相加等同于拼接,输出字符
console.log(2+"4");//24 一个数字和字符串相加等同于拼接字符串,输出字符
console.log(+newDate());//1474442366638距离1997年1月1日的毫秒数
console.log(+"4");//4 4"转化为数值,最后结果为数值
3.以下代码的输出结果是? (难度***)
var a = 1;
console.log(a+++a);//2
typeofa+2; //number+2
分析:在a+++a表达式当中,后置递增的优先级最高。所以相当于(a++)+a。a一开始赋值为1,a++表示先赋值再自增,所以a++的计算结果为1,且此时a等于2。所以a+++a表达式的计算结果为3。
分析:而typeof a+2中,typeof在js中的优先级比“+”高,所以它会先计算typeof a,得到的输出是字符串"number"。然后是一个字符串加上一个数字,会把数字转换成字符串。所以得到的输出为"number2"的字符串
4.遍历数组,把数组里的打印数组每一项的平方 (难度**)
5,遍历 JSON, 打印里面的值 (难度**)
varobj = { name:'hunger',
sex:'male',
age:28}
//todo ...// 输出 name: hunger, sex: male, age:28
6.下面代码的输出是? 为什么 (难度***)
console.log(a); //undefined
var a =1;
console.log(a);//1
console.log(b);//is not defined
分析:过程如下
var a
console.log(a)
a=1
consolo.log(a)
console.log(b)
由于变量会提升,但还赋值,所以第一个输出为undefined
第二个则会显示为1
第三个由于没有声明变量b,所以会报错