Code Monkey home page Code Monkey logo

articles's People

Contributors

i-zxl avatar

Watchers

 avatar

articles's Issues

Elasticsearch 日常问题处理

elasticsearch 安装;
java -version 查看版本, 并且安装java版本;
config/elasticsearch.yml 配置elasticsearch

集群配置文档:

node.master: true // 有资格成为主节点
node.data: true // 配置主机为数据节点 当其他主机的node.master和node.data都为false时,该节点作为负载均衡节点

安装插件:
https://www.cnblogs.com/yuhuLin/p/7018858.html

插件链接不上es:
https://blog.csdn.net/qq_33863843/article/details/78864618

分区没分配问题解决:
http://www.bymost.com/ES/es-unassigned-error.html

http://localhost:9200/_cat/shards?h=index,shard,prirep,state,unassigned.reason

// N: node节点数, R:副分片数; 导致出现未分配的节点数产生
N >= R + 1

修改副分片数:
_settings
{"number_of_replicas":0}

索引创建:
https://blog.csdn.net/weixin_41888013/article/details/82788869

中文教程:
https://es.xiaoleilu.com/020_Distributed_Cluster/15_Add_an_index.html

es日常操作

/_cluster/health 集群健康

/_cat/shards 查看集群下所有分片

/_cat/indices 查看集群下所有索引

/_cat/nodes 机器节点信息

_cat/allocation?v 查看磁盘空间

降低磁盘使用空间: (貌似没有用,磁盘空间并没有降下来)

curl -XDELETE 'http://eshost:port/demo-2018.01.0.1'
curl -XPOST 'http://eshost:port_forcemerge?only_expunge_deletes=true'

执行完delete之后,es会将对应索引标记为“已删除”, 执行 forcemerge,暴力合并过程中一个不包含删除索引的文档被创建

ES 服务重启(滚动重启)

总有一天你会需要做一次集群的滚动重启——保持集群在线和可操作,但是逐一把节点下线,重启

常见的原因:Elasticsearch 数据量主键变大,kibana链接超时。不管哪种情况,都要有一种特别的方法来完成一次滚动重启。

正常情况下,Elasticsearch 希望你的数据被完全的复制和均衡的分布。如果你手动关闭了一个节点,集群会立刻发现节点的丢失并开始再平衡。如果节点的维护是短期工作的话,这一点就很烦人了,因为大型分片的再平衡需要花费相当的时间(想想尝试复制 1TB 的数据——即便在高速网络上也是不一般的事情了)。

我们需要的是,告诉 Elasticsearch 推迟再平衡,因为对外部因子影响下的集群状态,我们自己更了解。操作流程如下:

可能的话,停止索引新的数据。虽然不是每次都能真的做到,但是这一步可以帮助提高恢复速度。
禁止分片分配。这一步阻止 Elasticsearch 再平衡缺失的分片,直到你告诉它可以进行了。如果你知道维护窗口会很短,这个主意棒极了。你可以像下面这样禁止分配:

PUT /_cluster/settings
{
    "transient" : {
        "cluster.routing.allocation.enable" : "none"
    }
}

关闭单个节点。

ps aux | grep elasticsearch  // 查询es进程
kill -9 esPid

执行维护/升级。
重启节点,然后确认它加入到集群了。

cd es/path
./elasticsearch -d

用如下命令重启分片分配:

PUT /_cluster/settings
{
    "transient" : {
        "cluster.routing.allocation.enable" : "all"
    }
}

分片再平衡会花一些时间。一直等到集群变成 绿色 状态后再继续。

重复操作剩余节点。
到这步你可以安全的恢复索引了(如果你之前停止了的话),不过等待集群完全均衡后再恢复索引,也会有助于提高处理速度。

如何解决unassigned shards

清理索引

下边两个脚本均可以删除对应的es的索引,如有需要可以参考修改之后运用
nodejs版本
shell简版

释放磁盘空间

找过好几种方式好像都不能解决,目前只有到机器上删除最老的,没有用的数据日志文件。如果有大神知道如何处理,欢迎在评论区评论。

Chrome浏览器页面占用CPU过高,解决办法

背景

当我们一个页面陷入卡死状态,关也关不掉,这是一个特别影响心情的场景

解决办法

  • 打开浏览器tab->窗口
  • 窗口->任务管理器,查看任务管理器,
  • 找到对应占用CPU过高的页面,选中并结束进程;

动图

记录一个兼容性问题

背景:
需要实现一个抽奖卡片翻转的动画,父级元素正常的文档流排布,子元素写 transform 动画
···js
transform: rotate3d(0, 1, 0, 10deg);
···js

在安卓手机上动画正常显示,当在IOS手机上时,子元素的节点旋转过程会从父节点的元素中穿过去
现象跟张鑫旭文章效果一样,但是解决方案不同,
https://www.zhangxinxu.com/wordpress/2016/08/safari-3d-transform-z-index/

我的父级元素节点增加

// 父级元素
position: relative;
width: 100%;
height: 100%;
border-radius: 40px;
box-shadow: 0 0 64px 0 rgba(255,195,90,0.50);

// 子元素动画

 0% {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
    transform: rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  40% {
    -webkit-transform: rotate3d(0, 1, 0, -20deg);
    transform: rotate3d(0, 1, 0, -20deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  60% {
    -webkit-transform: rotate3d(0, 1, 0, 10deg);
    transform:  rotate3d(0, 1, 0, 10deg);
  }

  80% {
    -webkit-transform:  rotate3d(0, 1, 0, -5deg);
    transform: rotate3d(0, 1, 0, -5deg);
  }

  100% {
    -webkit-transform:  rotate3d(0, 1, 0, 0deg);
    transform: rotate3d(0, 1, 0, 0deg);
  }

现象是:
image

因为没有设置fixed 定位,所以没办法直接使用 translateZ 将父级元素的的层级提高,但是直接可在父级元素上增加:z-index: 1(其实非0即可)

实现高斯模糊效果

image

设计思路,将背景图缩小为16*16的图片,减小计算图片大小的像素点。

/**
 * 
 * 高斯模糊模块
 */

/**
 * -------------------------------------------
 * @param { ImageData } imgData 图片数据
 * @param { Number }    radius  模糊半径
 * @param { Number }    sigma   权重参数
 * @return { ImageData }
 */
export const gaussBlur = function(imgData, radius, sigma) {
  const pixes = imgData.data;
  const width = imgData.width;
  const height = imgData.height;
  const gaussMatrix = [];
  let gaussSum = 0;
  let x;
  let y;
  let r;
  let g;
  let b;
  let a;
  let i;
  let j;
  let k;

  radius = Math.floor(radius) || 3;
  sigma = sigma || radius / 3;

  a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
  b = -1 / (2 * sigma * sigma);

  // 生成高斯矩阵
  for (i = 0, x = -radius; x <= radius; x++, i++) {
    g = a * Math.exp(b * x * x);
    gaussMatrix[i] = g;
    gaussSum += g;
  }

  // x 方向一维高斯运算
  for (y = 0; y < height; y++) {
    for (x = 0; x < width; x++) {
      r = g = b = a = 0;
      gaussSum = 0;
      for (j = -radius; j <= radius; j++) {
        k = x + j;
        if (k >= 0 && k < width) {
          // 确保 k 没超出 x 的范围
          // r,g,b,a 四个一组
          i = (y * width + k) * 4;
          r += pixes[i] * gaussMatrix[j + radius];
          g += pixes[i + 1] * gaussMatrix[j + radius];
          b += pixes[i + 2] * gaussMatrix[j + radius];
          // 计算权和
          gaussSum += gaussMatrix[j + radius];
        }
      }
      i = (y * width + x) * 4;
      // 计算加权均值
      pixes[i] = r / gaussSum;
      pixes[i + 1] = g / gaussSum;
      pixes[i + 2] = b / gaussSum;
    }
  }
  // y 方向一维高斯运算
  for (x = 0; x < width; x++) {
    for (y = 0; y < height; y++) {
      r = g = b = a = 0;
      gaussSum = 0;
      for (j = -radius; j <= radius; j++) {
        k = y + j;
        if (k >= 0 && k < height) {
          // 确保 k 没超出 y 的范围
          i = (k * width + x) * 4;
          r += pixes[i] * gaussMatrix[j + radius];
          g += pixes[i + 1] * gaussMatrix[j + radius];
          b += pixes[i + 2] * gaussMatrix[j + radius];
          gaussSum += gaussMatrix[j + radius];
        }
      }
      i = (y * width + x) * 4;
      pixes[i] = r / gaussSum;
      pixes[i + 1] = g / gaussSum;
      pixes[i + 2] = b / gaussSum;
    }
  }
  return imgData;
};

/**
 * 对远程图片进行高斯模糊,并输出为指定尺寸
 * @deprecated
 * 新的API会在 utils/blur 中提供
 * ------------------------------------
 * @param { String }    URL 图片URL
 * @param { Number }    w   输出宽度
 * @param { Number }    h   输出高度
 * @param { Number }    r   模糊半径
 * @return {Promise<String>}  返回图片的 base64 URL
 */
export const blurG = (URL, w = 16, h = 16, r = 12) => {
  return new Promise((resolve, reject) => {
    const IMG = new Image();
    IMG.crossOrigin = '*';
    IMG.onload = function() {
      const Canvas = document.createElement('CANVAS');
      try {
        Canvas.width = w;
        Canvas.height = h;
        const ctx = Canvas.getContext('2d');
        ctx.fillStyle = '#fff';
        ctx.fillRect(0, 0, w, h);
        ctx.drawImage(IMG, 0, 0, w, h);

        const d = ctx.getImageData(0, 0, w, h);
        const gd = gaussBlur(d, r, 0);
        ctx.putImageData(gd, 0, 0);
        resolve(Canvas.toDataURL());
      } catch (e) {
        reject({});
      }
    };
    IMG.src = URL;
  });
};

尽管上边执行本身还是挺快的,但是涉及到原图的加载,可以使用小图的加载,优化执行速度。

chrome 89 浏览器升级之后不再支持noopener共享sessionStorage

背景

线上的项目A突然在新开页跳转的时候都跳转到登录页面了,怎么回事?

问题排查

首先开始断点定位问题,确定到因为在路由拦截器中,从 sessionStorage 中获取用户登录状态,如果没有就跳转到登录页面。然后查看了最近的代码提交记录,也没有人做什么修改。再次开始打断点调试,点击跳转的时候新开页面里 application 中 cookie、localstorage状态都有,看到 localStorage 中所有内容为空。

https://intranetproxy.alipay.com/skylark/lark/0/2021/png/275143/1616725056762-2192ef3d-9d0b-4721-afdb-e40ee08c1679.png

开始找身边的人复现一下这个问题,有一位同学复现不出来,看了一下浏览器版本是88版本,看了一下我的版本是 89 版本。很大概率是因为浏览器升级导致,一般浏览器升级都会有比较简单和通用的解法。
看了一下浏览器的变更记录,确实有一条 “Stop cloning sessionStorage for windows opened with noopener

https://intranetproxy.alipay.com/skylark/lark/0/2021/png/275143/1616725378742-4b9bf177-cdd3-4e41-b4c5-9cc26066b013.png

https://intranetproxy.alipay.com/skylark/lark/0/2021/png/275143/1616725488391-e62dcf92-ceef-4fb8-be52-7e11ec95eeff.png

原因

在规范文档中,在target='_blank' 的新开页面,默认是 rel='noopener', 来提高网页的安全性,必须通过rel='opener'来指定页面之间的关系,而浏览器在之前的版本中,noopener 是允许获取获取相关的sessionStorage, 目前浏览器逐步在支持规范。

https://intranetproxy.alipay.com/skylark/lark/0/2021/png/275143/1616726312932-fdd09401-8906-4284-a9d2-648cebab3e8c.png

解法方法

其实弄清楚了原因,改起来还是非常简单的

  1. window.open()打开新页面
  2. target='_blank' 中加入rel='opener'

总结

虽然这次 chrome 升级对系统稍微有点影响,但是发现浏览器的支持逐步向规范靠近,是非常不错的。对于平时项目中的开发还是多注重一下基础,更加深入了解背后的原因。

相关链接
https://www.chromestatus.com/features/schedule?spm=ata.13261165.0.0.73b85f5dG5MZHo
https://www.chromestatus.com/feature/5679997870145536
whatwg/html#4078
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types
https://trac.webkit.org/changeset/237144/webkit/

通过斐波那契数列的实现及优化了解尾递归

实现斐波那契数列:

const fb = (n) => {
  if (n<=2) {
     return 1;
  } 
  return fb(n-1)+fb(n-2);
}

通过普通的递归函数,我们很快就能写出一个递归函数的实现,但是这种实现方式带来的问题很明显,如果计算第n个函数的斐波那契数,就会执行N次 fb(n-1) + fb(n-2) ,而且是指数型添加调用栈,时间复杂度就变成:O(2^N)。特别容易栈溢出,导致页面卡死。

既然时间复杂度这么高,进行一系列斐波那契数列优化。

  • 动态规划法
function f (n) {
  let sum = 1
      n1 = 1,
      n2 = 1;
  for(let i = 3; i <= n; i++) {
    sum = n1 + n2;
    n1 = n2;
    n2 = sum;
  }
  return sum
}
  • 动态规划法es6缩减版
const f = (n) => {
  let n1 = 1, n2 = 1;
  for(let i = 3; i <=n; i++) {
    [n1, n2] = [n2, n1+n2]
  }
  return n2
}

通过一次循环解决,减少不必要的复杂运算,时间复杂度是O(N); 这已经很不错了,时间复杂度降下来了。

  • memoization 缓存,根据动态规划法,每次运算其实缓存三个计算结果,f(n)、f(n-1)、f(n-2), 实际整体下来缓存了所有的裂波那切数列。有点以空间换时间的感觉。还是不是很理想。
const fb = (function () {
  var memoization = {};
  return function (n) {
    if(n==1 || n==2) {
      return n;
    }
    if (!memoization[n-1]) {
      memoization[n-1] = fb(n-1)
    }
    if (!memoization[n-2]) {
      memoization[n-2] = fb(n-1)
    }
    return memoization[n] = memoization[n-1] + memoization[n-2];
 }
})()
  • 尾递归写法, es中严格模式下,可以高效实现递归优化。时间复杂度O(N), 写法如下:
const fb = (n, first=1, second=1) => {
  if (n<=2) {
    return second;
  }
  return fb(n-1, second, second + first)
}

什么是尾递归?

若函数的尾部位置调用自身,或者调用本身的一个其他函数,则这种情况就被称为尾递归。
尾递归函数相对于普通递归函数的特征:

  1. 尾部调用自身;
  2. 可以通过优化,使得计算只占用常量栈空间。

尾递归函数依然是递归函数,如果不做优化操作,依然会跟普通递归函数一样出现”栈溢出“的情况;之所以尾递归函数不会爆栈溢出是因为解析器帮忙做了优化。

Redux 源码解读

Redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。
Redux 核心的特点是:

整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中
Store 是只读的。唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
使用纯函数来执行修改。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.