生命周期

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的十倍