2021最新前端面试题

面试题

前言：最近需要给客户这边面试一个前端开发工程师，所以抽时间整理了一些面试题

1. 自我介绍

2. 介绍项目，针对项目提出几个问题

   • 在项目开发过程中遇到过什么难点，如何解决的？
   • 在项目中遇到bug如何解决？
   • 在设计中出现了一个很难实现的功能，可能需要三四天时间，但项目又是很急，你是如何解决的？
   • 平时自己有逛什么社区？

3. html知识

   • 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？行内元素和块级元素有什么区别？

   行内元素  span、b、em、strong、a、input、label等
   1、设置宽高无效
   2、对margin仅设置左右方向有效，上下无效；padding上下左右都有效，会撑大空间
   3、不会自动进行换行
   
   块级元素  div、h1-h6、p、ul、ol、li、blockquote、address等
   1、能够识别设置宽高
   2、margin和padding的上下左右均对其有效
   3、独占一行
   
   空元素
   空元素一般指的是无须闭合的标签
   <br/>、<hr/>、<input/>、<img/>、<link/>、<meta/>等
   

   • html5有哪些新特性、移除了那些元素？

   （1）新增特性
   a、新增标签
   article、aside、audio、bdi、canvas、command、datalist、details、embed、figcaption、figure、footer、header、
   hgroup、keygen、mark、meter、nav、output、progress、rp、rt、ruby、section、source、summary、time、track、video
   其中常用标签：article、aside、audio、video、canvas、footer、header、nav、section
   
   b、新增localStorage、sessionStorage
   
   c、新增contenteditable属性 （任何dom节点只要加上contenteditable="true"就可以变得可编辑）
   
   d、Geolocation 地理定位
   
   （2）移除特性
   
   <basefont> 默认字体，不设置字体，以此渲染，<font> 字体标签，<center> 水平居中，<u> 下划线，<big> 大字体
   
   <strike> 中横线，<tt> 文本等宽
   

   • <img>的title和alt有什么区别?

   1、alt： 图片加载失败时，显示在网页上的替代文字
   2、title： 鼠标放在上面时显示的文字
   3、alt 是必要属性，title 非必要
   

4. css

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

   1、浮动的产生
   float: left/right（设置后产生浮动）
   初衷：浮动原先的设计初衷是为了实现文字环绕效果
   结果：父元素高度塌陷，理解起来就是元素浮动飘起来了，失去高度，下面的元素会顶上来，就造成了原有的元素背景不见了，margin/padding也不能正常显示
   
   2、解决浮动的方法
   （1）clear: both，在元素最后下加一个元素设置clear：both属性，缺点是会增加多余无用的html元素
   <div class="container"> 
     <div class="left">left浮动</div> 
     <div class="right">right浮动</div>
     <div  style="clear:both;"></div>
   </div>
   （2）使用after伪元素
   .box 父元素
   .box::after {
       content: ' ';
       display: block;
       clear: both;
    }
   （3）给父元素设置明确的高度，缺点是并不是所有元素的高度都是固定
   （4）给父级元素设置overflow:hidden, 缺点：不能和position配合使用
   

   • box-sizing常用的属性有哪些？分别有什么作用？

   （1）content-box
   宽高是元素本身的宽高 不包含border+padding
   
   （2）border-box
   元素的宽高已经包含了border+padding
   
   （3）inherit
   从父元素继承box-sizing属性
   

   • CSS样式覆盖规则

   !important > 内联样式 > id选择 > （class选择 = 伪类选择） > (标签选择 = 伪元素选择)
   

   • 为什么要初始化css样式？

   因为浏览器的兼容问题，不同浏览器对有些标签的默认值不同，如果不初始化css，会导致不同浏览器页面间的显示差异。
   

   • 介绍一下标准的CSS的盒子模型？低版本IE的盒子模型(IE盒模型、怪异盒模型)有什么不同的？

   1、CSS盒子模型:  外边距(margin) 内边距(padding) 边框(border) 内容区(width、height)
   
   2、CSS盒子模型与低版本IE的盒子模型的区别主要在于：宽和高不一样
   
   3、标准的CSS的盒子模型的宽高：内容区的宽高
   
   4、低版本IE的盒子模型的宽高：内容区+内边距+边框
   

5. js

   • es6的新特性

   const let
   模板字符串
   箭头函数
   函数的参数默认值
   对象和数组解构
   for...of 和 for...in
   

   • 普通函数和箭头函数的区别

   1、普通函数
   可以通过bind、call、apply改变this指向
   可以使用new
   
   2、箭头函数
   本身没有this指向，
   它的this在定义的时候继承自外层第一个普通函数的this
   被继承的普通函数的this指向改变，箭头函数的this指向会跟着改变
   箭头函数外层没有普通函数时，this指向window
   不能通过bind、call、apply改变this指向
   使用new调用箭头函数会报错，因为箭头函数没有constructor
   

   • undefined 和 null 区别

   1、null
   什么都没有，表示一个空对象引用（主动释放一个变量引用的兑现那个，表示一个变量不再指向任何引用地址）
   2、undefined
   没有设置值的变量，会自动赋值undefined
   3、区别
   typeof undefined             // undefined
   typeof null                  // object
   null === undefined           // false
   null == undefined            // true
   

   • JS哪些操作会造成内存泄露

   这个文章讲的通俗易懂，可以参考具体案例 https://www.jianshu.com/p/763ba9562864
   
   内存泄漏是指一块被分配的内存既不能使用，也不能回收，直到浏览器进程结束。
   1、意外的全局变量
   2、闭包
   3、没有清理的dom元素
   dom元素赋值给变量，又通过removeChild移除dom元素。但是dom元素的引用还在内存中
   4、被遗忘的定时器或者回调
   

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

   （1）闭包就是能够读取其它函数内部变量的函数
   （2）使用方法：在一个函数内部创建另一个函数
   （3）最大用处有两个：读取其他函数的变量值，让这些变量始终保存在内存中
   （4）缺点：会引起内存泄漏（引用无法被销毁，一直存在）
   
   

6. vue

• vue2与vue3 最大的区别
• v-show 与 v-if 有什么区别
• 怎样理解 Vue 的单向数据流
• computed 和 watch 的区别和运用的场景
• 直接给一个数组项赋值，Vue 能检测到变化吗？

     由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：

 Vue.set
为了解决第二个问题，Vue 提供了以下操作方法：

 Array.prototype.splice

• 谈谈你对 Vue 生命周期的理解
• Vue 的父组件和子组件生命周期钩子函数执行顺序？

  Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

7. vuex有用过吗？对他的理解

8. vue-router 有用过吗？对他的理解

9. 两种路由模式的区别

10. 你有什么想问的吗？