- 博客(11)
- 收藏
- 关注
原创 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
3133
原创 第二次剖析MVVM模式下的数据双向绑定及Vue数据的渲染及computed的实现
之前发不过一篇 Vue基于Object.defineProperty的双向绑定,今天又从新深入了解了一下首先通过Object.defineProperty来劫持数据,在编写的代码中封装了Observe函数来实现,可能数据有多层,所以会被多次调用,此函数主要是为了:观察对象,给对象增加Object.defindProperty封装了Compile模板编译函数,来对数据进行编译。创建了文档碎片:document.createDocumentFragment()createdocumentfragmen
2020-10-18 18:35:57
293
原创 前端性能优化进阶
一、前端性能优化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
642
1
原创 深入了解浏览器的垃圾回收
什么是垃圾数据?我们在写 js 代码的时候,会频繁地操作数据。在一些数据不被需要的时候,它就是垃圾数据,垃圾数据占用的内存就应该被回收。变量的生命周期比如这么一段代码:let dog = new Object()let dog.a = new Array(1)当 JavaScript 执行这段代码的时候,会先在全局作用域中添加一个dog 属性,并在堆中创建了一个空对象,将该对象的地址指向了 dog。随后又创建一个大小为 1 的数组,并将属性地址指向了 dog.a。此时的内存布局图如下所示::
2020-10-14 10:09:06
1124
原创 轻松理解 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
675
原创 什么是防抖与节流?如何实现?
有这样一种应用场景,在滚动事件中做一个复杂取值计算或者频繁的触发一个事件,这是很影响性能并容易导致页面卡顿的,所以要合并多次请求,通过函数做一个精确操作。这时就会用到函数防抖或者函数节流,那么,这两种方式有什么区别呢?个人认为:函数节流是:在固定的时间内触发事件,每隔n秒触发一次函数防抖是:当你频繁触发后,n秒内只执行一次一、防抖触发高频函数事件后,n秒内函数只能执行一次,如果在n秒内这个事件再次被触发的话,那么会重新计算时间思路:每次触发事件时都取消之前的延时调用方法 functio
2020-08-24 10:00:25
1796
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
165
原创 Promise的使用
Promise的使用一、Promise的含义二、Promise的特点三、Promise的缺点四、基本用法五、.then()六、.catch()七、.finally()八、.all()九、.race()十、案例一、Promise的含义Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。二、P
2020-08-13 18:46:05
363
22
原创 ES6中 Set 和 Map 数据结构以及Symbol
ES6中 Set 和 Map 数据结构以及Symbol一、Set1、Set 实例的属性和方法2、遍历操作3、遍历的应用二、WeakSet三、Map1、Map实例的属性和操作方法2、遍历方法四、WeakMap五、Symbol2、 作为属性名的 Symbol一、SetSet本身是一个构造函数,用来生成Set数据结构。const s=new Set() ;Set函数可以接受一个数组作为参数,用来初始化。const set = new Set([1, 2,3,4,4]) ;可以用于,去除字符串里面的
2020-08-12 19:48:17
171
原创 Node.js总结
一、Node是什么Node是一个基 于Chrome V8弓|擎的JavaScript代码运行环境。在 Windows PowerShell中使用命令行操作二、 Node.js运行环境安装官网: https://nodejs.org/en/三、 Node.js模块化开发3.1 JavaScript开发弊端JavaScript在使用时存在两大问题,文件依赖和命名冲突。3.2 Node.js中模块化开发规范1、Node.js规定一个JavaScript文件就是一个模块,模块内部定义的变量和函数默
2020-07-19 22:17:18
490
21
原创 call apply bind总结
相同点: 都可以改变函数内部的this指向.区别点:call 和apply会调用函数并組改变函数内部this指向.call 和apply传递的参数不一样, call传递参数aru1, aru2…形式apply 必须数组形式[arg]bind 不会调用函数,可以改变函数内部this指向.主要应用场景:call经常做继承.apply 经常跟数组有关系.比如借助于数学对象实现数组最大值最小值bind 不调用函数,但是还想改变this指向.比如改变定时器内部的this指向. //
2020-07-12 14:49:27
246
20
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人