- 博客(57)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 浏览器渲染原理简析
(参考文章)线程与进程的概念进程是并行的，在同一个时刻，多个进程相互独立执行。进程是进程实体的运行过程，是系统进行资源分配和调度的一个独立单位。线程是并发的，表现在在宏观上同步进行，微观上交替执行。在某一时刻，只有一个线程会执行。线程是处理机的调度单位，在多CPU计算机中，各个线程可占用不同的 CPU。由于共享内存空间，同一进程中的线程通信无需系统干预。较老的浏览器采用的是单进程架构，现代浏览器一般采用多进程架构，现在主流浏览器的多进程架构为：主进程渲染进程插件进程GPU进程网络进程
2022-01-19 00:05:25
223
原创 一周力扣刷题笔记（11月13日）
这周由于各种杂事比较多一点，因此刷题主要集中于一些比较简单的题目来巩固基础。另外，这种主要学习了哈希表，也做了一些题目反转链表给你单链表的头节点 head ，请你反转链表，并返回反转后的链表。从上周的经验来看，这周需要多次操作链表next指向的算法，可以使用一个数组对所有节点进行分割保存，再统一重新连接，因此最开始的做法如下：var reverseList = function(head) { let res = head; let arr = []; // 用一个数组保存所
2021-11-13 18:30:34
598
原创 axios源码解析-默认配置
我们看过混合配置mergeConfig.js这个文件后，我们发现了配置的优先级是从default,实例配置，config依次增加的，那么，我们现在来看一看default.js这个文件中是如何配置axios的默认配置的这个文件首先在头部定义了一个表示默认Content-Type的常量：var DEFAULT_CONTENT_TYPE = { // 默认url编码格式，以表单的形式提交 'Content-Type': 'application/x-www-form-urlencoded'}
2021-11-12 19:14:18
1769
原创 axios源码分析-合并配置
axios源码分析-合并配置axios的源码中，mergeConfig.js这个函数用于合并两个配置，其合并规则是，对于两个传入的两个配置，如果有冲突的配置项以第二个为准，如果第二个配置有些配置第一个没有就直接加入，最后返回第一个配置，具体规则如下url、method、data属性合并方法是取第二个参数的值validateStatus属性合并方法是mergeDirectKeys方法其他列举的都是defaultToConfig2方法我们现在来看这一部分的源码，首先，这个函数把所有的配置分为了四组：
2021-11-12 08:02:10
616
原创 axios源码解析-AJAX封装
axios源码解析-AJAX封装之前我们已经了解到，axios源码中的AJAX封装是通过适配器进行调用的，而他的返回值一定是一个Promise对象，这个Promise对象会作为dispatRequest的返回值，放入执行链中跟拦截器一起进行链式执行和调用。对应AJAX封装这部分的源码，知识点相对比较散，因此直接上源码，对其中的一些部分做了注释进行解读module.exports = function xhrAdapter(config) { // 接收axios传入的参数 return
2021-11-11 12:36:28
461
原创 axios源码解析-dispatchRequest
axios源码解析-dispatchRequestdispatchRequest.js是整个axios中处理请求最核心的方法，他包括了验证取消请求，数据转化，Ajax封装（适配器的使用），我们来看一下这一部分的源码// 检验是否需要取消请求function throwIfCancellationRequested(config) { if (config.cancelToken) { config.cancelToken.throwIfRequested(); }}
2021-11-11 11:10:07
1012
原创 axios源码解析-拦截器
axios源码解析-拦截器之前我们介绍了Axios这个对象，其中，Axios的拦截器部分很简单，只是给请求和响应各创建了一个InterceptorManager的实例，那么，今天我们就来看看InterceptorManager究竟干了什么事情function InterceptorManager() { // 处理方法作为数组依次执行 this.handlers = [];}我们可以看到，InterceptorManager这个构造函数的结构页很简单，只是定义了一个用来处理的数组而
2021-11-10 07:58:46
935
原创 axios源码解析-Axios对象
axios源码解析-Axios对象之前说过，axios中，axios本身是一个函数，但它绑定了Axios构造函数的所有方法，那么，Axios这个构造函数究竟有那些属性和方法呢，在axios的源码中，有专门的一个文件Axios.js去编写这个构造函数，那么我们先来看一下源码中是如何写的// 检验版本的对象var validators = validator.validators;/** * Create a new instance of Axios * * @param {Object} in
2021-11-09 17:36:16
388
原创 axios源码解析——入口文件篇
# axios源码解析——入口文件篇## axios目录结构解析我们进入axios的源代码后，找到lib这个文件夹，里面存放着axios的核心源代码，在这个文件夹里分为这么几个文件：* adapters:适配器，保存了在浏览器和node环境下封装AJAX的代码* core：axios中核心部分的代码* helpers：进行辅助处理的一些代码* axios.js：入口文件* default.js:设置默认配置的文件夹* until.js：存放全局的工具函数其中，core部分又分成了管理拦
2021-11-09 08:17:56
140
原创 一周力扣刷题笔记（11-07）
一周力扣刷题笔记（11月7日）这周刷题整体比较分散，各个方面都做了一部分逆波兰表达式根据 逆波兰表示法，求表达式的值。有效的算符包括 +、-、*、/ 。每个运算对象可以是整数，也可以是另一个逆波兰表达式。这道题基本是看网课时见过的，无非是用JS的方式重新实现了一遍，由于题目本身已经将进栈顺序给出了，所以我们要做的只是根据每个字符的类型确定进栈活出栈，遇到数字直接进栈，遇到符号从栈中pop出两个数字，按给出的符号进行运算，将结果出栈。最后栈中剩下的数就是结果。这里要注意的有两点，第一点是对于减号和除号
2021-11-07 18:23:20
4073
原创 Linux常用命令笔记
linux—基础篇linux是一款免费，开源安全，高效，稳定，处理高并发强悍的操作系统Linux目录结构不同于windows的C/D/E盘的目录结构，Linux采用层级式树状目录结构，最上层只有一个根目录，在根目录下有很多的子目录在Linux世界里，一切皆文件具体的目录结构：/bin(user/bin,user/local/bin):Binary（二进制）的缩写，存放经常使用的命令/sbin(/suer/sbin,/user/local/sbin):s是super user的意思，用于存放系
2021-11-04 23:46:19
137
原创 一周力扣刷题笔记
一周力扣刷题笔记（10月31日）这周的刷题主要是针对于栈的内容进行的，也包括了一些对于链表知识的整理与回顾旋转链表给你一个链表的头节点 head ，旋转链表，将链表每个节点向右移动 k 个位置。这道题最开始的基本思路是分成两部分操作，向右移动的话，只要将后面k个位置的节点移动到头节点，就可以了。但这种方法的边界条件过多，而且由于要多次操作整个链表，因此要定义多个头指针来遍历数组，非常麻烦。最重要的是，当K远于链表长度，这种方式是无法处理的（失败版本）var rotateRight = functi
2021-11-01 20:29:48
4397
原创 原生JavaScript实现substr和substring方法
之前我们已经手写过了slice方法，今天我们再将String的两个方法substr和substring学习一下，其实思路异曲同工，主要还是对参数的理解和边界条件的考虑// substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。// 如果省略了参数length，则自动截取到字符串的尾部String.prototype.my_substr = function(start = 0, length = this.length) { start = start < 0
2021-11-01 08:41:49
256
原创 原生JavaScript实现assign
assign的用途还是比较广泛的，它主要用于合并多个对象，其实它本身的逻辑并不算很复杂，实现起来只要思路清晰还是比较简单啊的// Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。Object.my_assign = function(target, ...args) { if (target == undefined || target == null) { throw TypeError(target + "is
2021-11-01 08:36:57
269
原创 原生JavaScript实现keys和values方法
keys和values应该都是我们平时处理对象时最常用的方法之一，他们可以返回一个对象本身的所有键或者所有键值到一个数组，方便我们的后续处理，而他们的返回的顺序都与for in的遍历方式相同，这就让我们自然而然地想到了用for in去循环遍历来实现这两个方法for…in语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。要注意的是for in遍历一个对象时，除了返回这个对象本身的属性，还会再其原型链上去寻找更多的方法，因此我们在每一轮循环时，我们应该用hasOwnProperty方法去建议返
2021-10-30 12:39:03
409
原创 原生JavaScript实现entries和fromEntries
现在咱们要开始进入对象原型方法的手写，那么就从entries和fromEntries开始吧// Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组，其排列与使用 // for...in 循环遍历该对象时返回的顺序一致（区别在于 for-in 循环还会枚举原型链中的属性）Object.prototype.my_entries = function(obj) { let res = []; if (typeof obj === 'object') {
2021-10-29 07:57:39
455
原创 原生JavaScript实现fill和join方法
今天实现的fill和join都相对比较简单，只要注意一下细节和边界条件就可以了// fill 方法接受三个参数 value, start 以及 end. start 和 end 参数是可选的, 其默认值分别为 0 和 this 对象的 length 属性值。// 如果 start 是个负数, 则开始索引会被自动计算成为 length+start, 其中 length 是 this 对象的 length 属性值。如果 end 是个负数, 则结束索引会被自动计算成为 length+end。// fil
2021-10-28 08:14:10
450
原创 原生JavaScript实现find，findindex和includes方法
在JavaScript中，我们可以通过find和findindex这两个方法去找到一个数组中第一个符合回调函数判断的元素或者其索引，而使用的方法则是数中最简单的遍历，要注意的点就是要判断回调函数的结果是否是一个布尔值以及注意没有查找到时的结果返回// findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1Array.prototype.my_findIndex = function(callback) { if (typeof callba
2021-10-27 08:16:02
856
原创 原生JavaScript实现every和some
every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。some() 方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。对于every和some这两个函数的手写还是比较简单的，逻辑是对回调函数进行循环遍历，如果有一个不符合条件（every）或者有一个符合条件（some）就对相对应的布尔值进行返回。但要注意的是，如果回调函数没有return（或者说返回值是undefined），函数会返回false，如果回调函数返回一个定值
2021-10-26 09:50:11
326
原创 原生JavaScript实现filter和reduce函数
原生JavaScript实现filter和reduce函数今天又是手写JavaScript中API的一天原生JavaScript实现filter函数filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。`Array.prototype.myfilter = function(callback, thisArg = this) {if (typeof callback != 'function') { throw new TypeError(callback +
2021-10-09 21:27:40
328
原创 原生JavaScript实现forEach和Map
foreach和map都是ES6中新数组处理方法，对于这些方法死记硬背的效率是很低的，因此我们通过尝试用原生的js实现一个foreach和一个map原生JavaScript实现foreachforEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。foreach有两个参数，分别是一个回调函数和一个用于指定this的参数，其中回调函数的三个参数是数组的每一项，每一项的索引以及数组本身。他本质上是一个语法糖，利用循环让数组的每个参数都执行我们的回调函数`Array.prototype.my
2021-09-29 20:11:20
436
原创 Vue中生成动态词云并解决频闪问题
今天在一个项目，需要有一个词语随机弹动的效果的效果， 每到达边框就会弹回来。为此，我使用了逐渐改变DOM位置的方法，并使用两个变量来判断元素的运动方向，同时不断检测DOM的位置，一旦到达边缘就让这两个变量按照触碰的边缘进行取反，达到回弹的效果。最后，使用for循环动态生成一定数量的Dom，达到批量操作的目的for(let i =0;i<7;i++){ //用定时器不断改变位置形成动画效果 this. timer= setInterval(this.Textcampaigns,20
2021-09-27 21:58:39
672
原创 JavaScript中类数组转化的方式
JavaScript中类数组转化的方式很多时候我们要在JavaScript中对类数组进行转化，所谓的类数组是指那些有数组的结构，但原型对象不为Array的数据结构，比如childNodes，querySelectorAll返回的节点对象，都属于类数组，对于这些类数组，我们无法调用数组默认的API，对他们处理起来会比较困难，因此很多时候我们需要将他们转化成数组对象再进行处理。使用Array.fromArray.from本身就是为了转化为数组而诞生的，它的使用结果就是能够将 参数转化为数组对象` c
2021-09-26 23:54:31
185
原创 前端设计模式
前端设计模式职责链模式当我们做项目时，很多时候需求是不明确的，这时我们就应该充分考虑代码的可扩展性，最好不要在日后添加需求的时候改动已经写过的代码，为此，我们可以采用职责链模式，将程序的执行流程抽象成一个数组，以流水线的形式一次执行，后期改动需求时，只要修改流水线的某一环或者直接将新需求添加进数组尾部就可以了`//职责链模式：当面临一个半成品需求时，把需求拆分成一个个模块，然后依次执行function InputTest(value) {this.testList = [];}InputTes
2021-09-25 20:55:57
42
原创 五种JavaScript数组去重的方法
数组去重是我们很常见的需求，也是面试时经常会问到的内容，如果你在前端面试的时候用暴力遍历的方式去重，面试官大概率会一脸黑线，那么，我们现在就来看看JavaScript有那些简单的方式可以实现去重吧。利用setset会返回一个不充分的类数组参数序列，我们可以通过这一点对数组进行去重，，然后再将参数序列转化为数组即可 const arr = [2, 2, 3, 3, 4, 4, 4, 2, 5, 5, 5, ]let res = new Set(arr); //Set(4) { 2, 3, 4, 5 }
2021-09-24 20:47:33
234
原创 手写bind函数
手写bind函数与call函数手写bind函数算是公司前端面试的一个高频考点，今天我们就来手写一个bind函数和一个call函数，这个bind函数的功能是要把this的值绑定到第一个参数上，将后续参数作为返回函数的参数，当出现异常（使用构造函数，没有设置参数）时，返回指定结果，就跟一个真的bind函数一样 let obj = { name: 'xiaoxiaomeng', say: function() { console.log(argument
2021-09-22 19:05:30
422
原创 操作系统—设备篇
I/O设备的概念与分类i/o就是输入与输出，I/O设备就是将数据输入计算机或者接受计算机输入数据的设备I/O设备的分类：按使用特性：人机交互类外设（鼠标，键盘（速度传输速度慢））储存设备：移动硬盘，光盘（数据传输速度快）网络通信设备（数据传输速度适中）###按使用特性：低速设备中速设备高速设备按信息交换的单位分类块设备（基本单位是块，传输速率高，可寻址，可随机读写）字符设备（基本单位是字符，传输速率慢，不可寻址，在输入输出时常采用中断驱动方式）I/O控制器I/O设备
2021-09-20 18:04:36
551
原创 操作系统——磁盘篇
磁盘结构磁盘的盘面被划分成一个个磁道，磁盘上每个“圈”就是一个磁道，一个磁道又会被分成一个个扇区，每个扇区存放的数据量相同。最内侧扇区面积最小，数据密度最大。磁头划过指定扇区进行对扇区的读写操作每个磁盘可能会有多个盘面，对应多个磁头，所有磁头连在一个磁臂上共进退。有时一个盘片会对应两个盘面。所有盘面中相对位置相同的磁道组成柱面磁盘的物理地址可以用**（柱面号，盘面号，扇区号）**来定位任意一个“磁盘块”磁盘的分类：磁头可以移动：活动头磁盘，磁头可以来回伸缩定位磁道固定头磁盘：磁头不可移动，这
2021-09-19 16:11:19
503
原创 操作系统笔记—文件篇
文件的基本知识文件——一组有意义的信息/数据集合文件的属性：文件名（同一目录下不允许有重名文件），标识符（一个系统内的各个文件标识符唯一，是操作系统用于区分各个文件的内部名称），类型（指明文件的类型），位置（文件存放路径（用户使用），在外存中的地址（操作系统使用，对用户不可见）），大小，创建时间，上次修改时间，文件所有者信息，保护信息（对文件进行保护的访问控制信息）无结构文件（流式文件）：有二进制或字符流组成；有结构文件（记录式文件）：由一组相似的记录（记录是一组相关数据项的集合）组成，一般来说，每
2021-09-18 10:40:24
585
原创 操作系统—虚拟内存
高速缓冲技术的思想：把近期会频繁访问到的数据放在更高速的储存器当中，暂时用不到的数据放在更低速的存储器当中虚拟技术中，访问的信息不存在内存时，由操作系统负责将所需信息从内存调入外存；若内存空间不够，由操作系统负责将内存中暂时用不到的信息换出外存计算机中储存器的结构层次：外存（磁盘，磁带），内存，高速缓存，寄存器————> 容量小，速度快，成本高基于局部性原理，我们可以把程序中很快用到的部分装入内存；暂时用不到的部分留在外存，就可以开始让程序执行了，若空间不够，操作系统负责将暂时用不到的信息
2021-09-17 10:22:09
147
原创 操作系统—内存篇
内存的基本概念内存是用于存放数据的硬件，程序执行前需要先放到内存中才能被CPU处理内存地址是从0开始的，每个地址对应一个储存单元。如果计算机“按字节编址”则每个存储单元的大小为一字节；也就是1B，即8个二进制位。如果字长为16位的计算机“按字编址”，则每个存储单元大小为1个字节，每个字的大小为16个二进制位。编译时产生的指令只关心‘相对位置’（逻辑地址），实际放入内存中时再根据起始位置得到‘绝对位置’（物理地址）编译：把高级语言翻译成低级语言（机器语言）的过程。链接：由链接程序将编译后形成的一组目
2021-09-16 11:57:15
1251
原创 操作系统笔记—调度机与调度算法
调度的概念调度是：某种决定任务处理顺序的规则处理机调度是按照一定算法选择一个进程把处理机分配给它。高级调度（作业调度）：按照一定原则从外存或后被队列的作业中挑选一个或多个作业，给他们分配内存等必要资源，并建立相应进程（建立PCB），以使它们获得竞争处理机的权力。高级调度是内存与外存之间的调度，每个作业只调入一次。只要运行结束就会调出，因此高级调度解决的是调入的问题（从无到创建态到就绪态）中级调度（内存调度）：将暂时不用的进程调至外存等待（此时PCB仍在外存中负责保存并监控进程信息，会常驻内存），等他
2021-09-15 09:24:15
305
原创 操作系统笔记—进程的死锁
死锁的概念死锁：在并发环境下，各进程因竞争资源而造成的一种互相等待对方手里的资源，导致各进程都被阻塞，都无法向前推进（至少有两个或两个以上的进程同时发生）饥饿：长时间得不到想要的资源，某进程无法向前推进。（可能只有一个进程发生饥饿，发生饥饿的进程可能是阻塞态（得不到I/O设备），也可能是就行态（得不到处理机））死循环：某种进程执行过程中一直跳不出某个循环的现象。（可以在处理机上循环，可能处于运行态）死锁和饥饿是操作系统应该解决的问题，死循环饿是管理者的问题。死锁产生的必要条件：1.互斥条件：只有
2021-09-14 08:26:06
401
原创 操作系统笔记—进程的同步与互斥
操作系统——进程的同步与互斥进程同步：保证各个进程按预期的方式推进。又称直接制约关系，需要协调他们的工作次序。临界资源:一个时间段内只允许一个进程使用（摄像头，打印机等）进程互斥：对于临界资源的访问，必须互斥地执行，也称简介制约关系。对临界资源的访问，逻辑上可以分为进入区（检查是否可以进入临界区，如果可以进入，则进行上锁），临界区（访问临界资源的代码），退出区（解锁），剩余区（其他处理）。为了实现临界资源互斥访问，同时保证系统性能。需要遵循以下原则：1.空闲让进，临界区空闲时，可以允许一个请求进
2021-09-13 07:30:12
901
原创 操作系统笔记—进程与线程
进程基础在引入多道程序的技术后，为了方便操作系统的管理，引入了进程，进程实体（也叫进程映像，由PCB，数据段，程序段构成）的概念，进程是一个动态的过程，定义：进程是进程实体的运行过程，是系统进行资源分配和调度的一个独立单位PCB是进程存在的唯一标识，它里面包含操作系统对进程管理所需要的信息，它包括：进程描述信息（进程标识ID，用户标识ID，用于区分不同进程），进程控制和管理信息（进程的状态和优先级），资源分配清单（程序段/数据段指针，键盘，鼠标等），处理机相关信息（各种寄存器的值）进程的组织方式：链
2021-09-12 18:07:07
107
原创 操作系统笔记—基础篇
操作系统——基本知识操作系统的概念，功能，目标操作系统是指控制和管理整个计算机系统的硬件和软件资源，并合理整合组织调度计算机工作和资源的分配，以提供给用户和其他软件方便的接口和环境，它是计算机中最基本的系统软件操作系统作为系统资源的管理者，提供的功能：处理机（cpu）管理,储存器管理，文件管理，设备管理操作系统对上层用户提供的功能：命令接口：允许用户直接使用，分为联机命令接口（用户说一句，计算机做一句，比如cmd命令行）和脱机命令接口（用户说一堆，计算机做一堆，比如使用C盘中的*.bat文件）
2021-09-11 07:58:54
83
原创 手写一个简易的axios
手写一个简易的axios我们知道，axios是一个经过封装的AJAX库，简化了AJAX繁琐的使用步骤，让我们能够更快地发送axios请求，其实，axios的核心封装并不复杂，我们完全可以自己封装一个简单的axios。axios的源码简析axios的核心是一个Axios对象和一个axios函数，axios本身是一个函数，并不是Axios的实例化，但是它具有Axios这个对象上的所有方法，所以axios不是Axios函数的实例化，但在效果上axios具有Axios的实例的全部功能，因为Axios对象上的全
2021-09-09 10:28:59
641
1
原创 JavaScript中this指向详解
关于this，首先我们要知道this究竟是什么，用官方语言说：面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。确切地说，this是当前环境执行期上下文对象的一个属性，不同的环境下，不同作用下，表现是不同的，用一句话概括this的指向的话，就是：this的指向，是在调用函数时根据执行上下文动态确定的默认绑定规则在全局作用下，this===window,在全局作用域下，window.a ===this.a，此时相
2021-09-06 16:33:07
450
原创 Vue动态绑定Class
在本次项目中，需要通过在切换路由时同时切换上方标题的颜色。虽然我第一时间想到的是通过绑定点击事件用JS来修改，但想到了前几天看视频中小程序通过动态修改类名的方式来实现相同的效果，于是决定也vue来试试。首先我们要知道，在类名间加空格，或者直接通过添加两个类名就可以同时为一个DOM绑定多个类，小程序的动态修改是用前一种，vue则是用第二种。同时，vue也提供了动态修改类名的方法，因此，我们只要先定义一个类名来修改颜色。`.active{color:#3785ED;}`然后在data中绑定数据d
2021-09-05 15:56:04
141
原创 JS实现节流与防抖
防抖与节流这次项目中，由于有大量的滚动事件，为了减少事件的触发，提高网站的性能，我准备使用防抖与节流的方式对这些滚动事件进行控制。防抖当我们给一个按钮绑定一个点击事件时，每当我们点击一次按钮都会触发一次事件绑定的函数，如果这个事件是提交一类的事件，显然我们不希望用户频繁点击按钮重复提交数据，这时我们就要对这个点击事件进行防抖处理，所谓的防抖就是当我们重复点击按钮时，事件仅会触发一次，只有在一定时间间隔后再次点击才会再次执行。防抖常用于防止用户频繁向服务器发送请求，或者避免浏览器的画面过于频繁地重绘。
2021-09-03 21:01:12
428
空空如也
react-native如何实现两张轮播图联动
2021-10-05
TA创建的收藏夹 TA关注的收藏夹
TA关注的人