likes
comments
collection
share

【刘建】2022年前端面试题汇总

作者站长头像
站长
· 阅读数 29

前端面试资料

Author: 刘建(Abbott Liu)

Create::2022/03/20

Update:2022/03/30

如果觉得不错,麻烦关注下我

技术能力考核

原生JavaScript

JavaScript 数据类型

JavaScript中有几种简单数据类型(也称为基本数据类型):Number、Undefined、Null、String和Boolean。还要一种复杂类型——Object,Object本质是一组无序的名值对组成。JavaScript中不支持任何创建自定义的类型的机制,而所有值都是这6种数据类型之一。

值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。

引用数据类型(对象类型):对象(Object)、数组(Array)、函数(Function),还有两个特殊的对象:正则(RegExp)和日期(Date)。

注:ES5中有5种基本数据类型,Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。

判断Object和Array

使用instanceof

let o = new Object();
let a = new Array();
console.log(o instanceof Array);
console.log(a instanceof Array);

使用Array.isArray

console.log(Array.isArray(a))

行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

行内元素:a、b、span、img、input、strong、select、label、em、button、textarea

块级元素:div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:即系没有内容的HTML元素,例如:br、meta、hr、link、input、img

什么是MVVM

MVVM(Model-View-ViewModel)是一种软件架构设计模式,它是一种简化用户界面的事件驱动编程方式。

去掉字符串的前后空格

function trimString(str) {
    var regSpace = /^(\s*)|(\s*)$/ig;
    if(str !== null && str !== undefined) {
        return str.replace(regSpace, '')
    } else {
        return str
    }
}

let valueTest = " AbbottLiu "

console.log(valueTest)
console.log(valueTest.length)
console.log(trimString(valueTest, ""))
console.log(trimString(valueTest, "").length)

生成一定范围内随机数

function createRandomNum(minVal, maxVal) {
    var result = null
    switch(arguments.length) {
      case 1:
        result = parseInt(Math.random()*minVal+1,10);
        break;
      case 2:
        result = Math.floor(Math.random() * (maxVal - minVal + 1)) + minVal
        break;
      default:
        break;
    }
    return result;
}

for(var i = 0; i<10; i++) {
    console.log(createRandomNum(2));
}

防抖和节流

函数防抖(debounce):触发高频事件后n秒内函数只会执行一次,如果n秒内高频事件再次被触发,则重新计算时间。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>
  <div class="test01">点击</div>
</div>
</body>

<script>
  // 防抖debounce代码(定时器):
  var debounce = function(func, delay) {
    var timer = null
    let result;

    return function() {
      console.log("防抖点击函数")
      var context = this;
      var args = arguments;
      if (timer) {
        clearTimeout(timer);
      }
      timer = setTimeout(function() {
        result = func.apply(context, args);
      }, delay)
      return result
    }
  }
  function handle() {
    console.log('random == ', Math.random());
  }

  document.querySelector('.test01').onclick = debounce(handle, 5 * 1000)

</script>

</html>

函数节流(throttle):高频事件触发,但在n秒内只会执行一次,所以节流会稀释函数的执行频率。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div>
  <div class="test01">点击</div>
</div>
</body>

<script>
  // 节流throttle代码(定时器):
  var throttle = function(func, delay) {
    var prev = Date.now();
    console.log('prev == ', prev)
    return function() {
      var context = this;
      var args = arguments;
      var now = Date.now();
      console.log('now == ', now)
      if (now - prev >= delay) {
        func.apply(context, args);
        prev = Date.now();
      }
    }
  }
  function handle() {
    console.log('random == ', Math.random());
  }

  document.querySelector('.test01').onclick = throttle(handle, 5 * 1000)

</script>

</html>

总结:函数防抖:将多次操作合并为一次操作进行。原理是维护一个计时器,规定在delay时间后触发函数,但是在delay时间内再次触发的话,就会取消之前的计时器而重新设置。这样一来,只有最后一次操作能被触发。

函数节流:使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别: 函数节流不管事件触发有多频繁,都会保证在规定时间内一定会执行一次真正的事件处理函数,而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下,我们需要用户在滚动页面时,每隔一段时间发一次 Ajax 请求,而不是在用户停下滚动页面操作时才去请求数据。这样的场景,就适合用节流技术来实现。

cookies,sessionStorage和localStorage的区别

三者之间的区别对比

分类 Cookie localStorage sessionStorage
特性 一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清除,否则永久保存 仅在当前会话下有效,关闭页面或浏览器后被清除
4K左右 一般为5MB
与服务器端通信 每次会携带在HTTP头中,如果使用cookie保存过多数据会带来性能问题 仅在客户端(即浏览器)中保存,不参与和服务器的通信
易用性 需要程序员自己封装,源生的Cookie接口不友好 源生接口可以接受,亦可再次封装来对Object和Array有更好的支持

Get和Post

分类 GET POST
后退按钮/刷新 无害 数据会被重新提交(浏览器应该告知用户数据会被重新提交)
书签 可收藏为书签 不可收藏为书签
缓存 能被缓存 不能缓存
编码类型 application/x-www-form-urlencoded application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码。
历史 参数保留在浏览器历史中 参数不会保存在浏览器历史中
对数据长度的限制 是的。当发送数据时,GET 方法向 URL 添加数据;URL 的长度是受限制的(URL 的最大长度是 2048 个字符) 无限制。
对数据类型的限制 只允许 ASCII 字符 没有限制。也允许二进制数据
安全性 与 POST 相比,GET 的安全性较差,因为所发送的数据是 URL 的一部分。在发送密码或其他敏感信息时绝不要使用 GET ! POST 比 GET 更安全,因为参数不会被保存在浏览器历史或 web 服务器日志中。
可见性 数据在 URL 中对所有人都是可见的。 数据不会显示在 URL 中。

它们的本质都是 TCP 链接,并无区别。但是由于 HTTP 的规定以及浏览器/服务器的限制,导致它们在应用过程中可能会有所不同。

TCP和UDP的比较

分类 GET POST
后退按钮/刷新 无害 数据会被重新提交(浏览器应该告知用户数据会被重新提交)
书签 可收藏为书签 不可收藏为书签

TCP三次握手

注意,连接的建立与结束都是 客户端 发起的。

第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认;SYN:同步序列编号(Synchronize Sequence Numbers)。

第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;

第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。

TCP为什么是三次握手,为什么不是两次或者四次

这是一个很有意思的问题~

首先,我们要知道TCP是全双工的,即客户端在给服务器端发送信息的同时,服务器端也可以给客户端发送信息。而半双工的意思是A可以给B发,B也可以给A发,但是A在给B发的时候,B不能给A发,即不同时,为半双工。 单工为只能A给B发,B不能给A发; 或者是只能B给A发,不能A给B发。

我们假设A和B是通信的双方。我理解的握手实际上就是通信,发一次信息就是进行一次握手。

第一次握手: A给B打电话说,你可以听到我说话吗?第二次握手: B收到了A的信息,然后对A说: 我可以听得到你说话啊,你能听得到我说话吗? 第三次握手: A收到了B的信息,然后说可以的,我要给你发信息啦!

在三次握手之后,A和B都能确定这么一件事: 我说的话,你能听到; 你说的话,我也能听到。 这样,就可以开始正常通信了。

注意: HTTP是基于TCP协议的,所以每次都是客户端发送请求,服务器应答,但是TCP还可以给其他应用层提供服务,即可能A、B在建立链接之后,谁都可能先开始通信。

如果两次,那么B无法确定B的信息A是否能收到,所以如果B先说话,可能后面的A都收不到,会出现问题 。

如果四次,那么就造成了浪费,因为在三次结束之后,就已经可以保证A可以给B发信息,A可以收到B的信息; B可以给A发信息,B可以收到A的信息。

AMD和CMD的区别

AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

区别

  1. 对于依赖的模块,AMD 是提前执行,CMD 是延迟执行。不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible。
  2. AMD 推崇依赖前置,CMD 推崇依赖就近。
  3. AMD 的 API 默认是一个当多个用,CMD 的 API 严格区分,推崇职责单一。比如 AMD 里,require 分全局 require 和局部 require,都叫 require。CMD 里,没有全局 require,而是根据模块系统的完备性,提供 seajs.use 来实现模块系统的加载启动。CMD 里,每个 API 都简单纯粹。

WebSocket的定义

//申请一个WebSocket对象,参数是服务端地址,
var ws = new WebSocket("ws://localhost:8080"); 
ws.onopen = function() {
    //当WebSocket创建成功时,触发onopen事件
   console.log("open");
   ws.send("hello"); //将消息发送到服务端
}

//当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
ws.onmessage = function(e) {
    console.log(e.data);
}
//当客户端收到服务端发送的关闭连接请求时,触发onclose事件
ws.onclose = function(e) {
    console.log("close");
}
//如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
ws.onerror = function(e) {
  console.log(error);
}

弹性盒子flexbox常用的容器属性与项目属性

介绍

CSS 弹性盒子布局是 CSS 的模块之一,定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中,弹性容器的子元素可以在任何方向上排布,也可以“弹性伸缩”其尺寸,既可以增加尺寸以填满未使用的空间,也可以收缩尺寸以避免父元素溢出。子元素的水平对齐和垂直对齐都能很方便的进行操控。通过嵌套这些框(水平框在垂直框内,或垂直框在水平框内)可以在两个维度上构建布局。

术语

  • 容器:具有display: flex属性元素,任何元素都可以通过添加display:flex;属性,转换为弹性盒元素,转换为 flex 元素后,它的内部的“子元素”就支持 flex 布局了。
  • 项目:flex 容器的”子元素”,容器中的项目自动转为行内块元素,不管之前是什么类型。
  • 主轴:项目排列的轴线,一般默认情况下主轴为水平方向。
  • 交叉轴:与主轴垂直的轴线,一般默认情况下,交叉轴为竖直方向。
容器属性
属性描述
flex-flow主轴方向与换行方式
justify-content项目在主轴上的对齐方式
align-items项目在交叉轴上的对齐方式
align-content项目在多行容器中的对齐方式
项目属性
属性描述
flex项目的缩放比例与基准宽度
align-self单个项目在交叉轴上的对齐方式
order项目在主轴上排列顺序

使用flex布局绘制样式

html文件

<div class='daily-sign-in-root'>
    <div class='t1'>
        <div class='t11'>1</div>
        <div class='t12'>2</div>
    </div>
</div>

css文件

.t1 {
    display: flex;
    width: 500px;
    height: 300px;
    background: #00ee00;
    align-items: center;
    box-sizing: border-box;
    justify-content: space-between;
    padding: 20px;
}

.t11 {
    width: 150px;
    height: 100px;
    background: #2c009f;
    align-self: flex-end;
}

.t12 {
    width: 150px;
    height: 100px;
    background: #00A0E9;
    align-self: flex-start;
}

斐波那契数列

什么是斐波那契数列:斐波那契数列(Fibonacci sequence),又称黄金分割数列、因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一个数列:1、1、2、3、5、8、13、21、34、55、……在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=1,F(1)=1, F(n)=F(n-1)+F(n-2)(n>2,n∈N*)

function Fibonacci(n) {
    if(n<=1) { return 1 };
    return Fibonacci(n-1)+ Fibonacci(n-2)
}
console.log(Fibonacci(9));

清除浏览器缓存的几种方法

<meta http-equiv="pragma" CONTENT="no-cache">
<meta http-equiv="Cache-Control" CONTENT="no-cache, must-revalidate">
<meta http-equiv="expires" CONTENT="0">

说了这么多 mate 兼容性不靠谱!所以说基本没用

<head>
    <link type="text/css" rel="styleSheet" href="./assets/styles/job.202102231230.css?time=20220530.css" />
</head>

ES6

Promise理解

Promise构造函数接受一个函数作为参数,该函数的两个参数分别是resolve和reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。

resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

const p = new Promise((resolve, reject)=>{
    var a = 20 
    if(a > 10) {
        reject(10)
    } else {
        resolve(5)
    }
})

p.then((data)=>{
    console.log('success == ', data);
}).catch((err)=>{
    console.log('err == ', err);
})

Vue

Vue 生命周期

双向数据绑定原理

Vue是一个MVVM框架,即数据双向绑定,即当数据发生变化的时候,视图也就发生变化,当视图发生变化的时候,数据也会跟着同步变化。这也算是vue的精髓之处了。值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的,非UI控件不会涉及到数据双向绑定。 单向数据绑定是使用状态管理工具(如Redux)的前提。

例子

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>defineProperty</title>
</head>
<body>
<input type="text" id="textInput">
输入:<span id="textSpan"></span>
<script>
  var obj = {
        foo: ''
      },
      textInput = document.querySelector('#textInput'),
      textSpan = document.querySelector('#textSpan');

  Object.defineProperty(obj, 'foo', {
    get: function () {
      console.log('obj.foo属性');
      return 'variety'
    },
    set: function (newValue) {
      console.log('newValue == ', newValue);
      textInput.value = newValue;
      textSpan.innerHTML = newValue;
    }
  });
  console.log(obj.foo)
  textInput.addEventListener('keyup', function (e) {
    obj.foo = e.target.value;
  });

</script>
</body>
</html>

watched 和 computed 区别

计算属性computed

  • 支持缓存,只有依赖数据发生改变,才会重新进行计算
  • 不支持异步,当computed内有异步操作时无效,无法监听数据的变化
  • computed 属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值
  • 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,是一个多对一或者一对一,一般用computed
  • 如果computed属性属性值是函数,那么默认会走get方法;函数的返回值就是属性的属性值;在computed中的,属性都有一个get和一个set方法,当数据变化时,调用set方法。
<p id="app"> {fullName}} </p>

<script>
    var vm = new Vue({  
        el: '#app',  
        data: {  
            firstName: 'Foo',  
            lastName: 'Bar',  
        },  
        computed: {  
            fullName: function () {  
                return this.firstName + ' ' + this.lastName  
            }  
        }  
    })
</script>

侦听属性watch

  • 不支持缓存,数据变,直接会触发相应的操作。
  • watch支持异步;监听的函数接收两个参数,第一个参数是最新的值;第二个参数是输入之前的值;
  • 当一个属性发生变化时,需要执行对应的操作;一对多;
  • 监听数据必须是data中声明过或者父组件传递过来的props中的数据,当数据变化时,触发其他操作,函数有两个参数
var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar',
            fullName: 'Foo Bar'
        },
        watch: {
            firstName: function (val) {
                this.fullName = val + ' ' + this.lastName
            },
            lastName: function (val) {
                this.fullName = this.firstName + ' ' + val
            }
        }
    })

项目所遇到的问题

登录验证码图片显示

后台返回的登录验证码图片是以流的形式返回的。所以这里需要使用到Uint8Array和String.fromCharCode这2个api。Uint8Array表示一个8位无符号整型数组,用来存储返回来的流。String.fromCharCode()根据指定的 Unicode 编码中的序号值来返回一个字符串。这里我是使用axios进行请求的,同是需要指定返回的类型是arraybuffer,代码如下:

SSO单点登录

SSO(Single Sign On)是在一个多系统共存的环境下,用户在一处登录之后,就不用在其他的系统中登录,也就是用户的一次登录能得到其他所有系统的信任。单点登录在大型网站里面使用的比较多,例如像阿里巴巴这样的网站,在万丈的背后是成百上千的子系统,用户一次操作或交易可能涉及到几个十几个子系统的协作,如果每个子系统都需要用户认证,会在无形中增加时间的耗费。实现单点登录说到底就是要解决如何产生和存储那个信任,再就是其他子系统如何验证这个信任的有效性,因此要一下两个点:

秒杀系统前端优化

1、为什么需要前端优化?

在一个网站中,大部分的服务器请求带宽资源都被静态资源占用了,静态资源包含(CSS/IMG/JS/MP4)等,而HTTP协议接口占用带宽资源非常小,比如:

1M宽带等于等于128KB/S ,如果加载一个网页含静态资源需要640/KB ,那么就需要5秒时间加载整个网页。

想让用户的请求及时的发送到服务器端上,服务器带宽一定足够,所以这时候网站一定要实现动静分离架构模式,将静态资源与动态资源分开,静态资源放入到CDN服务器端上。

2、前端优化方案

前端的优化方案具体指的是静态资源优化方案,方式有如下几种:

  1. js/css/img实现压缩减少带宽的传输、将静态资源放入第三方资源服务器中(例如七牛云、阿里OSS等)。
  2. 商品详情页面使用Nginx+Lua+OpenResty实现商品详情页面的优化。
  3. 提交后按钮disabled,禁止用户重复提交。

3、Nginx实现页面缓存

1、nginx配置文件内容如下(nginx端口为7788,系统门户端口为8080)

events {
  #的最大连接数(包含所有连接数)1024
  worker_connections  1024;  ## Default: 1024
}

http{

   # 代理缓存配置
   proxy_cache_path "./taodong_cachedata"  levels=1:2 keys_zone=taodongcache:256m inactive=1d max_size=1000g; 
   server {
     listen 7788;
     location /{
        #使用缓存名称
        proxy_cache taodongcache;
        #对以下状态码实现缓存
        proxy_cache_valid 200 206 304 301 302 1d;
        #缓存的key
        proxy_cache_key $request_uri;
        add_header X-Cache-Status $upstream_cache_status;
        #反向代理地址
        proxy_pass http://127.0.0.1:8080;
      }
   }
}

2.配置文件下新建文件夹:

mkdir taodong_cachedata

3.浏览器使用Nginx访问:http://127.0.0.1:7788/login,可以看到访问正常,Nginx反向代理到了门户系统)

Vue

页面卡顿问题

setInterval路由跳转继续运行并没有及时进行销毁

比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后台调用,控制台会不断报错,如果运算量大的话,无法及时清除,会导致严重的页面卡顿。

解决方案:在组件生命周期beforeDestroy停止setInterval

beforeDestory() {
    clearInterval(this.timer);
    MessageBox.close()                
}

上传图片无效

某些时候,商家上传图片以后,某些图片上传没有成功。

因为在上传后,使用了定时器来跳转,没有判断全部图片是否都上传成功了。

禁止浏览器弹框的解决办法

点击这里查看

更多其他前端工程师面试题