越努力越幸运哦-CSDN博客

原创 vue中template模板编译的过程剖析

简述过程vue template模板编译的过程经过parse()生成ast(抽象语法树),optimize对静态节点优化，generate()生成render字符串之后调用new Watcher()函数，用来监听数据的变化，render 函数就是数据监听的回调所调用的，其结果便是重新生成 vnode。当这个 render 函数字符串在第一次 mount、或者绑定的数据更新的时候，都会被调用，生成 Vnode。如果是数据的更新，那么 Vnode 会与数据改变之前的 Vnode 做 diff，对内容

2020-10-18 20:05:11 3075

原创第二次剖析MVVM模式下的数据双向绑定及Vue数据的渲染及computed的实现

之前发不过一篇 Vue基于Object.defineProperty的双向绑定，今天又从新深入了解了一下首先通过Object.defineProperty来劫持数据，在编写的代码中封装了Observe函数来实现，可能数据有多层，所以会被多次调用，此函数主要是为了：观察对象，给对象增加Object.defindProperty封装了Compile模板编译函数，来对数据进行编译。创建了文档碎片：document.createDocumentFragment()createdocumentfragmen

2020-10-18 18:35:57 274

原创前端性能优化进阶

一、前端性能优化1、从输入url到页面展现发生了什么？（万能面试题）2、网络优化3、浏览器优化详细如下：从输入url到页面展现发生了什么？1）浏览器的地址栏输入URL并按下回车；2）DNS 解析：将域名解析成 IP 地址；3）TCP 连接：TCP 三次握手；4）发送 HTTP 请求；5）服务器处理请求并返回 HTTP 报文；6）浏览器解析渲染页面；7）断开连接：TCP 四次挥手说完整个过程的几个关键点后我们再来展开的说一下。1、URL我们常见的URL是这样的:http://ww

2020-10-14 23:20:46 626 1

原创深入了解浏览器的垃圾回收

什么是垃圾数据?我们在写 js 代码的时候，会频繁地操作数据。在一些数据不被需要的时候，它就是垃圾数据，垃圾数据占用的内存就应该被回收。变量的生命周期比如这么一段代码：let dog = new Object()let dog.a = new Array(1)当 JavaScript 执行这段代码的时候，会先在全局作用域中添加一个dog 属性，并在堆中创建了一个空对象，将该对象的地址指向了 dog。随后又创建一个大小为 1 的数组，并将属性地址指向了 dog.a。此时的内存布局图如下所示:：

2020-10-14 10:09:06 1114

原创轻松理解 JS 中的面向对象，顺便搞懂 prototype 和 proto

早期的JS没有class关键字，JS为了支持面向对象，使用了一种比较曲折的方式，这也是导致大家迷惑的地方。没有class，用函数代替首先JS连class关键字都没有，怎么办呢？用函数代替，JS中最不缺的就是函数，函数不仅能够执行普通功能，还能当class使用。比如我们要用JS建一个小狗的类怎么写呢？直接写一个函数就行：function Puppy() {}这个函数可以直接用new关键字生成实例：const myPuppy = new Puppy();这样我们也有了一个小狗实例，但是我们没有构

2020-09-13 22:34:28 657

原创什么是防抖与节流？如何实现？

有这样一种应用场景，在滚动事件中做一个复杂取值计算或者频繁的触发一个事件，这是很影响性能并容易导致页面卡顿的，所以要合并多次请求，通过函数做一个精确操作。这时就会用到函数防抖或者函数节流，那么，这两种方式有什么区别呢？个人认为：函数节流是：在固定的时间内触发事件，每隔n秒触发一次函数防抖是：当你频繁触发后，n秒内只执行一次一、防抖触发高频函数事件后，n秒内函数只能执行一次，如果在n秒内这个事件再次被触发的话，那么会重新计算时间思路：每次触发事件时都取消之前的延时调用方法 functio

2020-08-24 10:00:25 1778 2

原创 ES6中Proxy及Reflect基础

ES6中Proxy及Reflect基础一、Proxy二、Reflect1、目的一、ProxyProxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作var proxy = new Proxy(target, handler);Proxy 对象的所有用法，都是上面这种形式，不同的只是handler参数的写法。其中，new Proxy()表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数也是一个对象，用来定制拦截行为。 <script>

2020-08-14 13:13:40 154

原创 Promise的使用

Promise的使用一、Promise的含义二、Promise的特点三、Promise的缺点四、基本用法五、.then()六、.catch()七、.finally()八、.all()九、.race()十、案例一、Promise的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。二、P

2020-08-13 18:46:05 353 22

qq_47008195的博客