![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
技术文章
文章平均质量分 90
在学习过程中,自己总结的一些产出与经验
hhhhhhhssss
有志成为大佬的前端菜鸡
展开
-
【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 · 1166 阅读 · 0 评论 -
【前端怪谈】为什么要用setTimeout模拟setInterval
文章目录前言一、setInterval存在的问题1.问题复现2.问题分析二、setInterval缺点及setTimeout1.setInterval缺点2.为什么setTimeout能取代setTimeout实现setInterval总结前言大家都知道,setTimeout是延迟执行函数,而setInterval就像一个定时器,每间隔一定时间就触发一次回调。今日面试中,面试官问了我一个问题,为什么要用setTimeout去实现setInterval呢?再一次被自己菜哭,面试完成后,赶紧去查了原创 2021-08-04 01:14:30 · 2042 阅读 · 1 评论 -
【前端优化】超详细!带你体验常用的前端优化手段
文章目录前言一、图片懒加载原因判断是否进入可视区方案一: clientHeight、scrollTop 和 offsetTop方案二:getBoundingClientRect二、防抖与节流三、路由和组件懒加载原因使用实例路由懒加载:组件懒加载四、图片预加载原因总结前言前端是最贴近用户体验的地方,作为一个合格的前端,用户体验必须成为前端考虑的首位。网页渲染速度,动画交互,网站是否掉帧等等这些都是用户体验中的一部分,但你知道我们该从哪些地方取做优化吗?不知道也没关系,下面让我们一起谈一谈常见的前端原创 2021-07-30 23:53:19 · 938 阅读 · 0 评论 -
【React Hooks优化】减少重复渲染
文章目录前言一、为什么要进行优化?React的默认渲染行为二、使用memo/useMemo缓存组件1.memo2.useMemo2.useCallback总结前言事情发生在一个下午,我需要用React hooks写一个定时器,因为useEffect每次执行都会使组件重新渲染一次,我发现如果在根组件使用定时器的话,根组件里所有的子组件也都会跟着渲染一次,哪怕它和变化的数据没有任何关系,也会被渲染。这个时候我就在想。这样如果有大量的组件在频繁的做无意义的渲染,不是会大大增加浏览器的负担吗?我们能不能让原创 2021-07-27 21:35:08 · 4907 阅读 · 1 评论 -
【JS编译原理】V8执行JavaScript代码过程
文章目录前言一、编译器和解释器二、V8执行JavaScript代码过程1.引入库2.读入数据总结前言相信大家对Babel已经不陌生了,Babel充斥在我们代码中的每个角落。比如:jsx转化成js,es6转化成es5…一切需要代码转化的事都可以使用babel来做,但我们有没有想过,babel是怎么去进行代码转化的呢,它转化的过程中发生了什么,让我们一起来了解一下js的编译原理吧!一、编译器和解释器在了解之前,我们先来理解一下编译器和解释器的概念吧。我们知道,我们所编写的代码是不能直接被机器识别原创 2021-07-20 22:42:00 · 761 阅读 · 1 评论 -
常见css居中问题
文章目录前言一、水平居中已知宽度未知宽度二、垂直居中已知高度未知高度三、垂直水平居中总结前言居中是我们项目开发中最常用到样式,可以说,作为一名合格的前端,各种情况下的居中应该是得心应手的,接下来让我们看看有哪些方式可以居中吧!一、水平居中下面需要居中的元素统称为子元素已知宽度子元素设置margin:0 auto子元素设置margin-left:50%;transform:translateX(-width/2);子元素设置position:absolute;left:50%;trans原创 2021-07-19 23:56:26 · 156 阅读 · 0 评论 -
【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 · 705 阅读 · 0 评论 -
【ES6】浅谈Vue3为什么使用Proxy取代defineProperty
文章目录前言一、Proxy是什么?get()set()二、Vue双向绑定实现原理三、Vue3为什么使用ProxydefineProperty缺陷Proxy的好处总结前言友友们大家好,vue3推出后大家有没有去看呢?博主是个性子急的人,哪能禁得住这诱惑。经过博主粗略的阅读,我感觉vue3最大的变化之一便是使用Proxy取代defineProperty去实现数据劫持。让我们想一想,为什么会这样呢?不知道大家有没有遇到过,在项目中改变数组或给对象添加属性,视图并没有相应式的更新。这其实就是defin原创 2021-07-18 17:44:42 · 2920 阅读 · 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 · 407 阅读 · 3 评论 -
深入透析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 · 443 阅读 · 1 评论 -
【css定位】超详细!手把手带你体验position属性(含sticky属性与效果图)
系列文章目录提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加例如:第一章 Python 机器学习入门之pandas的使用提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录系列文章目录前言一、pandas是什么?二、使用步骤1.引入库2.读入数据总结前言提示:这里可以添加本文要记录的大概内容:例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。提示:以下是本篇文章正文内容,下面案例原创 2021-07-14 15:39:05 · 478 阅读 · 0 评论 -
手把手带你在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 · 16895 阅读 · 3 评论 -
深入透析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 · 2276 阅读 · 0 评论 -
vue部署后刷新白屏404?前端路由模式详解(hash和history)
前言不知道大家有没有遇到过一种情况,当自己的vue部署在服务器上时,一切都如想象办运转,然后脑袋duang的一下,突然想去刷新,然后网页就duang的一下,白屏了。不出意外的话,我猜你用的一定是history的路由模式。没错,这就是history中的一个问题,接下来让我们一起探索一下前端路由吧!一、pandas是什么?示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。二、使用步骤1.引入库代码如下(示例):import numpy as npimpo原创 2021-07-12 21:36:17 · 3689 阅读 · 4 评论 -
闭包真的还会造成内存泄露吗?你不知道的闭包与垃圾回收!
文章目录前言一、闭包是什么?二、闭包有什么好处和坏处呢?1.好处2.坏处二、闭包会造成内存泄露吗?1.前言2.闭包会造成内存泄露吗,如果会为什么还会再react hooks中大量使用呢?三、为什么ie8及之前会造成内存泄露?1.为什么会造成内存泄露2.引用计数的缺陷3.为什么ie8及之前还会存在引用计数呢?总结前言相信大家在学习前端的路上都有接触到过闭包这个东西,并且这也是面试中的常客。那么闭包究竟是个什么呢?让我们一起来看看吧。一、闭包是什么?函数内部的变量不会影响到外部作用域,并且父函数返回原创 2021-07-11 17:22:59 · 3578 阅读 · 0 评论 -
【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 · 3229 阅读 · 0 评论