- 博客(52)
- 收藏
- 关注
RSS订阅原创 链表算法相关
反转链表时间复杂度：O(n) ,其中 nn 是链表的长度。需要遍历链表一次。空间复杂度：O(1)给定一个链表的头节点，反转链表后，最后返回新链表的头节点；const reverseList = head =>{ let prev =null; let curr =head; while(curr){ const next = curr.next; prev=curr; curr=next;} return prev;}判断链表是否有环利用快慢指针
2022-01-11 21:47:47
374
原创 【JS 中的数据结构-链表】
JS 中的数据结构-链表数组VS 链表单向链表双向链表循环链表数组VS 链表 在很多编程语言中，数组的初始化长度都是固定的，如果数组已被数据填满，再要加入新的元素是非常困难的。而且，对于数组的删除和添加操作，通常需要将数组中的其他元素向前或者向后平移，这些操作也是十分繁琐的。其特点：数组是一种线性数据结构数组中存储的是连续的内存空间和相同类型的数据 链表是一组节点组成的集合，每个节点都使用一个对象的引用来指向它的后一个节点。指向另一节点的引用讲做链。下面我画了一个简单的链接结构图
2021-12-31 14:55:46
638
原创 打乱数组（洗牌算法）
class Solution { constructor(nums) { this.nums = nums; } reset() { return this.nums; } shuffle() { let res = [...this.nums]; let len = res.length; for (let i = len - 1; i >= 0; i--) { const randIndex = Math.floor(Ma
2021-12-17 12:15:29
313
原创 LRU (最近最少)缓存机制
LRU 设计原则LRU 缓存机制 应该支持以下操作 获取数据 get 和 修改数据put ，获取数据 get(key) ，密钥 ( key ) 存在于缓存中，则获取密钥的值，更新key 到最新的位置，否则返回-1。写入数据 put(key, value) - 如果密钥不存在，则写入数据。当缓存容量达到上限时，它应该在写入新数据之前删除最久未使用的数据，从而为新数据留出空间。1.数组+Objectconst LRUCache = function(capacity) { this.key
2021-12-17 11:56:49
257
原创 (a===1 && a===2 && a === 3)能为true吗？
隐式转换var a = ?;if(a == 1 && a == 2 && a == 3){conso.log(1);}答案：因为==会进行隐式类型转换 所以我们重写toString方法就可以了,toString 也可以换成 valueOf方法，valueOf 的优先级更高，var a = { i: 1, toString() { return a.i++; }}if( a == 1 && a == 2 &&am
2021-12-12 22:11:08
391
原创 根据swagger json 自动生成 service &&types 文件
Generate typescript codes once user visit online swagger(2.x) docs.最近新写了一个工具，根据swagger 自动生成service 和types 文件，提高coding 效率（可以自定义配置只生成 types 文件）Step1 yarn add swagger-tscode-generateStep2 Add settings in webpack or custom node server.swagger-tscode-g
2021-12-12 11:00:09
1200
原创 V8 的垃圾回收机制
V8 的垃圾回收机制V8的内存限制新生代内存的回收老生代内存回收增量标记V8的内存限制在64位系统下， V8最多只能分配1.4G, 在 32 位系统中，最多只能分配0.7G。你想想在前端这样的大内存需求其实并不大，但对于后端而言，nodejs如果遇到 一个2G多的文件，那么将无法全部将其读入内存进行各种操作了机器的内存明明有几十G，为什么会有这样的内存限制？究其原因，有以下两方面的原因， 一个是JS单线程的执行机制，另一个是JS垃圾回收机制的限制。首先JS是单线程运行的，这意味着一旦进入到垃圾回
2021-12-11 22:39:30
736
原创 webpack 打包速度以及 bundle 优化
开发环境 采用vite 的后 ，开发启动从原来的20多s 降低到如今的 0.5 s 以内，体验棒棒的，由于各种兼容性问题，生产打包 还是采用webpack ，为了优化性能，可以采用一下措施首先webapck 升级为 5 首先 安装。webpack-bundle-analyzer 分析打包后的 文件；一 .首先打包速度优化。1. 打包速度优化 cache: { type: "filesystem", // 使用文件缓存 }, 不再需要 cache-loader。 以及。dl...
2021-12-05 18:28:55
852
原创 重绘和回流（Repaint & Reflow），以及如何进行优化
1.当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为回流。浏览器引起回流的操作：字体大小变化 元素尺寸、位置发生变化 增加或者删除可见的元素 激活伪类属性 访问某些位置信息注：浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队
2021-12-04 23:37:52
231
原创 React Fiber 机制
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言React Fiber 机制是16版本性能重大提升的关键，也是react 面试的核心问题；一、React 的工作流程React渲染页面的两个阶段调和阶段（reconciliation）：在这个阶段 React 会更新数据生成新的 Virtual DOM，然后通过Diff算法，快速找出需要更...
2021-12-04 17:05:07
548
转载 OSI 网络七层模型
物理层为数据链路层提供物理连接，在其上串行传送比特流，即所传送数据的单位是比特。此外，该层中还具有确定连接设备的电气特性和物理特性等功能。数据链路层负责在网络节点间的线路上通过检测、流量控制和重发等手段，无差错地传送以帧为单位的数据。为做到这一点，在每一帧中必须同时带有同步、地址、差错控制及流量控制等控制信息。网络层为了将数据分组从源（源端系统）送到目的地（目标端系统），网络层的任务就是选择合适的路由和交换节点，使源的传输层传下来的分组信息能够正确无误地按照地址找到目的地，...
2021-11-28 21:53:28
81
原创 前端性能优化--网络缓存
一.缓存位置从缓存的位置上浏览器一般分 内存缓存（Memory Cache），磁盘缓存（Disk Cache）1.Memory Cache：也即内存中的缓存，主要包含的是当前中页面中已经抓取到的资源,例如页面上已经下载的样式、脚本、图片等。读取内存中的数据肯定比磁盘快,内存缓存虽然读取高效，可是缓存持续性很短，会随着进程的释放而释放。 一旦我们关闭 Tab 页面，内存中的缓存也就被释放了，时效性有限。那么既然内存缓存这么高效，我们是不是能让数据都存放在内存中呢？这是不可能的。计算机中的内存一定
2021-11-28 16:35:41
370
原创 前端项目如何找出性能瓶颈
首先作为知识储备需要理一下，性能损耗可能遇到的问题比如大列表的渲染,大量dom的渲染； 大量图片的加载,过多资源的请求，资源体积是否过大,； 代码中有没有耗时的计算操作,或则大量循环.递归 编写的组件过于庞大 层级过深,依赖模块过多等. 思路考虑：基本的优化思路：未对照上面的顺序先从网络加载静态资源上层面 减少请求数,gizp压缩请求资源的体积，过大的第三方库能不能换成轻量级的，或者考虑分包后按需加载，页面能否按路由 懒加载，代码中有没有很耗时的操作循环和递归,过...
2021-11-27 22:53:53
719
原创 前端如何查看页面性能
现在讲的最多的就是前端性能优化，手段五花八门，但是首先 怎么量化优化的效果，首屏从10s 优化的1s ， 怎么查看 ？前端性能最简单的量化指标 ，白屏时间，首屏时间。白屏时间 网上互相参考的，都是从html head 处打点 减去performance.timing.navigationStart（上一个页面路有关闭，新路有开启开始时间）,白屏时间 = firstPaint - performance.timing.navigationStart但是当前的前端系统，大多是基于 vue /r...
2021-11-27 22:08:50
3399
原创 for ... in 和for ... of 有什么区别；
let arr = ['el1', 'el2', 'el3'];arr.addedProp = 'arrProp';// elKey are the property keysfor (let elKey in arr) { console.log(elKey);} console.log('===');// elValue are the property valuesfor (let elValue of arr) { console.log(elValue)}.
2021-11-26 06:57:59
556
原创 CSS 格式化上下文（BFC）
触发BFC 的条件；1. float 的值 不为none，即（left orright ）；2. position 的值为 fixed or absolute ；3. display inline-block ， flex ，inline-flex ，table-cell 等4.overflow 不为visibleBFC 的特点触发BFC 的特点BFC 内部的相邻块级元素 会发生在垂直方向发生margin 重叠；BFC 在页面是一个独立的容器，里外元素互不影响；BFC...
2021-11-25 22:25:00
217
原创 css 常用 垂直居中 总结
网上有很多垂直居中方法，可能大多数都用不到，下面根据项目中 最经常用到的几种 做以下总结：1. 最经常用的 ，应该也是简单的 flex 弹性布局 在父元素的设置:.container{ dispaly:flex; justify-content:center; aligin-items:center; }2. 有绝对定位的div 水平 垂直居中.vertical-center-position{ position:absolu...
2021-11-13 16:16:12
212
原创 手写Instanceof ，吃透原型链
面试八股文，经常会考察 原型 ，原型链，继承，变形考察 如何判断一个变量的 类型，其中一种方法，就是使用 instanceof ，继续延伸 instanceof 原理话不多少 直接上代码，function myInstanceOf(leftValue,rightValue){ const baseType = ['string', 'number','boolean','undefined','symbol']; if(baseType.includes(typeof(leftVal...
2021-11-12 14:54:04
247
原创 xss 白名单优化
xss 白名单优化安装xss 白名单安装yarn add xssxss 白名单下面展示一些 内联代码片。 import xss from 'xss'; const Component=(props)={ coonst {content} = props; const options = { whiteList: { a: ['target', 'href', 'title', 'style'], div: ['style'], span
2021-10-25 11:08:24
632
原创 自动修复 import 排序 （ autofix sort import/export ）
自动修复 import 排序import/export 按一定的规则排序，既让代码美观，也让开发者更好的维护代码，目前自动修复import/export主要有以下两种：基于eslint 规则的 eslint-plugin-simple-import-sort 自动导入排序和校验；基于 prettier 的 plugin @trivago/prettier-plugin-sort-imports 自动导入排序；eslint-plugin-simple-import-sort yarn
2021-08-26 11:28:11
7808
2
原创 mac 命令行 代理上网
export https_proxy=http://127.0.0.1:9999 http_proxy=http://127.0.0.1:9999 all_proxy=socks5://127.0.0.1:9999一般安装一些工具homebrew， 一个终端要先执行一次
2021-08-20 15:26:25
406
原创 箭头函数和普通函数的区别
一，箭头函数基本用法：箭头函数 伪代码 类似 函数表达式， 大多数用于 声明一些回调函数，简单 明了 const fn = (name)=>{ // do some other things return `hello ${name}`}伪代码 等同于 const fn = function(name){ // do some other things return `hello ${name}`}关于箭头函数的参数，1....
2021-05-19 16:34:46
261
原创 webpack 优化 浏览器缓存 hash 、 chunkHash、contentHash
hash一般是结合CDN缓存来使用，通过webpack构建之后，生成对应文件名自动带上对应的MD5值。如果文件内容改变的话，那么对应文件哈希值也会改变，对应的HTML引用的URL地址也会改变，触发CDN服务器从源服务器上拉取对应数据，进而更新本地缓存。但是在实际使用的时候，这几种hash计算还是有一定区别。 hash 值...
2021-05-18 20:30:37
693
原创 清除浮动常用方法
布局 过程中 ，经常用到浮动等 方式 。。。 ，副作用之一，引起父元素高度坍塌，所以要清除浮动，<div class="father"> <div class="big">big</div> <div class="small">small</div> <div class="clear">额外标签法</div> </div> 1， 因为...
2021-04-26 17:08:55
69
原创 js算法相关-----持续更新
一 ，排序算法， 1.冒泡排序; function bubbleSort(arr){ const length = arr.length; let hasChange = false; if(length<=1) return arr;for(let i = 0 ; i < length-1 ;i++){ hasChange=true for(let j = 0 ; j < length-i-1; j++){ if(arr..
2021-04-26 15:29:51
102
原创 Set、Map、WeakSet 和 WeakMap 的作用
Set 和 Map 主要的应用场景在于数据重组和数据储存Set 是一种叫做集合的数据结构，Map 是一种叫做字典的数据结构const s = new Set()[1, 2, 3, 4, 3, 2, 1].forEach(x => s.add(x))for (let i of s) { console.log(i) // 1 2 3 4}// 去重数组的重复对象let arr = [1, 2, 3, 2, 1, 1][... new Set(arr)] // [1...
2021-04-20 20:54:17
257
原创 手写常用函数源码系列
一..扁平化数组 Array.prototype.flat()用于将嵌套的数组扁平化，变成一维的数组。该方法返回一个新数组，对原数据没有影响。 不传参数时，默认扁平化一层，可以传入一个整数，表示想要扁平化的层数。 传入<=0的整数将返回原数组，不扁平化 Infinity关键字作为参数时，无论多少层嵌套，都会转为一维数组 如果原数组有空位，Array.prototype.flat()会跳过空位。 1.利用 数组的 reduce 方法； function fl...
2021-04-19 21:27:05
285
原创 浏览器DOM事件
DOM （document of Mode ）即 文档对象模型 是一种与编程语言及平台无关的API(Application programming Interface)，借助于它程序能够动态地访问和修改文档内容、结构或显示样式。DOM事件主要分 DOM 0级 、DOM 2 级 、DOM 3级 事件，1.DOM 0 级事件例 constel= document.getElementById('el'); el.onclick = function() { }；删除DOM 0 级...
2020-11-01 23:32:28
169
原创 如何做一个准确的定时器
定时器在前端的编程中 非常普遍， 最经常看到的是 抢购倒计时， 时钟 ， 定时循环，。。。但是浏览器的多线程模式 && js的单线程执行逻辑， 注定setTimeout、setInterval 是非准确的 。举例 一个完善的定时任务逻辑 是这样， Js 代码执行到 setTimeout 异步任务 ，会把异步任务推送到定时器线程， 定时器线程开始倒计时， 当倒计时结束，会把...
2020-04-11 18:25:28
578
原创 深拷贝--- 浅拷贝 理解
在js 的 数据类型 分为 基本类型和引用类型， 基本类型的 值存放在 栈内存中 ， 引用类型的 值存放在堆内存中，栈内存存放的是 引用类型的 地址， 这就涉及到一个问题， 当两个变量都同时指向同一个地址的时候，其中一个变量改变操作改变堆内存中的值，l另一个变量对象的值也会跟着改变，（这是非常不可控的操作）；1. 浅拷贝： 定义就不写了， 只要理解： 复制的后的数据改变 都能影响前一个数...
2020-04-10 13:14:09
139
原创 理解并实现 你自己的 订阅-发布模式
订阅发布模式：这是一种广泛应用于异步编程的模式，是回调函数的事件化，常常用来解耦业务逻辑。事件的发布者无需关注订阅的侦听器如何实现业务逻辑，甚至不用关注有多少个侦听器存在。数据通过消息的方式可以灵活的传递。 ——《深入浅出Nodejs》由于浏览器js单线程的原因，编写js代码经常会用到异步，回调函数 ， 业内解决 异步比较流行的方式 订阅发布模式、 promise 、async/await 。...
2020-03-27 17:13:08
249
原创 节流和防抖及其应用场景...
函数防抖(debounce) :在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。function debounce(fn，delay) { let timer; const that = this; return function (){ const _args = arguments; if (timer ){ clearTim...
2020-03-24 22:00:10
453
原创 一张图片引发的思考---懒加载
最近在做一个图片list预览组件,在一组图片list 中点击其中一张图片 可以放大 缩小，旋转、下载等功能。 但是list 中可能很多图片，如果首次打开这个页面， 每个图片都加载，浪费服务器资源，也给页面渲染带来极大的性能损耗。（http请求是宝贵的）；一.如何做到懒加载 也叫按需加载？懒加载原理 ，初始化时候给页面的img 标签的src属性 ，默认赋值loading图片，增加一个 自定义的d...
2020-03-24 20:18:20
132
原创 深度理解事件循环——Event Loop
一 js单线程；javascript 作为浏览器脚本语言，在设计之初就是用来与用户互动以及操作dom,这就注定了他只能是单线程的。想象一下，如果js 是多线程，一个线程在插入dom,另一个线程在删除dom,此时浏览器要以哪个为准，假如能以其中一个为准，还要增加一些类似 “读锁”、“写锁”之类的操作，很容易造成浏览器卡顿，结果不可预料。当然，为了利用多核CPU 的计算能力，HTML5 也提出了 ...
2020-03-23 13:40:00
192
原创 移动端调试工具
在head中引入<script src="https://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/vconsole/3.0.0/vconsole.min.js" type="text/javascript"></script><script>var vConsole = new VConsole();<...
2020-03-18 10:46:37
139
原创 模拟实现call、 apply 、bind 函数
本文主要用来理解底层函数的原理， 并没有苛责一定用最原始的语法解决问题。 好的 ，我们开始Function.prototype.myCall=function(){ const obj=arguments[0]||window; // 获取想要指向的对象 obj.fn = this; obj.fn(...[...arguments].slice(1)); ...
2020-03-13 13:33:58
156
原创 理解并实现你自己的Promise
本文主要探讨 1.promise 解决什么问题 . 2.promise解决的痛点，还能有哪些解决方法 。 3.promise 如何使用， 4.手动实现一个自己的promise 。一....
2020-03-09 09:44:26
124
原创 javascript 中的原型 ,原型链 ，继承
在js 中讲到 面向对象，就离不开原型 原型链 继承 等等概念；那么这些具体是什么，我们一起来深入理解。function Dog(name){ this.name= name ; this.barking = '汪汪汪';}var dog1 = new Dog('大狗');var dog2 = new Dog ('二狗');console.log(dog1);/...
2020-03-03 10:38:35
142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人