i-zxl / articles Goto Github PK
View Code? Open in Web Editor NEW前端博客,关注基础学习和优化
前端博客,关注基础学习和优化
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
/_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,暴力合并过程中一个不包含删除索引的文档被创建
总有一天你会需要做一次集群的滚动重启——保持集群在线和可操作,但是逐一把节点下线,重启
常见的原因: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"
}
}
分片再平衡会花一些时间。一直等到集群变成 绿色 状态后再继续。
重复操作剩余节点。
到这步你可以安全的恢复索引了(如果你之前停止了的话),不过等待集群完全均衡后再恢复索引,也会有助于提高处理速度。
下边两个脚本均可以删除对应的es的索引,如有需要可以参考修改之后运用
nodejs版本
shell简版
找过好几种方式好像都不能解决,目前只有到机器上删除最老的,没有用的数据日志文件。如果有大神知道如何处理,欢迎在评论区评论。
背景:
需要实现一个抽奖卡片翻转的动画,父级元素正常的文档流排布,子元素写 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);
}
因为没有设置fixed 定位,所以没办法直接使用 translateZ 将父级元素的的层级提高,但是直接可在父级元素上增加:z-index: 1(其实非0即可)
设计思路,将背景图缩小为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;
});
};
尽管上边执行本身还是挺快的,但是涉及到原图的加载,可以使用小图的加载,优化执行速度。
线上的项目A突然在新开页跳转的时候都跳转到登录页面了,怎么回事?
首先开始断点定位问题,确定到因为在路由拦截器中,从 sessionStorage 中获取用户登录状态,如果没有就跳转到登录页面。然后查看了最近的代码提交记录,也没有人做什么修改。再次开始打断点调试,点击跳转的时候新开页面里 application 中 cookie、localstorage状态都有,看到 localStorage 中所有内容为空。
开始找身边的人复现一下这个问题,有一位同学复现不出来,看了一下浏览器版本是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
在规范文档中,在target='_blank' 的新开页面,默认是 rel='noopener', 来提高网页的安全性,必须通过rel='opener'来指定页面之间的关系,而浏览器在之前的版本中,noopener 是允许获取获取相关的sessionStorage, 目前浏览器逐步在支持规范。
其实弄清楚了原因,改起来还是非常简单的
虽然这次 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
}
const f = (n) => {
let n1 = 1, n2 = 1;
for(let i = 3; i <=n; i++) {
[n1, n2] = [n2, n1+n2]
}
return n2
}
通过一次循环解决,减少不必要的复杂运算,时间复杂度是O(N); 这已经很不错了,时间复杂度降下来了。
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];
}
})()
const fb = (n, first=1, second=1) => {
if (n<=2) {
return second;
}
return fb(n-1, second, second + first)
}
什么是尾递归?
若函数的尾部位置调用自身,或者调用本身的一个其他函数,则这种情况就被称为尾递归。
尾递归函数相对于普通递归函数的特征:
尾递归函数依然是递归函数,如果不做优化操作,依然会跟普通递归函数一样出现”栈溢出“的情况;之所以尾递归函数不会爆栈溢出是因为解析器帮忙做了优化。
chrome 调试工具-手把手教程
https://developer.chrome.com/docs/devtools/performance/#find_the_bottleneck
dns-prefetch
dns查询优化,做dns预解析
关于缓存:
JS资源缓存:公共资源做localStorage缓存
HTML cache:缓存html DOM树,实现二刷无内容刷新。
体验:
骨架屏优化
Redux 是 JavaScript 状态容器,提供可预测化的状态管理。
Redux 核心的特点是:
整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中
Store 是只读的。唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。
使用纯函数来执行修改。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.