- 博客(27)
- 收藏
- 关注
RSS订阅原创 基于video+flv.js+react-player插件的视频自定义控件 用户选择播放开始时间和结束时间
react-player+flv.js+video
2022-08-05 21:32:23
1762
7
原创 git rebase 和 git merge的区别
git rebase 和 git merge的区别前言git rebase 和 git merge的区别如何撤销commit前言在说二者区别前，我们先了解以下使用Git时的文件生命周期及其工作区域。话不多说，一图胜千言！！！哦，不对，是两图。。。。从上图可以看到，文件在各个时期的状态及使用的命令git rebase 和 git merge的区别我们先来看看git rebase和git merge具体做了什么？从图中可以看到，这里生成了一个新的提交G，是怎么生成的呢？ merge 命令 它会
2022-05-31 20:20:33
201
原创 Git常用命令及git pull 和 git fetch的区别
Git常用命令及git pull 和 git fetch的区别Git常用命令git fetch的区别Git常用命令先了解以下Git的工作流程，然后再补充一些常用命令上面的图是不是可以很清除的显示在使用流程中某一步所需的git命令。这里我把一些常用的命令做一个归纳。git clone [url]克隆git init初始化一个git的本地仓库git add .将所有文件上传到本地缓存git commit -m "xxx"本地缓存提交到本地仓库git push origin master推送到
2022-05-31 20:02:28
210
原创 分析浏览器的渲染显示过程
从前端的角度分析浏览器的渲染显示过程渲染流程解析构建DOM树样式计算布局树（LayoutTree）图层树（LayerTree）绘制合成线程——分块合成线程——光栅化合成线程——显示器显示内容渲染流程渲染进程将 HTML 内容转换为能够读懂的DOM 树结构。渲染引擎将 CSS 样式表转化为浏览器可以理解的styleSheets，计算出 DOM 节点的样式。创建布局树，并计算元素的布局信息。对布局树进行分层，并生成分层树。为每个图层生成绘制列表，并将其提交到合成线程。合成线程将图层分成图块，并在
2022-05-30 21:10:01
365
原创 什么是Cookie、Session、Token、JWT以及它们的区别
什么是Cookie、Session、Token、JWT以及它们的区别什么是Cookie什么是SessionCookie和Session的区别什么是TokenToken和Session的区别什么是 JWT什么是Cookiecookie 存储在客户端： cookie 是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上cookie 是不可跨域的： 每个 cookie 都会绑定单一的域名，无法在别的域名下获取使用，一级域名和二级域名之间是允许共享
2022-05-26 21:49:22
148
原创 跨域问题及解决方案
跨域问题及解决方案前言问题引入同源策略跨域解决方案JSONPCORS跨站资源共享简单请求复杂请求响应头预检请求window.postMessage前言跨域请求的响应一般会被浏览器所拦截，注意，是被浏览器拦截，响应其实是成功到达客户端了。问题引入你打开了一个银行站点，然后又一不小心打开了一个恶意站点，如果没有安全措施，恶意站点就可以做很多事情：修改银行站点的 DOM、CSSOM 等信息；在银行站点内部插入 JavaScript 脚本；劫持用户登录的用户名和密码；读取银行站点的 Cookie、
2022-05-23 21:05:48
1064
原创 浏览器本地存储之cookie、localStorage、sessionStorage的区别
浏览器本地存储之cookie、localStorage、sessionStorage的区别前言cookie基本认识cookie工作流程cookie可以设置的值cookie的应用localStoragelocalStorage的作用sessionStoragesessionStorage的应用三者区别的总结前言此处，仅介绍这三种最常见的浏览器本地存储方式及其区别，至于其他浏览器的本地存储如IndexDB不会做介绍，感兴趣的可以去看相关文档。cookie基本认识你我均知晓，HTTP 协议是一个无状态协
2022-05-22 21:10:48
835
原创 HTTP的特点和缺点
HTTP的特点和缺点一张图说明HTTP特点具体分析特点缺点一张图说明HTTP特点具体分析特点应用层：HTTP 凭借着可携带任意头字段和实体数据的报文结构，以及连接控制、缓存代理等方便易用的特性，一出现就“技压群雄”，迅速成为了应用层里的“明星”协议。只要不太苛求性能，HTTP 几乎可以传递一切东西，称得上是一个“万能”的协议。 比 FTP、SSH 等更通用功能更多，能够传输任意数据；灵活扩展：灵活可扩展，主要体现在两个方面。一个是语义上的自由，只规定了基本格式，比如空格分隔单词，换行分隔字段，
2022-05-19 20:38:47
311
原创 for in和for of以及Object.keys的区别
for in和for of以及Object.keys的区别for infor ofObject.keysObject.keys和for in对数组遍历的顺序for in更适合遍历对象，也可以遍历数组，但存在问题，因为它遍历的是数组的索引。总是得到对象的key或数组、字符串的下标遍历顺序可能不是按照原始数组的顺序会遍历所有可枚举的对象，包括原型链上的，如果不想遍历原型方法和属性的话，可以在循环内部判断一下，使用hasOwnProperty()方法可以判断某属性是不是该对象的实例属性。
2022-05-16 21:20:22
243
原创 JavaScript中常见数组函数map、filter、find、sort的解析
JavaScript中常见数组函数map、filter、find、sort的解析前言map函数特点filter函数特点forEach函数特点sort函数特点some函数特点every函数特点find函数特点前言说起JavaScript中常见的数组函数，如果突然让你说出五个，你可能一下子还想不出，不过，当你冷静以下，你就会列出包括forEach、map、filter、find、sort、some在内的众多函数。对于这些常见的数组函数，面试中主要的考察的有两点，一是手写实现这些函数，如果你还处于懵懂状态，请
2022-05-16 20:50:47
316
原创 JavaScript的四则运算以及== 与 ===比较
JavaScript的四则运算以及== 与 ===比较四则运算加法其他运算符== 与 ===比较两者使用的场景类型转换规则例题四则运算加法加法运算不同于其他运算符，它有以下几个特点：运算中其中一方为字符串，那么就会把另一方也转换为字符串如果一方不是数字或字符串，那么会把另一方转换为字符串或数字、下面是几个例题1 + '1' = '11'true + true = 24 + [1, 2, 3] = "41, 2, 3"'a' + + 'b = "aNaN"对于第一个题：触发上面的
2022-05-14 21:55:19
260
原创 内存泄漏场景及解决方案
内存泄漏场景及解决方案javascript中的内存泄漏场景及解决方案场景一：意外的全局变量场景二：闭包场景三：未被清空的定时器场景四：未被销毁的事件监听场景五：未被清除的DOM引用vue中的内存泄漏场景及解决方案声明的全局变量在切换页面的时候没有清空造成监听在 window/body 等事件没有解绑绑在 EventBus 的事件没有解绑javascript中的内存泄漏场景及解决方案场景一：意外的全局变量由于 js 对未声明变量的处理方式是在全局对象上创建该变量的引用。如果在浏览器中，全局对象就是 wi
2022-05-13 22:03:30
513
原创 前端面试中常见的原生JS手写实现函数
前端面试中常见的原生JS手写实现函数前言实现call函数apply函数bind函数newinstanceof函数继承实现深拷贝深度比较防抖函数节流函数Promise.all()Promise.race()函数柯里化用setTimeout实现setInterval原生JS实现Ajax上拉加载更多发布订阅模式数组转换为二叉树sleep函数map函数reduce函数filter函数forEach函数find函数some函数every函数includes函数join函数用reduce实现mapconcat函数快速排
2022-05-12 20:06:13
2067
原创 原生JS手写实现深拷贝函数——JS手写系列(三）
原生JS手写实现深拷贝函数——JS手写系列(三）前言浅拷贝深拷贝深拷贝实现前言在实现深拷贝函数之前，我们必须先知道什么是深拷贝，什么又是浅拷贝浅拷贝浅拷贝是创建一个新对象obj1，这个对象有着原始对象属性值的一份精确拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的就是内存地址。也就是说，浅拷贝基本类型之前互不影响，引用类型其中一个对象改变了地址，就会影响另一个对象obj2深拷贝深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象。深拷贝改
2022-05-11 19:12:02
266
原创 原生JS手写实现深度比较函数——JS手写系列(二）
原生JS手写实现深度比较函数——JS手写系列(二）前言思路具体实现前言在JavaScript中，对于深度比较，如果是基本数据类型，可以通过===便可完成实现。而对于引用数据类型，就要麻烦许多，由于栈空间中仅保存引用数据类型在堆空间中位置的地址指针（此处涉及到栈空间和堆空间，你是否了解该知识点呢？嘻嘻嘻），所以无法使用===进行比较。此时，便只能设计专门的函数进行引用数据类型的深度比较。思路核心思想：深度比较两个对象，就是要深度比较对象的每一个元素。=> 递归具体实现 function is
2022-05-10 22:21:31
456
原创 原生JS手写实现instanceof函数——JS手写系列(一）
原生JS手写实现instanceof函数前言typeof和instanceof的区别原生JS手写实现instanceof前言instanceof函数是JavaScript中一个使用频繁且十分重要的函数，此函数可以判断一个数据是否属于某一数据类型。与此同时，看到这个函数的时候，我们就会立刻想到JavaScript中另一个判断数据类型的函数typeof函数，这也是一个高频常见函数，那么它们两个有什么区别呢？typeof和instanceof的区别这里我们只简单介绍一下它们的区别，不做深究，感兴趣的同学可
2022-05-09 20:47:08
300
原创 axios中使用cancel token取消请求的底层逻辑
axios中使用cancel token取消请求的底层逻辑前言使用CancleToken构造函数创建一个cancleToken实例逻辑一，分析CancleToken构造函数的逻辑逻辑二，分析abort()如何与前面的逻辑链进行连接前言在实际开发过程中，开发者经常会遇到重复请求的场景，如果系统不对重复的请求进行处理，则可能会导致系统出现各种问题，所以需要对请求进行取消。Axios 是一个基于 Promise 的 HTTP 客户端，同时支持浏览器和 Node.js 环境。它是一个优秀的 HTTP 客户端，被
2022-05-07 18:24:54
576
原创 CSS和JS加载对HTML解析有什么影响
CSS和JS加载对HTML解析有什么影响@import和link标签有什么区别CSS文件和JS脚本对DOM解析的影响结论补充：async和defer有什么区别@import和link标签有什么区别在解释文章开头这个问题之前，我们先来了解一下@import和link标签有什么区别。@import只能加载CSS文件，而link标签除了加载CSS文件，还可以加载其他脚本文件，比如JS脚本文件。link标签加载文件和页面加息是同时进行的，而@import加载CSS文件却是要等页面解析完才会加载。CSS
2022-05-07 18:23:28
649
原创 为什么scrip标签最好放在底部，link标签最好放在头部
为什么scrip标签最好放在底部，link标签最好放在头部前言@import和link标签有什么区别CSS文件和JS脚本对DOM解析的影响结论补充：async和defer有什么区别前言作为一个前端开发者，你可能听到过这么一个问题为什么script标签最好放在底部，link标签最好放在底部。今天呢，我们就从加载CSS文件和JS脚本分别对页面解析的影响来解释这个问题。@import和link标签有什么区别在解释文章开头这个问题之前，我们先来了解一下@import和link标签有什么区别。@impor
2022-05-06 21:22:29
631
原创 常见的移动布局和屏幕适配解决方案
常见的移动布局和屏幕适配解决方案移动端的布局方式相关概念移动端常见布局方式百分比布局flex布局(重点来了！！！)移动端屏幕适配方案移动端的布局方式相关概念响应式布局：响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局. 视口：浏览器显示页面内容的屏幕区域，视口分为布局视口、可视视口、理想视口。布局视口：浏览器用来显示页面的最大视口，相当于一张画板视觉视口：用户眼睛能够看到的区域理想视口：对于设备来说，最理想的视口就是，设备尺寸等于布局视口移动端常见布局方式主流
2022-05-05 20:49:29
220
原创 如何监听HTML页面加载？(Document加载的两种方式的区别)
Document加载的两种方式的区别Document加载的两种方式区别监听HTML页面(不包括图片、样式)加载完成，也就是我们常说的DOMContentLoaded事件监听页面所依赖的所有资源全部加载完成，也就是我们常说的window.onload事件Document加载的两种方式区别监听HTML页面(不包括图片、样式)加载完成，也就是我们常说的DOMContentLoaded事件判断ready的方法:监听document的onreadystatechange，判断readyState
2022-05-04 21:02:47
3101
原创 HTTP2协议有哪些特点？相比于HTTP1
HTTP2协议有哪些特点？相比于HTTP1前言HTTP1存在的缺点HTTP2的特点前言HTTP1用的好好的，为什么要使用HTTP2？是HTTP1有什么缺点吗？你HTTP又有什么优点吗？说来大家听听，只要有道理，我们大家还是会理解的嘛！HTTP1存在的缺点队头阻塞：由于HTTP1中，一个TCP链接只能传输一个请求，所以，如果其中一个请求在网络中被阻塞了，那么后面的请求也会跟着被阻塞，要排队等待。TCP链接过多导致性能降低：虽然HTTP/1.1管线化可以支持请求并发，但是浏览器很难实现，chrome
2022-05-04 20:42:25
516
原创 浏览器中的事件循环和Node.js中事件循环有什么区别(经典面试题)
浏览器中的事件循环和Node.js中事件循环有什么区别1. 前言1.1 js线程的作用1.1.1 GUI渲染线程：1.1.2 JS引擎线程1.1.3 定时器线程1.1.4 事件触发线程1.1.5 异步HTTP请求线程2. 正文：浏览器事件循环和node事件循环的区别2.1 node事件循环2.2 浏览器事件循环2.3 两者的区别3. 来个例题检验一下3.1 浏览器器端运行结果3.2 node端运行结果3.3 区别1. 前言说到事件循环，就不得不说JS线程。所以在理解事件循环之前先介绍一下js线程。众所周
2022-05-03 21:27:33
2117
1
原创 vue指令中v-show和v-if以及keep-alive的区别
v-if：属于条件显示，满足条件就显示元素，不满足就删除元素，通过操作DOM元素完成。v-if的首次渲染显示的开销较小，因为它只渲染满足条件的那一个元素，切换组件时；其开销较大，因为它每切换以此就要重新触发生命周期渲染显示新元素v-if值为false时，会将该元素节点从DOM树中删除，也就是会删除它的依赖、事件监听等。v-show：原理是通过控制元素的display属性来决定是否显示元素，属于响应式的。首次渲染的开销较大，因为它会将所有页面全部渲染好之后，在由display属性来决定显示谁
2022-05-02 22:02:28
1245
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人