hhhhhhhssss-CSDN博客

原创【Diff算法图解】带你探索React、Vue2.x的Diff算法

文章目录前言一、Virtual DOM（虚拟dom）二、React Diff实现思想移动节点增加节点移除节点React Diff的缺陷三、Vue2.X Diff实现思想移动节点特殊情况增加节点移除节点总结前言我们都知道，在框架中，当dom节点发生变化时，并不会去改变所有的dom结构，而是对应的改变其中需要改变的部分。那我们思考一下，这里面的原理是什么呢？在看文章之前，我们先来了解一下虚拟dom，然后慢慢分析，找到其中的奥妙！一、Virtual DOM（虚拟dom）Virtual DOM 其实就

2021-08-04 17:11:09 1144

原创深入透析Promise几种方法（含手撕思路讲解及坑点）

文章目录前言一、Promise.all()1.介绍2.实例状态全为fulfilled状态有一个为rejected3.代码实现思路代码二、Promise.race()1.介绍2.实例3.代码实现思路代码总结前言前面我们简单实现了一个promise，不懂的同学，传送门：深入透析Promise那么，除了它本身意外，我们用的最多的恐怕就是all、race方法了吧？什么？你不知道是啥？别担心，下面让我们一起探探究竟吧！一、Promise.all()1.介绍官方介绍：Promise.all()方法用于

2021-07-16 20:15:13 437 1

原创【JS垃圾回收】带你探索垃圾回收机制和Chrome V8垃圾回收机制

文章目录前言一、什么是垃圾回收？1.基本思路2.为什么要进行垃圾回收二、怎样进行垃圾回收1.标记清除优点缺点2.引用计数优点缺点三、Chrome V8垃圾回收机制1.为什么需要优化垃圾回收算法2.基本概念3.新生代垃圾回收器 - Scavenge4.老生代垃圾回收 - Mark-Sweep & Mark-CompactMark-SweepMark-Compact5.并行回收全停顿并行6.增量标记增量7.懒性清理总结前言javaScript 是门魅力无限的语言，关于它的 GC（垃圾回收）方面，

2021-07-11 21:15:13 3194

原创闭包真的还会造成内存泄露吗？你不知道的闭包与垃圾回收！

文章目录前言一、闭包是什么？二、闭包有什么好处和坏处呢？1.好处2.坏处二、闭包会造成内存泄露吗？1.前言2.闭包会造成内存泄露吗，如果会为什么还会再react hooks中大量使用呢？三、为什么ie8及之前会造成内存泄露？1.为什么会造成内存泄露2.引用计数的缺陷3.为什么ie8及之前还会存在引用计数呢？总结前言相信大家在学习前端的路上都有接触到过闭包这个东西，并且这也是面试中的常客。那么闭包究竟是个什么呢？让我们一起来看看吧。一、闭包是什么？函数内部的变量不会影响到外部作用域，并且父函数返回

2021-07-11 17:22:59 3503

原创深入透析Promise实现细节（含手撕阶段）

文章目录前言一、Promise是什么？二、Promise核心逻辑实现1.基本原理2.新建类promise类，传入执行器executor3.传入resolve和reject方法4.then方法的简单实现5.完整代码及验证6.代码改进3.链式调用1.链式调用实现的基本思路2.then方法返回promise对象3.resolvePromise方法4.总结前言ES6无异于是当前前端必备的一项技能，而Promise又是ES6里面的重中之重，Promise充斥在我们代码的每一个角落。一、Promise是什么

2021-07-11 15:09:28 2265

原创【前端怪谈】为什么要用setTimeout模拟setInterval

文章目录前言一、setInterval存在的问题1.问题复现2.问题分析二、setInterval缺点及setTimeout1.setInterval缺点2.为什么setTimeout能取代setTimeout实现setInterval总结前言大家都知道，setTimeout是延迟执行函数，而setInterval就像一个定时器，每间隔一定时间就触发一次回调。今日面试中，面试官问了我一个问题，为什么要用setTimeout去实现setInterval呢？再一次被自己菜哭，面试完成后，赶紧去查了

2021-08-04 01:14:30 1985 1

原创【前端优化】超详细!带你体验常用的前端优化手段

文章目录前言一、图片懒加载原因判断是否进入可视区方案一: clientHeight、scrollTop 和 offsetTop方案二：getBoundingClientRect二、防抖与节流三、路由和组件懒加载原因使用实例路由懒加载:组件懒加载四、图片预加载原因总结前言前端是最贴近用户体验的地方,作为一个合格的前端,用户体验必须成为前端考虑的首位。网页渲染速度,动画交互,网站是否掉帧等等这些都是用户体验中的一部分,但你知道我们该从哪些地方取做优化吗?不知道也没关系,下面让我们一起谈一谈常见的前端

2021-07-30 23:53:19 904

原创【前端怪谈】js中为什么0.1+0.2 !== 0.3

文章目录前言一、问题原因二、解决办法三、大数相加1、BigInt2、大数相加总结前言下面大家先来看一下这行诡异的代码，猜猜会输出什么console.log(0.1 + 0.2);是不是和所想的不太一样？下面我们来探索一下为什么它会这样吧。一、问题原因在计算机中数字无论是定点数还是浮点数都是以多位二进制的方式进行存储的。在JS中数字采用的IEEE 754的双精度标准进行存储(存储一个数值所使用的二进制位数比较多,精度更准确)在此标准下，无法精确表示的非常大的整数将自动四舍五入。确切地说

2021-07-28 21:34:03 947

原创【前端怪谈】两个行内块元素之间的间距问题

文章目录前言一、问题描述二、解决方式1.使用浮动2.清除行内块元素之间的空格和换行符3.父元素设置font-size:03.父元素设置word-spacing总结前言相信行内块元素,也就是display:inline-block的元素大家并不少见,不知道大家有没有发现一个问题,就是当两个行内块元素在同一行并排时,它们之间会存在着间距。下面让我们一起来看看这个问题吧一、问题描述废话不多说,上图代码:<!DOCTYPE html><html lang="en">&l

2021-07-28 14:31:29 3500 1

原创【React Hooks优化】减少重复渲染

文章目录前言一、为什么要进行优化？React的默认渲染行为二、使用memo/useMemo缓存组件1.memo2.useMemo2.useCallback总结前言事情发生在一个下午，我需要用React hooks写一个定时器，因为useEffect每次执行都会使组件重新渲染一次，我发现如果在根组件使用定时器的话，根组件里所有的子组件也都会跟着渲染一次，哪怕它和变化的数据没有任何关系，也会被渲染。这个时候我就在想。这样如果有大量的组件在频繁的做无意义的渲染，不是会大大增加浏览器的负担吗？我们能不能让

2021-07-27 21:35:08 4744 1

原创【JS编译原理】V8执行JavaScript代码过程

文章目录前言一、编译器和解释器二、V8执行JavaScript代码过程1.引入库2.读入数据总结前言相信大家对Babel已经不陌生了，Babel充斥在我们代码中的每个角落。比如：jsx转化成js，es6转化成es5…一切需要代码转化的事都可以使用babel来做，但我们有没有想过，babel是怎么去进行代码转化的呢，它转化的过程中发生了什么，让我们一起来了解一下js的编译原理吧！一、编译器和解释器在了解之前，我们先来理解一下编译器和解释器的概念吧。我们知道，我们所编写的代码是不能直接被机器识别

2021-07-20 22:42:00 747 1

原创常见css居中问题

文章目录前言一、水平居中已知宽度未知宽度二、垂直居中已知高度未知高度三、垂直水平居中总结前言居中是我们项目开发中最常用到样式，可以说，作为一名合格的前端，各种情况下的居中应该是得心应手的，接下来让我们看看有哪些方式可以居中吧！一、水平居中下面需要居中的元素统称为子元素已知宽度子元素设置margin:0 auto子元素设置margin-left:50%;transform:translateX(-width/2);子元素设置position:absolute;left:50%;trans

2021-07-19 23:56:26 151

原创【ES6】浅谈Generator和yield

文章目录前言一、async await实现二、Generator实现三、Generator函数1、什么是Generator2.Generator的特点3.Generator的执行四、yield表达式1、什么是yield2、yield注意点五、Iterator对象五、next方法的参数总结前言问题发生在一个下午，当我正在实现Promise.all()方法的时候（有兴趣的可以去我另一篇博客看一看：深入透析Promise的all和race方法），发现for循环里的函数并不是同步执行的，那么我如果想让它同步

2021-07-19 19:50:57 675

原创【ES6】浅谈Vue3为什么使用Proxy取代defineProperty

文章目录前言一、Proxy是什么？get()set()二、Vue双向绑定实现原理三、Vue3为什么使用ProxydefineProperty缺陷Proxy的好处总结前言友友们大家好，vue3推出后大家有没有去看呢？博主是个性子急的人，哪能禁得住这诱惑。经过博主粗略的阅读，我感觉vue3最大的变化之一便是使用Proxy取代defineProperty去实现数据劫持。让我们想一想，为什么会这样呢？不知道大家有没有遇到过，在项目中改变数组或给对象添加属性，视图并没有相应式的更新。这其实就是defin

2021-07-18 17:44:42 2687 1

原创浅谈xss和csrf攻击

文章目录前言一、XSS是什么？二、使用步骤1.引入库2.读入数据总结前言由于博主目前在一家主做网络安全的公司实习，之前没有意识到网络安全的严重性，现在才感受到我们的系统存在了这么多问题。下面我们一起来聊一聊最常见的两种攻击方式，xss和csrf吧！一、XSS是什么？示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport mat

2021-07-18 13:38:57 381 3

原创使用mongoose在express中操作数据库

文章目录前言一、Mongoose是什么？二、使用步骤1.引入库2.连接数据库3.操作数据库操作前的准备工作增加文档查询文档更新文档删除文档3.将增删查改操作写成接口总结前言前面我们已经学会怎么去在命令行里操作数据库了，但是我们肯定不能让用户去操作命令行吧。现在我们就来学习一下怎么使用mongoose在express中操作mongoDB并编写出可用接口！一、Mongoose是什么？Mongoose就是一个我们可以通过Node来操作MongoDB的模块。Mongoose是一个对象文档库，它对No

2021-07-17 23:39:30 747 1

原创 MongoDB入门学习

文章目录前言一、MongoDB是什么？二、MongoDB的基本操作1.基本指令2.插入文档3.查询文档4.修改文档5.删除文档6.简单操作总结前言虽说现在关系型数据库还是主流，但是面对某些需求的时候，需要非关系型数据库来补充它，学习一个主流的NoSQL数据库还是很有必要的。MongoDB是一个功能丰富的NoSQL数据库，本文记录了MongoDB数据库的入门和基本语法。一、MongoDB是什么？MongoDB是一个基于分布式文件存储的数据库。由C++语言编写，旨在为WEB应用提供可扩展的高性能数据

2021-07-17 14:56:47 104

原创 $set解决vue中修改数组或对象视图不更新的问题

文章目录前言一、案例二、解决方法$set总结前言相信大家和我一样，在开发中总是遇到一个问题。为啥我修改v-for遍历的数组，视图却没有更新？？？当我点击其他操作重新渲染后，又更新了？？？这不会是vue出bug了吧这项问题其实正是由vue的双向绑定造成的，vue在2.x的版本中还在使用defineProperty方法，这就是defineProperty中的一个问题。所以在vue3.0中，使用了proxy取代了defineProperty。对此本文不多做解释，有兴趣的朋友可以去查阅下资料。回到正

2021-07-16 15:50:58 1727

原创一路摸爬滚打，我终于踏上了我的程序员之路！

我正在参与CSDN《新程序员》有奖征文活动，活动链接：https://marketing.csdn.net/p/52c37904f6e1b69dc392234fff425442文章目录前言浑浑噩噩开学季自信心被重击虚度光阴初识编程你好，前端我的第一个轮播图期末课设前端是没有前途的开始前端之旅打开自己的心结我的第一次团队合作我的网易云音乐实习之旅开始投递我的第一次面试我的第一份实习总结前言我是一个普通学校的普通学生，两年前的我，是一个hello world都不会的挂科废物,那时从未想过自己也能成为

2021-07-16 00:32:57 229 5

原创超超超超详细！手把手带你用js实现简易版position:sticky

前言前面我们在介绍position属性时（不知道的小伙伴可以去看看我的另一篇说position的博客哟，传送门：手把手带你体验position各种属性）有了解到，sticky的兼容性是很差的，那么我们想达到类似的效果该怎么办呢？废话不多说，开撕一、基本思路sticky就是元素处于页面某个布局，当元素超出可视区时，根据设置进行定位。官方介绍：它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。思路：当

2021-07-14 22:21:44 1563 1

原创【css定位】超详细！手把手带你体验position属性（含sticky属性与效果图）

系列文章目录提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例

2021-07-14 15:39:05 469

原创防抖节流原理及实现（含演示图）

文章目录前言一、防抖（debounce）1、什么是防抖？2、防抖实现二、节流（throttle）1.什么是节流？2.节流实现总结前言随着前端飞速的发展，用户体验也越来越重要。大家在逛一些网站时，会不会手贱，去疯狂的点击某个按钮，但是做了后却发现，网站都是，你点归你点，我动算我输。这其实就是因为做了防抖节流操作啦，为什么这两个东西这么神奇呢？让我们一起探究一下吧。一、防抖（debounce）1、什么是防抖？通俗来说就是当一个事件一直处于频繁触发的情况下，禁止触发，直到频率降低到规定的程度,才允许

2021-07-13 22:12:20 7074 2

原创手把手带你在vue中封装axios（含携带token）

文章目录前言一、认识axios1、axios是什么？2、为什么要用axios？特性二、封装axios1.引入库2.建立封装axios实例文件3.导入所需依赖4.创建axios实例5.axios拦截器请求拦截器响应拦截器5.封装成请求6.完整代码代码代码中的setLocalStorage和getLocalStorage方法setLocalStoragegetLocalStorage总结前言在前端的高速发展下，单页面应用大多采用前后端分离的开发思路，现在帮助前后端交互的工具数不胜数，axios无疑是当今

2021-07-13 19:50:40 15194 3

hhhhhhhssss的博客