一、节流、防抖
1. 节流
- 概括：类似于一种阀门一样的开关函数，也就是在函数执行一次后，某段时间内暂时失效，过了这段时间后在重新激活（类似于大招的冷却时间）
-
使用场景：
- 保存、提交防重复点击
- 输入框input事件
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
return false
}
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滚动条位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000)
2. 防抖
概括：在第一次触发事件时，不立即执行函数，而是给一个期限值。如果在期限值内没有触发该方法就执行，如果在该期限值内再次执行就重新开始计时
-
使用场景：
- 滚动条事件
- 拖拽效果
- 浏览器resize事件（浏览器尺寸缩放时执行的事件）
function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) } timer = setTimeout(fn,delay) // 简化写法 } } // 然后是旧代码 function showTop () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滚动条位置：' + scrollTop); } window.onscroll = debounce(showTop,1000)
二、回流、重绘
1. 回流
- 概括：当页面进行加载的时候会重新对dom元素会进行渲染，渲染的过程成为回流
2. 重绘
- 概括：当回流的时候，会有部分失效的元素属性（样式）或者新改变的元素属性（样式）进行重新绘制到页面中，这样的过程成为重绘
三、宏任务、微任务
1. 宏任务
- 概括：是基于宿主环境进行执行的程序队列，比如说绑定事件、setTimeout、setInterval、ajax
2. 微任务
- 概括：是基于js引擎进行执行的任务程序队列，比如说Promise、async/await、Object.proxy
setTimeout(function(){
console.log('1');
});
new Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3');
}).then(function(){
console.log('4')
});
console.log('5');
// 2 5 3 4 1
四、同步、异步
1. 同步
- 概括：因为js是单线程，根据js代码执行顺序从上至下依次执行称为同步
consoled.log(0)
let str = 1
console.log(str)
console.log(2)
// 0 1 2
2. 异步
- 概括：当程序执行到异步代码时，会将异步代码放置异步池里面，而不会影响同步代码的执行，类似于Java中的多线程
console.log(1)
setTimeout(() => {
console.log(2)
})
console.log(3)
// 1 3 2
3. 区别
- 同步 会阻塞后续代码的执行，异步 不会阻塞后续代码的执行
五、高内聚、低耦合
1. 高内聚
- 概括：一个模块中，里面的多个元素之间的联系越紧密，关联程度越高，内聚性越高
2. 低耦合
- 概括：每个模板之前联系越紧密关联度越高，则独立性越差，耦合性越高
六、闭包
- 概括：函数外部可以访问函数内部的变量
-
原理：
- 触发垃圾回收机制
- 将数据暂时储存起来，如果需要使用再次调用，如不需要在销毁
- 缺点：造成内存的占用，使用不当会造成内存泄漏
- 优点：可以在外部操作作用域中的变量，减少了变量污染，相当于声明了一个全局的私有变量
七、原型链
- 概括：每个函数或者类都有一个属性 prototype，可以通过prototype访问到自己的原型对象，类实例化的对象也可以通过_ _ proto _ _访问到原型对象，原型对象也有自己的原型对象，依次往上直到访问到顶层，这样的链式结构被称为原型链
- 优点：实现类的继承，可以将一些方法或者属性储存到里面，提高方法的扩展性
八、this指向
指向场景：
- 在函数内部指向 -- window
- 在定时器中指向 -- window
- 在对象中的函数指向 -- 对象
- 在事件函数中指向 -- 事件源
- 在构造函数中指向 -- 实例化对象
- 在constructor（构造方法）中指向 -- 实例化对象
- 在类中指向 -- 实例化对象
- 再箭头函数中指向 -- 宿主对象（父级的指向）
改变指向：
-
call() 方法
概括：如果不传参默认指向window
参数：
- 参数1：目标this指向
- 参数2+：之后的参数就是函数的形参
var obj= { name:"lixue", age:21 } function fn(x,y){ console.log(x+","+y); console.log(this); console.log(this.name); console.log(this.age); } fn.call(obj,"hh",20); // 此时this指向对象obj -
apply() 方法
概括：不传参默认指向window
参数：
- 参数1：目标this指向
- 参数2：不管之后有几个参数统一写入数组
var obj= { name:"lixue", age:21 } function fn(x,y){ console.log(x+","+y); console.log(this); console.log(this.name); console.log(this.age); } fn.apply(obj,["hh",20]); // 此时this指向对象obj -
bind() 方法
概括：该方法会创建新函数改变新函数的this指向,不会改变原始函数的this指向
参数：
- 参数1：目标this指向
- 参数2+：之后的参数就是新函数的参数
// 此方法和以上两种方法不同, bind方法会产生一个新的函数设置新函数中的this指向 function fn(){ // 此时this指向新函数 console.log(this); console.log(arguments); return "hahahahha"; } // 产生一个新的函数,此时this指向函数 var res = fn.bind("hello",10,20,30,40); res(); console.log(res); -
区别
- call方法和apply方法都是改变原有函数的this指向，而bind方法会生成一个新的函数改变新函数的this指向
- call方法的bind方法 参数2+ 都是以平铺的方式进行传参，二而apply方法将参数2+ 的多个参数合并成为一个数组
九、高并发
- 概括：指的是用户因为请求次数过多，导致的服务器负载压力过大
-
优化：
- 减少Http请求次数
- 服务器进行负载均衡操作，将一台服务器的压力分发到多台服务器上，从而减少服务器压力
- 整合前端资源，将资源进行压缩
- css代码压缩
- html代码压缩
- js代码压缩
- css图片使用精灵图
- css图片使用Base64格式编码直接嵌入页面
十、跨域
- 概括：由于受到浏览器同源策略的限制，不同协议、不同端口、不同域名的情况下不可以互相访问，如互相访问的情况下被称为跨域
-
实现方法：
- JSONP：通过script标签的src属性不受同源策略的限制实现跨域（只能支持GET请求）
- CORS：通过后端进行配置 Access-Control-Allow-Origin 属性，实现跨域
- Nginx：通过Nginx（中间件）将请求反向代理到指定的服务器，实现跨域
十一、localStorage、sessionStorage、cookie
1. loacalStorage
- 概括：主要要来本地储存使用，用来解决cookie储存空间不足问题
- 优点：比cookie储存空间大，相当于在前端有个5M大小的数据库，安全性比较高
- 缺点：兼容性不太好（IE8以上），浏览器隐私模式下不可以被读取到
-
操作：
- 储存数据：localstorage.setItem(key,value)
- 读取数据：localStorage.getItem(key)
- 删除数据：localStorage.removeItem(key)
- 修改数据：localStorage.setItem(新的键,新的值)
2. sessionStorage
- 概括：和localStorage同为本地储存，但是sessionStorage是会话时效，一旦浏览器关闭将会清除数据
- 操作：和localStorage相同
3. cookie
- 概括：浏览器本地储存数据，储存大小约为4K
-
操作：
- 储存：document.cookie='属性=值';expires='时间字符串';
- 读取：document.cookie
- 删除：设置有效期过期
十二、栈和堆
1. 栈内存
- 概括：主要储存一些基本数据类型和复杂数据类型的地址
- 基本数据类型：String、Number、Boolean、Undefined、Null
2. 堆内存
- 概括：主要储存一些复杂数据类型，复杂数据类型通过栈内存中的地址访问到堆内存中对应的数据
- 复杂数据类型：Function、Array、Object
- 如有概括错误，欢迎各位网友斧正🎈
- 敬请期待后续更新⏳
