最近我在面试字节飞书出了一道手写题，是一道顺序返回异步请求的题，当时情况我采用了 async 与 await 和 Promise.all 两种方法来进行实现，事后想来这两种都不完全符合题意，我搜索网上的文章都没有符合我心意的答案，于是自己便写出来总结一下

一、题干

function test(i){
    return new Promise((res)=>{
        setTimeout(()=>{
          res(i)
        },Math.random()*1000)
    })
}

function main(){
    for(let i=0;i<10;i++){
        test(i).then((res)=>{
            console.log(res)
        })
    }
}
main()

面试的时候，因为项目里面用到了webRTC，因此常常被面试官问起这点，但每次回答的都不够清楚逻辑，发现了一篇写的很好的webRTC实现的文章，学习一下

什么是 WebRTC ？

WebRTC 是由一家名为 Gobal IP Solutions，简称 GIPS 的瑞典公司开发的。Google 在 2011 年收购了 GIPS，并将其源代码开源。然后又与 IETF 和 W3C 的相关标准机构合作，以确保行业达成共识。其中：

• Web Real-Time Communications (WEBRTC) W3C 组织：定义浏览器 API。
• Real-Time Communication in Web-browsers (RTCWEB) IETF 标准组织：定义其所需的协议，数据，安全性等手段。

常见内存泄漏及解决方案

内存泄漏（Memory Leak）是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。

隐式全局变量

在局部作用域中，等函数执行完毕，变量就没有存在的必要了，浏览器的垃圾回收机制很快进行回收，但是对于全局变量，很难判断什么时候不用这些变量，无法正常回收；所以，尽量少使用全局变量。

在谈论到前端性能优化时，我们可能会想到很多方向，但虚拟列表一定算是一个值得谈谈的话题，我发现了一个比较宝藏的文章，做记录学习

前言

什么是虚拟列表

虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。

虚拟列表原理【固定子项高度】

首先，我们先从最简单的一种场景入手，也就是列表子项高度固定的场景。

我们知道，普通列表是由可视区（滚动容器，以下统称为可视区）与内容区组成的。

要说面试的时候问到最多的问题，那性能优化绝对是躲不开的话题，基本每个公司面试我都遇到了相关问题，其中，首页加载速度优化又是其中最常问的问题，网上的文章比较零零散散，没有一个总结到十分满意的，于是自己便来总结一下

这张图是我发现的比较宝藏，比较全面的一张首页加载优化图，便以此图来进行相关总结

目录

一. 资源加载优化

1. 压缩资源
2. 启用Gzip压缩
3. 使用缓存
4. 使用内容分发网络 (CDN)
5. 使用HTTP/2
6. 优化DNS解析
7. 减少HTTP请求数
8. 预加载和预获取
9. 使用更高效的图片格式
10. 图片懒加载和路由懒加载

本人从大二上学期开始学习前端，对于前端有浓厚的兴趣。在校期间，竞选老师科研项目组，主动向行业前辈请教，主动挑起重担，发挥负责人的作用，统筹安排项目进行有序开发，目前有过一段夏令营和两段大厂段实习经验，还有一个开源的个人技术博客网站，以及多项比赛获奖经历，决心在前端领域生根发芽，未来往更底层进发，为前端社区贡献自己的一份力量

微信号： weixinhao03217

手机号： 13699616276

Email： 1807797481@qq.com

在上次面试的时候，面试官问了我微前端的问题，也就是我在美团实习所负责的那个项目，当时我还专门去了解了下微前端的相关知识，但是问起来，答的就很差，所以学习一篇比较好的文章

qiankun的实践

无界

最近在面试中，经常被问到白屏检测和修复相关的问题，自己答的也就是查看是否资源加载出问题和JS执行报错这两方面，没有什么拓展，因此，以此文章系统学习一下白屏检测和修复方案

前言

页面白屏，绝对是让前端开发者最为胆寒的事情，特别是随着 SPA 项目的盛行，前端白屏的情况变得更为复杂且棘手起来（ 这里的白屏是指页面一直处于白屏状态 ）

要是能检测到页面白屏就太棒了，开发者谁都不想成为最后一个知道自己页面白的人😥

web-see 前端监控方案，提供了 采样对比 + 白屏修正机制 的检测方案，兼容有骨架屏、无骨架屏这两种情况，来解决开发者的白屏之忧

React因为版本迭代，很难找到比较新的，比较全的一些知识点和总结，这篇文章是我搜集了很多文章总结下来的比较全面的react相关题目和知识点,并在不断更新中～～

1. 对 React 的理解、特性

React 是靠数据驱动视图改变的一种框架，它的核心驱动方法就是用其提供的 setState 方法设置 state 中的数据从而驱动存放在内存中的虚拟 DOM 树的更新

更新方法就是通过 React 的 Diff 算法比较旧虚拟 DOM 树和新虚拟 DOM 树之间的 Change ，然后批处理这些改变。