localhost与127.0.0.1的区别：

localhost：也叫local ，正确的解释是：本地服务器 127.0.0.1：在windows等系统的正确解释是：本机地址(本机服务器)

localhost：是不经网卡传输的，它不受网络防火墙和网卡相关的的限制。 127.0.0.1：是通过网卡传输的，它依赖网卡，并受到网络防火墙和网卡相关的限制。

JS复制文字到剪切板

execCommand方法

复制一段文字内容实现的方法是 document.execCommand，兼容性好，但是执行有限制，有性能隐患。需要文字选中才有效，通常做法是创建一个隐藏的输入框，赋值，选中，然后复制。虽然已经被弃用但目前仍可以生效。

// 创建输入框
const textarea = document.createElement('textarea');
document.body.appendChild(textarea);
// 隐藏此输入框
textarea.style.position = 'absolute';
textarea.style.clip = 'rect(0 0 0 0)';
// 赋值
textarea.value = '复制的文本内容...';
// 选中
textarea.select();
// 复制
document.execCommand('copy', true);

Clipboard API

无需浏览器权限申请，文字内容直接进入剪切板，代码简单，使用方便简单，同时是异步，不用担心阻塞。然而，兼容性不足有点遗憾。

if (navigator.clipboard) {
    navigator.clipboard.writeText(text);
}

使用 Git Bisect 快速找到第一個有問題的 Commit

 开始搜寻并标记好与坏的 Commit

git bisect start <坏的 Commit> <好的 Commit>


 开始后将自动 Checkout 到要检查的 Commit。


 请执行以下指令标记正常或错误

git bisect good

git bisect bad


 看到以下文字，代表找到第一个有问题的 Commit。

0675162a1b00bf8d2cdd535d4fc80e3a31196a8e is the first bad commit

css3 性能优化之 will-change 属性

will-change：顾名思义“我要变形了“，它的作用是“提高浏览器的页面渲染性能”

属性：

auto：默认值，实行标准浏览器优化。

scroll-position：表示开发者希望在不久后改变滚动条的位置或者使之产生动画。

contents：表示开发者希望在不久后改变元素内容中的某些东西，或者使它们产生动画。

<custom-ident>：表示开发者希望在不久后改变指定的属性名或者使之产生动画，比如transform 或 opacity

例子

下面告诉浏览器期望元素的变换属性发生变化，以便提前进行适当的优化。

.el {
    will-change: transform;
}

target="_blank"隐患

应用场景

通常使用于注重相关用户体验，在用户点击一个链接的时候在新窗口中打开。

<a href="https://www.baidu.com/" target="_blank">baidu</a>

安全隐患

使用该属性来打开新标签或者新窗口时，站点会通过window.opener API给了新页面对原有窗口的访问入口，并授予一些权限，其中window.location是没有被跨域限制拦截的。这可能就存在一个钓鱼的安全隐患。

解决方法

尽量不使用 target="_blank"，如果一定要用，需要加上 rel="noopener"或者 rel="noreferrer"。这样新窗口的 window.openner就是 null了，而且会让新窗口运行在独立的进程里，不会拖累原来页面的进程。

<a href="https://www.baidu.com/" target="_blank" rel="noopener">baidu</a>

或者使用以下可能触发弹出窗口阻止程序的 JavaScript 解决方法：

var otherWindow = window.open();
otherWindow.opener = null;
otherWindow.location = url;

有些浏览器对性能做了优化，即使不加这个属性，新窗口也会在独立进程打开。

https://mathiasbynens.github.io/rel-noopener/