本来只想当一条咸鱼，结果被狠狠的按在地上摩擦了，无奈大环境这X样，只能支棱起来。虽然没失业，但是今年也充满了危机感，作为一个大龄程序员，我是个废物，记一次米哈游一面跪面试题。答案是我后来补充的，有些问题可能不到位，有大佬可以指点一下。
1. 自我介绍
介绍了一下自己姓名，毕业时间，目前所在的公司，做的项目是什么，主要的技术栈啥的。
2. 项目介绍
推荐使用（STAR）法则来完善项目的介绍。
S（situation）情景
T（task） 任务
A（action）行动
R（result）结果
简单来说就是这个（S）项目的背景是什么，遇到的问题和难点 （T）需要做什么工作，在其中担任的什么职责
（A）通过什么方式来解决这些问题 （R）最终的项目取得了什么可衡量的结果
3. 项目的亮点是什么？
大部分人做的项目跟难点和亮点没啥关系，大家就是个拧螺丝的，非得让我造火箭，明白造火箭的原理。（吐槽一下）大数据量，高并发，复杂业务，哦，都没有，如果有，拉出来都是亮点，没有可以考虑设计方案，性能优化，自定义组件之类的。
1.创新的技术方案
2.高效的开发模式
3.代码质量
4.性能优化
遇到问题如何解决，解决思路是什么，有没有更多的思考，还是只是被动的完成任务，面试官希望的是从你的项目里了解你的前端学习思路，了解你整体的知识储备。
4. React18新增的并发模式是什么？如何实现的？fiber是如何实现的，为啥能够终止，如何再次继续？
并发：在操作系统中，指在同一段时间内有几个程序都处于已启动运行到运行完毕之间，且这几个程序都是在同一个处理机上运行的，但任一个时刻点上只有一个程序在处理机上运行。并发可以通过多线程、多进程等技术实现，从而提高系统或者程序的效率和响应能力。 并行：是指在任一时刻，系统或程序能够同时处理多个独立任务或操作的能力，强调同时执行，每个任务会被分配到不同的处理器、核心或者计算机上。并行可以通过多处理器、多核心、多计算机等技术实现。
React为什么要并发？
因为js是单线程的，同一个时间只能执行一件事情，默认情况下，JS运算，页面布局和页面渲染都是运行在浏览器的主线程中的，如果js运算长时间占用主线程，页面的渲染就会被阻塞。解决这一问题的基本思路就是并发，并发是一种新的幕后机制，允许在同一时间内，准备多个版本的UI，即多个版本的更新，也就是前面我们提到的并发。
React渲染流程（render+commit）
JSX--->render function--->vdom;
vdom转换成fiber结构的过程叫reconcile；
commit阶段执行增删改都没，更新ref，调用effect回调和生命周期函数等；
多次setState会引起多个渲染流程，这之间的重要程度不同，优先级也不同。为了让高优先级的更新能先渲染，react实现了并发模式。
同步模式是循环处理fiber节点，并发模式通过shouldYield判断，根据时间分片的方式将任务每5ms打断一次，之后会重新调度渲染。通过这种打断和恢复的方式实现了并发。
通过scheduler根据不同优先级对任务排序，实现高优先级的更新先执行，优先级只会影响Scheduler的任务排序，打断只会根据过期时间。
react中采用基于二进制设计的Lane优先机制，通过调度scheduler任务的时候，将其转换成事件优先级，然后再转换成Scheduler的优先级。
useTransitiion，useDeferredValue都是基于并发特性实现的
useTransition是把回调函数里的更新设置为连续事件的优先级，比离散事件的优先级低。
useDeferredValue是延后更新state的值。将事件优先级降低。
并发特性的API都是通过设置Lane实现的，react检测到对应的Lane就会开启带有时间分片的workloopConcurrent循环。
时间分片的workloop+优先级调度，就是react并发机制的原理。
参考源：
你真的了解 React18 的并发吗？
彻底搞懂 React 18 并发机制的原理
5. 图片有哪些优化方式？
在一个页面需要加载很多图片时，由于浏览器的并发请求限制，其他的请求会推到执行队列中等待，造成图片加载缓慢。
选择合适的图片格式
| 图片格式 | 是否有损 | 优点 | 使用场景 |
|---|---|---|---|
| GPEG | 有损压缩 | 呈现数百万种颜色，色彩丰富，有损压缩，压缩大大的减少体积，无兼容性问题 | 背景图，轮播图，Banner，适合线条感较强，颜色对比强烈的图像 |
| PNG | 无损压缩 | 支持8位（256种颜色）或者24位（1600万）图片格式，色彩表现力强，更细腻，支持透明度设置 | 小的Logo，颜色简单且对比强烈的图片或者背景。缺点：体积大 |
| GIF | 无损压缩 | 支持8位256种颜色）图片格式，文件体积小，支持透明 | 支持动画，图标，表情，广告栏等，适合简单色彩的图片 |
| WebP | 无损/无损压缩（可逆压缩） | 像JPG一样支持细节丰富的图片，支持透明，支持动态显示，体积小 | 集多种图片文件格式优点，缺点：浏览器兼容性不好，移动端和IOS系统支持性差。 |
图片压缩
压缩分为有损和无损压缩。
有损压缩会损舍一部分图片信息，降低图片质量。常见的有损压缩是按照一定的算法将邻近的像素点进行合并。压缩算法不会对图片所有数据进行编码压缩，而是去除掉人眼无法识别的细节，有损压缩可以大幅度降低图片的体积。
无损压缩：是指在图片压缩的的过程中，图片质量没有任何损耗，通过编码算法减少图片的体积。但是压缩率低。
工具压缩
tinypng（免费，批量，速度快） 智图压缩 squoosh compressor
webpack压缩
image-wbpack-loader进行图片压缩
使用雪碧图
CSS Sprites，又称CSS精灵，是一种CSS图像合成技术，将多个小图片合并成一张大图片，根据backround-position定位方式获取对应的图标，主要用于小图片展示，可以显著减少HTTP请求，减轻服务器压力。
使用iconfont（字体图标）
通过字体的方式展示图标，用于渲染图标，简单图形，特殊字体等；
使用base64格式
将图片转换成base64编码嵌入页面或者css中，优点：会随着HTML的加载同时加载到本地，减少http请求，提升性能，加密，方便引用。如webpack的url-loader方式
使用css代替图片
比如实现修饰效果，半透明，边框，圆角，阴影等。优点：减少图片请求，缺点：浏览器兼容性，对于复杂图案无能为力，或者开发成本高；
使用CDN图片（内容分发网络）
通过多点部署，实现负载均衡，内容分发，就近请求，降低网络拥塞，提高网络安全性等；
图片懒加载
是指在用户浏览网页时，先加载可见区域内的图片，而不是一次性加载所有图片，当滚动页面时，才会加载新的图片。原理：暂时不设置图片的src属性，src会被设置成一个占位符，而不是真实的图片地址，等当前图片到了可视区域，再将真实的url放入到src属性中，从而实现图片的懒加载。
图片的预加载
是指在一些需要展示大量图片的网站，提前将图片加载到本地缓存，从而提升用户体验。常用的方式有两种，一种是隐藏在css的background的URL属性里面，一种是通过js的Image对象设置实例对象的src属性实现图片的预加载。
响应式图片加载
通过媒体查询的方式，针对不同的屏幕尺寸和分辨率设置不同尺寸的图片。 通过HTML5的picture属性进行响应式处理。
<picture> <source srcset="src/img/1.png" media="(min-width: 1200px)" /> <source srcset="src/img/2.png" media="(min-width: 992px)" /> <source srcset="src/img/3.png" media="(min-width: 768px)" /> <img src="src/img/3.png" /> </picture>
渐进式图片
在加载高质量图片之前，预先加载低质量版本，类似于骨架屏原理。
6. 如何实现图片的裁剪，降低像素等？
可以通过一些图像编辑软件实现，如PS，GIMP等，还可以使用JS的Canvas API，Cropper.js插件等
7. 场景题：进入一个页面白屏2分钟刷出来，从系统设计的角度说一下如何解决这个问题。
原因分析：
网络问题：网络连接不稳定或者延迟较高，导致网页无法加载。可以通过检查网络连接状态或者使用网络测试工具来判断是否是网络问题。
前端资源加载问题：可能是由于前端资源加载速度较慢，例如JS，CSS或者图片等文件下载时间过长，导致网页长时间无法加载，可以通过检查前端资源的加载速度或者使用工具分析前端性能，找出加载速度较慢的资源。
服务器问题：可能由于服务器响应时间长或者服务器发生故障，导致网页无法加载，可以通过检查服务器的负载情况或者监控工具来判断服务器是否正常；
DNS解析问题：可能是DNS解析问题，导致页面无法正常加载，可通过DNS查询工具来检查DNS解析是否正常。
JavaScript代码问题：可能是由于页面的JS代码出现了问题，导致页面无法正常加载，通过检查页面的JS代码或者使用调试工具来找出代码的问题。
解决方案：
减少文件加载体积，如html，js压缩等；
使用路由懒加载的方式，首次仅加载对应的js和css文件，减少首次请求的数量
采用骨架屏的方式，提高交互体验；
采用CDN的方式分布式部署静态页面；
使用SSR服务端预渲染；
采用缓存的方式，将一些资源进行缓存，减少服务器压力
搭建性能监控平台；
面试官希望我从一个前端系统的角度考虑这个问题的实现，比如网络方面，可以引申出网络的加载过程，Http协议的相关知识，DNS协议，状态码，请求之类的知识体系，同时能够引申出浏览器的相关原理，缓存相关知识，浏览器从输入一个域名到加载解析的全过程，服务器请求等；从JS层面可以说出如何前端的错误捕获，有哪些报错类型，如何避免类似的错误等等。我大概说了一下从哪些角度分析，解决问题，面试官说我没有一个完备的前端知识体系，仍然停留在解决问题的浅层次，我也知道自己的这些问题，但是没有想好怎么从一个系统的角度考虑这种问题，有大佬可以指点一下如何回答这类问题，怎么总结可以给个思路。
8. 场景题：如何实现给一个图片增加两层boder，紧密贴合，前提：在不更改dom结构；
.image-wrap{ width: 200px; height:200px; border-radius: 100px; border: 1px solid red }
利用CSS3的box-shadow属性
.shadow{ box-shadow: 0 0 0 2px green; }
利用描边(outline)属性
.outline{ outline: 1px solid green }
利用伪元素
.circle-image-container {
position: relative;
display: inline-block;
width: 200px;
/* 圆形图片容器的宽度 */
height: 200px;
/* 圆形图片容器的高度 */
overflow: hidden;
/* 隐藏圆形图片的溢出部分 */
border-radius: 50%;
/* 圆形图片容器的圆角半径 */
border: 2px solid green;
/* 第一层边框的颜色和宽度 */
}
.circle-image-container:before {
content: "";
position: absolute;
top: -2px;
/* 第二层边框距离容器上边界的距离 */
left: -2px;
/* 第二层边框距离容器左边界的距离 */
right: -2px;
/* 第二层边框距离容器右边界的距离 */
bottom: -2px;
/* 第二层边框距离容器下边界的距离 */
border: 2px solid red;
/* 第二层边框的颜色和宽度 */
border-radius: 50%;
/* 第二层边框的圆角半径 */
z-index: -1;
/* 让第二层边框在第一层边框下面 */
}
利用boder-image属性
使用border-image的方式，设置一张边框image的图片
border-image: url('borders.jpg') 1 1 1 1 repeat;
