BUG汇总

1. echarts：div 默认 display:none，改为 display:block 时，echarts 无法识别 div 的宽高，只显示 100px，如果直接重新绘制 resize()，会发现图表从小到大的过程，体验性不好！

this.$nextTick(() => {  //等待浏览器下一次轮询，此时 div 已经 none --> block
    let container = document.getElementById(containerId);
    let myChart = echarts.init(container, "light");
    myChart.clear();  //清空画布，防止重新绘制时出现从小到大的过程
    myChart.resize();  //重新绘制，让echarts识别 div 新的宽高
    myChart.setOption(option, config);  //开始渲染
});

2. 控制滚动条平滑滚动

// 1. 滚动条在哪个元素上，就获取哪个元素的DOM元素
const dom = document.body;
// 2. 滚动到顶部
dom.scrollTo({
    top: 0, 
    behavior: "smooth"
})
// 3. 获取可滚动的总高度
let scrollHeight = dom.scrollHeight;
// 4. 滚动到底部
dom.scrollTo({
    top: scrollHeight, 
    behavior: "smooth"
})
// 5. 对于Vue，如果DOM高度是变化的，需要放在 this.$nextTick 中，等待下次轮询

3. target="_blank" 的安全性与性能
   <a target="_blank"> 可以打开一个新窗口，在新窗口的页面能通过 window.opener 获取到来源页面的window对象，即使跨域了也一样！某些属性的访问被拦截，是因为跨域安全策略的限制。
   • 新窗口中通过修改 window.opener.location 的值，神不知鬼不觉地把源窗口的地址篡改了，比如伪装成登录页，让用户以为登陆失效了，盗取用户的账号密码。
   • 性能问题 target="_blank"打开的新窗口跟原来的页面窗口共用一个进程。如果新窗口页面执行了性能不好的JS代码，占用大量系统资源，那么原来的窗口页面也会受到影响。
   • 解决方案：如果一定要用target="_blank"，需要加上属性 rel="noopener" 或 rel="noreferrer"。这样新窗口的window.opener = null，而且会让新窗口运行在独立的进程中，不会拖累源窗口的进程（有些浏览器做了性能优化，新开窗口默认就在独立进程打开）

     <a target="_blank" rel="noopener noreferrer">打开</a>
     

   • 对于JS打开的新窗口，则手动设置为null

     var newWindow = window.open();  // 受浏览器限制，无法频繁打开新窗口
     newWindow.opener = null;
     newWindow.location = "https://weibo.com/";
     newWindow.target = "_blank";