前端面试题整理（持续更新ing...）-优快云博客

本文链接：https://blog.youkuaiyun.com/clownblue/article/details/129783120

本文是一篇持续更新的前端面试题整理，涵盖了HTML、CSS、JavaScript和Vue的相关知识点，如盒模型、垂直居中、CSS选择器优先级、JS垃圾回收机制、Vue组件通信等。通过实例和解析，帮助读者巩固前端基础知识。

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

前端面试题整理（持续更新ing…）

一个持续更新的前端面试题的博客，会在这里持续更新博主学习的面试题。一般在晚上更新，大概是白天学习看面经，晚上回忆更新博客看看能不能记住，先实验几天。。。。

HTML相关

。。。。。

CSS相关

盒模型

CSS3中可以通过box-sizing来指定盒模型：

box-sizing:content-box (盒子大小为：width+padding+border 即为css默认的盒子模型)
box-sizing:border-box (盒子大小为width，这样padding和border就不会撑大盒子了，前提是padding和border不会超过width宽度)

对于CSS3的盒子模型用line-height垂直居中要注意：line-height不能直接等于高，除非没有边框，否则要设置为高-上下边框大小才能垂直居中
box-sizing:padding-box (盒子宽度为padding+width)

垂直居中

相对和绝对定位方式

父盒子相对定位；子盒子绝对定位，且设置：top:50%;left:50%，并以自身长宽的50%进行转变：transform:translate(-50%,-50%);

<style>
    .big-box{
        position:relative;
        width:500px;
        height:500px;
        background-color:yellow;
    }
    .small-box{
        position:absolute;
        top:50%;
        left:50%;
       	transform:translate(-50%,-50%);
        /**上面那句也可替换为margin-top:-自身高度的一半;margin-left:-自身宽的一半;*/
        width:100px;
        height:100px;
        background-color:skyblue;
    }
</style>

<div class="big-box">
    <div class="small-box"></div>
</div>

flex布局

父盒子设置flex布局：display:flex; ，并且给父盒子设置它的子盒子为水平居中显示：justify-content:center;，垂直居中：align-items:center;

<style>
    .big-box{
        display:flex;
        justify-content:center;
        align-items:center;
        width:500px;
        height:500px;
        background-color:yellow;
    }
    .small-box{
        width:100px;
        height:100px;
        background-color:skyblue;
    }
</style>

<div class="big-box">
    <div class="small-box"></div>
</div>

margin:auto

给盒子设置绝对定位，并设置其left、right、top、bottom为0，margin为auto。

<style>
    .big-box{
        position:relative;
        width:500px;
        height:500px;
        background-color:yellow;
    }
    .small-box{
        	width: 100px; 
            height: 100px;
            background-color: skyblue; 
            position: absolute; 
            left: 0; 
            right: 0; 
            top: 0; 
            bottom: 0; 
            margin: auto; 
    }
</style>

<div class="big-box">
    <div class="small-box"></div>
</div>

利用display:table-cell

父盒子设置为display:table-cell; 然后设置垂直居中：vertical-align:middle; 水平居中：text-align:center; 。子盒子需要设置为行内块元素：display:inline-block;

<style>
    .big-box{
        display:table-cell;
        vertical-align:middle;
        text-align:center;
        width:500px;
        height:500px;
        background-color:yellow;
    }
    .small-box{
        display:inline-block;
        	width: 100px; 
            height: 100px;
            background-color: skyblue;
    }
</style>

<div class="big-box">
    <div class="small-box"></div>
</div>

CSS中选择器的优先级及其权重的计算

一般优先级判断：

!important > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器 > 继承 > 浏览器默认属性

权重等级：

无条件优先（最高优先级）：!important
内联样式(style=“color:skyblue”)：权值为1000（不推荐使用，会造成css难以管理）；
ID选择器(#name)：权值为0100；
类(.name)、伪类(a:hover)、属性(img[title=“test”])、结构伪类(div:first-child)选择器：权值为0010；
标签(h1)、伪元素选择器(div::before)：权值伪0001；
通配符(*)、子(>)、相邻选择器(+)：权值为0000；
继承样式无权值。

权重计算：

选择器中ID选择器数量（即上面第3等级的选择器数量）* 100 + 选择器中类选择器数量（第4等级选择器数量）* 10 + 选择器中标签选择器数量（第5等级选择器数量） * 1 = 选择器权重

如：

div #container .inner-box[name="test"]	//权重：1*1 + 1*100 + 2*10 = 121

注：若两个选择器它们的权重相同，那么采取“就近原则”来判断优先级。

JavaScript相关

JS垃圾回收机制

垃圾回收机制简称GC，JS的内存的分配和回收都是自动完成的，在内存不使用的时候就会被垃圾回收器自动回收。

JS分配的内存的生命周期：内存分配、内存使用、内存回收

全局变量一般不会回收，它是在页面关闭的时候回收；局部变量是在值不用的时候自动被回收。

内存泄漏：程序中分配的内存由于未释放或无法释放叫做内存泄漏。

栈中，由操作系统自动分配释放函数的参数值、局部变量等；堆中由程序员分配释放，如果程序员不释放，由垃圾回收机制回收。

浏览器垃圾回收算法：引用计数法和标记清除法

引用计数法：根据变量的引用次数来回收释放内存（定义内存不再使用的对象）

它有个问题：当嵌套引用（循环引用）会导致垃圾回收器不会回收，导致内存泄漏。

如下：

function fn(){
	let o1 = {}
	let o2 = {}
	o1.a = o2
 	o2.a = o1
  	return '引用计数无法回收'
}

fn() 
//这里原本到fn()调用结束之后o1和o2就要被回收了，但因为它们的引用次数永远不会为0，所以会导致内存泄漏。

标记清除法：从根部开始扫描内存中的对象，能到达的对象就是需要的，不能到达的就是不需要的。（定义到达的对象）

这样，上面的内存泄漏的问题就可以解决了。

变量提升

var变量允许变量在声明之前被访问。

如：

//在变量声明之前即被访问，只提升变量声明，不提升变量赋值
console.log(num)        //undefind
var num = 10

又如：（推荐写法）

//1．把所有var声明的变量提升到当前作用域的最前面
//2.只提升声明，不提升赋值
var num
console.log(num)        //undefind
num = 10
console.log( num)        //10

let和const变量不存在变量提升

函数提升

类似变量提升，函数在被声明之前也可被调用。

//调用函数
foo()
//声明函数
function foo(){
console.log("声明之前即被调用...")
}
//不存在提升现象
bar()  //错误
var bar = function  {
console.log("函数表达式不存在提升现象...")
}
//函数表达式必须先声明和赋值再调用

函数表达式不存在函数提升；

函数提升出现在相同作用域中；

函数提升使函数声明调用更灵活

防抖和节流（待详讲）

防抖和节流的概念：

防抖：指在触发事件后的n秒内函数只能执行一次，如果n秒内重复触发函数，会重新计算函数执行时间。
节流：指在触发事件的n秒内，如果n秒内重复触发函数，它只会执行一次，不会重新计时，还是从第一次的触发开始算n秒。

防抖和节流这个内容我会在下周单独写一篇blog详细地讲解相关内容。

localstorage、sessionStorage和cookie区别

相同点：它们都是保存在浏览器、且是同源的（即都是来自同一域的资源）。
不同：
1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie可以在浏览器和服务器间来回传递，而localStorage和sessionStorage的数据不会自动发给服务器，只能保存在本地。cookie数据还有路径的概念，可以限制cookie只属于某个路径下。
2. 存储大小不同：cookie数据不能超过4K，因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识；localStorage和sessionStorage的存储大小限制比cookie的大，可达到5M或更大。
3. 数据有效期不同：sessionStorage只在当前浏览器窗口关闭之前有效；localStorage是始终有效，浏览器或者窗口关闭也一直保存，可做持久化数据；cookie是在设置的有效期过期之前有效，即使浏览器或窗口关闭。
4. 作用域不同：sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage和cookie在所有同源窗口中都是共享的。
5. web Storage（即sessionStorage和localStorage）支持事件通知机制，可以将数据更新的通知发送给监听者。且它的api接口使用更方便。

var、let和const区别

var可重复声明变量，let不可重复声明变量；
var不受限于块级（var是函数级作用域），let和const受限于块级（let是块级作用域）；
若用var声明全局变量x，该变量会于window相映射（即可通过window.x访问）；而let和const声明的x没有该特性。
var有变量提升（可在声明前访问），let和const没有；
const声明后必须赋值，否则会报错；
const定义的是常量，不可改变，否则会报错；
let 一般用于声明基本数据类型的数据，const 一般用于声明引用数据类型的数据；

事件冒泡和阻止事件冒泡

事件触发有两个阶段：捕获阶段和冒泡阶段。捕获阶段是从父到子；冒泡阶段是从子到父。

事件冒泡

即一个元素触发事件会向它的父级（祖先）元素传递，如果父级（祖先）元素有相同的事件，则它们都会被依次触发。如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big-box {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: yellow;
            
        }

        .small-box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /**上面那句也可替换为margin-top:-自身高度的一半;margin-left:-自身宽的一半;*/
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="big-box">
        <div class="small-box"></div>
    </div>
    <script>
        const bBox = document.querySelector('.big-box')
        const sBox = document.querySelector('.small-box')
        document.addEventListener('click', function () {
            alert('我是超大盒子')
        })
        bBox.addEventListener('click', function () {
            alert('我是大盒子')
        })
        sBox.addEventListener('click', function () {
            alert('我是小盒子')
        })
    </script>
</body>

</html>

阻止事件冒泡
1. 标准w3c方法：使用event.stopPropagation();
  
  该方法是在要阻止冒泡的事件函数中声明event.stopPropagation();语句。如下：
```
sBox.addEventListener('click', function (event) {			
    		event.stopPropagation();
            alert('我是小盒子')
        })
```
  注：该方法虽然阻止冒泡事件，但它不阻止默认行为如：跳转到超链接。
2. 非标准IE方法：使用event.cancelBubble=true;
  
  利用事件对象的cancelBubble属性来取消冒泡：
```
sBox.addEventListener('click', function (event) {			
    		event.cancelBubble = true;
            alert('我是小盒子')
        })
```
  注：它同样可以阻止冒泡，但不能阻止默认事件。
3. 其它方法：使用return false;
```
sBox.addEventListener('click', function fn3() {
            alert('我是小盒子');
            return false;
        })
```
  注：该方法在JavaScript中只能阻止默认事件，但不能阻止冒泡；但在jQuery中，return false 可以同时阻止默认行为和冒泡行为。

扩展–阻止默认事件

阻止默认事件可以使用event.preventDefault(); 它可以阻止如表单调整、超链接跳转等默认事件。

<form action="http://www.baidu.com">
    <input type="submit" value="提交">
</form>
<script>
const form = document.querySelector( 'form')
form.addEventListener('submit', function(e){
//阻止表单默认提交行为
e. preventDefault()})
</script>

Vue相关

组件通信（组件传值、父传子有几种方式）（待理解）

父传子：

用props：
1. 父组件中import导入子组件，用component注册组件，给子组件标签上写明要传的属性和值；
2. 子组件用props接收，两种接收形式：数组形式[‘要接收的属性’]和对象形式{}，对象形式可以设置要传递的数据类型和默认值，数组只是简单的接收。
使用sync修饰符：父组件可以使用.sync修饰符将props的更新自动传递回父组件。当子组件想要更新通过props传递的值时，可以使用$emit触发一个名为update:的事件，从而将值更新到父组件中。
使用 $re f s 传递数据：父组件可以通过$ refs引用子组件，并直接访问其属性或方法。
使用事件触发机制：子组件可以使用$emit向父组件发送自定义事件，并传递数据。父组件可以使用v-on监听这些事件，并接收子组件传递的数据。
使用provide与inject：在祖先组件中provide可以向子孙组件注入数据，在子孙组件中可以通过inject获取数据。需要注意的是，使用provide/inject会丧失一些响应性，即当提供的数据更改时，由inject提供的子孙组件可能不会重新渲染。因此在使用时需要慎重考虑。

子传父：

用$emit：

子组件通过绑定要触发的事件，在其中设置this.$emit(‘要发送的自定义事件’,要传递的值)
父组件在子组件标签上@要发送的自定义事件，绑定的事件触发的method方法接收的默认值就是要传递的值。

兄弟传值：

方法一通过event bus：
1. 创建一个空的vue暴露出去，当作公共的bus桥梁
2. 两兄弟组件分别引入注册刚才创建的bus
3. 组件A用bus.$emit(‘自定义事件名’,要发送的值)发送数据
4. 组件B用bus.$on(‘自定义事件名’,function(接收的值val){})接收数据。
方法二通过vuex：

vuex是状态管理工具，主要解决大中型复杂项目的数据共享问题，主要包括state，action，mutation，getters和modules 5个要素。
1. 组件通过dispatch到actions，actions是异步操作。
2. actions通过commit到mutations，
3. mutations再通过逻辑操作改变state，从而同步到组件，更新其数据状态

v-model失效数据界面不更新（待详讲）

问题描述：数据有更新，但视图界面没更新

这个在做项目好像遇到过，放在下周具体写一篇blog来详细讲讲。

路由的懒加载依赖（待理解）

Vue Router的懒加载，也称为路由的懒依赖，是一种将路由按需加载的技术，可以避免将整个应用程序的代码打包在一起，而是只加载需要显示的页面组件。这样可以大幅减少应用程序的初始加载时间，并将图块大小分离为更小的块，这将有助于加快您的应用程序在拥挤的网络上的加载时间。

Vue Router的懒加载是通过路由的异步组件解析机制实现的。异步组件可以是一个function，它返回一个import语句，动态引入一个组件。Vue Router通过将异步组件打包成一个单独的块，并在需要时按需加载它，以实现懒加载的目的。

懒加载可以通过在路由配置中使用import函数来实现。例如，在将组件导入路由配置之前，您可以将其定义为一个懒加载功能。示例代码如下：

const Foo = () => import('./Foo.vue')
const Bar = () => import('./Bar.vue')

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo },
    { path: '/bar', component: Bar }
  ]
})