前端面试题整理

最新推荐文章于 2024-05-02 14:44:55 发布

小红同学5

最新推荐文章于 2024-05-02 14:44:55 发布

阅读量158

点赞数

分类专栏：面试题文章标签：面试题

本文链接：https://blog.youkuaiyun.com/xh_960125/article/details/99736103

版权

面试题专栏收录该内容

3 篇文章

订阅专栏

本文主要整理了前端面试中常见的HTML、CSS、JS、移动端、综合题（HTTP、跨域等）以及Vue的相关问题，包括块元素与行元素的区别、CSS选择器优先级、JS的==与===的区别、移动端自适应方法、HTTP请求方法用途、Vue组件生命周期等核心知识点，旨在帮助求职者做好面试准备。

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

HTML

1、块元素和行元素

块元素：独占一行，并且有自动填满父元素，可以设置margin和pading以及高度和宽度。
行元素：不会独占一行，width和height会失效，并且在垂直方向的padding和margin会失效。

2、常见兼容性问题？

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8。
浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一，但是全局效率很低。

一般是如下这样解决：

body,ul,li,ol,dl,dt,dd,form,input,h1,h2,h3,h4,h5,h6,p{
margin:0;
padding:0;
}

IE下,event对象有x,y属性,但是没有pageX,pageY属性
Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

CSS

1、CSS选择器优先级

!important优先级最高，js也无法修改。
权值相同的时候，靠近元素的样式优先级搞，顺序为内联样式 > 内部样式表 > 外部样式表。

2、画一条0.5px的线

采用meta viewport的方式。
采用 border-image的方式。
采用transform: scale()的方式。

3、transition和animation的区别

Animation和transition大部分属性是相同的，它们都是随时间改变元素的属性值，
它们的主要区别是transition需要触发一个事件才能改变属性，并且transition为2帧，从from .... to。
animation不需要触发任何事件的情况下才会随时间改变属性值，而animation可以一帧一帧的。

4、link标签和import标签的区别

link属于html标签，而@import是css提供的
页面被加载时，link会同时被加载，而@import引用的css会等到页面加载结束后加载。
link是html标签，因此没有兼容性，而@import只有IE5以上才能识别。

5、多行元素的文本省略号

 display: -webkit-box
-webkit-box-orient:vertical
-web-line-clamp:3
overflow:hidden

6、visibility=hidden, opacity=0，display:none

opacity=0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的。
visibility=hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件。
display=none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样。

JS

1、== 和 === 的区别？

== 会进行隐式转换，比较前将两个被比较的值转换为相同类型。再比较两个值是否相等。
=== 不进行隐式转换，会比较类型和值。

2、闭包

闭包就是能够读取其他函数内部变量的函数，或者子函数在外调用，子函数所在的父函数的作用域不会被释放。

3、Javascript如何实现继承？

构造继承
原型继承
实例继承
拷贝继承

4、This对象的理解

this总是指向函数的直接调用者（而非间接调用者）
如果有new关键字，this指向new出来的那个对象
在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window

5、事件模型

冒泡型事件：当你使用事件冒泡时，子级元素先触发，父级元素后触发
捕获型事件：当你使用事件捕获时，父级元素先触发，子级元素后触发
DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件
阻止冒泡：在W3c中，使用stopPropagation（）方法；在IE下设置cancelBubble = true
阻止捕获：阻止事件的默认行为，例如click - <a>后的跳转。在W3c中，使用preventDefault（）方法，在IE下设置window.event.returnValue = false

6、new操作符具体干了什么呢?

创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型
属性和方法被加入到 this 引用的对象中
新创建的对象由 this 所引用，并且最后隐式的返回 this

7、异步加载JS的方式有哪些？

defer，只支持IE
async：
创建script，插入到DOM中，加载完毕后callBack

8、ajax 有那些优缺点?

优点：

通过异步模式，提升了用户体验.
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.
Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。
Ajax可以实现动态不刷新（局部刷新）

缺点：

安全问题 AJAX暴露了与服务器交互的细节。
对搜索引擎的支持比较弱。
不容易调试。

9、javascript有哪些方法定义对象

对象字面量： var obj = {};
构造函数： var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);

10、js的基本数据类型

Undefined、Null、Boolean、Number、String

11、undefined，null

1、定义

undefined：是所有没有赋值变量的默认值，自动赋值。
null：主动释放一个变量引用的对象，表示一个变量不再指向任何对象地址。

2、何时使用null?

当使用完一个比较大的对象时，需要对其进行释放内存时，设置为 null。

3、null 与 undefined 的异同点是什么呢？

共同点：都是原始类型，保存在栈中变量本地。
不同点：

（1）undefined——表示变量声明过但并未赋过值。它是所有未赋值变量默认值，例如：

 var a; // a 自动被赋值为 undefined

（2）null——表示一个变量将来可能指向一个对象。一般用于主动释放指向对象的引用，例如：

 var emps = ['ss','nn'];

emps = null; // 释放指向数组的引用

移动端

1、移动端开发自适应页面如何做？

1、通过meta标签设置viewport，移动端的理想适口。

<meta name="viewport" content="width=width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

2、设置rem单位来进行适配、加上Flex布局、百分比布局

3、响应式适配、vw+rem

2、rem原理

rem是指相对于根元素的字体大小的单位
比如设置html font-size=100px;那么1rem=100px;之后的所有元素都可以用这个基准值来设置大小；
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN

综合题（HTTP，跨域等）

1、HTTP的几种请求方法用途

1、GET方法：发送一个请求来取得服务器上的某一资源。

2、POST方法：向URL指定的资源提交数据或附加新的数据。

3、PUT方法：跟POST方法很像，也是想服务器提交数据。但是，它们之间有不同。PUT指定了资源在服务器上的位置，而POST没有。

4、HEAD方法：只请求页面的首部。

5、DELETE方法：删除服务器上的某资源。

6、OPTIONS方法：它用于获取当前URL所支持的方法。如果请求成功，会有一个Allow的头包含类似“GET,POST”这样的信息。

7、TRACE方法：TRACE方法被用于激发一个远程的，应用层的请求消息回路。

8、CONNECT方法：把请求连接转换到透明的TCP/IP通道。

2、跨域

协议、端口和域名不一致导致的跨域跨域是因为浏览器需要遵守同源策略，发出的请求即使相应成功，也被浏览器拦截下来

3、解决跨域

1、通过jsonp跨域

2、document.domain + iframe跨域

3、location.hash + iframe

4、window.name + iframe跨域

5、postMessage跨域

6、跨域资源共享(CORS)

7、nginx代理跨域

8、nodejs中间代理跨域

9、WebSocket协议跨域

4、浏览器端数据存储方案

Cookie
Web存储(localStorage和sessionStorage)
IndexedDB

5、Cookie的缺点

存储量少、数据大影响性能、只能储存字符串、安全性问题、需要检查Cookie能否使用

6、从浏览器地址栏输入url到显示页面的步骤(以HTTP为例)

URL输入
DNS解析
TCP连接
发送HTTP请求
服务器处理请求
服务器响应请求
浏览器解析渲染页面
连接结束

VUE

1、请详细说下你对vue生命周期的理解？

总共分为8个阶段创建前/后,载入前/后,更新前/后,销毁前/后

创建前/后: 在beforeCreated阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。
载入前/后: 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。
更新前/后: 当data变化时，会触发beforeUpdate和updated方法。
销毁前/后: 在执行destroy方法后，对data的改变不会触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在