前端整理知识点

防抖/节流

函数防抖和函数节流都是防止某一时间频繁触发
防抖是将多次执行变为最后一次执行,当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又一次触发了事件,就重新开始延时
节流是将多次执行变为每隔一段时间执行,每隔一段时间,只执行一次事件

应用场景:
防抖:(setTimeout定时器)
1.用户在不断输入值时,用防抖来节约请求资源
2.不断的调整浏览器窗口大小会不断的触发这个事件,用防抖来让其只触发一次
节流:(时间戳+定时器)
1.鼠标不断点击触发
2.监听滚动事件,比如是否滑到底部自动加载更多

前端整理知识点_第1张图片
image

前端整理知识点_第2张图片
image

https://www.cnblogs.com/youma/p/10559331.html

this

https://www.jianshu.com/p/82ee5d440eab

输入URL后

1.URL解析:协议+网络地址+资源路径
2.域名解析:是否能找到对应的服务端
3.根据IP建立TPC连接:请求连接--->确认连接-->结束
4发送http请求
5.服务器处理请求
6.断开TCP连接:请求中断-->服务器告诉客户端知道了,但要看看还有没有没发完的数据-->客户端等待,服务端确定数据发完后,通知客户端可以中断-->客户端收到后,关闭
7.解析HTML
8.浏览器渲染

glup

https://www.jianshu.com/p/3f2e13442555
https://blog.csdn.net/qq_37949737/article/details/80658002

前端整理知识点_第3张图片
image

git

https://www.liaoxuefeng.com/wiki/896043488029600/896827951938304

事件委托

1事件捕获
当一个事件触发后,从Window对象触发,不断经过下级节点,直到目标节点。在事件到达目标节点之前的过程就是捕获阶段。所有经过的节点,都会触发对应的事件
2事件冒泡
当事件到达目标节点后,会沿着捕获阶段的路线原路返回。同样,所有经过的节点,都会触发对应的事件

1.当为事件捕获(useCapture:true)时,先执行body的事件,再执行div的事件
2.当为事件冒泡(useCapture:false)时,先执行div的事件,再执行body的事件

使用事件委托可以自动绑定动态添加的元素,即新增的节点不需要主动添加也可以一样具有和其他元素一样的事件。

for...in for...of

1.for...in 遍历的是索引
2.for...of遍历的是value

你可能感兴趣的:(前端整理知识点)