- 博客(115)
- 收藏
- 关注
RSS订阅原创 JS内存泄露如何检测？场景有哪些？
标记结束后，标记整理算法会将活着的对象（即不需要清理的对象）向内存的一端移动，最后清理掉边界的内存（如下图）：当一个对象不再被使用，但是由于某种原因，它的内存没有被释放，这就是内存泄漏。V8 的垃圾回收机制也是基于标记清除算法，不过对其做了一些优化。：闭包不是内存泄露，闭包的数据是不可以被回收的。解决以上的缺点可以使用。
2024-07-11 13:59:56
901
原创 Composition API 和 React Hooks 的对比
前者setup(相当于created、beforeCreate的合集)只会调用一次，而React Hooks函数在渲染过程中会被多次调用。●Composition API无需使用useMemo、useCallback，因为setup只会调用一次，在setup闭包中缓存了变量。●Composition API无需顾虑调用顺序，而React Hooks需要保证hooks的顺序一致（比如不能放在循环、判断里面）●Composition API的ref、reactive比useState难理解。
2024-07-11 13:50:45
141
原创 Vue3为何比Vue2快
proxy响应式：深度监听，性能更好（获取到哪一层才触发响应式get，不是一次性递归） PatchFlag 动态节点做标志 HoistStatic 将静态节点的定义，提升到父作用域，缓存起来。多个相邻的静态节点，会被合并起来 CacheHandler 事件缓存 SSR优化: 静态节点不走vdom逻辑，直接输出字符串，动态节点才走 Tree-shaking 根据模板的内容动态import不同的内容，不需要就不import
2024-07-11 13:50:14
107
原创 CSS3的新特性
css，即层叠样式表（Cascading Style Sheets）的简称，是一种标记语言，由浏览器解释执行用来使页面变得更美观。css3是css的最新标准，是向后兼容的，CSS1/2的特性在 CSS3 里都是可以使用的。而 CSS3 也增加了很多新特性，为开发带来了更佳的开发体验。
2024-07-11 13:48:29
1587
原创 选择器权重计算方式
important > 内联样式 = 外联样式 > ID选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 元素选择器 = 伪元素选择器 > 通配选择器 = 后代选择器 = 兄弟选择器。css选择器的解析原则：选择器定位DOM元素是从右往左的方向，这样可以尽早的过滤掉一些不必要的样式规则和元素。
2024-07-11 13:45:59
208
原创 盒模型
content（元素内容） + padding（内边距） + border（边框） + margin（外边距）延伸：box-sizing。
2024-07-10 21:21:13
105
原创 computed 的实现原理
computed 本质是一个惰性求值的观察者computed watcher。其内部通过 this.dirty 属性标记计算属性是否需要重新求值。
2024-07-10 21:20:28
260
原创 watch 的理解
注意：Watcher : 观察者对象 , 实例分为渲染 watcher (render watcher),计算属性 watcher (computed watcher),侦听器 watcher（user watcher）三种。watch没有缓存性，更多的是观察的作用，可以监听某些数据执行回调。当我们需要深度监听对象中的属性时，可以打开deep：true选项，这样便会对对象中的每一项进行监听。这样会带来性能问题，优化的话可以使用字符串形式监听。
2024-07-10 21:19:58
130
原创 说一说keep-alive实现原理
LRU（Least recently used） 算法根据数据的历史访问记录来进行淘汰数据，其核心思想是“如果数据最近被访问过，那么将来被访问的几率也更高”。(墨菲定律：越担心的事情越会发生)keep-alive实例会缓存对应组件的VNode,如果命中缓存，直接从缓存对象返回对应VNode。keep-alive组件接受三个属性参数：include、exclude、max。
2024-07-10 21:10:53
190
原创 template预编译是什么
而模板编译的目的仅仅是将template转化为render function，这个过程，正好可以在项目构建的过程中完成，这样可以让实际组件在 runtime 时直接跳过模板渲染，进而提升性能，这个在项目构建的编译template的过程，就是预编译。对于 Vue 组件来说，模板编译只会在组件实例化的时候编译一次，生成渲染函数之后在也不会进行编译。因此，编译对组件的 runtime 是一种性能损耗。
2024-07-10 19:06:08
85
原创 介绍一下Vue中的Diff算法
在diff中，只对同层的子节点进行比较，放弃跨级的节点比较，使得时间复杂从O(n^3)降低值O(n)，也就是说，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。在新老虚拟DOM对比时。
2024-07-10 19:04:03
127
原创 说说Vue2.0和Vue3.0有什么区别
重构响应式系统，使用Proxy替换Object.defineProperty，使用Proxy优势： 可直接监听数组类型的数据变化 监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升 可拦截apply、ownKeys、has等13种方法，而Object.defineProperty不行 直接实现对象属性的新增/删除 新增Composition API，更好的逻辑复用和代码组织 重构 Virtual DOM 模板编译时的优化，
2024-07-10 19:03:20
114
原创 HTTP世界全览
HTTP世界全览互联网上绝大部分资源都使用 HTTP 协议传输； 浏览器是 HTTP 协议里的请求方，即 User Agent； 服务器是 HTTP 协议里的应答方，常用的有 Apache 和 Nginx； CDN 位于浏览器和服务器之间，主要起到缓存加速的作用； 爬虫是另一类 User Agent，是自动访问网络资源的程序。 TCP/IP 是网络世界最常用的协议，HTTP 通常运行在 TCP/IP 提供的可靠传输基础上 DNS 域名是 IP 地址的等价替代，需要用域名解析实现到 I
2024-07-10 18:59:43
156
原创 HTTP前生今世
HTTP前生今世HTTP 协议始于三十年前蒂姆·伯纳斯 - 李的一篇论文 HTTP/0.9 是个简单的文本协议，只能获取文本资源； HTTP/1.0 确立了大部分现在使用的技术，但它不是正式标准； HTTP/1.1 是目前互联网上使用最广泛的协议，功能也非常完善； HTTP/2 基于 Google 的 SPDY 协议，注重性能改善，但还未普及； HTTP/3 基于 Google 的 QUIC 协议，是将来的发展方向
2024-07-10 18:57:57
131
原创 HTTP
HTTP状态码1xx 信息性状态码 websocket upgrade 2xx 成功状态码 200 服务器已成功处理了请求 204(没有响应体) 206(范围请求 暂停继续下载) 3xx 重定向状态码 301(永久) ：请求的页面已永久跳转到新的url 302(临时) ：允许各种各样的重定向，一般情况下都会实现为到 GET 的重定向，但是不能确保 POST 会重定向为 POST 303 只允许任意请求到 GET 的重定向 304 未修改：自从上次请求后，请求的网页未修改
2024-07-10 18:57:27
174
原创 作用域
作用域链的本质上是一个指向变量对象的指针列表。变量对象是一个包含了执行环境中所有变量和函数的对象。作用域链的前 端始终都是当前执行上下文的变量对象。全局执行上下文的变量对象（也就是全局对象）始终是作用域链的最后一个对象。一旦我们将这些作用域嵌套起来，就变成了另外一个重要的知识点「作用域链」，也就是 JS 到底是如何访问需要的变量或者函数的。图中的 [[Scopes]] 是个数组，作用域的一层层往上寻找就等同于遍历 [[Scopes]]。
2024-07-10 18:56:52
118
原创 介绍 DOM 的发展
DOM：文档对象模型（Document Object Model），定义了访问HTML和XML文档的标准，与编程语言及平台无关 DOM0：提供了查询和操作Web文档的内容API。未形成标准，实现混乱。如：document.forms['login'] DOM1：W3C提出标准化的DOM，简化了对文档中任意部分的访问和操作。如：JavaScript中的Document对象 DOM2：原来DOM基础上扩充了鼠标事件等细分模块，增加了对CSS的支持。如：getComputedStyle(elem, pseu
2024-07-10 18:56:27
102
原创 Javascript垃圾回收方法
在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间。
2024-07-09 21:48:07
214
原创 把＜script＞放在＜/body＞之前和之后有什么区别？浏览器会如何解析它们？
按照HTML标准，在</body>结束后出现<script>或任何元素的开始标签，都是解析错误 虽然不符合HTML标准，但浏览器会自动容错，使实际效果与写在</body>之前没有区别 浏览器的容错机制会忽略<script>之前的</body>，视作<script>仍在 body 体内。省略</body>和</html>闭合标签符合HTML标准，服务器可以利用这一标准尽可能少输出内容
2024-07-09 21:43:46
102
原创 JavaScript 中，调用函数有哪几种方式
方法调用模式 Foo.foo(arg1, arg2); 函数调用模式 foo(arg1, arg2); 构造器调用模式 (new Foo())(arg1, arg2); call/applay调用模式 Foo.foo.call(that, arg1, arg2); bind调用模式 Foo.foo.bind(that)(arg1, arg2)();
2024-07-09 21:42:53
99
原创 WEB应用从服务器主动推送Data到客户端有那些方式
AJAX 轮询 html5 服务器推送事件 (new EventSource(SERVER_URL)).addEventListener("message", func); html5 Websocket (new WebSocket(SERVER_URL)).addEventListener("message", func);
2024-07-09 21:39:24
103
原创 继承
继承原型链继承，将父类的实例作为子类的原型，他的特点是实例是子类的实例也是父类的实例，父类新增的原型方法/属性，子类都能够访问，并且原型链继承简单易于实现，缺点是来自原型对象的所有属性被所有实例共享，无法实现多继承，无法向父类构造函数传参。 构造继承，使用父类的构造函数来增强子类实例，即复制父类的实例属性给子类，构造继承可以向父类传递参数，可以实现多继承，通过call多个父类对象。但是构造继承只能继承父类的实例属性和方法，不能继承原型属性和方法，无法实现函数服用，每个子类都有父类实例函数的副本，影响性
2024-07-09 21:38:53
106
原创 判断是否是数组
判断是否是数组Array.isArray(arr Object.prototype.toString.call(arr) === '[Object Array]' arr instanceof Array array.constructor === Array
2024-07-09 21:36:17
93
原创 加载
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
2024-07-09 21:35:43
394
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人