前端面试题学习

云间月呀

已于 2023-03-02 15:47:32 修改

阅读量258

点赞数

分类专栏：前端文章标签：前端学习 css

于 2023-02-24 22:58:20 首次发布

本文链接：https://blog.csdn.net/qq_46163926/article/details/128850799

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

前端面试题学习

一、HTML + CSS
二、JavaScript
三、Vue
- 1、Vuex的使用方法。
- 2、mvc 和 mvvm 区别是什么？
四、工程化
- 1、webpack性能优化有哪些方法？
五、性能优化
- 1、前端页面性能如何优化？
六、安全
- 1、网络攻击有哪些？如何防御？
七、计算机基础
- 1、进程与线程区别是什么？
八、网络通信
- 1、说一说cookie sessionStorage localStorage 区别？
- 2、说一说跨域是什么？如何解决跨域问题？

提示：以下是本篇文章正文内容，下面案例可供参考

一、HTML + CSS

1、讲一下盒模型、普通盒模型、怪异盒模型有什么区别？

盒模型：CSS把每个元素视为一个盒子，每个盒子包括content（内容）、padding（内边距）、border（边框）、margin（外边距）四个部分。盒模型是CSS布局的基本单元；

W3C标准盒模型（普通盒模型 content-box）：指在CSS中设置width（宽）、height（高）属性时，是给content（内容）区域设置；

怪异盒模型（border-box）：指在CSS中设置width（宽）、height（高）属性时，是给content（内容）、padding（内边距）、border（边框）设置。

2、块元素和行内元素区别是什么？常见块元素和行内元素有哪些？

（1）块元素，宽度默认是它容器的 100%，各占据一行，垂直方向排列；行内元素，不会占据整行，都是同一行，水平方向排列；
（2）块元素，能容纳其他块元素或者行内元素；行内元素，只能容纳文本或其他行内元素；
（3）块元素中 height，line-height 以及 margin 和 padding 都可以控制；行内元素设置width、 height 无效(可以设置 line-height)，margin、padding 上下无效。
（4）

常见的块元素（display:block）：div、ul 、li 非排序列表、form - 交互表单、h1 -h6 标题、p - 段落
常见的行元素（display:inline）：a – 链接、span - 常用内联容器、br 、
行内块元素（display:inline-block）：img - 图片、 input - 输入框、textarea

3、HTML 语义化标签有哪些？

通过使用恰当语义的 HTML 标签，让页面具有良好的结构与含义.
header 网页的头部
main 网页的主体部分（只有一个 main）
nav 网页的导航
section 一个独立的区块
aside 和主体相关的其他内容（侧边栏）
article 独立的文章
footer 网页的底部

4、伪类和伪元素的区别是什么？

（1）伪类（pseudo-class）是一个以冒号作为前缀，被添加到一个选择器末尾的关键字，样式被呈现到指定的元素时。如：（：last-child），通过在元素选择器上加入伪类改变元素状态。
（2）伪元素是以两个冒号作为前缀，用于创建一些不在文档树中的元素，并为其添加样式。通过对元素的操作进行对元素的改变。伪元素其实相当于伪造了一个元素。

5、CSS 如何实现垂直居中？

（1）设置vertical-align:middle。
vertical生效的前提是元素的display：inline-block。
在使用vertical-align：middle的时候需要一个兄弟元素做参照物，让它垂直于兄弟元素的中心点。vertical-align对齐的方法是寻找兄弟元素中最高的元素作为参考。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
    .parent {
      width: 200px;
      height: 200px;
      border:1px solid blue;
 
      text-align: center;
    }
    .child {
      width: 50%;
      height: 50%;
      background-color: yellow;
 
      display: inline-block;
      vertical-align: middle;
      margin: 0 auto;
    }
    .help {
      width: 0;
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
  </style>
</head>
 
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="help"></div>
  </div>
</body>
 
</html>

（2）设置display:flex
给父元素设置display: flex布局，水平居中 justify-content: center，垂直居中align-items: center。

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
 .parent{
    width: 200px;
    height: 200px;
    background: grey;
    display: flex;
    justify-content: center;
    align-items: center;
}
 .child{
    width: 50%;
    height: 50%;
    background:green;
}
  </style>
</head>
 
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
 
</html>

（3）设置伪元素::before
给父元素添加一个伪元素::before，让这个伪元素的div高度为100%，这样其他div就可垂直居中了，但div 本身就是块级元素，而vertical-align是行内元素属性，则需要修改为inline-block。

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
    .parent{
    width:200px;
    height: 200px;
    border:1px solid blue;
    
}
.parent::before{
    content:'';
    height:100%;
    display: inline-block;
    vertical-align: middle;  
}
.child{
    width:50%;
    height: 50%;
    background:yellow;
    display: inline-block;
    vertical-align: middle;
}
  </style>
</head>
 
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
 
</html>

（4）设置display:table-cell
将父元素设置display:table，子元素table-cell会自动撑满父元素。组合 display: table-cell、vertical-align: middle完成水平垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
    .parent{
    width:200px;
    height:200px;
    border:1px solid blue;
    display: table;
  }
   .child{
    background:yellow;
    display: table-cell;
    vertical-align: middle;
  }
  </style>
</head>
 
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
 
</html>

（5）设置隐藏节点
创建一个隐藏节点#hide，使得隐藏节点的height值为剩余高度的一半即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
  .parent {
    width:200px;
    height:200px;
    border:1px solid blue;
  }
  .child {
    width: 50%;
    height: 50%;
    background:yellow;
  }
  .hide {
    width: 50%;
    height: 20%;
  }
  </style>
</head>
 
<body>
  <div class="parent">
    <div class="hide"></div>
    <div class="child"></div>
  </div>
</body>
 
</html>

（6）absolute + transform
在父元素中设置相对定位position: relative，子元素设置绝对定位 position: absolute；top和left相对父元素的50%，与其搭配的 transformse: translate(-50% , -50%)表示X轴和Y轴方向水平居中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
    .parent{
      width: 200px;
      height: 200px;
      background:#ddd;
      position: relative;
   }
    .child{
      width: 50%;
      height: 50%;
      background:yellow;
      
      position: absolute;
      top: 50%;
      left:50%;
      transform: translate(-50% , -50%);
    }
  </style>
</head>
 
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
 
</html>

（7）设置绝对定位
子元素绝对定位position:absolute,父元素相对定位position: relative，将上下左右的数值都设置为0，同时margin:auto。绝对定位是会脱离文档流的，这点要注意一下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
    .parent{
    width:200px;
    height: 200px;
    border:1px solid blue;   
    position: relative;
  }
  .child{
    width:50%;
      height: 50%;
      background:yellow;
      position: absolute;
      top:0;
      left:0;
      right:0;
      bottom:0;
      margin:auto;
  }
  </style>
</head>
 
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
 
</html>

（8）设置行高line-height
父容器高度和子元素line-height一样的数值，内容中的行内元素就会垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
    .parent{
      width:200px;
      height:200px;
      border:1px solid blue;
    }
    .child{
      width:200px;
      line-height: 200px;   
      text-align: center; 
      display: inline-block;
   }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">你好</div>
  </div>
</body>
</html>

（9）calc 属性动态计算
父元素position定位为relative，子元素position定位为absolute。水平居中同理。calc居中要减多少要结合到自己的宽高设置多少再进行计算。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS垂直居中</title>
  <style>
    .parent{
      width: 200px;
      height: 200px;
      border:1px solid blue;
      position: relative;
    }
    .child{
      width: 100px;
      height: 50px;
      background:yellow;
      position: absolute;
      left:calc(50% - 50px); /*水平居中 */
      top: calc(50% - 25px); /*垂直居中  calc（“50%的外框高度- 50%的 div 高度”）*/
    }
  </style>
</head>
 
<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>
 
</html>

6、水平方向布局

一个元素在父元素中，水平布局满足以下等式：
margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素内容区的 width
以上等式必须满足，如果相加结果使等式不成立，则称为过渡约束

7、垂直方向布局

子元素是在父元素的内容区中排列的，如果子元素的大小超过了父元素，则子元素会从父元素中溢出
使用 overflow / overflow-x / overflow-y 属性来设置父元素如何处理溢出的子元素

overflow：overflow-x/overflow-y：
visible（默认值）会溢出，在父元素外部显示
hidden 溢出的内容会被裁剪，不会显示
scroll 生成滚动条
auto 根据需要生成滚动条

8、CSS 常见的选择器有哪些？

CSS的选择器其实大类的话可以分为三类，即id选择器、class选择器、标签选择器

（1）id选择器

 #id名 { 属性名:属性值; }

（2）class选择器

 .class名 { 属性名:属性值; }

（3）标签选择器

标签名 { 属性名:属性值; }

（4）后代选择器

div p { 属性名:属性值; }

（5）子代选择器

div>p { 属性名:属性值; }

（6）相邻兄弟选择器

div+p{ 属性名:属性值; }

（7）兄弟选择器(所有的兄弟)

ul~h1 { 属性名:属性值; }

（8）群组选择器

#name1, .name2, #name div { 属性名:属性值; }

（9）伪类选择器

.name:hover

（10）伪元素选择器

a::after 元素的结束位置 
a::before 元素的开始位置

（11）通用(通配符)选择器

* { 属性名: 属性值; }……

（12）属性选择器

input[type=checkbox]{ margin-left: 10px;}
[属性名] 选择含有指定属性的元素 
[属性名=属性值] 选择含有指定属性和指定值的元素

9、CSS 的优先级如何计算？

！important > 内联样式 > ID选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配符 >> 继承 >浏览器默认属性

！important，作用是提高指定样式的应用优先权

10、长度单位 px、em 和 rem，rpx，vw，vh 的区别是什么？

px：相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。
em ：相对与父元素的 font-size 来计算的
rem：相对于根元素 html 的 font-size
rpx：小程序独有的，论大小屏幕，规定屏幕宽为 750rpx
vw：相对于浏览器视口宽度
vh：相对于浏览器视口高度

11、讲一下 flex 弹性盒布局？

二、JavaScript

1、说一说JS数据类型有哪些，区别是什么？

（1）基本类型：String，Number，Boolean，Null，Undefined，Symbol，BigInt
（2）引用类型：Object（普通对象，数组，正则，日期，Math数学函数都属于Object）
（3）区别：

基本类型存储在栈中，空间小，操作频繁；
引用类型存储在堆中，空间大，在栈中存储了指针，指向在堆中的起始地址

（4）Symbol、BigInt是ES6新出的数据类型，Symbol的特点就是没有重复的数据，不可枚举,使用getOwnPropertySymbols获取。BigInt就是数据涵盖的范围大，能够解决超出普通数据类型范围报错的问题。

2、说一说你对闭包的理解？

（1）形成的原理：作用域链，当前作用域可以访问上级作用域中的变量。
（2）解决的问题：能够让函数作用域中的变量在函数执行结束之后不被销毁，同时也能在函数外部可以访问函数内部的局部变量。
（3）带来的问题：由于垃圾回收器不会将闭包中变量销毁，于是就造成了*内存泄露**，内存泄露积累多了就容易导致内存溢出。
（4）闭包的应用：防抖节流，能够模仿块级作用域，能够实现柯里化，在构造函数中定义特权方法、Vue中数据响应式Observer中使用闭包等。

3、说一说promise是什么与使用方法？

（1）概念：异步编程的一种解决方案，解决了地狱回调（异步多层嵌套回调）的问题
（2）使用方法：使用Promise构造函数new一个实例，Promise构造函数接收一个函数作为参数，这个函数有两个参数，分别是两个函数 resolve和reject，resolve将Promise的状态由等待变为成功，将异步操作的结果作为参数传递过去；reject则将状态由等待转变为失败，在异步操作失败时调用，将异步操作报出的错误作为参数传递过去。
new Promise((resolve,reject) => { resolve（）; reject（）; })里面有多个resovle或者reject只执行第一个。如果第一个是resolve的话后面可以接.then查看成功消息。如果第一个是reject的话，.catch查看错误消息。
（3）特点： ①、对象的状态不受外界影响。②、一旦状态改变，就不会再变。

三、Vue

1、Vuex的使用方法。

Vuex 是一个专门为 vue.js 设计的集中式状态管理架构
Vuex 的五个核心：state，getter，mutations，actions，module

1）state（数据源）：定义我们所需要管理的数组、对象、字符串等等；
2）getter（过滤数据）：可以对 state 中的成员加工后传递给外界；
3）mutations（处理同步事件）：mutations 是操作 state 数据的方法的集合，比如对该数据的修改、增加、删除等等；
4）actions（处理异步事件）：由于直接在 mutation 方法中进行异步操作，将会引起数据失效。所以提供了 actions 来专门进行异步操作，最终提交 mutation 方法；
5）modules（模块）: 当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块。

2、mvc 和 mvvm 区别是什么？

四、工程化

1、webpack性能优化有哪些方法？

五、性能优化

1、前端页面性能如何优化？

六、安全

1、网络攻击有哪些？如何防御？

七、计算机基础

1、进程与线程区别是什么？

八、网络通信

1、说一说cookie sessionStorage localStorage 区别？

（1）共同点：都是存储在浏览器本地的
（2）区别：
①、cookie是由服务器端写入的，而SessionStorage、 LocalStorage都是由前端写入的；
②、cookie的生命周期是由服务器端在写入的时候就设置好的，SessionStorage是页面关闭的时候就会自动清除，LocalStorage是写入就一直存在，除非手动清除；
③、cookie的存储空间比较小，大概4KB，SessionStorage、 LocalStorage存储空间比较大，大概5M；
④、它们的数据共享都遵循同源原则，SessionStorage还限制必须是同一个页面；
⑤、在前端给后端发送请求的时候会自动携带Cookie中的数据，但是SessionStorage、 LocalStorage不携带。
⑥、加分回答：由于以上区别，所以它们的应用场景也不同，Cookie一般用于存储登录验证信息SessionID或者token；SessionStorage可以用来检测用户是否是刷新进入页面，如音乐播放器恢复播放进度条的功能；LocalStorage常用于存储不易变动的数据，减轻服务器的压力。

2、说一说跨域是什么？如何解决跨域问题？

（1）跨域就是违反了浏览器的同源策略造成的，当前页面中的某个接口请求的地址和当前页面的地址，如果协议、域名、端口其中有一项不同，就说该接口跨域了。
（2）解决方案：
①、后端可以设置 cors 允许跨域实现；

res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader("Access-Control-Allow-Methods", "GET, PUT, OPTIONS, POST");

②、JSONP：script标签不受同源策略影响：script标签可以跨域请求资源，将回调函数作为参数拼接在url中。后端收到请求，调用该回调函数，并将数据作为参数返回去，注意设置响应头返回文档类型，应该设置成javascript。
③、前端配置一个代理服务器proxy代替浏览器去发送请求：因为服务器与服务器之间是可以通信的不受同源策略的影响。
④、使用node中间件、nginx反向代理：让请求发给代理服务器，静态页面和代理服务器是同源的，然后代理服务器再向后端服务器发请求，服务器和服务器之间不存在同源限制。
⑤、postmessage：H5新增API，通过发送和接收API实现跨域通信。
（3）跨域场景：前后端分离式开发、调用第三方接口