px、em和rem 参考：https://www.cnblogs.com/webdragon/p/11185979.html https://www.runoob.com/w3cnote/px-em-rem-different.html 1. 三者的区别 （1）px 是固定的像素，一旦设置了就无法因为适应页面大小而改变。 （2）em 和 rem 相对于 px 更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局。 （3）em 是相对于其父元素来设置字体大小的，一般都是以的“font-size”为基准。这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的...

Ajax 1. 简介 Ajax 能够在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，实现局部刷新，大大降低了资源的浪费，是一门用于快速创建动态网页的技术。 2. 实现一个 Ajax AJAX 创建异步对象 XMLHttpRequest 操作 XMLHttpRequest 对象 （1）设置请求参数（请求方式，请求页面的相对路径，是否异步） （2）设置回调函数，一个处理服务器响应的函数，使用 onreadystatechange，类似函数指针 （3）获取异步对象的readyState属性：该属性存有服务器响应的状态信息。每当 readyState 改变时，onreadystatec...

Promise.any() 1. Promise.any 的作用 Promise.any() 是 ES2021 新增的特性，它接收一个 Promise 可迭代对象（例如数组）， 只要其中的一个 promise 成功，就返回那个已经成功的 promise 如果可迭代对象中没有一个 promise 成功（即所有的 promises 都失败/拒绝），就返回一个失败的 promise 和 AggregateError 类型的实例，它是 Error 的一个子类，用于把单一的错误集合在一起 const promises = [ Promise.reject('ERROR A'), Promis...

Promise.all() 参考：https://segmentfault.com/a/1190000010765655 1. Promise.all 简介 Promise.all 接收一个 promise 对象的数组作为参数，当这个数组里的所有 promise 对象全部变为resolve或 有 reject 状态出现的时候，它才会去调用 .then 方法,它们是并发执行的。 Promise.all(promiseArray) 方法是 Promise 对象上的静态方法，该方法的作用是将多个 Promise 对象实例包装，生成并返回一个新的 Promise 实例。 参数：promiseArr...

Promise.race() 顾名思义，Promse.race 就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3]) 里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。 let p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('success') },1000) }) let p2 = new Promise((resolve, reject) => { setTimeout(() => { reject...

Promise.allSettled() 相对于 Promise.all 需要所有 promise都成功时才 resolve或者有一个失败时即reject，Promise.allSettled 只关心所有 promise 是不是都被 settle 了，不管其是 rejected状态的 promise，还是非 rejected状态（即fulfilled）的 promise, 我都可以拿到它的最终状态并对其进行处理。 Promise.allSettled 的结果数组中可能包含以下两种格式的数据 {status:"fulfilled", value:result} 对于成功的响...

BFC 参考：https://zhuanlan.zhihu.com/p/25321647 1. 常见定位方案 在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案: 普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置自上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 浮动 (float) 在浮动布局中，元素首先按照普通流的位置出现，然后...

CSS 画一条0.5px的线 1. meta viewport <meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/> 1px的线通过 meta viewport中，scale的设置，可以缩放变成0.5倍，则得到0.5px的线。 但是viewport仅限于移动端。 2. transform: scale() #line{ border-bottom:1px solid bl...

常见图片格式的区别 参考：https://zhuanlan.zhihu.com/p/143649897 1. JPG格式 JPEG格式，也叫做JPG或JPE格式，是最常用的一种文件格式，Photoshop“存储为”命令中默认的图片格式就是JPEG，大部分手机相机拍照的照片也是JPE格式。 JPEG格式的压缩技术十分先进，能够将图像压缩在很小的储存空间，不过这种压缩是有损耗的，过度压缩会降低图片的质量。JPEG格式压缩的主要是高频信息，对色彩的信息保留较好，因此特别适合应用于互联网，可减少图像的传输和加载时间。 小结：有损压缩。 2. PNG格式 PNG也是常见的一种图片格式，它最重要的...

数组和链表的区别 1. 数组 1.1 数组的特点 （1）在内存中，数组是一块连续的区域； （2）数组需要预留空间； 在使用前需要提前申请所占内存的大小，这样不知道需要多大的空间，就预先申请可能会浪费内存空间，即数组空间利用率低； ps：数组的空间在编译阶段就需要进行确定，所以需要提前给出数组空间的大小（在运行阶段是不允许改变的） （3）在数组起始位置处，插入数据和删除数据效率低； 插入数据时，待插入位置的的元素和它后面的所有元素都需要向后搬移 删除数据时，待删除位置后面的所有元素都需要向前搬移 （4）随机访问效率很高，时间复杂度可以达到 O(1) 因为数组的内存是连续的，想要访问那个元素，直接...

最大子序和问题 给定一个数组，求出这个数组中最大连续子序列的和。例如：在数组[-2, 6, -1, 5, 4, -7, 2, 3]中，和最大的子序列是[6, -1, 5, 4]，它们的和是14。 export const searchMaxSum = (arr) => { const len = arr.length; if(len < 0){ return 0; } let sum = arr[0]; let maxSum = arr[0]; for(let i=1; i<len; i++){ sum = (sum > 0) ?...

代码执行顺序 1. 代码1 for(var i=0; i<5; i++){ setTimeout(function(){ console.log(i); }, 1000); } console.log(i) 输出结果：在一秒后输出 5 个5 原因：每次 for 循环的时候 setTimeout 都会执行，但是里面的 function 则不会执行，被放入任务队列。因此放了 5 次；for 循环的 5 次执行完之后不到1000 毫秒；1000 毫秒后全部执行任务队列中的函数，所以就是输出5 个 5。 2. 代码2 setTimeout(functio...

网络七层模型 参考：https://zhuanlan.zhihu.com/p/296670054 1. 物理层 解决两个硬件之间怎么通信的问题，常见的物理媒介有光纤、电缆、中继器等。它主要定义物理设备标准，如网线的接口类型、光纤的接口类型、各种传输介质的传输速率等。 它的主要作用是传输比特流（就是由1、0转化为电流强弱来进行传输，到达目的地后在转化为1、0，也就是我们常说的数模转换与模数转换）。这一层的数据叫做比特。 2. 数据链路层 在计算机网络中由于各种干扰的存在，物理链路是不可靠的。该层的主要功能就是：通过各种控制协议，将有差错的物理信道变为无差错的、能可靠传输数据帧的数据链路。...

Tree Shaking 参考：https://zhuanlan.zhihu.com/p/127804516 当 Javascript 项目达到一定体积时，将代码分成模块会更易于管理。但是，当这样做时，我们最终可能会导入实际上未使用的代码。Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。