原理理解
whose_moon月
这个作者很懒,什么都没留下…
展开
-
js和css的加载造成阻塞
浏览器渲染原理图:JS1.现代浏览器会并行加载js文件,参见start time列,但是按照书写顺序执行代码2.加载或者执行js时会阻塞对标签的解析,也就是阻塞了dom树的形成,只有等到js执行完毕,浏览器才会继续解析标签。没有dom树,浏览器就无法渲染,所以当加载很大的js文件时,可以看到页面很长时间是一片空白之所以会阻塞对标签的解析是因为加载的js中可能会创建,删除节点等,这些操作会对dom树产生影响,如果不阻塞,等浏览器解析完标签生成dom树后,js修改了某些节点,那么浏览器又得重新解析,然后原创 2021-10-28 22:30:53 · 584 阅读 · 0 评论 -
var与let的区别
当用let声明一个变量,它使用的是词法作用域或块作用域。不同于使用 var声明的变量那样可以在包含它们的函数外访问,块作用域变量在包含它们的块或for循环之外是不能访问的。当let声明出现在循环体里时拥有完全不同的行为。不仅是在循环里引入了一个新的变量环境,而是针对每次迭代都会创建这样一个新作用域。 这就是我们在使用立即执行的函数表达式时做的事,所以在 setTimeout例子里我们仅使用let声明就可以了。...原创 2021-09-01 23:02:54 · 142 阅读 · 0 评论 -
JS 的基本数据类型和引用数据类型的区别
基本数据类型的值是不可变的,任何方法都无法改变一个基本类型的值,当这个变量重新赋 值后看起来变量的值是改变了,但是这里变量名只是指向变量的一个指针,所以改变的是指针的 指向改变,该变量是不变的,但是引用类型可以改变。 基本数据类型不可以添加属性和方法,但是引用类型可以。基本数据类型的赋值是简单赋值,如果从一个变量向另一个变量赋值基本类型的值,会在变量对象上创建一个新值,然后把该值复制到为新变量分配的位置上,引用数据类型的赋值是对象引用。 基本数据类型的比较是值的比较,引用类型的比较是引用的比较原创 2021-08-18 23:37:05 · 159 阅读 · 0 评论 -
箭头函数与普通函数的区别
1、箭头函数没有 this,所以需要通过查找作用域链来确定 this 的值,这就意味着如果箭 头函数被非箭头函数包含,this 绑定的就是最近一层非箭头函数的 this。2、箭头函数没有自己的 arguments 对象,但是可以访问外围函数的 arguments 对象。3、不能通过 new 关键字调用,同样也没有 new.target 值和原型。...原创 2021-08-17 22:54:40 · 112 阅读 · 0 评论 -
GET 和 POST 的区别
get 参数通过 url 传递,post 放在 request body 中。get 请求在 url 中传递的参数是有长度限制的,而 post 没有。get 比 post 更不安全,因为参数直接暴露在 url 中,所以不能用来传递敏感信息。get 请求只能进行 url 编码,而 post 支持多种编码方式get 请求会浏览器主动 cache,而 post 支持多种编码方式。get 请求参数会被完整保留在浏览历史记录里,而 post 中的参数不会被保留。GET 和 POST 本质上就是 TCP 链原创 2021-08-11 23:44:52 · 157 阅读 · 0 评论 -
javascript是单线程的理解
一、javascript为什么是单线程的JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如两个线程同时操作一个dom。任务队列单线程就意味着所有任务要排队,如果前一个占用时间很长(如ajax请求),其实造成了不必要的资源的浪费。所以聪明的语言设计者想到了这点,便将任务可以分为两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同原创 2021-08-06 00:01:44 · 415 阅读 · 1 评论 -
this的理解
有以下几种状况this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象function a(){ var user = "伏地魔"; console.log(this.user); //undefined console.log(this); //Window}a();var o = { user:"伏地魔", fn:function(){ console.l原创 2021-07-31 01:02:37 · 104 阅读 · 0 评论 -
函数柯里化
什么是函数柯里化?是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数而且返回结果的新函数的技术。它的重要意义在于可以把函数完全变成「接受一个参数;返回一个值」的固定形式,这样对于讨论和优化会更加方便。简单的例子function add(){ let arr = Array.prototype.slice.call(arguments) function _add(){ let _arr = Array.prototype原创 2021-07-28 23:13:16 · 125 阅读 · 0 评论 -
虚拟 DOM 的优缺点?
什么是虚拟dom用js模拟一颗dom树,放在浏览器内存中.当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中,反应到实际的dom树,减少了dom操作.虚拟DOM将DOM树转换成一个JS对象树,diff算法逐层比较,删除,添加操作,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for引入key值进行区分.优点:保证性能下限: 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作,它的一些 DOM 操作的实现必须是普适..原创 2021-07-26 22:40:14 · 421 阅读 · 0 评论 -
手写instanceof
instanceof可检测某个对象是不是另一个对象的实例。另外,更重的一点是 instanceof 可以在继承关系中用来判断一个实例是否属于它的父类型。function myInstanceOf(tInstance, TClass){ let proto = tInstance.__proto__; let prototype = TClass.prototype; if(!proto){ return false; }else if(proto == p原创 2021-07-21 22:06:02 · 61 阅读 · 0 评论 -
作用域和作用域链的理解
作用域(scope)1. 什么是作用域作用域是在运行代码中某些特定部分中变量、函数和对象的可访问性。也就是说,作用域决定了代码区块中变量和其他的可访问性。ES6之前JavaScript没有块级作用域,只有全局作用域和局部作用域。ES6的到来,为我们提供了块级作用域,可通过命令let和const来体现。所有未定义直接赋值的变量自动声明为全局变量2. 什么是作用域链如果想得到在当前的作用域里没有定义的变量(即自由变量)的值,需要向父级作用域(下文有解释)寻找,如果父级没有,会接着向上寻找,如果直原创 2021-07-19 21:42:52 · 3757 阅读 · 0 评论 -
dom事件的三阶段
当一个DOM事件触发时,它不是在触发的对象上只触发一次的,而是经历三个阶段。分别为1:一开始从文档的根节点流向目标对象(捕获阶段)2:然后在目标对向上被触发(目标阶段)3:之后再回溯到文档的根节点(冒泡阶段).事件捕获阶段事件的第一个阶段是捕获阶段。事件从文档的根节点出发,随着DOM树的结构向事件的目标节点流去。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点。捕获阶段的主要任务是建立传播路径,在冒泡阶段,事件会通过这个路径回溯到文档跟节点。当事件发.原创 2021-07-23 22:07:41 · 1731 阅读 · 0 评论 -
原型与原型链的理解
一、 构造函数构造函数的目的就是为了创建一个自定义类,并且创建这个类的实例。构造函数需要用new关键字来调用。function Person(name, age, gender) { this.name = name this.age = age this.gender = gender this.sayName = function () { alert(this.name); } }va原创 2021-07-18 18:28:41 · 101 阅读 · 0 评论 -
手写Promise
new Promise((resolve, reject) => {}).then((res) => {}, (err) => {}).then(res => {}).catch(reason => {});Promise.all([promise1, ...]).then();实现以上class Promise{ constructor(callback){ this.state = 'pending'; //状态原创 2021-07-11 23:32:01 · 155 阅读 · 1 评论