2022【前端面试】前端面试题【含答案】最全面试题

最新推荐文章于 2023-07-25 11:15:55 发布

drhrht

最新推荐文章于 2023-07-25 11:15:55 发布

阅读量1.4k

点赞数 1

分类专栏： java 后端文章标签： java 后端

本文链接：https://blog.csdn.net/drhrht/article/details/123592559

版权

java 同时被 2 个专栏收录

308 篇文章 17 订阅

订阅专栏

后端

15 篇文章 0 订阅

订阅专栏

1. **一个200*200的div在不同分辨率屏幕上下左右居中，用css实现**

这里主要是靠flex布局实现的，这个是重点

display:flex;
justify-content:center;
align-items:center;

<div>
  <div style="">
    上下左右居中
  </div>
</div>

css

div{
    width:500px;
    height:500px;
    border:1px solid red;
    display:flex;
    justify-content:center;
    align-items:center;
}

-----------------------------------------------------------------------------------------------------------------------------

2，阐述清楚浮动的几种方式（常见问题）

这个问题很常见，经常问到务必记住！！！

1.父级div定义 height

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2.父级div定义 overflow:hidden

原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好

4. 结尾处加空div标签 clear:both

原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题

缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

-----------------------------------------------------------------------------------------------------------------------------

3.解释css sprites ，如何使用？

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

优点：CSS Sprites为一些大型的网站节约了带宽，让提高了用户的加载速度和用户体验，不需要加载更多的图片，提高了性能

-----------------------------------------------------------------------------------------------------------------------------

4.请描述一下 cookies sessionStorage和localstorage区别

**他们的相同点：**都存储在客户端

他们的不同点：

1.存储大小

这里需要区分：

·cookie数据大小不能超过4k。

·sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。

2.有效时间

· localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据；

· sessionStorage 数据在当前浏览器窗口关闭后自动删除。

· cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

3. 数据与服务器之间的交互方式

·cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端

·sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。

-------------------------------------------------------------------------------------------------------------------------------

5，数组去重（机试容易考）

编写一个方法去掉数组里面重复的内容 var arr=[1,1,3,4,5,1,2,3]

<script>
	var arr = ['第一','第一','第二','第五','第五','第八','第七','第九','1','1','2']; //需要去重的数组
	var new_arr = [];//新数组
	for(var i = 0;i<arr.length;i++){
	    if(new_arr.indexOf(arr[i]) == -1){  //判断在s数组中是否存在，不存在则push到s数组中
	        new_arr.push(arr[i]);
	    }
	}
	
	console.log(new_arr);

</script>

这是打印的内容，利用indexof和push可以达到去重效果

---------------------------------------------------------------------------------------------------------------------------------

6，js有几种数据类型，其中基本数据类型有哪些

五种基本类型:Undefined、Null、Boolean、Number和String。

1中复杂的数据类型————Object，Object本质上是由一组无序的名值对组成的。

Object、Array和Function，Data则属于引用类型

---------------------------------------------------------------------------------------------------------------------------------

7，undefined 和 null 区别

根据6题联想到undefined 和 null 区别他们有什么区别呢？

1、首先看一个判断题：null和undefined 是否相等？比较容易理解

  console.log(null==undefined)//true
  console.log(null===undefined)//false

观察可以发现：null和undefined 两者相等，但是当两者做全等比较时，两者又不等。

原因：null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值

undefined：

ed类型，当一个声明了一个变量未初始化时，得到的就是undefined。

--------------------------------------------------------------------------------------------------------------------------------

8，http 和 https 有何区别？如何灵活使用？

http是HTTP协议运行在TCP之上。所有传输的内容都是明文，客户端和服务器端都无法验证对方的身份。

https是HTTP运行在SSL/TLS之上，SSL/TLS运行在TCP之上。所有传输的内容都经过加密，加密采用对称加密，但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份，如果配置了客户端验证，服务器方也可以验证客户端的身份

---------------------------------------------------------------------------------------------------------------------------------

9，如何进行网站性能优化（常见问题）

1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。
总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。

优化途径有：

1. JavaScript 压缩和模块打包
2. 按需加载资源
3. 在使用 DOM 操作库时用上 array-ids
4. 缓存
5. 启用 HTTP/2
6. 应用性能分析
7. 使用负载均衡方案
8. 为了更快的启动时间考虑一下同构
9. 使用索引加速数据库查询
10. 使用更快的转译方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用于未来的一个建议：使用 service workers + 流
13. 图片编码优化

---------------------------------------------------------------------------------------------------------------------------------

10，什么是mvvm mvc是什么区别原理（常见问题）

一、MVC

MVC是比较直观的架构模式，用户操作->View（负责接收用户的输入操作）->Controller（业务逻辑处理）->Model（数据持久化）->View（将结果反馈给View）。

二、MVVM（Model-View-ViewModel）

如果说MVP是对MVC的进一步改进，那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此视图的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应view。

---------------------------------------------------------------------------------------------------------------------------------

11，px和em的区别

px表示像素，是绝对单位，不会因为其他元素的尺寸变化而变化；简单点就是根据屏幕分辨率来的。

em表示相对于父元素的字体大小。em是相对单位，没有一个固定的度量值，而是由其他元素尺寸来决定的相对值

---------------------------------------------------------------------------------------------------------------------------------

12，JS哪些操作会造成内存泄露（常见问题）

**内存泄漏：**就是没有使用,或已经使用完的变量,没有及时回收

1，闭包引起的内存泄露

2，没有清理的DOM元素引用

3,意外的全局变量 (1)初始化未经声明的变量,

4,由this创建的全局变量

---------------------------------------------------------------------------------------------------------------------------------

13,浏览器缓存有哪些，通常缓存有哪几种（常见问题）

一、http缓存

二、websql

localstorage

sessionstorage

flash缓存

---------------------------------------------------------------------------------------------------------------------------------

14，什么是闭包，如何使用它，为什么要使用它？

闭包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。

所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

使用闭包的注意点：

由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量全部删除。
闭包会在父函数外部，改变父函数内部变量的值。所以，如果你把父函数当作对象（object）使用，把闭包当作它的公用方法（Public Method），把内部变量当作它的私有属性（private value），这时一定要小心，不要随便改变父函数内部变量的值。

15，

待更新--------------------------------------------------------------------