- 博客(15)
- 收藏
- 关注
RSS订阅原创 回流和重绘
一、引言我们知道，浏览器在渲染时，会先解析HTML，生成DOM树，然后再解析CSS，生成CSSOM树，接着将DOM树和CSSOM树结合，生成Render树，这个Render树里面就包含了DOM节点和节点的样式信息，浏览器就是根据Render树进行渲染的。二、回流（reflow）当Render树里的一些位置、大小等样式改变时，浏览器需要重新计算元素的位置、尺寸等，引起页面布局的变化，这个就叫做回流（reflow）。页面在第一次加载渲染的时候，就经历了一次回流。三、重绘（repaint）当Render
2021-09-02 11:46:21
341
1
原创 JavaScript中的事件循环(Event Loop)
一、JavaScript是单线程的JavaScript是一门单线程的语言，就是说它的代码是按顺序执行的，但是有时候某些任务太耗时了，在它执行完之前，后面的代码都无法执行，那这个要怎么办呢？二、同步任务和异步任务为了解决上述的情况，JavaScript的开发者将任务分为了两类：同步任务异步任务在主线程中顺序执行的任务被分类为同步任务，而消耗资源多的、处理速度慢的任务，例如：图片加载，网络请求等，会被发送到任务队列（task queue）中，等待这个任务可以被执行了，任务队列才会通知主线程执行这
2021-09-01 22:02:35
280
原创 防抖与节流
一、防抖(debounce)1. 作用在规定的时间内多次调用同一函数，只执行最后一次函数调用。2. 分析函数在调用的时候，套一个定时器，如果在延时期间再次调用，则清除上一次的定时器，开启这次定时器。3. 函数防抖函数有两个参数：一个是进行防抖操作的函数fn，另一个是延时delay。 function debounce(fn, delay) { let timer = null;// 初始化定时器 // 返回一个经过防抖处理的函数，...args剩余参数，可以把不定数量的参
2021-08-18 16:34:06
313
原创 浅拷贝和深拷贝
一、引言在js中，数据分为基础类型和引用类型两大类：6种基础类型：number类型string类型boolean类型symbol类型null类型undefined类型1种引用类型：object类型对于基础类型的数据，其大小是固定不变的，所以变量名和值都存储在栈内存中的。对于引用类型的数据，其大小可能会变化，所以变量名和数据在堆内存中的地址存储在栈内存，数据本身存储在堆内存中。let a = 10let obj1 = { m: 111}对
2021-08-18 16:26:45
187
原创 JavaScript中的闭包
闭包的产生我们都知道，在js中，全局变量可以在所有位置被访问，而局部变量，只能在局部变量所在的作用域和同一作用域内声明的函数使用。如下面这个例子：function foo() { let a = 10; function bar() { console.log(a); } bar();}foo(); // 10console.log(a); // a is not defined那么有没有什么办法，可以使得在函数作用域外面使用局部变量呢？我们把
2021-08-18 11:56:03
132
原创 typeof和instanceof
一、typeoftypeof，字面上的意思就是类型，用来判断数据的类型，返回的是字符串。console.log(typeof 123); // numberconsole.log(typeof 'abc'); // stringconsole.log(typeof true); // booleanconsole.log(typeof Symbol()); // symbolconsole.log(typeof null); // objectconsole.log(typeof undefi
2021-08-18 11:48:21
178
原创 原型和原型链
一、前言在js中，原型和原型链是一个很重要的知识点，只有理解了它，我们才能更深刻的理解js，在这里，我们将分成几个部分来逐步讲解。二、构造函数构造函数和普通函数本质上没什么区别，只不过使用了new关键字创建对象的函数，被叫做了构造函数。构造函数的首字母一般是大写，用以区分普通函数，当然不大写也不会有什么错误。function Person(name, age) { this.name = name; this.age = age; this.species = '人类';
2021-08-13 21:13:12
49924
32
原创 javascript中的this
在js中，this的指向在函数定义的时候是确定不了的，在函数被调用的时候，才能确定this的指向。下面通过例子来说明：一、全局window中（默认绑定）var a = 10; function foo(){ console.log(this); console.log(this.a);}foo(); // window 10在这个例子里，在全局window中直接调用函数foo，this指向就是全局的window对象，所以可以获取a的值，但是如果加上严格模式，就不一样了"
2021-08-13 20:56:12
95
原创 执行上下文
js代码在执行前，js引擎会做一些准备工作，把执行代码需要用到的变量和函数等进行预处理，生成一个运行环境，这个运行环境，就叫做执行上下文。一般来说，js中的执行上下文分为全局执行上下文和函数执行上下文（这里不讨论eval函数的执行上下文）：全局执行上下文全局执行上下文是由浏览器创建的，有且只有一个，在执行全局代码前被创建出来，创建主要有三部分：使用var定义的全局变量被赋值为undefined，并被添加为window的属性let和const定义的变量为未初始化状态，不会被添加为window的属性
2021-08-12 22:46:01
83
原创 变量提升与函数提升
先来看一个例子：console.log(a);var a = 10;直觉上来说，变量a在未被声明前就使用，会报ReferenceError引用错误，表示该变量未被声明，但是在这里，浏览器控制台输出的结果是undefined。其实在js编译的时候，上面的代码顺序会变成下面这种：var a；console.log(a);a = 10;这种把变量的声明和赋值分开，并把声明部分提升到作用域顶部的现象，就被称作变量提升。提升（hoisting）能被提升的不止变量声明，还有函数声明：foo()
2021-08-12 22:26:04
157
原创 作用域和作用域链
一、作用域js中的作用域，简单来说就是变量和函数的起作用范围，js中有三种作用域：全局作用域全局作用域中的所有变量和函数都能在任何地方被访问到，所有直接写在script标签内或单独的js文件中的变量和函数，都是属于全局作用域。全局作用域中有一个window对象，在全局作用域中定义的所有变量和函数，都会变成window的属性和方法。let a = 10;function foo(){ console.log(a);}console.log(window.a); // 10windo
2021-08-12 22:11:33
111
原创 for in，for of和forEach
一、forEach forEach是专门用来遍历数组的，可以同时得到索引值和数组元素，forEach的回调函数中，第一个是数组元素，第二个是元素索引值，只有一个参数时，是数组元素：let arr = ['a', 'b', 'c'];arr.forEach((item,index) => { console.log(item, index);})// 'a' 0// 'b' 1// 'c' 2二、for…in for…in对字符串，数组，对象都可以进行遍历，并且得到的是索
2021-08-12 21:55:15
89
原创 apply，call，bind
js中call、apply和bind的异同点js中的this指向是灵活多变的，有的时候我们需要改变this的指向，这个时候就要用到call()、apply()或者bind()方法。1、call先看看下面的例子：let xiaoming = { name:'xiaoming'};let lihua = { name: 'lihua', foo:function (){ console.log(this.name); }};lihua.foo()
2021-05-02 23:14:27
82
原创 innerText、outerText与innerHTML、outerHTML
innerText、outerText与innerHTML、outerHTML1、取值innerText和outerText取值都是对象起始和结束标签内部的文本内容，而innerHTML取值是对象起始和结束标签内部的html，不包括对象本身的起始标签和结束标签，outerHTML取值是也是html，但是包括对象本身的起始标签和结束标签，具体如下：<div id="out">这是div文本 <span>这是span文本</span></div>l
2021-04-27 13:35:49
515
1
原创 【CSS】元素居中问题
【CSS】元素居中问题一、水平居中1、行内元素text-align: center在其父元素设置text-align: center就可以使其水平居中。如果父元素不是块级元素，则先将父元素转为行内块级元素，利用display: inline-block.outer{ width: 400px; height: 300px; background-color: lightgreen; display: inline-block;/*父元素不是块级元素时设置*/
2021-03-24 22:57:17
93
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人