终于拿到前端网易offer，我真想吐槽几句！

偶然看到别人发的一个帖子，楼主研究生，经过努力，终于拿到了网易的offer，虽然是实习生，但是一看贴出来的面试题，基本上都是底层原理相关的题目。最近也看了不少的面试题，发现大型互联网公司的面试题都偏向底层偏向场景的多点，这估计就是大家伙儿经常说的，面试造飞机，工作拧螺丝这样把。不过也显示出的就是现在大公司对于程序员的要求就是，不要求你会多少项目，也不要求你参与过很多很多的项目，重要考核的就是你的基础好不好，基础不好的话，其他方面再优秀，也会少了很多竞争力。下面把面试题贴出来给大家参考下！

问题1：如何解决页面请求接口大规模并发问题

如何解决页面请求接口大规模并发问题，不仅仅是包含了接口并发，还有前端资源下载的请求并发。应该说这是一个话题讨论了;

个人认为可以从以下几个方面来考虑如何解决这个并发问题:

1. 后端优化:可以对接口进行优化，采用缓存技术，对数据进行预处理，减少数据库操作等。使用集群技术，将请求分散到不同的服务器上，提高并发量。另外可以使用反向代理、负载均衡等技术，分担服务器压力。
2. 做 BFF聚合:把所有首屏需要依赖的接口，利用服务中间层给聚合为一个接口。
3. CDN加速:使用CDN缓存技术可以有效减少服务器请求压力，提高网站访问速度。CDN缓存可以将接口的数据存储在缓存服务器中，减少对原始服务器的访问，加速数据传输速度。
4. 使用 WebSocket:使用 WebSocket可以建立一个持久的连接，避免反复连接请求。WebSocket可以实现双向通信，大幅降低服务器响应时间。
5. 使用 HTTP2 及其以上版本，使用多路复用。
6. 使用浏览器缓存技术:强缓存、协商缓存、离线缓存、Service Worker 缓存 等方向。
7. 聚合一定量的静态资源: 比如提取页面公用复用部分代码打包到一个文件里面、对图片进行雪碧图处理，多个图片只下载一个图片。
8. 采用微前端工程架构: 只是对当前访问页面的静态资源进行下载，而不是下载整站静态资源。
9. 使用服务端渲染技术:从服务端把页面首屏直接渲染好返回，就可以避免掉首屏需要的数据再做额外加载和执行。

问题2：flex:1代表什么【热度: 400】

在CSS的弹性盒模型(Flexbox)中，flex:1表示子项(flex子项)的伸缩性。

具体来说，flex:1是flex-grow、flex-shrink 和 flex-basis 三个属性的简写。其默认值等同于 flex:1 1 0% ，分别代表以下含义:

• flex-grow:1:定义项目的放大比例为 1。这意味着当弹性容器有剩余空间时，该子项将按照比例伸展以填充剩余空间。如果存在多个 flex-grow:1的子项，它们将等分剩余空间。
• flex-shrink:1:定义项目的缩小比例为1。即如果空间不足，该项目将缩小。
• flex-basis:0%:在分配多余空间之前，计算项目是否有多余空间，这里的 0% 表示不考虑项目本身的大小。

flex:1经常用于自适应布局。例如，将父容器的 display 设置为 flex，侧边栏大小固定后将内容区设置为 flex:1，内容区则会自动放大占满剩余空间。

以下是一个简单的示例代码，展示了 flex:1的效果：

在上述代码中，.container是一个flex容器，它包含两个子元素,item1和.item2 ，并且都将 flex 属性设置为1。当调整.container 的宽度时，.item1和.item2 会等比例地增大或缩小，以占满剩余空间。

问题3：前端如何实现截图?

前端实现截图需要使用 HTML5 的 Canvas 和相关 API，具体步骤如下:

1. 首先在页面中创建一个 Canvas 元素，并设置其宽高和样式。
2. 使用 Canvas API在 Canvas 上绘制需要截图的内容，比如页面的某个区域、某个元素、图片等。
3. 调用 Canvas AP|中的 toDataURL()方法将 Canvas 转化为 base64编码的图片数据。
4. 将 base64 编码的图片数据传递给后端进行处理或者直接在前端进行显示。

以下是一个简单的例子，实现了对整个页面的截图:

这个例子中，在页面中创建了一个 canvas 元素，并设置其宽高和样式，将其放在页面最上方。在点击“截图”按钮时，通过 toDataURL()方法将整个页面的截图转换为 base64 编码的图片数据并打印到控制台上。

1. 如何判断用户设备
2. 将多次提交压缩成一次提交
3. 介绍下navigatorsendBeacon方法
4. 混动跟随导航(电梯导航)该如何实现
5. 退出浏览器之前，发送积压的埋点数据请求，该如何做?
6. 如何统计页面的long task(长任务)【热度:140】
7. PerfoemanceObserver如何测量页面性能
8. 移动端如何实现下拉滚动加载(顶部加载)
9. 判断页签是否为活跃状态
10. 在网络带宽一定的情况下，切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗
11. 大文件切片上传的时候，确定切片数量的时候，有那些考量因素
12. 页面关闭时执行方法，该如何做
13. 如何统计用户 pv 访问的发起请求数量
14. 长文本溢出，展开/收起如何实现
15. 如何实现鼠标拖拽
16. 统计全站每一个静态资源加载耗时，该如何做
17. 防止前端页面重复请求
18. ResizeObserver作用是什么
19. 要实时统计用户浏览器窗口大小，该如何做
20. 当项目报错，你想定位是哪个commit引l入的错误的时，该怎么做
21. 如何移除一个指定的 commit
22. 如何还原用户操作流程
23. 可有办法将请求的调用源码地址包括代码行数也上报上去?
24. 请求失败会弹出一个 toast,如何保证批量请求失败，只弹出一个 toast【热度: 420】

···············

对这份笔记感兴趣的小伙伴可以点：https://github.com/encode-studio-fe/natural_traffic/wiki/scan_material10 拿去看看！

好了，今天就先聊到这吧，朝着自己学习的方向奋斗，总有一天你也会拿着别人羡慕的工资，而每天再多努力一点，你就会让这一天提前一点到来。相信自己，你能行！