- 博客(105)
- 资源 (1)
- 问答 (2)
- 收藏
- 关注
RSS订阅
原创 发布内容总结，个人参考
1、HTTP请求头/响应头2、HTTP请求头Referer3、前端工程化4、什么是虚拟DOM？虚拟DOM的定义和作用？5、Render函数的解析，template的作用6、有哪些可能引起前端安全的问题？ 7、Vue的那些事情8、关于webpack的那些事情9、浏览器种输入一个url会发生什么(面试专用)10、浏览器的缓存机制11、原生JS封装ajax12、Html常见面试题13、Javascript中Promise对象14、javascript原型与原型链15、前端面试：继承的
2022-03-23 14:34:15
871
原创 如何实现准时的定时器setTimeout？
function test(){} // 要执行的函数let timer;// 定义 全局定时器// 用递归的方法进行// 因为是 递归 所以要记录 第几次进入 不断的累加// 第一次执行 偏移量等于定时器// 开始执行count++;fn();// fn 函数执行完成的 时间间隔// p偏移量}else{//时间间隔// 执行要进行的函数 比如console.log('执行函数')},0)//startTimer() // 开始 执行。
2024-02-02 10:40:51
240
原创 前端如何压缩图片在进行上传给后端
注意注意：当前只支持jpg图片的压缩，因为手机拍出来的图片是jpg图片。这是我的场景需要，如果你是png不建议你用，或者你有更好的方案可以也给我说说~~~3、我们把这个图片放置到canvas上面去，然后通过cavans属性drawImg重新获取图片。前端压缩图片我目前能想到的就是 通过canvas 改变图片的 画质去改变图片的大小。1、首先获取图片的全部内容，然后转化为base64让他可以在页面上展示。2、当我们获取到base64的图片的时候我们就可以获取图片的大小尺寸。4、将重新获取的图片转化为url。
2024-01-15 17:30:46
689
原创 关于你不知道的前端文件上传方式
showDirectoryPicker方法主要是获取文件目录下面的子文件，作用就是显示一个目录选择器，我们可以通过上传目录，去过去我们想要的某个文件，或者判断该文件是否存在于该目录之中。showOpenFilePicker方法你可以理解为 input 的 type 为 file，showOpenFilePicker这个API 返回用户所选的文件 不是目录默认。,这里我们就不进行过多的阐述，已经老生常谈了。今天我们主要介绍两个新的属性。展示内容：文件目录下的文件。这个和我们正常操作一样。
2024-01-15 11:27:53
652
原创 asyncPool并发执行请求函数
这样是可以完成的，但是当我们发送1000个请求，等待1000个请求完成后在进行操作，首先不说等待完成操作，就简简单单的http请求瞬间发生1000个，你猜浏览器会怎么样？身为开发者我们无法控制http请求的多少，但是我们能控制异步任务的数量，具体来说就是我们可以控制promise的实例化数量，用以避免高并发带来的问题。一个不太常见的极端场景，当我们为了某个操作需要发生异步请求的时候，等待所有异步请求都完成时进行某些操作。可以保证多个请求完成后进行操作，等待所有的。
2023-06-30 17:56:14
544
原创 自己实现一个PromiseAll和PromiseAllseted
Promise.all() 方法接收一个由 Promise 对象组成的数组作为参数，当所有 Promise 都成功完成时，返回的 Promise 对象就会成功完成，然后将结果以数组形式返回；而只要有一个 Promise 失败了，Promise.all() 返回的 Promise 对象就会失败，这时第一个被拒绝的 Promise 的结果会被传递给该 Promise.all() 返回的 Promise 对象。2、在该函数中创建一个空的数组，用于存放每个 Promise 对象的结果。
2023-06-09 23:25:15
1054
原创 object.defineproperty方法解析/自己实现一个object.defineProperty/Vue3中的Proxy解析和实现
需要注意的是，Object.defineProperty() 方法只能定义或修改单个属性。这也就是说如果有多个的话，必然在Vue的源码中有一个循环遍历。需要注意的是，Object.defineProperty() 方法只能定义或修改单个属性。这也就是说如果有多个的话，必然在Vue的源码中有一个循环遍历。需要注意的是，Object.defineProperty() 方法只能定义或修改单个属性。是一个描述符对象，用来指定属性的特性。是一个描述符对象，用来指定属性的特性。是一个描述符对象，用来指定属性的特性。
2023-06-08 10:44:21
1126
原创 深度优先遍历DFS和广度优先遍历BFS查找document.body下面所有class为a的dom节点
深度优先遍历从起点出发，依次访问与其相邻的节点，并沿着每一条路径继续往下访问直到无法继续为止，然后回溯到最近的一个未访问过的节点，重复上述过程，直到所有节点都被访问。广度优先遍历则按照离起点的距离从近到远依次访问与其相邻的节点，即先访问与起点距离为1的节点，再访问距离为2的节点，以此类推，直到所有节点都被访问。因此，两者主要的区别在于遍历顺序不同：DFS 沿着一条路径进行遍历，而 BFS 则按照广度优先的顺序进行遍历。深度优先遍历（DFS）和广度优先遍历（BFS）是图和树等数据结构中常用的遍历算法。
2023-06-05 09:51:55
147
原创 CPU和GPU前端的应用
它包含大量的流处理器（stream processor），能够同时进行大量的浮点运算，并可通过并行计算来加速图像渲染、物理模拟、深度学习等应用场景。但是在处理通用计算和控制任务方面，GPU的性能并不如CPU。CPU（中央处理器）是一种通用的处理器，其主要任务是执行计算机程序中的指令和序列。它能够处理复杂的逻辑判断、分支、跳转、内存访问等操作，因此在执行大多数通用计算和控制任务时表现出色，例如：办公软件、数据库等应用时。前端GPU主要用于浏览器中的图形和图像处理，以及实现更流畅的动画效果。
2023-05-24 11:18:04
1310
原创 Postman提示Error: connect ECONNREFUSED 127.0.0.1
这样的提示错误有两个原因，一端口重复利用无法开启下一个，二服务没有启动。端口占用概率不大，那就是服务没有启动。正如一下错误GET http://localhost:*Error: connect ECONNREFUSED 127.0.0.1:4000Request HeadersUser-Agent: PostmanRuntime/7.26.5Accept: /Postman-Token: *Host: localhost:4000Accept-Encoding: gzip, defla
2022-12-12 11:15:57
8441
1
原创 vue2.x和3.x的双向绑定原理
1、vue2.x采用的是object.defineProperty1、vue2.x的双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的，通过object.defineProperty来劫持各个属性的setter，getter，在数据变化时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图变化，视图变化，数据也随之发生变化。2、Obejct.defineproperty（obj,prop,descriptor）方法，接收三个参数，分别是obj(定义其上属性
2022-04-11 17:46:23
2826
原创 bind，apply，call的区别和使用以及如何自己实现一个bind
1、相同点call、bind、apply都是为了改变this的指向问题。2、不同点2.1：call非严格模式下let fn = function(a,b){ console.log(this,a,b)}let obj = { name:'屈小康'}fn.call(obj,1,2) // this:obj a:1 b:2fn.call(1,2) //this:window 1 , 2fn.call(unll) // this:window undefined undefi
2022-03-28 22:05:27
323
原创 计算机网络 - - - TCP/IP四层模型与OSI七层模型
1、前言TCP/IP协议简称为TCP/IP，该协议的两个核心为：TCP(传输控制协议)和IP(网络协议)OSI参考模型，全称为开放系统互联参考模型，OSI将计算机网络体系结构划分为七层。2、对比TCP/IP与OSI模型对比3、TCP/IP 四层模型和 OSI 七层模型比较共同点OSI参考模型和TCP/IP参考模型都采用了层次结构的概念。都能够提供面向连接和无法连接两种通信服务机制。OSI参考模型和TCP/IP参考模型的传输层功能基本相似，都是负责为用户提供真正的端对端的通信服务，也对高层
2022-03-28 16:55:01
3769
原创 canvas自主总结学习
var canvas = document.querySelector("#cont")var ctx = canvas.getContent(“2d”)文字属性ctx.font = “16px 微软雅黑”；//设置文字大小字体ctx.fillText = (“hello word”，0，100，500) //实心字体 内容 位置 和最大宽度ctx.fillStyle = “red” // 设置颜色ctx.strokeText(“hello word” ,0 ,100 ,100) // 空.
2022-01-13 16:37:02
354
2
原创 HTTP请求头/响应头
协议头说明实例状态Accept可接受的响应内容类型（Content-Types）。Accept: text/plain固定Accept-Charset可接受的字符集。Accept-Charset: utf-8固定Accept-Encoding可接受的响应内容的编码方式。Accept-Encoding: gzip, deflate固定Accept-Language可接受的响应内容语言列表。Accept-Language: en-US固定C...
2021-09-27 20:13:04
151
原创 HTTP请求头referer
什么是referer？http referer 是header的一部分，当浏览器向web服务器发送请求的时候，一般会带上Referer，告诉服务器该网页是从哪一个链接过来的，服务器因此可以获得哪一些信息用于处理。referer的用途统计文章来源：例如有多少次来自谷歌的搜索结果，有多少次来自百度的搜索结果。图片防盗链：不是自己网站上的访问，图片显示404。图片防盗当我们复制其他网站的内容的时候，当里面有图片信息，粘贴下来你会发现图片无法显示。场景：a站点的图片全部存储在c站点（云服务器
2021-09-27 10:43:56
495
原创 长列表渲染优化
为什么要使用虚拟列表？当数据量很大的时候，像有10万条数据的时候，我们一次性获得所有数据是不可能的，当然我们也可以使用分页的效果，但是这样用户的体验就不好了，用户喜欢往下滑动获得数据展示。当时当我们根据滑动获取数据的时候就会遇到另一个问题，不停的加载数据，导致页面堆积的节点越来越多，内存不断的增加，最后连滚动都出现了卡顿。所以虚拟列表蕴蓄而生什么是虚拟列表？虚拟列表也没有什么特别的地方，就是在页面上创建一个容器作为可视区，在这个可视区内展示长列表中的一部分，也就是在可视区域内渲染列表。一个简
2021-09-26 20:20:52
650
原创 前端工程化！你了解多少？
什么是前端工程化？一切能够提升前端开发效率，提高前端应用质量的手段和工具都是前端工程化。如何做前端工程化？前端工程化就是为了让前端开发能够自成体系，所以我看来应该从模块化 组件化 规范化 自动化 四个方面来说说。模块化简单来说，模块化就是将一个大文件拆分成相互依赖的小文件，在进行统一的拼装和加载。JS模块化在ES6之前，JavaScript一直没有模块系统，这对开发大型复杂的前端工程造成了巨大的障碍。对此社区制定了一些模块加载方案，如CommonJS、AMD和CMD等。现在ES6已
2021-09-07 16:40:26
174
原创 什么是虚拟DOM？虚拟DOM的定义和作用？
虚拟DOM的作用和定义什么是虚拟DOM虚拟DOM就是普通的js对象。是一个用来描述真实dom结构的js对象，因为它不是真实的dom，所以才叫做虚拟dom。虚拟dom的作用我们都知道传统的dom数据发生变化的时候，我们都需要不断的去操作dom，才能更新dom数据，虽然后面出现了模板引擎，可以让我们一次性更新多个dom。但模板引擎依旧没有一种可以追踪状态的机制，当引擎内某个数据发生变化时，它依然操作dom去重新渲染整个引擎。而虚拟dom可以很好地跟踪当前dom状态，因为它会根据当前数据生成一
2021-09-03 14:17:41
10088
原创 Render函数的解析，template的作用
1、什么是render函数 简单来说，在vue中我们使用模板HTML语法组件页面的，使用render函数我们可以用js语言来构建DOM。 因为vue是虚拟DOM，所以在拿到template模板的同时也需要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。 当使用使用render函数描述虚拟DOM时，vue提供一个函数，这个函数就是构建虚拟DOM所需的工具。官网起名叫createElement。类型：(c
2021-09-03 11:26:40
2959
2
原创 JS对象深克隆
话不多说直接上代码！function deepClone(obj){ if(typeof obj !== 'object') return obj if(obj instance RegExp) return new RegExp(obj) if(obj instance Date) return new Date(obj) //new obj.constructor = new Object() // 为了防止 传过来的 是一个 实例 这样也可以实现克隆 let cloneObj = ne
2021-09-02 10:43:52
139
原创 mixin、hoc、render props、react-hooks的优劣对比
1、Mixin缺陷：组件和mixin之间存在隐式依赖（Mixin中会定义一些特殊的方法，但是当组件过多的时候，我们就很容易忘记查看，导致不可预期的错误！）多个Mixin之间可能产生冲突（比如定义相同的state字段）Mixin倾向于增加更多状态，这降低了应用的可预期性。组件自身的方法和state字段不敢轻易删除，因为难以确认有没有Mixin依赖它，Mixin也难以维护，因为Mixin逻辑最后会被打包合并在一起，很难知道那个是输入那个是输出。2、HOC相对于Mixin的优势：HOC通过外
2021-09-01 10:48:27
301
原创 有哪些可能引起前端安全的问题？
1、跨站脚本攻击（Cross-Site Scripting ，XSS）一种代码注入方式，为了与css区分所以称之为XSS。早期常见于网络论坛，起因是网站没有对用户的输入进行严格的限制，使得攻击者可以将脚本上传到帖子让其他人在浏览器到有恶意的脚本页面。2、iframe滥用iframe中的内容是由第三方来提供的，默认情况下它们不受我们的限制，它们可以在iframe中运行Javascript脚本、Flash插件、弹出对话框等。3、跨站请求伪造（Cross-Site Request Forgeries ，
2021-08-31 10:44:36
410
原创 React中diff算法
!! 建议看英文文档，一看就会，不用看其他小伙伴的总结！，官网链接在下面。一下内容是我在官网凭自己的相法写的，不建议观看！！！l1、Element of Different TypesWhenever the root elements have different types，React will tear downthe old tree and build the new tree from scratch。Going from a label to img label , or from Ar
2021-08-30 10:49:34
147
原创 react中setState()是异步的还是同步的那?是否可以控制它的同步还是异步执行？
上一篇我们说到了setState的合并策略，而setState是同步还是异步的，和setState()的批量处理有很大的关系。 可以先看看这个文章在来看同步还是异步的！react中setState()的执行策略是什么？如何合并的那？如何控制合并？setState()是同步还是异步那？看看一下代码的执行情况：import React, { Component } from 'react';class com2 extends Component { state = { n
2021-08-24 10:24:30
379
原创 react中setState()的执行策略是什么？如何合并的那？如何控制合并？
学习react你一定使用了它的setState，那么它的更新策略是什么那？内部是如何运行的那？下面内容给你解释清楚。react开发对setState的使用可能一点也不陌生，但肯定会碰到过这种情况import React from 'react'export default class BatchedDemo extends React.Component { state = { number: 0, } handleClick = () => {
2021-08-23 21:08:02
836
1
原创 Vue中的v-slot详解，作用域插槽和具名插槽
插槽在2.6.0中，我们为具名插槽和作用域插槽引入了一个新的统一的语法，即v-slot。它取代了slot和slot-scope这两个目前已被废弃但未被移除且仍在文档中的attribute中。插槽内容Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 元素作为承载分发内容的出口。它允许你像这样合成组件：...
2021-08-23 09:28:36
24668
原创 什么是BFC？
什么是BFC？BFC（Block formatting context）旨意为“块级作用域上下文”。它是一个独立的渲染区域，只有Block-level box参与，它定义了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。如何创建BFCfloat的值不是none。position的值不是static或者relative。display的值是inline-block、table-cell、flex。overflow的值不是visible。BFC的作用1.利用B
2021-08-19 17:03:00
121
原创 如何实现一个盒子居中对齐
有7中方法可以实现这个要求1、先回答最长用的方式定位整体方案 父相自绝<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, ini
2021-08-19 15:48:48
463
原创 Vue的那些事情
1. Vue通信的方法有多少种？1.1 Vue 2.x的通信方式有1.第一种可以直接通过prop进行通信。2.第二种通过$emit 和 on。3.通过project和inject。4.通过vuex。5.通过slot插槽。6.on。3.通过 project 和 inject。4.通过vuex。5.通过slot插槽。6.on。3.通过project和inject。4.通过vuex。5.通过slot插槽。6.attrs 和 $listeners。1.2 Vue 3.x新增通信方式7.通过ref加
2021-08-18 15:41:44
210
(南阳理工)大数据实验报告02.docx
2020-12-30
大数据实验报告对应我的第二篇博客
2020-12-30
vue3.0中使用插件mavon-editor一直报错怎么回事？
2021-06-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人