Articles
Articles copied to clipboard
pfan123
经验文章
很多网友在选择系统时候喜欢问同一个问题： - 什么是“位“？ - 32位与64位有什么不同？ - 我应该用什么系统？32位和64位系统那个好？ 实际上回答这个问题之前首先应弄明白怎样区分自己的电脑是多少位，位的含义是什么？对于系统有什么影响？什么样的系统适于普通用户使用，什么样系统适于专业用户使用？ 首先排除一个误区并不是64位就好，也并不是64位就比32位快，内存为4G 或以上者可以考虑64位，但并不能说明就一定能发挥64位所有优势。 ## 64位系统和32位系统的区别 **操作系统只是硬件和应用软件中间的一个平台。** - 32位操作系统针对的32位的CPU设计 - 64位操作系统针对的64位的CPU设计 我们的 CPU 从原来的**8位，16位**，到现在的**32位和64位**。 CPU 处理计算的时候“数据”和“指令”是不同对待的。 **8位的CPU，一次只能处理一个8位的“数据”或者一个8位的"指令"。比如'00001101'.** 又比如：“+1”这个运算，你要先指示CPU做“+”，完成后再输入“1”数据给CPU。 > CPU 只负责计算，本身不具备智能。你输入一条指令（instruction），它就运行一次，然后停下来，等待下一条指令。 > > 这些指令都是二进制的，称为操作码（opcode），比如加法指令就是`00000011`。[[编译器](https://www.ruanyifeng.com/blog/2014/11/compiler.html)](https://www.ruanyifeng.com/blog/2014/11/compiler.html)的作用，就是将高级语言写好的程序，翻译成一条条操作码。...
# React 核心知识点 -- Virtual Dom 与 Diff React 最值得称道部分就是 Virtual DOM 和 Diff ，这两块核心点方便我们更好的抽象化的开发组件，提高渲染效率。 ## Virtual Dom Virtual DOM 是一种编程概念。在这个概念里， UI 以一种理想化的，或者说“虚拟的 DOM TREE”表现形式被保存于内存中，并通过如 ReactDOM 等类库使之与“真实的” DOM 同步。 >...
**`Performance`** 接口可以获取到当前页面中与性能相关的信息。它是 High Resolution Time API 的一部分，同时也融合了 Performance Timeline API、[Navigation Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API)、 [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) 和 [Resource Timing API](https://developer.mozilla.org/en-US/docs/Web/API/Resource_Timing_API)。 该类型的对象可以通过调用只读属性 [`Window.performance`](https://developer.mozilla.org/zh-CN/docs/Web/API/Window/performance) 来获得。 ``` // 兼容性写法 const performance = window.performance ||...
> **FIFO 、LRU、LFU**缓存算法算是比较简单的，它们的区别是当缓存空间满的时候，其对数据淘汰策略不同而已，这里的话我就选择了**JavaScript**来进行演示**FIFO 、LRU、LFU**的实现。希望能帮助大家更好的理解。 ## 1. FIFO 算法实现 **FIFO (First Input First Output)**可以说是最简单的一种缓存算法，通过设置缓存上限，当达到了缓存上限的时候，按照**先进先出**的策略进行淘汰，再增加进新的 key-value。 实现的可以创建一个`map`对象来保存键值信息 然后创建`keys`的数组用来进行淘汰判断 代码示例: ```javascript const FIFOCache = function (limit = 10) { this.limit = limit this.map...
早前接触和使用了公司内部登录/授权相关服务，现进行知识梳理，方便后续记忆回顾～ ## 传统用户账号密码登录 最传统的登录方法就是用户名密码校验登录了，流程简单，也有许多细节点，如下： - Cookie 存储要 HttpOnly `（HttpOnly = true，Cookie只允许服务端修改，JS 无法操作）`，避免因前端 XSS 漏洞导致 Cookie 泄露 - 密码不能存储明文，可存为加盐后的哈希值 `md5(md5(password)+salt)` - 所有服务器节点/进程需要能共享 Session，所以需要一个统一的 Session 存储层 - 尽量使用 Https 协议，防止中间人攻击 这种登录模式下，登录态只对当前域名起作用，如当前应用是 app1.oa.com。假设企业内有其它的应用...
目前许多业务开始往前端进行迁移，BFF（backends for frontends）的概念很多团队已开始逐渐尝试。让后端专注于提供统一的数据模型，将业务逻辑迁移到基于 Node 的 BFF 层中，让前端提供 API 接口，节省前后端联调成本，促使后端提供的 RPC 或者 HTTP 接口更加通用，减少修改后端工程，加快开发的效率。 但在 BFF 架构中，非常依赖 Node 端的稳定性，一旦 Node 端发生错误导致阻塞，造成很严重的后果，所以 Node 端的性能监控越来越有必要。 > 可以结合一些传统平台比如 [sentry](https://github.com/getsentry/sentry)、 [zabbix](https://github.com/zabbix/zabbix) 可以帮助构建稳定的前端实时监控部署环境。 ## Node 系统操作...
## 常见web 性能指标 - 首次绘制时间 (FP) - 即 First Paint，为首次渲染的时间点 - 首次内容绘制时间（FCP）：即First Contentful Paint，为首次有内容渲染的时间点 - 首次有效绘制时间（FMP） - 即First Meaning Paint，用户启动页面加载与页面呈现首屏之间的时间 - Dom ready - domContentLoadEventEnd - fetchStart - 页面完全加载耗时 -...
# JavaScript 模块的循环加载--转载 "循环加载"（circular dependency）指的是，`a`脚本的执行依赖`b`脚本，而`b`脚本的执行又依赖`a`脚本。 ``` // a.js var b = require('b'); // b.js var a = require('a'); ``` 通常，"循环加载"表示存在强耦合，如果处理不好，还可能导致递归加载，使得程序无法执行，因此应该避免出现。  但是实际上，这是很难避免的，尤其是依赖关系复杂的大项目，很容易出现`a`依赖b，`b`依赖`c`，`c`又依赖`a`这样的情况。这意味着，模块加载机制必须考虑"循环加载"的情况。 本文介绍JavaScript语言如何处理"循环加载"。目前，最常见的两种模块格式CommonJS和ES6，处理方法是不一样的，返回的结果也不一样。 ## 一、CommonJS模块的加载原理 介绍ES6如何处理"循环加载"之前，先介绍目前最流行的CommonJS模块格式的加载原理。 CommonJS的一个模块，就是一个脚本文件。`require`命令第一次加载该脚本，就会执行整个脚本，然后在内存生成一个对象。 ``` { id:...
在项目开发中我们会在 `webpack` 使用别名 `alias` 配置如： ```js alias: { "@globalCss": path.join(__dirname, "/src/assets/style/common"), "@util": path.join(__dirname, "/src/utils"), "@assets": path.join(__dirname, "/src/assets"), "@": path.join(__dirname, "/src") } ``` 方便我们引用不需要知道其详细路径，但会影响 `VS Code` 查找文件，使无法通过 `Command` 键 + 鼠标点击直接跳转到对应的文件：...
带宽（Bandwidth）单位用 bps(bit/s)，表示每秒钟传输的二进制位数。下载速率单位用 Bps(Byte/s) 表示，表示每秒钟传输的字节数。 **1Byte（字节）= 8bit（位），即下载速率 = 带宽/8** 通常 1M 带宽即指 **1Mbps = 1024Kbps = 1024/8KB/S = 128KB/S**， 一般情况下，考虑到还有其他损耗（计算机性能、网络设备质量、资源使用情况、网络高峰期等），实际速率一般小于这个速率。 #### 网速/带宽与下载速度对照表 常见宽带 | 理论最高速率（Mbps） | 理论最高速率（KB/S） | 常见下载速率（供参考） -- |...