- 博客(116)
- 收藏
- 关注
RSS订阅原创 Core web vitals(网站核心指标)
Largest Contentful Paint 显示最大内容元素所需时间 (LCP) – 载入速度。FCP的目标是加载网站中的第一个元素，但如果只针对第一个元素，用户仍然看不到重要内容。因此，谷歌开发了一个全新的指标——LCP。First Input Delay 首次输入延迟/封锁时间总计 (FID) – 可开始互动的时间。第一次输入与页面上的响应元素密切相关。这些响应组件可以是链接、按钮或弹出窗口。Cumulative Layout Shift 累计版面配置转移 (CLS) – 页面稳定性相关分析工
2022-03-07 17:03:56
547
原创 webpack devserver proxy到https接口的方案
1.增加本地hosts配置,ip 到域名2. 修改devserver 代理配置secure: false,changeOrigin: true,
2022-02-15 17:02:16
2182
原创 qiankun快照沙箱（IE和不支持proxy的低版本Chrome）下子应用干扰主应用样式问题
问题复现场景qiankun快照沙箱（IE和不支持proxy的低版本Chrome）下，进入子应用，f5刷新留在子应用，再点击切换到主应用的一个路由页面，此时如主应用该子页面是用代码分割懒加载加载css、js，则会发生主应用该子页样式丢失问题。问题分析在子应用跳转到主应用时，子应用的卸载需要一点点的时间，在这段时间内，主应用加载了，插入了 css，但是被子项目的 css 沙箱记录了，然后被移除了。父项目的事件监听也是一样的，所以需要在子项目卸载完成之后再跳转。其实是子应用切到主应用时，要进行快照沙箱的切
2021-12-22 15:28:12
1404
原创 vscode内prettier与eslint格式化规则冲突原因和方案剖析
问题现象vscode内，js、vue文件保存时格式化程序冲突，出现死循环。原因分析1、vscode的扩展eslint默认开启检测和修复代码。2、vscode 设置里可以配置onsave时开启formate，并配置格式化使用的程序，有时默认配置了用prettier格式化。3、prettier与eslint格式化规则冲突了。解决方案方案一：将用户与工作区的format on save都关掉（最快解）方案二：如不关闭format on save ，也可以将用户与工作区的其中一个的format on
2021-12-17 16:40:39
3745
原创 强制同步布局和布局抖动
优化通常一个页面有三个阶段：加载阶段、交互阶段和关闭阶段。加载阶段，是指从发出请求到渲染出完整页面的过程，影响到这个阶段的主要因素有网络和 JavaScript 脚本。交互阶段，主要是从页面加载完成到用户交互的整合过程，影响到这个阶段的主要因素是 JavaScript 脚本。关闭阶段，主要是用户发出关闭指令后页面所做的一些清理操作。加载阶段并非所有的资源都会阻塞页面的首次绘制，比如图片、音频、视频等文件就不会阻塞页面的首次渲染；而 JavaScript、首次请求的 HTML 资源文件、CSS 文
2021-11-25 12:36:32
946
原创 性能相关知识
CPU 性能测试工具-SPECSPEC 提供的 CPU 基准测试程序，就好像 CPU 届的“高考”，通过数十个不同的计算程序，对于 CPU 的性能给出一个最终评分。https://www.spec.org/cpu2017/results/cpu2017.htmlCPU 时钟简单运行一下 time 命令。它会返回三个值，第一个是 real time，也就是我们说的 Wall Clock Time，也就是运行程序整个过程中流逝掉的时间；第二个是 user time，也就是 CPU 在运行你的程序，在用户
2021-11-04 14:47:49
77
原创 nginx反向代理时设置Connection为“”的意义。
1、源头nginx代理从1.1.4版本开始支持http1.12、 HTTP1.1比 HTTP1.0的优化长连接(Persistent Connection)HTTP1.1支持长连接和请求的流水线处理，在一个TCP连接上可以传送多个HTTP请求和响应，减少了建立和关闭连接的消耗和延迟，在HTTP1.1中默认开启长连接keep-alive，一定程度上弥补了HTTP1.0每次请求都要创建连接的缺点。HTTP1.0需要使用keep-alive参数来告知服务器端要建立一个长连接。节约带宽HTTP1.0中存
2021-08-13 18:25:52
1276
1
原创 使用yarn全局安装包的一些问题
yarnyarn，有个“提取所有包的公共依赖到最外层"的优化机制。npmnpm默认只对“一个包内的公共依赖处理到内部顶层node_modulse内“。babel-plugin-transform-runtime/https://babeljs.io/docs/en/babel-plugin-transform-runtime/...
2021-08-09 17:52:22
419
原创 记一次下载文件filename中文汉字或者中文符号的坑
1、问题描述使用webpack,devserver,proxy,代理到服务端，调用一个下载文件流接口，发现一直报502。但是使用postman或者谷歌浏览器不走代理直接访问是可以的。正确时报文错误时：2、原因分析猜测：代理配置错误了排查n遍，代码无误，其他同一服务的接口正常。猜测：前端请求类型写错了各种content-type设置均尝试无效。猜测：后端安全拦截改接口，不让走代理了确认没做猜测：服务器安全策略限制了，不让走代理确认没做猜测：后端响应content-type,写死
2021-07-16 16:38:30
676
1
原创 不是非黑就是白，也不是非白就是黑
今天深入学习理解了一句话：不是非黑就是白，也不是非白就是黑。 exclude只保证你配置的这个一定黑，不代表其他都是白。include只保证你配置的这个一定白，不代表其他黑。
2021-07-06 18:24:43
95
原创 符号距离场渲染
片元着色器绘图方法论：符号距离场渲染第一步：定义距离。这里的距离，是一个人为定义的概念。在画圆的时候，它指的是点到圆心的距离；在画直线和线段的时候，它是指点到直线或某条线段的距离；在画几何图形的时候，它是指点到几何图形边的距离。第二步：根据距离着色。首先是用 smoothstep 方法，选择某个范围的距离值，比如在画直线的时候，我们设置 smoothstep(0.0, 0.01, d)，就表示选取距离为 0.0 到 0.01 的值。然后对这个范围着色，我们就可以将图形的边界绘制出来了。...
2021-07-05 12:45:00
400
原创 协同过滤（Collaborative Filtering）推荐算法
协同过滤（Collaborative Filtering）是经典的推荐算法，它充分利用了用户和物品之间已知的关系，为用户提供新的推荐内容。推荐系统会根据用户所处的场景和个人喜好，推荐他们可能感兴趣的信息和商品。第 i 行是第 i 个用户的数据，而第 j 列是用户对第 j 格物品的喜好程度。协同过滤*最直观的“口口相传”，主要思路就是利用已有用户群过去的行为或意见，预测当前用户最可能喜欢哪些东西。推荐依据和传播的路径，又可以进一步细分为基于用户的过滤和基于物品的过滤。用户相似度其中
2021-06-30 20:29:06
441
3
原创 马尔科夫过程中的状态转移
马尔科夫链它假设了一个“随机冲浪者”模型，冲浪者从某张网页出发，根据 Web 图中的链接关系随机访问。在每个步骤中，冲浪者都会从当前网页的链出网页中，随机选取一张作为下一步访问的目标。此外，PageRank 还引入了随机的跳转操作，这意味着冲浪者不是按 Web 图的拓扑结构走下去，只是随机挑选了一张网页进行跳转PageRank 是基于马尔科夫链的。PageRankpi 表示第 i 张网页，Mi 是 pi 的入链接集合，pj 是 Mi 集合中的第 j 张网页。PR(pj) 表示网页
2021-06-30 20:06:35
1124
1
原创 向量空间模型
实数域定义向量设有一个数的集合 F，它满足“F 中任意两个数的加减乘除法（除数不为零）的结果仍然在这个 F 中”，我们就可以称 F 为一个“域”。我们处理的数据通常都是实数，所以这里我只考虑实数域。而如果域 F 里的元素都为实数，那么 F 就是实数域。如果 x1，x2，……，xn∈F，那么 F 上的 n 维向量就是，向量中第 i 个元素，也称为第 i 个分量。Fn 是由 F 上所有 n 维向量构成的集合。向量中第 i 个元素，也称为第 i 个分量。Fn 是由 F 上所有 n 维向量构成的
2021-06-29 20:39:08
2806
原创 向量和矩阵概念
矩阵矩阵的几何意义是坐标的变换。如果一个矩阵存在特征向量和特征值，那么这个矩阵的特征向量就表示了它在空间中最主要的运动方向。矩阵由多个长度相等的向量组成，其中的每列或者每行就是一个向量。因此，我们把向量延伸一下就能得到矩阵（Matrix）。向量其实也是一种特殊的矩阵。如果一个矩阵是 n × m 维，那么一个 n × 1 的矩阵也可以称作一个 n 维列向量；而一个 1 × m 矩阵也称为一个 m 维行向量。从数据结构的角度看，向量是一维数组，那矩阵就是一个二维数组。如果二维数组里绝大多数元素都是 0
2021-06-29 16:15:43
12593
1
原创 WebGL基础
浏览器提供的 WebGL API 是 OpenGL ES 的 JavaScript 绑定版本，它赋予了开发者操作 GPU 的能力。WebGL 步骤创建 WebGL 上下文创建 WebGL 程序（WebGL Program）将数据存入缓冲区将缓冲区数据读取到 GPUGPU 执行 WebGL 程序，输出结果着色器（Shader）是用 GLSL 这种编程语言编写的代码片段。在绘图的时候，WebGL 是以顶点和图元来描述图形几何信息的。顶点就是几何图形的顶点，比如，三角形有三个顶点，四边形有四
2021-06-29 12:47:32
199
原创 通用计算机图形系统
通用计算机图形系统光栅（Raster）：几乎所有的现代图形系统都是基于光栅来绘制图形的，光栅就是指构成图像的像素阵列。像素（Pixel）：一个像素对应图像上的一个点，它通常保存图像上的某个具体位置的颜色等信息。帧缓存（Frame Buffer）：在绘图过程中，像素信息被存放于帧缓存中，帧缓存是一块内存地址。CPU（Central Processing Unit）：中央处理单元，负责逻辑计算。GPU（Graphics Processing Unit）：图形处理单元，负责图形计算。首先，数据经
2021-06-28 19:39:55
152
2
原创 可视化应用分类和工具
1、 选择绘制基本图形的工具svg库：snapsvg http://snapsvg.io/ 它提供的 API 能够非常方便地绘制各种 SVG 图形，交互式教学文档 http://snapsvg.io/start/Canvas 和 WebGL库：成熟的 2D 渲染引擎：https://github.com/fabricjs/fabric.jshttps://github.com/pixijs/pixijs2D/3D 引擎：https://spritejs.org/#/https://gi
2021-06-28 17:27:48
178
原创 node-sass根据sass-binary-site地址下载.node的逻辑
1、取getBinaryUrl路径function getBinaryUrl() { var site = getArgument('--sass-binary-site') || process.env.SASS_BINARY_SITE || process.env.npm_config_sass_binary_site || (pkg.nodeSassConfig && pkg.nodeSassC.
2021-06-08 17:48:59
1028
原创 qiankun-fix clearInterval bug for ie 10 and 11
https://github.com/umijs/qiankun/pull/1490/files1、兼容2、可能跟垃圾回收有关和定时器机制有关。
2021-06-07 18:33:00
97
原创 git快速creating-ssh-keys
ssh-keygen -t rsa -C "[email protected]"https://confluence.atlassian.com/bitbucketserver/creating-ssh-keys-776639788.html
2021-06-07 16:22:57
80
原创 IOS下WKWEBVIEW的H5兼容问题总结
下面这些问题是UIWEBVIEW没有的1、不支持alert写了也不弹出2、动态link或者script标签的，crossorigin得去掉不然加载失败
2021-05-31 19:50:58
625
原创 webpack5和webpack-dev-server4.3升级的兼容问题-开发环境项目根路径静态资源丢失-原因-解决
一、webpack开发环境，devserver上能直接访问内容原因。注意，只有webpack构建入口关联的内容，才有输出，有输出才可挂到内存。然后，webpack-dev-middleware，利用中间件挂载路径方式，给webpack-dev-server内express，让我们访问。二、webpack-dev-server 4.3-beta比3.0大改动，影响webpack的静态资源挂载。4.3-beta3.x...
2021-05-28 20:28:59
552
原创 qiankun在ie10、11下虚拟dom兼容问题解决
ie 下，问题原因找到了，qiankun源码有bug，在浏览器不支持shadow dom时，有的地方源码会做自动降级处理和提示，但是，有个地方漏了。 里面应该加个，浏览器到底支持不的判断，不可直接根据配置取shadowdom,...
2021-05-28 17:59:03
1118
原创 用曲线和参数方程描述曲线的方法
用曲线和参数方程描述曲线的方法。用向量描述比较简单直接，先确定起始点和起始向量，然后通过旋转和向量加法来控制形状，就可以将曲线一段一段地绘制出来。但是它的缺点也很明显，就是数学上不太直观，需要复杂的换算才能精确确定图形的位置和大小。使用参数方程能够避免向量绘制的缺点，因此是更常用的绘制方式。使用参数方程绘制曲线时，我们既可以使用有规律的曲线参数方程来绘制这些规则曲线，还可以使用二阶、三阶贝塞尔曲线来在起点和终点之间构造平滑曲线。...
2021-05-25 15:43:04
1135
原创 向量的乘法，包括点乘与叉乘
点乘的几何意义是向量 a 与它在向量 b 所在的轴的投影向量的乘积，物理意义是力向量产生的位移向量所做的功。a•b = a1*b1 + a2*b2 + ... + an*bn叉乘的几何意义是向量 a 和向量 b 构成的平行四边形的面积，物理意义是力产生的力矩。我们还要记住，把向量归一化以后，我们就可以通过向量的点乘与叉乘快速求出向量夹角的正弦和余弦值。三维a X b = [y1 * z2 - y2 * z1, - (x1 * z2 - x2 * z1), x...
2021-05-25 15:13:18
2248
原创 工作内容 、学习方向、 兴趣这三者结合起来是工作最理想的状态
大家在工作的同时，也要挖掘做的事情中能够让自己成长的点，边做事边提升。平时的学习也不要脱离公司的需要。如果能够把公司工作内容 、学习方向、 兴趣这三者结合起来是工作最理想的状态吧。这样一举多得的事情，何乐而不为呢。所以我觉得，学习不要盲目，围绕做的事情学是最好的。...
2021-05-24 18:05:08
99
原创 docker心得
1、运行nginx要特殊docker 容器默认会把容器内部第一个进程，也就是pid=1的程序作为docker容器是否正在运行的依据，如果docker 容器pid挂了，那么docker容器便会直接退出。nginx -g 'daemon off;'2、修改nginx.conf权限要特殊echo "$(sed 's/192.168.1.1/192.168.1.254/g' /etc/resolv.conf)" > /etc/resolv.conf即可3、sed使用变量要用双...
2021-05-11 14:57:47
138
1
原创 大前端方向
前端核心标准和基础技术本专场将邀请相关技术专家向大家介绍前端领域核心标准和基础技术的最新发展，分享行业中对新标准和新特性的探索和实践案例。前端质量保障线上质量是业务的生命线，直接影响业务的发展。如何保障前端质量，让我们来看看业界的优秀实践。小程序开发实践小程序开发步入 2021 年，如何高效率地开发出高性能，跨多小程序平台的小程序，依然是小程序开发者面临的主要挑战，本专场将邀请一线专家，为大家带来解决之道。移动技术新趋势本专题将结合业务场景，为你带来经典的性能体...
2021-05-06 10:10:14
240
1
原创 git 修改最近一次的提交作者
git commit --amend --author="John Doe <[email protected]>"批量的：git change-commits GIT_AUTHOR_NAME "old name" "new name"git change-commits GIT_AUTHOR_EMAIL "[email protected]" "[email protected]" HEAD~10..HEAD
2021-04-27 15:09:06
204
原创 npm 命令小结
npm install --verbose 在安装命令添加参数--verbose看打印详细信息npm install -g dahai@npm:@myName/dahai@beta 安装@myName/dahai的beta版本，安装在全局node_modules下。yarn config set network-timeout 600000 -gyarn --update-checksumsyarn cache cleannpm set regi...
2021-04-23 12:25:24
627
原创 antlr4使用
jsantlr4 -Dlanguage=JavaScript PlayScript.g4javaantlr4 PlayScript.g4javac Hello*.javagrun Hello tokens -tokens hello.play或者：grun Hello r -gui生成visitorantlr4 -Dlanguage=JavaScript -visitor PlayScript.g4
2021-04-21 20:49:40
114
原创 docker保存和创建镜像
基于容器创建docker commit -m "node_12_13" -a "lxh" 378af20aa0d8 node_12_13:v2导出和保存创建docker save -o 1.tar node_12_13:v2docker load < 1.tar查看容器id和容器command
2021-04-12 10:38:51
90
原创 V8编译器
V8 这个词，原意是 8 缸的发动机，换算成排量，大约是 4.0 排量，属于相当强劲的发动机了。它的编译器，叫做 Ignition，是点火装置的意思。而它最新的 JIT 编译器，叫做 TurboFan，是涡轮风扇发动机的意思。2008 年 V8 发布时，就已经比当时的竞争对手快 10 倍了；到目前，它的速度又已经提升了 10 倍以上。从中你可以看到，编译技术有多大的潜力可挖掘！对 JavaScript 编译器来说，它最大的挑战就在于，当我们打开一个页面的时候，源代码的下载、解析（Par.
2021-04-06 19:36:19
481
原创 代码生成过程-编译最后一步
编译的最后一步，也就是生成目标代码，则必须是跟特定 CPU 架构相关的。这就是编译器的后端。不过，后端不只是简单地生成目标代码，它还要完成与机器相关的一些优化工作，确保生成的目标代码的性能最高。看看编译器是如何通过指令选择、寄存器分配、指令排序和基于机器代码的优化等步骤，完成整个代码生成的任务的编译器后端的任务：生成针对不同架构的目标代码。生成针对不同 CPU 的目标代码int foo(int a, int b){ return a + b + 10;}...
2021-04-06 16:17:07
750
原创 编译器-代码优化
两个维度第一个分类维度，是机器无关的优化与机器相关的优化。机器无关的优化与硬件特征无关，比如把常数值在编译期计算出来（常数折叠）。而机器相关的优化则需要利用某硬件特有的特征，比如 SIMD 指令可以在一条指令里完成多个数据的计算。第二个分类维度，是优化的范围。本地优化是针对一个基本块中的代码，全局优化是针对整个函数（或过程），过程间优化则能够跨越多个函数（或过程）做优化。本地优化是针对一个基本块中的代码，全局优化是针对整个函数（或过程），过程间优化则能够跨越多个函数（或过程）做优化。.
2021-04-06 13:13:38
673
原创 splice的妙计
> a = [1,2,3,4,5,6,7][ 1, 2, 3, 4, 5, 6, 7 ]> [...a.splice(0,2), ...a.splice(1,2), ...a][ 1, 2, 4, 5, 3, 6, 7 ]
2021-04-02 18:05:31
137
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人