一、CSS和JS在网页中的放置顺序是怎样的?
js引入样式:
1、内部js样式
<script>alert(1);</script>
2、引入外部js样式
<script type="text/javascript" src="index.js"></script>
css引入样式:
1、内嵌css样式
<h1 style="color:red">aaa</h1>
2、内部样式表
.h1{color:red;}
3、外链样式表
<style t type="text/css src="**.css"></style
放置的时候是css放在网页前端,一般是放在head标签里,js放后面,一般放在body标签的底部。js只能一个一个加载,而css可以同时加载2个-4个。
二、解释白屏和FOUC
网页渲染的时候,如果css文件放在最后,浏览器的解析方式是等到所有的样式(包括外置样式)即外链css文件,解析完成,再与有重复设置的内置样式进行合并,之后再对html渲染。过程比较漫长时,浏览器页面是不显示内容的,需要等到所有内容合并后,才进行渲染,就是白屏。
FOUC是无样式内容闪烁。 网页渲染的时候,浏览器的解析方式是按照出现的先后顺序,先出现样式的先渲染,遇到新的样式再渲染一遍,遇到外链的css,再解析,遇到js再解析。逐步加载无样式的内容,等css完全解析后页面样式突然展现,会出现页面闪烁。
三、async和defer的作用是什么?有什么区别
async和defer都是异步加载。
没有defer或async时,浏览器会立即加载并执行指定的脚本。立即是指在渲染script标签下的内容渲染之前,不等后续载入html的文档元素,就加载执行js。异步加载多用于1、一键分享2、网站数据统计
有async和defer,会加载完成script标签下的内容,再往后加载执行。
async与defer的区别是
async不保证顺序,加载js,也加载内容。
defer是再加载完成html内容后,再加载js。
四、简述网页的渲染机制
当浏览器打开一个页面时,首先加载html内容将HTML文件解析成DOM,接下来有两种方式:第一种等到所有的样式(包括外置样式)即css文件,将CSS文件解析成CSSOM,解析完成,再与有重复设置的内置样式进行合并,将DOM和CSSOM合成一颗渲染树,计算出渲染树的布局,将渲染树绘制到屏幕,即对html渲染。
将HTML文件解析成DOM,第二种,按照出现的先后顺序,先出现样式的先渲染,将CSS文件解析成CSSOM;将DOM和CSSOM合成一颗渲染树,计算出渲染树的布局,将渲染树绘制到屏幕,遇到新的样式再渲染一遍,遇到外链的css,再解析,遇到js再解析。
五、JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?
一共6种
Null:null(只有一个值)是空指针,不存在任何东西,运行会报错;
Undefined:undefined(只有一个值)表示变量只被声明,没有被初始化,也就是有这个指针,但是这个指针没有指向任何空间。运行会显示undefined,不会报错;
Boolean:true/false(两个值)
Number是有范围的,并不是所有的数字。包括整数和浮点数,可以表示十进制、八进制、十六进制;
String字符串,内容在双引号或者单引号内包括;
Object对象,一种无序的数据集合,由若干个对象的属性构成。
简单类型的数据有Null、Undefined、Bollean、Number、String
复杂类型的数据有Object
六、NaN、undefined、null分别代表什么?
NaN全称是Not a number 就是看起来不是数字,但是数据类型又属于Number,一般都是被强制转化的。NaN和任何值都不相等,包括自己
undefined变量只被声明,没有初始化,运行会显示undefined,不会报错
null是空指针,不存在任何东西,运行会报错
七、typeof和instanceof的作用和区别?
typeof和instanceof作用都是返回一个值的数据类型,常用来判断一个变量是否为空
typeof返回值可以是number、string、boolean、undefinded,object;来确认该值的数据类型;而instanceof是用来判断一个变量是否是某个对象的实例,返回值是布尔型,以确定该变量是否为指定类型。
代码部分
1、完成如下代码判断一个变量是否是数字、字符串、布尔、函数 (难度*)
运行结果如:
2、以下代码的输出结果是?(难度**)
其中,console.log(1+1);当2个参数都是数字的时候,会做加法运算,输出的仍是数字。
console.log("2"+"4");当2个参数都是字符串做字符串拼接。
console.log(2+"4"); 当2个参数中有一个是字符串的情况下会把另一个非字符串的参数转换为字符串,做字符串拼接。
console.log(+new Date()); 将返回的当前日期、时间转换成毫秒, '1970/01/01 00:00:00' 为起点
console.log(+"4");+将字符串转换成数字。
3、以下代码的输出结果是? (难度***)
var a = 1;
a+++a;
typeof a+2;
var a = 1;是给a赋值为1,即a=1;
a+++a;由于a++的优先级高于++a高于+a,所以先计算a++,值为2再计算2+a,值为3,此时a=3;
typeof a+2;根据优先级,先typeof a得出是number,再+2,相当于将2转化为字符串,再拼合。
4、遍历数组,把数组里的打印数组每一项的平方 (难度**)
var arr = [3,4,5]// todo..// 输出 9, 16, 25
5、遍历 JSON, 打印里面的值 (难度**)
var obj = { name: 'hunger', sex: 'male', age: 28}//todo ...// 输出 name: hunger, sex: male, age:28
obj.png6、下面代码的输出是? 为什么 (难度***)
console.log(a);var a = 1;console.log(a);console.log(b);
只有console.log,没有赋值时,会报错 有console.log,再赋值时,会出现undefined.png Paste_Image.png 未定义变量,运行报错
网友评论