- 博客(47)
- 收藏
- 关注
RSS订阅
原创 理解虚拟dom
虚拟 DOM是由一系列的 JavaScript 对象组成的树状结构，每个对象代表着一个DOM元素，包括元素的标签名、属性、子节点等信息。虚拟 DOM中的每个节点都是一个 JavaScript 对象，它们可以轻松地被创建、更新和销毁，而不涉及到实际的DOM操作。将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的DOM与之保持同步。
2024-03-31 00:23:00
945
原创 vue和react的区别
因为View中很多控件的数据类型和Model中的属性不相同，例如Model中的时间数据可能是一串数字，View想要展示成日期的格式，这就需要一种转化，这个转换如果放在View不合适，因为View中不应该出现逻辑代码，放在Model中也不合适，这回导致Model臃肿庞大，因为这种问题的存在诞生了ViewModel，，但是单向数据流并非单向绑定，React想要从一个组件去更新另一个组件的状态，需要进行状态提升，即将状态提升到他们最近的祖先组件中，触发父组件的状态变更，从而影响另一个组件的显示。
2024-03-08 23:25:05
1294
原创 react的diff源码
react 的每次更新，都会将新的 ReactElement 内容与旧的 fiber 树作对比，比较出它们的差异后，构建新的 fiber 树，将差异点放入更新队列之中，从而对真实 dom 进行 render。简单来说就是如何通过最小代价将旧的 fiber 树转换为新的 fiber 树。
2024-03-08 23:03:15
945
原创 关于v8垃圾回收机制联想到的知识点
这也是两者最大的区别。V8 是使用副垃圾回收器和主垃圾回收器处理垃圾回收的，不过由于 JavaScript 是运行在主线程之上的，一旦执行垃圾回收算法，都需要将正在执行的 JS 脚本暂停下来，待垃圾回收完毕后再恢复脚本执行。：对于对象A，任何一个对象引用了A的值，计数器+1，引用失效时计数器-1，当计数器为0时责备回收，但是会存在循环引用的情况，可能会导致内存泄漏，自2012年起，所有的现代浏览器均放弃了这种算法。通过增量标记的方式，V8引擎可以在垃圾回收过程中与应用程序的逻辑交替执行，减少长时间的阻塞。
2024-02-02 13:01:59
1050
原创 复习资料--
在转发请求时，代理服务器会修改请求的域名、端口等信息，以实现跨域请求。与Promise.race()不同，Promise.all() 方法要求传入的所有Promise都必须解决(fulfilled)才能得到结果，否则，只要有一个Promise被拒绝(rejected)，整个新的Promise就会被拒绝。因为http是明文传输，内容可能被窃听，无法证明报文的完整，而且通信方的身份有可能遭遇伪装，所以要对http进行ssl加密，也就是https， https是这样解决http的问题的。
2024-01-06 15:38:40
879
1
原创 输入url到页面显示过程的优化
操作系统能够进行运算调度的最小单位。：操作系统最核心的就是进程，他是操作系统进行资源分配和调度的基本单位。一个进程就是一个程序的运行实例。启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，把这样的一个运行环境叫进程。线程是依附于进程的，而进程中使用多线程并行处理能提升运算效率。现代浏览器为多进程架构，打开一个页面，浏览器至少会打开四个进程 -- 浏览器主进程、渲染进程、GPU进程、网络进程。转换为用户可以与之交互的网页，
2024-04-03 22:23:52
783
原创 for of与for in 贱人
for in遍历时候：对象就是key，数组就是下标，字符串就是引用地址。for ... in 循环返回的值都是数据结构的 键值名。遍历对象返回的对象的key,遍历数组返回的数组的下标(key)。for ... in 循环不仅可以遍历数字键名,还会遍历原型上的值和手动添加的其他键。for of遍历时候：对象就是键值value，数组就是数组的值，字符串就是字符。for of 循环用来获取一对键值对中的值,而 for in 获取的是 键名。贱人。
2024-04-01 00:40:24
315
原创 Service worker离线缓存--初识 未学完版本
我们知道web worker是一个独立的线程。而Service Worker是一个独立的进程Service Worker基于WebWorker，继承webworker的各种特性。Service Worker理解为一个介于客户端和服务端之间的一个代理服务器。serviceWorker不会因为浏览器关闭而销毁serviceWorker可以多页面使用（同一个服务，serviceWorker可以服务全部，webWorker是一一对应的）httpslocalhost。
2024-03-26 20:15:41
216
原创 大量数据的优化之虚拟滚动和web workers
通过设置内容容器的高度来容纳所有数据，然后定义一个函数根据滚动的位置计算出可见区域的数据范围，再使用渲染函数传入可见数据的范围进行只渲染可见区域的数据。（1）设置每条数据的高度和容纳所有数据的高度（2）主要是使用scrollTop找出卷去的高度，clientHeight找出数据可见区域的高度。（3）第一个数据index：scrollTop/itemHeight 然后使用Math.floor进行向下取整。
2024-03-14 17:23:57
615
原创 sleep（1000）函数+parseInt
当 executor 函数被执行时，它通常会开始某个异步操作，并在操作完成时调用 resolve 或 reject 函数来指示 Promise 的状态。在 sleep 函数中，executor 函数使用 setTimeout 来模拟一个异步操作，等待指定的毫秒数后调用 resolve 函数，将 Promise 状态设置为已解决。在 example 函数中，由于 sleep 函数返回的是一个 Promise，我们可以使用 await 关键字来等待这个 Promise 的解决。
2024-03-13 15:55:48
207
原创 关于this指向和react vue2 3 的diff--后续补充
全局作用域中或者普通函数中this指向全局对象window立即执行函数this必定指向window定时器this指向window事件中this指向事件源对象方法中谁调用就指向谁对象内调用方法，谁调用就指向谁构造函数中this指向对象实例1.全局作用下默认绑定window 全局作用下独立调用函数绑定window2.隐式绑定：对象內调用方法 谁调用就指向谁3.显式绑定call、apply、bind bind返回一个新函数，新函数指向绑定的对象，旧函数不会4、new绑定。
2024-03-13 12:58:12
370
原创 vue和react的diff算法源码
Vue.js 的 Diff 算法通过对比新旧虚拟 DOM 树的节点，最小化了对实际 DOM 的操作，提高了渲染效率。这个算法的时间复杂度是 O(n)，其中 n 是节点的数量，是一种相对高效的算法。4.删除多余节点： 如果新节点的子节点数量小于旧节点，说明有节点被删除，需要将多余的节点从 DOM 中移除。5.新增节点： 如果新节点的子节点数量大于旧节点，说明有节点被新增，需要将新增的节点创建并插入到相应位置。2.更新属性： 如果同层级节点相同，就会比较其属性，更新新旧节点的属性。
2024-03-08 16:24:21
964
原创 vue2和vue3
大部分生命周期钩子名称上+“on”关键字，功能是类似的。不过vue3在组合式api种使用生命周期钩子时候需要先引入、而vue2在选项api种可以直接调用生命周期钩子。setup是围绕beforeCreate和created生命周期钩子运行的，不需要显示的去定义。
2024-03-08 15:27:12
610
原创 函数的变量提升以及导入模块语法的区别
综上所述，可以说 JavaScript 中的函数在变量提升方面具有特殊的行为，而函数声明会被完全提升，可以在声明之前调用。然而，函数表达式中的变量提升只包括变量本身，而不包括赋值的函数。JavaScript 中的函数存在变量提升的概念，这意味着在执行代码之前，函数声明会被提升到其作用域的顶部。由于函数表达式是赋值语句的一部分，在执行到该语句之前无法调用函数，因此在函数表达式之前调用会导致错误。虽然函数声明会被提升，但函数表达式的变量本身（而不是赋值的函数）会被提升，值为 undefined。
2024-02-10 21:12:06
226
原创 let var const
var有变量提升，函数作用域、，可以重复预定义let没有变量提升，块级作用域，可以重复定义，有暂时性死区（只有等到声明变量的那一行代码出现，才可以获取和使用该变量）const定义的变量不可重新定义，不可以重新赋值，没有变量提升，块级作用域，暂时性死区。
2024-02-10 14:17:16
784
原创 js和node事件循环区别
JavaScript是一门单线程语言，同一时间只能做一件事，但并不意味着单线程就是阻塞，而实现单线程非阻塞的方式就是事件循环。从上面可以看出，同步任务进入主线程，异步任务进入任务队列，主线程内的任务执行完毕为空，会去读取任务队列对应的任务，推入主线程执行。上述过程不断重复就是事件循环机制。
2024-02-06 21:12:00
676
原创 关于promise和async/await 和gennerator-未写完版本
async 和 await 是 (ES8) 引入的异步编程的语法糖，用于更方便地处理异步操作。基本原理：当一个函数被声明为 async 函数时，它将始终返回一个 Promise 对象。async 函数内部可以包含 await 表达式，这些表达式会暂停函数的执行，等待 Promise 解析为 resolved 状态，然后继续执行函数。await 只能在 async 函数中使用。await 表达式会暂停 async 函数的执行，等待 Promise 解析为 resolved 或 rejected 状态。
2024-02-02 23:48:21
607
原创 代码规范666
5. 在数组的方法回调函数中使用return语句，如果函数体由一条 返回一个表达式的语句 组成，这个时候就可以忽略return。// bad 没有返回值， 导致在第一次迭代后acc 就变成undefined了。Let事块级作用域，var是函数作用域，同样是为了减少代码的不可控，减少意外。2.当创建一个带有动态属性名的对象的时候，把定义的所有属性放在对象的一个地方。2.用array.push向数组中添加一个值，而不是直接用下标。// good getKey('enabled')是动态属性名。
2024-01-16 12:23:32
604
原创 script标签的defer和async及服务器渲染
有时候，项目中也会采用混合的方式，称为“同构应用”（Isomorphic App），结合了服务器渲染和客户端渲染的优势。在实际项目中，有时候也会选择使用混合的方式，即同构应用（Isomorphic App），结合了服务器渲染和客户端渲染的优势，以满足项目的多样化需求。渲染树包含了需要在屏幕上渲染的所有可见元素，但它并不包括不可见的元素，比如中的元素。3.对于内容频繁变化： 如果项目中的内容需要频繁变化，但用户对于初始加载速度的要求较高，可以考虑使用 SSR，以保证页面的初始内容是即时可见的。
2024-01-15 01:23:12
907
原创 酷家乐二面
1.设置图片占位符： 在图片加载之前，可以使用一个占位符，例如纯色的底图或者和图片相似的小尺寸的预览图。当图片加载完成后，再替换为实际的图片。2.指定图片的固定高度： 在加载图片之前，可以为图片元素设置一个固定的高度（如果宽度是固定的，则同时设置宽度），这样即使图片未加载时，占位的空间也已经预留好，不会因为图片加载引起布局变化。例如，可以在图片元素上应用一个淡入的动画，使得图片加载时过渡更加柔和，减轻用户感知的变化。在图片加载之前，可以使用占位符来占据图片的位置，防止图片加载前导致的节点挤在一起的情况。
2024-01-15 01:15:26
800
原创 学习记录1.10
问题出在第二次点击时，countdown 变成了-1或-2，这是因为在倒计时结束后，你只是将 countdown 重置为了当前的 this.state.countdown，但实际上应该将其重置为初始值。5.注意，this.setState() 方法是异步的，但它可以接受一个可选的回调函数，该回调函数会在状态更新完成并且组件重新渲染后被调用。3.this.setState() 是异步的，这意味着 React 可能会将多个 this.setState() 调用合并成一个单一的更新操作，以提高性能。
2024-01-14 02:16:41
781
原创 学习记录1.13
首先对所有的内存进行标记，然后从根对象遍历，还是被上下文变量使用就清除标记，然后清理所有带有标牌的变量，销毁并且回收他们所占用的空间，最后垃圾回收程序做一次内存清除。异步任务：不进入主线程，而是进入任务了队列的任务，当主线程中的任务运行完成了，才会从任务队列中取出异步任务，放入主线程中执行。这样的操作通常用于对象的浅拷贝，即创建了一个新对象，该对象与原始对象共享相同的属性值，但是它们在内存中是两个独立的对象。浅拷贝：就是基本类型拷贝值，引用类型拷贝内存地址，只拷贝最外面一层，不会递归的去拷贝；
2024-01-14 02:10:09
937
原创 学习记录1.14
可以看到上面我们为两个盒子的margin外边距设置的是10px，可结果显示两个盒子之间只有10px的距离，这就导致了margin塌陷问题，这时margin边距的结果为最大值，而不是合，为了解决此问题可以使用BFC规则（为元素包裹一个盒子形成一个完全独立的空间，做到里面元素不受外面布局影响），或者简单粗暴方法一个设置margin，一个设置padding。
2024-01-14 02:06:56
976
原创 滴滴实习的成长
然后因为身为实习生，大多数是杂活，难度没那个么高的，能学到的很少，但是我觉得我想要真正的参与到项目需求里面，所以说就主动和领导说，有没有机会能参与项目需求，想要学到很多东西，然后呢，后面就真的接到了一个项目需求。其次，要提高问问题的质量，在问问题之前要在脑子里有自己的想法或者大致的解决方案，不至于在请教沟通的过程中脑袋空空，只顾头而听不懂更深层次的内容；大部分工作不是自己闷头干就能完成的，职场通常是团队合作，需要跟不同的角色和团队打交道，会沟通，会高质量沟通可以事半功倍。提升了我的前端开发能力。
2024-01-14 00:12:00
353
原创 echarts大屏
我们首先在 head 部分引入了 ECharts 库，然后在 body 中创建了一个 div 元素作为图表容器（id 为 'industryChart'），并在 body 底部的 script 标签中进行了图表的初始化和配置。在创建 ECharts 大屏时，开发者通常会选择合适的图表类型、设计布局，配置图表样式和交互行为，以及与后端数据源进行交互，实现实时更新和动态展示数据。总的来说，ECharts 大屏是利用 ECharts 图表库创建的、用于数据可视化的大屏展示，用于展示和分析大量的数据信息。
2024-01-13 23:58:15
843
原创 7月最后一周学习内容
container用开启 BFC，解决高度塌陷。left设置向左浮动，right使用开启 BFC。（父盒子和右盒子开启bfc，左盒子固定宽高）2.文本溢出显示省略号(1).设置文本不换行 overflow：hidden；文本溢出的显示省略号(2).伪元素法，子绝父相3.flex布局的实际应用（1）.实现两行多列三种方法（两行两列）：三列布局：4.
2023-07-31 17:00:17
85
1
原创 最近总结7.1-7.19
首先添加所有，然后提交我的描述 再push进去 push完事后切换主分支pull拉取我个人分支的内容，再切换到我自己的分支取merge合并我的分支。有冲突解决冲突。(2).作用:在执行其指定的回调。(3).什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。todo.isEdit = true //绑定了一个input输入框的是否可见性，即如果=true，输入框才可见} else {
2023-07-19 10:55:47
81
原创 Vue Router 的路由模式 hash 和 history 的实现原理？
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置location，也不会返回404错误。它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面。router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login。
2023-04-23 21:05:48
95
原创 实现异步请求有哪些方式
axios支持各种请求类型，如GET、POST、PUT等，并支持并发请求、请求取消、请求拦截、响应拦截、错误处理等功能。axios也提供了丰富的配置选项，例如请求超时时间、请求头、响应类型等。它可以同时处理浏览器中的XHR请求和Node.js中的http请求，并且具有很好的API设计。 React、Vue等现代JavaScript框架中也经常使用axios来进行HTTP请求，如果您使用这些框架，建议使用npm安装axios并通过模块化方式引入。// 设置请求方式和请求地址。// 创建一个XHR对象。
2023-04-23 19:50:08
1347
原创 vue-router源码
监听到url的变化之后,根据不同的路径获取渲染内容,再把内容填充到div容器里.从上面案例可知,监听url的变化一般在两个地方,第一是在window.onpopstate包裹的回调函数里,第二是在执行history.pushState或history.replaceState的后面.这种方式可能是调用HTML5 history API实现,也可能是点击前进后退或者改变路由hash.但是不管采用哪种方式,它都不能造成浏览器刷新,仅仅只是单纯的url发生变化.然后构造函数暴露到入口文件里。前端路由的实现原理.
2023-04-23 18:45:22
123
原创 【无标题】
当我们给一个组件绑定一个事件的时候时候，我们绑定是一个自定义事件，而这个时候我们去点击的时候并不能直接触发这个事件，因为在组件内部并没有去emit(‘click’)这个事件。自定义事件：子组件在父组件中使用时，直接绑定在子组件上的事件就是自定义事件，必须经过子组件的触发vm.$emit()才能执行。如果想触发自定义的click事件，就得在子组件里对元素进行事件绑定，这个触发的才是原生的Dom事件。原生事件：直接在子组件里的模板上绑定的事件，子组件引入后是可以直接触发的。
2023-04-16 10:52:28
30
原创 node，express
Node. js是一个 JavaScript的运行环境，是一个服务器端的“ JavaScript解释器”，用于方便高效地搭建一些响应速度快、易于扩展的网络应用。（1） Node. js是基于事件驱动和无阻塞的，非常适合处理并发请求，因此构建在 Node. js的代理服务器相比其他技术实现的服务器要好一点。（2）功能强大，非阻塞式I/O，在较慢的网络环境中，可以分块传输数据，事件驱动，擅长高并发访问。npm是 Node. js中管理和分发包的工具，可用于安装、卸载、发布、查看包等。
2023-04-16 10:11:17
86
原创 webpack之模块热加载
首先在webpack-dev-sever启动后，会实现一个轮询机制，就是定时的去查看文件是否修改，我们可以通过配置watch和watchOptions去配置，当检测到有文件改变时会重新进行编译，并将编译后的结果保存到内存中，没有写入到文件夹中，所以不会生产dist文件，加快了读取速度，减少I/O带来的性能问题。首先tree-shark是基于ES的模块导入实现的，由于ES的模块导入是静态导入，可以在执行前静态分析导入模块是否被使用，从而不会被打包。然后使用 Terset插件删除这些没有被使用的导出值。
2023-04-15 21:49:06
576
原创 fetch
fetch()是 XMLHttpRequest 的升级版，用于在 JavaScript 脚本里面发出 HTTP 请求。浏览器原生提供这个对象。
2023-04-15 15:40:19
249
原创 复习git
用作平时开发的主分支，并一直存在，永远是功能最新最全的分支，包含所有要发布 到下一个 release 的代码，主要用于合并其他分支，比如 feature 分支；- master分支：最为稳定功能比较完整的随时可发布的代码，即代码开发完成，经过测试，没有明显的bug，才能合并到 master 中。git rebase branch会把branch分支优先合并到主分支，然后把本地分支的commit放到主分支后面，合并后的分支就好像从合并后主分支又拉了一个分支一样，本地分支本身不会保留提交历史。
2023-04-15 15:25:42
32
原创 复习之nginx反向代理
服务器作为我们项目中非常重要的组成成分，而作为前端，如果只知道接接口，请求数据，渲染页面，没有对服务器相关知识进行了解和掌握，那么在知识广度上的缺失或许会成为某个Bug困住我们的原因，因此，作为前端，并不是说我们需要将服务器、网络等其他相关的东西学得非常深入，而是需要我们掌握这些东西的基础概念和基础用法，给我们分析问题储备更多的“锦囊”，让我们再遇到更加复杂的问题时，能够从更广的维度分析问题，找到问题的关键点，而不是局限在前端中四处碰壁！！
2023-04-15 15:22:38
83
原创 mongodb 和 mysql
它支持各种存储引擎，如InnoDB（它是默认的），Federated，MyISAM，Memory，CSV，Archive，Blackhole和Merge。查询k的值大于v的文档，$ gte大于等于(>=) : db.collectionName.find({k : {$gt:v}})（8）支持 Python，PHP，Ruby，Java，C，C#，Javascript，Perl 及C++语言的驱动程序，社区中也。查询k的值为v的文档 : db.collectionName.find({k : v})
2023-04-13 21:34:21
140
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人