前端面试整理

最新推荐文章于 2024-10-19 10:27:39 发布

原创最新推荐文章于 2024-10-19 10:27:39 发布 · 置顶 · 396 阅读

本内容遵循CC 4.0 BY-SA版权协议

这篇博客整理了前端面试中常见的知识点，涵盖了CSS居中方法、单位使用、display属性、路由跳转、Vue生命周期、数据双向绑定原理、数组去重、垃圾回收机制、原型链、作用域链、购物车实现、页面渲染过程、HTTP协议、数据结构和算法等多个方面，旨在帮助开发者全面准备前端面试。

前端面试整理

1. css居中方式

text-align:center; //基础属性居中当前元素内部行内元素

display:inline-block;width:***px //居中块级元素中的行内元素

margin:0 auto //块级元素居中

例如：

body代码：
	<div class="center">
　　	<span class="center_text"></span>
	</div>
style代码：
	center_text{
	　　display:block;
	　　width:500px<br>　　margin：0 auto；
	}

2. px,em,rem,%

1. px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2. em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的
字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
3. rem是CSS3新增的一个相对单位。使用rem为元素设定字体大小时，仍然是相对
大小，但相对的只是HTML根元素。
4. 定义基于包含块（父元素）宽度的百分比宽度。

注意：如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性，那就使用px,或者两者同时使用

3. display的值和作用

none：此元素不会展示；
block：此元素显示为块级元素，此元素前后会带有换行符
inline：默认，此元素会被显示为内联元素，元素前后无换行符
inline-block：行内块元素（css2.1新增的值）

其他display的属性值不是很常用，其具体的含义如下：
list-item：     此元素会作为列表显示。
run-in：     此元素会根据上下文作为块级元素或内联元素显示。
table：     此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table：     此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group：     此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group：     此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group：     此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row：     此元素会作为一个表格行显示（类似 <tr>）。
table-column-group：     此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column：     此元素会作为一个单元格列显示（类似 <col>）
table-cell：     此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption：     此元素会作为一个表格标题显示（类似 <caption>）
inherit：     规定应该从父元素继承 display 属性的值。

另外有两个已经废除的属性值：
compact     CSS 中有值 compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker     CSS 中有值 marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。

4. 路由跳转的方式

router-link

不带参数

<router-link :to="{name:'home'}">
<router-link :to="{path:'/home'}"> //name,path都行, 建议用name
// 注意：router-link中链接如果是'/'开始就是从根路由开始，
如果开始不带'/'，则从当前路由开始。

带参数

<router-link :to="{name:'home', params: {id:1}}">
// params传参数 (类似post)
// 路由配置 path: "/home/:id" 或者 path: "/home:id"
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留

// html 取参 $route.params.id
// script 取参 this.$route.params.id

<router-link :to="{name:'home', query: {id:1}}">
// query传参数 (类似get,url后面会显示参数)
// 路由可不配置
// html 取参 $route.query.id
// script 取参 this.$route.query.id

this.$router.push() (函数里面调用)

不带参数
this. $r o u t e r . p u s h (^{'} / h o m e^{'}) t h i s .$ router.push({name:‘home’})
this.$router.push({path:’/home’})

query传参

  this.$router.push({name:'home',query: {id:'1'}})
  this.$router.push({path:'/home',query: {id:'1'}})

  // html 取参 $route.query.id
  // script 取参 this.$route.query.id

params传参

  this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
  // 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
  // 不配置path ,第一次可请求,刷新页面id会消失
  // 配置path,刷新页面id会保留
  // html 取参 $route.params.id
  // script 取参 this.$route.params.id

5. vue生命周期的理解

1.beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
2.created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，
属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
主要应用：调用数据，调用方法，调用异步函数
3.beforeMount
在挂载开始之前被调用：相关的 render 函数（模板）首次被调用。
例如通过v-for生成的html还没有被挂载到页面上
4.mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
有初始值的DOM渲染，例如我们的初始数据list,渲染出来的li，只有这里才能获取
5.beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更
改状态，这不会触发附加的重渲染过程。
6.updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在
大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
数据更新就会触发（vue所有的数据只有有更新就会触发）,如果想数据一遍就做统一的处理，可
以用这个，如果想对不同数据的更新做不同的处理可以用nextTick，或者是watch进行监听
7.beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
8.destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移
除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

6. vue数据双向绑定的原理，用了什么设计模式(web高级)

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现。

使用Object.defineProperty进行数据劫持，把data对象，computed等里的所有属性进行数据劫持。

数据劫持

const object1 = {};
object1.property1 = 77;//设置函数属性
Object.defineProperty(object1, 'property1', {
  value: 42    //劫持函数属性修改为42
});
console.log(object1.property1);
// expected output: 42

使用观察者模式，完成发布订阅。

1）模板里使用data对象属性的dom对象都订阅。

2）当data对象里的属性的值发生变化时，就会发布，发布时，就改变了dom里的内容。

7. 数组去重

```
const arr=[1,1,'1',17,true,true,false,false,'true','a',{},{}];
//递归去重
function unique0(arr){
	var Array=arr;		//储存栈名
	var len=arr.length; //储存数组长度
	function loop(index){
		if(index>=1){
			if(Array[index]===Array[index-1]){
				Array.splice(index,1)
			}
			loop(index-1)   //递归loop数组去重
		}
	}
	loop(len-1)
	return Array
}
console.log(unique0(arr))
```

8. 统计字符串中出现最多的字符

	function getChar(str) {
	    if (typeof str !== 'string') return // 判断参数是否为字符串
	    const obj = new Object() // 键为字母，值为次数
		for (let i = 0; i < str.length; i ++) { // 遍历字符串每一个字母
			let char = str.charAt(i) // 当前字母
			obj[char] = obj[char] || 0 // 默认值为undefined无法计算，保证初始值为0
			obj[char] ++ // 次数加1
		}
		let maxChar // 存储字母
		let maxNum = 0 // maxChar字母对应的次数
		for(let key in obj) { // 遍历obj
			if (obj[key] > maxNum) {
	            maxChar = key // 比较后存储次数多的字母
	            maxNum = obj[key] // 以及它对应的次数
	        }
		}
		return maxChar // 返回结果
	}
	
	let str = 'aabbbccdd'
	console.log('出现次数最多的字母为：' + getChar(str))

9. js垃圾回收机制

Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。
1、标记清除(常用)　

	当一块内存中的数据能够被访问时，垃圾回收器就认为"该数据能够被获得"。不能够被
	获得的数据，就会被打上标记，并回收内存空间。这种方式叫作标记---清除算法。这个
	算法会设置一个全局对象，并定期地从全局对象开始查找，垃圾回收器会找到所有可以获
	得与不能获得的数据。
2、引用计数

	跟踪记录每个值被引用的次数。例当变量声明，第一次赋值时记为1，然后当这个变量值改
	变时，记录为0，将计数为0的回收。

10. 原型、原型链

1.构造函数
	1.所有引用类型（函数，数组，对象）都拥有__proto__属性（隐式原型）
	2.所有函数拥有prototype属性（显式原型）（仅限函数）
	3.原型对象：拥有prototype属性的对象，在定义函数时就被创建
2. 原型和原型链
	在JavaScript中，函数本身也是一个包含了方法和属性的对象，
	每个函数中都有一个prototype属性，该属性的引用就是原型对象，
	原型对象是保存共享属性值和共享方法的对象。

使用对象的__proto__属性，形成的逐级引用的关系成为原型链。

Function.prototype.a = "a";
Object.prototype.b = "b";
function Person(){}
console.log(Person);    //function Person()
let p = new Person();
console.log(Function.prototype.__proto__===Object.prototype); //true
console.log(Function.__proto__.__proto__);		//指向Object.prototype
console.log(p.__proto__.__proto__.__proto__);   //null
console.log(p.__proto__.__proto__);             //指向Object.prototype
console.log(p);         //Person {} 对象
console.log(p.a);       //undefined
console.log(p.b);       //b
console.log(p.__proto__.__proto__.constructor.a); // a

上述声明了构造函数 Person，使用new操作符调用 Person 实例化了一个p 对象。
其中 p是Person()的实例，是一个Person对象，它拥有一个属性值__proto__，并且__proto__是一个对象，
包含两个属性值constructor和__proto__。
原型链沿着__proto__不断向源头指向最终Object的属性不包含返回值为null，而a属性不在p所在原型链中，所以p.a输出undefined
Function是Object的构造器构造器，他的__proto__指向特殊匿名函数 ƒ () { [native code] } 的__proto__指向仍然是Object.prototype

11. 作用域链

当代码在一个环境中执行时，会创建变量对象的一个作用域链。
由子级作用域返回父级作用域中寻找变量，就叫做作用域链。
全局执行环境的变量对象始终都是作用域链中的最后一个对象。
作用域链前端始终都是当前执行的代码所在环境的变量对象，如果环境是函数，则将其活动对象作为变量对象。
当前作用域没有定义的变量，这成为自由变量。
自由变量的值如何得到 —— 向父级作用域寻找，如果父级也没呢，再一层一层向上寻找，直到找到全局作用域还是没找到，就宣布放弃。这种一层一层的关系，就是作用域链。

12. 购物车实现过程

购物车：

购物车跟用户的关系?
- 一个用户必须对应一个购物车【一个用户不管买多少商品，都会存在属于自己的购物车中。】
- 单点登录一定在购物车之前。
跟购物车有关的操作有哪些?
- 添加购物车
  - 用户未登录状态
    - 添加到什么地方?未登录将数据保存到什么地方?
      - Redis? — 京东
      - Cookie? — 自己开发项目的时候【如果浏览器禁用cookie】
  - 用户登录状态
    - Redis 缓存中【读写速度快】
      - Hash ：hset(key,field,value)
        Key:user:userId:cart
        Hset(key,skuId,value);
    - 存在数据库中【oracle，mysql】
展示购物车
- 未登录状态展示
  - 直接从cookie 中取得数据展示即可
- 登录状态
  - 用户一旦登录：必须显示数据库【redis】+cookie 中的购物车的数据
    - Cookie 中有三条记录
    - Redis中有五条记录
    - 真正展示的时候应该是八条记录

13.购物车详情页优化（用户商品加入太多导致页面卡顿）（懒加载、分页）

14.页面渲染过程

一个渲染引擎大致包括HTML解释器，CSS解释器，布局和JavaScript引擎。
下面依次来描述它们：
HTML解释器：解释HTML语言的解释器，本质是将HTML文本解释成DOM（文档对象模型）树。
CSS解释器：解释样式表的解释器，其作用是将DOM中的各个元素对象加上样式信息，从而为计算最后结果的布局提供依据。
布局：DOM之后，需要将其中的元素对象同样式信息结合起来，计算它们的大小位置等布局信息，形成一个能够表示这所有信息的内部表示模型。
JavaScript引擎：JavaScript可以修改网页的内容，也能修改CSS的信息，JavaScript引擎解释JavaScript代码并把代码的逻辑和对DOM和CSS的改动信息应用到布局中去，从而改变渲染的结果。

网页渲染时，浏览器的动作：
1、根据来自服务器端的HTML代码形成文档对象模型（DOM）。
2、加载并解析样式，形成CSS对象模型。
Repaint（重绘）
当改变那些不会影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器只会用新的样式将元素重绘一次(这就是重绘，或者说重新构造样式)。
Reflow（重排）
当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。
这些改变通常由以下事件触发：
1. DOM操作（元素添加、删除、修改或者元素顺序的改变）；
2. 内容变化，包括表单域内的文本改变；
3. CSS属性的计算或改变；
4. 添加或删除样式表；
5. 更改“类”的属性；
6. 浏览器窗口的操作（缩放，滚动）；
7. 伪类激活（悬停）。
8. 浏览器如何优化渲染？

15.闭包

闭包就是能够读取其他函数内部变量的函数

//闭包扩大了变量作用域
function fn() {
	//中场情况下 add的作用域是fn内部
	return function add(x,y){
		console.log(x+y);
	}
}
var fn1=fn()
fn1(1,2)
//闭包：缩小了变量作用域,防止变量污染
(function(){
	//放置的是每一段有特殊功能的代码
	var m=10
});
console.log(m)

16.http协议

HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。
HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。
HTTP是一个属于应用层的面向对象的协议，由于其简捷、快速的方式，适用于分布式超媒体信息系统。
HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。Web服务器根据接收到的请求后，向客户端发送响应信息。

主要特点

简单快速：客户向服务器请求服务时，只需传送请求方法和路径。请求方法常用的有GET、HEAD、POST。每种方法规定了客户与服务器联系的类型不同。由于HTTP协议简单，使得HTTP服务器的程序规模小，因而通信速度很快。
灵活：HTTP允许传输任意类型的数据对象。正在传输的类型由Content-Type加以标记。
无连接：无连接的含义是限制每次连接只处理一个请求。服务器处理完客户的请求，并收到客户的应答后，即断开连接。采用这种方式可以节省传输时间。
无状态：HTTP协议是无状态协议。无状态是指协议对于事务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。
支持B/S及C/S模式。

17.http中的方法，除了get方法、post方法

在这里插入图片描述

18.数据结构（排序算法，冒泡以外的）

数据结构就是研究数据的逻辑结构和物理结构以及它们之间相互关系，并对这种结构定义相应的运算，而且确保经过这些运算后所得到的新结构仍然是原来的结构类型。

数据：所有能被输入到计算机中，且能被计算机处理的符号的集合。是计算机操作的对象的总称。
数据元素：数据（集合）中的一个“个体”，数据及结构中讨论的基本单位
数据项：数据的不可分割的最小单位。一个数据元素可由若干个数据项组成。
数据类型：在一种程序设计语言中，变量所具有的数据种类。整型、浮点型、字符型等等
逻辑结构：数据之间的相互关系。
集合结构中的数据元素除了同属于一种类型外，别无其它关系。
线性结构数据元素之间一对一的关系
树形结构数据元素之间一对多的关系
图状结构或网状结构结构中的数据元素之间存在多对多的关系
物理结构/存储结构：数据在计算机中的表示。物理结构是描述数据具体在内存中的存储（如：顺序结构、链式结构、索引结构、哈希结构）等
在数据结构中,从逻辑上可以将其分为线性结构和非线性结构
数据结构的基本操作的设置的最重要的准则是,实现应用程序与存储结构的独立。实现应用程序是“逻辑结构”，存储的是“物理结构”。逻辑结构主要是对该结构操作的设定，物理结构是描述数据具体在内存中的存储（如：顺序结构、链式结构、索引结构、希哈结构）等。
顺序存储结构中，线性表的逻辑顺序和物理顺序总是一致的。但在链式存储结构中，线性表的逻辑顺序和物理顺序一般是不同的。
算法五个特性：有穷性、确定性、可行性、输入、输出
算法设计要求：正确性、可读性、健壮性、高效率与低存储量需求。(好的算法)
算法的描述有伪程序、流程图、N-S结构图等。E-R图是实体联系模型，不是程序的描述方式。
设计算法在执行时间时需要考虑：算法选用的规模、问题的规模
时间复杂度：算法的执行时间与原操作执行次数之和成正比。时间复杂度有小到大：O(1)、O(logn)、O(n)、O(nlogn)、O(n2)、O(n3)。幂次时间复杂度有小到大O(2n)、O(n!)、O(nn)
空间复杂度：若输入数据所占空间只取决于问题本身，和算法无关，则只需要分析除输入和程序之外的辅助变量所占额外空间。

数据结构大致包含以下几种存储结构：

线性表，还可细分为顺序表、链表、栈和队列；
树结构，包括普通树，二叉树，线索二叉树等；
图存储结构；
详情见

19.vue和react的区别，用法区别

相同点
都⽀持 ssr ，都有 vdom ，组件化开发，实现 webComponents 规范，数据驱动等
不同点
vue 是双向数据流， react 是单向数据流。 vue 的 vdom 是追踪每个组件的依赖关系，不会渲染整个组件树， react 每当应该状态被改变时，全部⼦组件都会 re-render

20.网页上哪里可以看到请求的所有信息

首先使用浏览器打开一个网页，然后按F12
然后点击右边的Network，并按下Ctrl + R
在下面的文件栏里面找到以.cn/.com类型结尾的文件，点击，右边就会出现相应的内容
这个时候就能在右边找到header等信息了。

21 继承方法

实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已
js中实现继承的方法共有七种，分别是：
1）原型链继承
2）借用构造函数继承
3）实例继承（原型式继承）
4）拷贝继承
5）组合式继承
6）寄生组合式继承
7）es6继承

22 团队合作的经验

1、分工：
如果是一项单人就可以完成的任务，项目经理一般会指派给专人负责。
2、合作：
有分工，就需要合作，即彼此相互配合。在同伴协作中，由于人员构成简单，在彼此合作、协调、沟通的难度上远远低于团队协作。
3、监督：
如果缺乏有效的监督，就会导致所有项目组成员都偷工减料，从而使该项目彻底失败。

23 通宵经历（不是玩的）

24 课外项目（自己瞎做的那种）

微信小程序

25 为什么学前端？

前端被分离出来的是前台组件化或者工程化。而随着node的发布，前端只能写页面和脚本的老套路改头换面，完全可以进行服务器数据处理了。
而HTML5各种模块的发布，写页面也就更加高级，比如gps定位，websockt通信，视频API等等，使工作变得更多趣味，因为有更多工具可用。

26 有没有参赛或者除了学校课程内容外的经验？应该是想知道有没有合作经验

参加过plc团队竞赛

27 原型与原型链

28 辗转相除法

29 数组转字符串

30 二级下拉菜单

31 bind() apply()

32 const用法

33 Utf-8编码汉字占多少个字节

34 Vue的钩子函数

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

35 http和https的区别

HTTP 明文传输，数据都是未加密的，安全性较差，HTTPS（SSL+HTTP）数据传输过程是加密的，安全性较好。
使用 HTTPS 协议需要到 CA（Certificate Authority，数字证书认证机构）申请证书，一般免费证书较少，因而需要一定费用。证书颁发机构如：Symantec、Comodo、GoDaddy 和 GlobalSign 等。
HTTP 页面响应速度比 HTTPS 快，主要是因为 HTTP 使用 TCP 三次握手建立连接，客户端和服务器需要交换 3 个包，而 HTTPS除了 TCP 的三个包，还要加上 ssl 握手需要的 9 个包，所以一共是 12 个包。
http 和 https 使用的是完全不同的连接方式，用的端口也不一样，前者是 80，后者是 443。
HTTPS 其实就是建构在 SSL/TLS 之上的 HTTP 协议，所以，要比较 HTTPS 比 HTTP 要更耗费服务器资源。

36 前端开发工具webstorm

37 Vue基于什么语言

vue.js基于MIT开源协议，是一个用来构建web UI的JavaScript库，也是一套构建用户界面的渐进式框架；vue的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。

38.Vue的第三方组件库ivew

39.HTML5的新特性

canvas画布元素、增强型表单、提供了播放音频文件的标准、html5地理定位

40.ajax

41.js对数组的操作，包括向数组中插入删除数据

42.组件之间的传参（例如子组件和父组件之间的传参）

43.css3的新特性

44.localstore和sessionstore的区别

45.盒子模型（怪异模型）

46.谈谈fixed ，related ， absolute

47.js的选择器

48.两种定时器，setinterval和settimeout。因为settimeout是只执行一次的，如果要执行多次怎么做。

答案：设置一个回调函数，多次调用

49.bookstrap的响应式所示怎么实现的。

50.js的数据类型

51.JS内存回收机制

52.promise是什么？能解决什么问题？

53.float和absolute有什么区别？

54.cookie和session有什么联系？

Cookies是属于Session对象的一种。但有不同，Cookies不会占服务器资源，是存在客服端内存或者一个cookie的文本文件中；而“Session”则会占用服务器资源。所以，尽量不要使用Session，而使用Cookies。但是我们一般认为cookie是不可靠的，session是可靠地，但是目前很多著名的站点也都以来cookie。

55.vue如何实现双向据绑定？

56.vue父组件子组件通信？

57.图片预加载和懒加载？

58.MVVM和MVC区别？

MVVM指的是一种架构模式。通俗的来讲就是视图模型和控制器的关系
M - model数据模型
V - view视图
VM - viewModel控制器
MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。MVC和MVVM的区别并不是VM完全取代了C，只是在MVC的基础上增加了一层VM，只不过是弱化了C的概念，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。