2023前端找工作的面试题

***号表示我在面/笔试中遇到过的
看这些内容也不全是为了面试，也是为了学习补充知识点，由这些问题会延伸出很多其他问题，这些问题就好比是平时没有关注到的细枝末节，发现这个枝干的时候顺便也就把分叉摘掉了。

1.什么是防抖？什么是节流？***

答：看到别人写的挺好理解的，防抖就是把发生很多次的事情只发生一次，节流就是把发生很多次的事情变成隔段时间再发生。
  常见的场景就是，我觉得防抖这个词还挺形象，因为真的会抖，在搜索框里面输入内容的时候输入一下输入框就会抖一下，而让它不抖就是防抖；当一个页面内容很多的时候，如果页面加载完才显示出来效果很不好，所以当滚动条往下滚动时，页面的内容才会随之加载，这样就做到了每隔一段时间才加载资源，这就是节流效果。
  以下是别人写的
  防抖原理：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
适用场景：
按钮提交场景：防止多次提交按钮，只执行最后提交的一次
搜索框联想场景：防止联想发送请求，只发送最后一次输入
  节流原理：规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。
适用场景
拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动
缩放场景：监控浏览器resize

2.get请求和post请求的区别

答：HTTP定义了与服务器交互的不同方法，其中最基本的五种：GET，POST，PUT，DELETE，HEAD，其中GET和HEAD被称为安全方法，因为使用GET和HEAD的HTTP请求不会产生什么动作。不会产生动作意味着GET和HEAD的HTTP请求不会在服务器上产生任何结果。但是安全方法并不是什么动作都不产生，这里的安全方法仅仅指不会修改信息。而post请求则会对数据资源进行修改，也就是不安全方法。
GET把参数包含在URL中，POST通过request body传递参数。
get比post请求更快的原因：①post请求包含更多的请求头，因为post需要在请求的body部分包含数据，所以会多了几个数据描述部分的首部字段（如：content-type）,这其实是微乎其微的。②post请求的过程，会先向服务器发送options预检请求，获得同意之后才会发送真正的数据：（fetch发送2次请求的原因）
post请求的过程：
（1）浏览器请求tcp连接（第一次握手）
（2）服务器答应进行tcp连接（第二次握手）
（3）浏览器确认，并发送post请求头（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
（4）服务器返回100 Continue响应
（5）浏览器发送数据
（6）服务器返回200 OK响应
get请求的过程：
（1）浏览器请求tcp连接（第一次握手）
（2）服务器答应进行tcp连接（第二次握手）
（3）浏览器确认，并发送get请求头和数据（第三次握手，这个报文比较小，所以http会在此时进行第一次数据发送）
（4）服务器返回200 OK响应
chrome和firefox浏览器如果检测到get请求的是静态资源，则会缓存，如果是数据，则不会缓存，但是IE什么都会缓存起来，post请求不会缓存，因为请求的都是动态资源没必要。
区别总结：
（1）post更安全（不会作为url的一部分，不会被缓存、保存在服务器日志、以及浏览器浏览记录中）
（2）post发送的数据更大（get根据浏览器不同url有不同的长度限制，post也有限制，但是默认最大4M）
（3）post能发送更多的数据类型（get只能发送ASCII字符）
（4）post比get慢
（5）post用于修改和写入数据，get目的是资源的获取，读取数据

3.谈谈typeof？

typeof用于判断数据类型，可以返回其七种数据格式，number、string、boolean、undefined、object、function ，以及 ES6 新增的 symbol。
缺点：不能将Object、Array和Null区分，都返回object

4.React的key值有什么作用？***

答：官网中对于diff有如下规则：
当元素类型变化时，会销毁重建
当元素类型不变时，对比属性
当组件元素类型不变时，通过props递归判断子节点
递归对比子节点，当子节点是列表时，通过key和props来判断。若key一致，则进行更新，若key不一致，就销毁重建。
个人理解：key值的存在就是在更新虚拟节点树的时候更高效正确，因为key是用于区分dom节点的值

5.webpack3和4的区别？

答：1、mode/–mode 参数，新增了 mode/–mode 参数来表示是开发还是生产
（development/production）
2、Production，侧重于打包后的文件大小，development 侧重于 goujiansud
3、移除 loaders，必须使用 rules（在 3 版本的时候 loaders 和 rules 是共存的但是到 4 的
时候只允许使用 rules
4、移除了 CommonsChunkPlugin (提取公共代码)，用 optimization.splitChunks，
optimization.runtimeChunk 来代替
5、支持 es6 的方式导入 JSON 文件，并且可以过滤无用的代码
6、升级 happypack 插件（happypack 可以进行多线程加速打包）
ExtractTextwebpackPlugin 调整，建议选用新的 CSS 文件提取 kiii 插件 mini-css-extract
plugin，production 模式，增加 minimizer
https://blog.csdn.net/weixin_59519449/article/details/123893898

6.setTimeout、Promise、Async/Await 的区别？

答：①setTimeout是异步执行函数 ，会先执行其他的函数，当执行完当前事件循环的时候,settimeout中的回调会在下次(或者某一个)事件循环中被执行。
② Promise 本身是同步的立即执行函数,当在执行体中执行resolve()或者reject的时候,此时是异步操作
会先执行then/catch(异步执行)等,等主栈完成后,才会去执行resolve()/reject中的方法。

var promise1 = new Promise(function (resolve) {
   
        console.log('promise1');
        resolve();
        console.log('promise1 end');
    }).then(function () {
   
        console.log('promise2');
    })

③await通过返回一个Promise对象来实现同步的效果，会先执行await的内容再继续之后后面的语句

async function async1(){
   
        console.log('async1 start');//1
        await async2(); //2
        console.log('async1 end')//3
    }

7.CSS有几种布局方式?***

答：浮动、grid、flex、position定位。table布局尽量不用，因为任何改动都会导致重绘或重排
css盒子模型有两种: 标准盒模型 和 IE盒子模型
标准盒子模型 (四个部分): margin + border + padding + content
IE盒子模型(两个部分): margin + content（ border + padding + content ）

flex布局内容，学习https://www.cnblogs.com/cblx/p/8976325.html

8.nginx代理跨域原理？

答：

9.http和https的区别

答：HTTP是基于客户/服务器模式，且面向连接的。中文：超文本传输协议（Hyper Text Transfer Protocol，HTTP）是一个简单的请求-响应协议，它通常运行在TCP之上，是应用层协议，典型的HTTP事务处理有如下的过程:
（1）客户与服务器建立连接；
（2）客户向服务器提出请求；
（3）服务器接受请求，并根据请求返回相应的文件作为应答；
（4）客户与服务器关闭连接。
HTTPS 是以安全为目标的 HTTP 通道，在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性 。HTTPS 在HTTP 的基础下加入SSL，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。
http的缺陷：数据的明文传送和消息完整性检测的缺乏。HTTP在传输客户端请求和服务端响应时, 唯一的数据完整性检验就是在报文头部包含了本次传输数据的长度, 而对内容是否被篡改不作确认。 因此攻击者可以轻易的发动中间人攻击, 修改客户端和服务端传输的数据, 甚至在传输数据中插入恶意代码, 导致客户端被引导至恶意网站被植入木马。而https争对此问题做出的改进就是做了加密算法，新增了校验证书，因此它更安全。
http协议的端口为80，https的端口为443
http传输的数据都是未加密的，也就是明文的
https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
Https协议需要ca证书，费用较高。

10.什么是Bom？有哪些常用的Bom属性？

答：BOM(Browser Object Model) 是指浏览器对象模型。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。document对象，文档对象；location对象，浏览器当前URL信息；navigator对象，浏览器本身信息；screen对象，客户端屏幕信息；history对象，浏览器历史信息。

11.你遇到过的最大的困难是什么，怎么解决的？***

答:

12.ts相对于js有什么进步？

答：TypeScript 适合构建大型应用，适合团队开发。可以给字段定义类型，编译时就发现bug。代码可预测，类型被定义之后不可改变，开发中会有字段缺失提示。
缺点：如果进行强制转换或者写any还是会出现类型问题，，会多写一些代码，需要编译成js供浏览器识别。

13.umi怎么做的权限限制。

答：https://blog.csdn.net/weixin_42224055/article/details/122400388

14.前端优化有哪些策略/项目性能优化？

答：①减少http请求数②合理设置HTTP缓存，具体还没搞懂③外部资源合并与压缩（js,css,img）④CSS Sprites合并图片⑤惰性加载Lazy Load Images，一开始只加载第一屏的内容，用户滚动屏幕之后再继续加载。⑥减少代码。⑦减少重定向，重定向是什么，用户要访问A地址，你给他转到B地址

2，将CSS文件放在头部，js文件放在底部

3，使用字体图标代替图片

15.重绘和回流（重排）是什么？如何避免？***

答：http://wjhsh.net/momo798-p-6368396.html。这个页面讲的很详细。以下我就把自己的理解写上。
  重绘就好比换装，内核还是那个人，只不过换了个衣服而已，看起来外观不一样了。
重排就是指整形，隆鼻，抽脂，正骨。定义就是重新计算文档中各元素的位置和几何形状。
  重排必定导致重绘，因为元素必然会重新绘制。所以很明显重排的消耗是远大于重绘的。
  详细的哪些属性会引起哪种情况我觉得没法死记硬背，大致看看找个本质。其中有一个比较特殊可以记一下，display:none会引起重排因为元素的位置消失了，但是visibility:hidden只会引起重绘，因为位置保留，只是隐藏。
  如何避免其实就是减少对dom树的操作：避免使用style内联样式，尽量在class中设定样式后修改dom的className;将需要多次重排的元素，position属性设为absolute或fixed，
这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位；由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。
如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排；避免table布局。

16.为什么虚拟dom会提高性能?

答：虚拟dom就是一个真实dom的JS对象，以前需要通过对真实dom进行比对。真实dom节点是非常复杂的，它里面会绑定的事件，它会有属性，背后会有各种方法，JS对象就没有乱七八糟的特性。单纯的比较JS对象就比较快，有效的提高了react的性能
如果 key 值相同 dom 就可以直接复用了，就不用重新创建dom了。
diff 算法（本质：找出两个对象之间的差异，目的是尽可能做到节点复用。），如果一层节点发现有问题，就不再往下比了，同层比对，该放弃就放弃，将算法复杂度，从平方降到了n，降了一个维度。

17.前端跨域问题

答：什么是跨域：当协议、子域名、主域名、端口号中任意一个不同时，都算作跨域。
https://  editor  . csdn.net ：8080 / md
（协议） 子域名 主域名  端口号 请求资源地址
说明：跨域是请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。
有三个标签可以允许跨域加载资源：

<img src="" /><link href="" /><script src="" />

①方法——postMessage
如果两个网页不同源，就无法拿到对方的DOM。典型的例子是iframe窗口和window.open方法打开的窗口，它们与父窗口无法通信。HTML5为了解决这个问题，引入了一个全新的API：跨文档通信 API（Cross-document messaging）。这个API为window对象新增了一个window.postMessage方法，允许跨窗口通信，不论这两个窗口是否同源。postMessage方法的第一个参数是具体的信息内容，第二个参数是接收消息的窗口的源（origin），即"协议 + 域名 + 端口"。也可以设为*，表示不限制域名，向所有窗口发送。

<iframe src="http://localhost:8080/user/admin" id='a'></iframe>
<Button onClick={
   run}>点击</Button>
 const run=()