前端面试材料
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 在推广过程中对模块定义的规范化产出。
区别
- 对于依赖的模块，AMD 是提前执行，CMD 是提早执行。不过 RequireJS 从 2.0 开始，也改成能够提早执行（依据写法不同，解决形式不同）。CMD 推崇 as lazy as possible。
- AMD 推崇依赖前置，CMD 推崇依赖就近。
- 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、前端优化计划
前端的优化计划具体指的是动态资源优化计划，形式有如下几种：
- js/css/img实现压缩缩小带宽的传输、将动态资源放入第三方资源服务器中（例如七牛云、阿里OSS等）。
- 商品详情页面应用Nginx+Lua+OpenResty实现商品详情页面的优化。
- 提交后按钮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_cachedata3.浏览器应用Nginx拜访：http://127.0.0.1:7788/login，能够看到拜访失常，Nginx反向代理到了门户零碎)
Vue
页面卡顿问题
setInterval路由跳转持续运行并没有及时进行销毁
比方一些弹幕，走马灯文字，这类须要定时调用的，路由跳转之后，因为组件曾经销毁了，然而setInterval还没有销毁，还在持续后盾调用，控制台会一直报错，如果运算量大的话，无奈及时革除，会导致重大的页面卡顿。
解决方案：在组件生命周期beforeDestroy进行setInterval
beforeDestory() { clearInterval(this.timer); MessageBox.close() }上传图片有效
某些时候，商家上传图片当前，某些图片上传没有胜利。
因为在上传后，应用了定时器来跳转，没有判断全副图片是否都上传胜利了。
禁止浏览器弹框的解决办法
点击这里查看