导航

生命周期

window.onload 和 document.onDOMContentLoaded 有什么区别？

//当页面所有资源加载完成，则触发（涉及到所有资源，所以触发时机较晚）。
window.onload = function() {
  console.log("window loaded");
};
//DOM 结构解析完成（并不是页面上资源加载完成，而是 dom 结构渲染完成）。
document.addEventListener("DOMContentLoaded", function() {
  console.log("DOMContentLoaded");
});

图片

图片转为base64为什么会变大

Base64 是基于 64 个可打印字符来表示任意二进制数据的方法。

Base64 通常用于数据加密或签名后转换为可见字符串，文本资源(如 HTML 和 CSS 中)中嵌入图片文件等等。

原理是把二进制数据每 3 个字节重新划为 4 组(每三个 8 位字节,即总共24位,可以由四个 6 位 Base64 数值表示)，然后作为索引查编码表，获得相应的字符，从而得到编码后的字符串。

经过 Base64 编码后数据会增大，因为每 3 个字节，重新划分为 4 个字节，数据大小会变为原来的 4/3, 因此数据增大 1/3。

Base64 是一种通过索引查表的编码方法，不能用于加密。

讲一讲你平常用到的前端优化

降低请求量: 合并资源，减少 HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。
加快请求速度: 预解析 DNS，减少域名数，并行加载，CDN 分发。
缓存: HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存 localStorage。
渲染: JS/CSS 优化，加载顺序，服务端渲染，pipeline

**为什么普通 for 循环的性能远远高于 forEach 的性能，请解释其中的原因。**

for 循环按顺序遍历，forEach 使用 iterator 迭代器遍历

下面是一段性能测试的代码：

let arrs = new Array(100000);
console.time('for');
for (let i = 0; i < arrs.length; i++) {
};
console.timeEnd('for');
console.time('forEach');
arrs.forEach((arr) => {
});
console.timeEnd('forEach');

for: 2.263ms
forEach: 0.254ms

在10万这个级别下，forEach的性能是for的十倍

for: 2.263ms forEach: 0.254ms

在100万这个量级下，forEach的性能是和for的一致

for: 2.844ms forEach: 2.652ms

在1000万级以上的量级上，forEach的性能远远低于for的性能

for: 8.422ms forEach: 30.328m

我们从语法上面来观察：

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

可以看到 forEach 是有回调的，它会按升序为数组中含有效值的每一项执行一次 callback，且除了抛出异常以外，也没有办法中止或者跳出 forEach 循环。那这样的话执行就会额外的调用栈和函数内的上下文。

而 for 循环则是底层写法，不会产生额外的消耗。

在实际业务中没有很大的数组时，for 和 forEach 的性能差距其实很小，forEach 甚至会优于 for 的时间，且更加简洁，可读性也更高，一般也会优先使用 forEach 方法来进行数组的循环处理。