BUG汇总

2019-08-23  本文已影响0人  hellomyshadow
  1. echartsdiv 默认 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);  //开始渲染
});
  1. 控制滚动条平滑滚动
// 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 中,等待下次轮询
  1. 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";
      
上一篇 下一篇

猜你喜欢

热点阅读