前端面试一定要掌握的十道面试题(带答案)

本文列举了前端面试中常见的十道题目,涵盖了CSS隐藏元素方式、盒模型的区别、src与href的差异、JavaScript数据类型及转换、原生AJAX实现、Vue生命周期、v-for与:key的作用等方面,旨在帮助开发者准备面试。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、页面元素的隐藏方式和各自特点?

        display:none; 设置为display:none;的元素将不会再占用页面空间,其占用的空间会被其他元素所占有,从而会引起浏览器的重排和重汇。

        visibility: hidden 这种做法虽然能够隐藏元素,但是该元素仍会占用页面空间,因此只会导致浏览器的重汇而不会引起重排。

        opacity:0 设置元素透明度opacity属性为0,也可以隐藏页面元素。在呈现上与visibility:hidden;方式一样,同样会占据页面空间。

        将width heihgt 设置为0 或者使用z-index将数值设置为最小,可以隐藏在其他元素下面

2、用过哪些盒模型,以及他们各自的区别?

         IE盒子模型box-sizing:border-box;(怪异模式)

         W3C标准盒子模型 box-sizing:content-box;(标准模式)默认模式

content-box:这是默认样式指定CSS标准。测量width和height属性只包括的内容,但不是border, margin, 或者 padding。
padding-box:width和height属性包括padding的大小,不包括border和margin
border-box:width和height属性包括padding和border,但不是margin。这是盒模型的文档时,Internet Explorer使用Quirks模式。
content-box不包含padding,border-box包含padding。所以如果你设置的大小是一样的,content-box看起来,会比border-box大

3、src和href的区别 ?

1、请求资源类型不同
(1) href是Hypertext Reference的缩写,表示超文本引用。用来建立当前元素和文档之间的链接。常用的有:link、a。
(2)在请求 src 资源时会将其指向的资源下载并应用到文档中,常用的有script,img 、iframe;

2、作用结果不同
(1)href 用于在当前文档和引用资源之间确立联系;

(2)src 用于替换当前内容;

3、 浏览器解析方式不同
(1)若在文档中添加href ,浏览器会识别该文档为 CSS 文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 CSS,而不是使用 @import 方式。

(2)当浏览器解析到src ,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等也如此,类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

既然我们上面提到了link和@import导入css文件是不同的,那我们就顺便说说两者的区别,如果您已经知道,就可以不用往下看了哈

link和@import的区别
两者都是外部引用 CSS 的方式,但是存在一定的区别:
(1)link是XHTML标签,除了能够加载CSS,还可以定义RSS等其他事务;而@import属于CSS范畴,只可以加载CSS。
(2)link引用CSS时,在页面载入时同时加载;@import需要页面完全载入以后再加载。
(3)link是XHTML标签,无兼容问题;@import则是在CSS2.1提出的,低版本的浏览器不支持。
(4)link支持使用Javascript控制DOM改变样式;而@import不支持。

4、js 数据类型有几种?它们之间的区别是什么?

JS中有两种数据类型:

1.简单数据类型(也称基本数据类型): Undefined;Null;Boolean;Number和String。

2.引用数据类型(也称复杂数据类型),其中包括Object;Array;Function等等。

基本数据:

1.基本数据类型的值是不可变的,任何方法都无法改变一个基本类型的值
2.基本数据类型不可以添加属性和方法
3.基本数据类型的赋值是简单赋值,如果从一个变量向另一个变量赋值基本类型的值,会在变量对象上创建一个新值, 然后把该值复制到为新变量分配的位置上
4.基本数据类型的比较是值的比较

引用数据类型:

1.引用数据类型的特点和基本数据类型相反。
2.引用类型可以添加属性和方法
3.引用类型的赋值是对象引用
4.引用类型的比较是引用的比较

5、数据类型强制转化和隐式转化的分别怎么使用?

数值:

Number(参数) 把任何的类型转换为数值类型
parseInt(参数1,参数2) 将字符串转换为整数
parseFloat() 将字符串转换为浮点数

字符串:

String(参数),可以将任何的类型转换为字符串
toString(),调用的格式 对象.toString(), 作用是将对象以字符串的方式来表示

布尔类型:

Boolean() 可以将任何类型的值转换为布尔值

函数:

isNaN( ) 该函数会对参数进行隐式的Number()转换,如果转换不成功则返回true;
alert() 输出的内容隐式的转换为字符串

隐式转换:

在js中,当运算符在运算时,如果两边数据不统一,CPU就无法计算,这时我们编译器会自动将运算符两边数据做一个数据类型转换,转成一样的数据类型再计算 这种无需程序员手动转换,而由编译器自动转换的方式就称为隐式转换

6、说明原生ajax的实现步骤?

//1.创建ajax对象
try{
	//IE8以下不兼容
	var ajax = new XMLHttpRequest();  
}catch(e){
	//IE8以下的声明方法
	var ajax = new ActiveXObjec(Microsoft.XMLHTTP);
}


//2.初始化
ajax.open('get','./ajax_get.php?a=b&c=d',true);
//参1 请求方式 get post
//参2 url
//参3 是否异步   true 异步  false同步

//3.发送请求
ajax.send();		

//4.绑定状态改变事件,等待数据响应
ajax.onreadystatechange =function(){
	//代表服务器成功相应数据了
	if(ajax.readyState==4  && ajax.status ==200){
		var mes = ajax.responseText;//获取服务器的相应数据
			console.log(eval(ajax.response))//把json字符串数据转换成json对象
	}	
}

7、vue 有几个生命周期 以及各个生命周期的调用时机 ?

beforeCreate : 创建Vue实例前的时候执行,
created : 创建Vue实例完成后执行,
beforeMount : Vue实例开始渲染前执行,
mounted : Vue实例渲染完成后执行,
beforeUpdate : Vue实例修改前执行,
updated : Vue实例修改完成后执行,
beforeDestroy : Vue开始消亡前执行,
destroyed : Vue实例消亡后执行,
activated :组件激活时调用。该钩子在服务器端渲染期间不被调用。
deactivated : 组件停用时调用。该钩子在服务器端渲染期间不被调用。
errorCaptured : 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

8、使用vue中的v-for时,为什么要绑定 :key? 如果不绑定会有什么效果?

        Vue的v-for不绑定key,默认行为和绑定key="index"是差不多的,官方没有默认这种行为的情况下,会导致所有列表DOM重新渲染。

        key="index"这种行为无法最大化性能,比如在第一个元素插入新元素,会导致所有列表DOM重新渲染。绑定key后,发现绑定的key值的元素变化了,就重新渲染该元素,而不是全部元素都重新渲染,会提高性能。

        性能主要是DOM渲染影响。key绑定id一类的唯一键好处就是 :

                在列表中插入某个元素,不会像index那样导致后面的元素全部重新渲染,而是根据绑定id的元素是否变化渲染。

9、v-bind 和 v-model的作用和区别?

v-bind 缩写 :

动态地绑定一个或多个特性,或一个组件 prop 到表达式。
使用v-bind的是使用父组件的值(根据属性名),没有使用v-bind的是将标签里的数值当做字符串来使用。

v-model:

在表单控件或者组件上创建双向绑定。会根据输入变化

10、vue-router的作用是什么? 为什么不使用a标签?

        Vue的创新之处在于,它利用虚拟DOM的概念和diff算法实现了对页面的"按需更新"

        Vue-router很好地继承了这一点,重渲染是我们不希望看到的,因为无论跳转到哪个页面,只需要渲染一次就够了。组件帮助我们实现了这个愿望.

        反观a标签,每次跳转都得重渲染一次,在一个浩大的项目里,这多么可怕!我们的"渲染"做了许多"无用功",而且消耗了大量弥足珍贵的DOM性能!

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值