今天完成的事情：

1.回顾知识点

明天计划的事情;

1回顾知识点

遇到的问题和收获:

函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次

• 有个需要频繁触发的函数， 出于优化性能的角度，在规定的时间内，只让函数触发的第一次生效，后面不生效。

函数防抖：一个需要频繁触发的函数，在规定的时间内，只让最后一次生效，前面的不生效

函数节流：是确保函数特定的时间内至多执行一次。

原理：当达到了一定的时间间隔就会执行一次；可以理解为是缩减执行频率

函数节流的应用场景一般是onrize，onscroll等这些频繁触发的函数，比如你想获取滚动条的位置，然后执行下一步动作，如果监听后执行的是Dom操作，这样的频繁触发执行，可能会影响到浏览器性能，甚至会将浏览器卡崩。所以我们可以规定他多少秒执行一次，这种方法叫函数节流

函数防抖：是函数在特定的时间内不被再调用后执行。

原理：将若干函数调用合成为一次，并在给定时间过去之后，或者连续事件完全触发完成之后，调用一次(仅仅只会调用一次)

函数防抖的应用场景：输入框搜索自动补全事件，频繁操作点赞和取消点赞等等这些应用场景，也可以通过函数节流来实现，但是相对于函数防抖来说过于复杂，毕竟专业的事专人干

实例场景：频繁操作点赞和取消点赞，因此需要获取最后一次操作结果并发送给服务器

函数防抖的应用场景

连续的事件，只需触发一次回调的场景有：

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求

• 手机号、邮箱验证输入检测

• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流的应用场景

间隔一段时间执行一次回调的场景有：

• 滚动加载，加载更多或滚到底部监听

• 谷歌搜索框，搜索联想功能

• 高频点击提交，表单重复提交

相同点：

• 都可以通过使用 setTimeout 实现。

• 目的都是，降低回调执行频率。节省计算资源。

不同点：

• 函数防抖，在一段连续操作结束后，处理回调，利用clearTimeout 和 setTimeout实现。函数节流，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。

• 函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

从一个url地址到最终页面渲染完成，发生了什么

1. DNS解析：将域名解析为ip地址（下面的步骤是如果当前没有就执行下一步），使用域名是为了方便记忆，但是为了让计算机理解这个地址还需要把它解析为IP地址。

   • 浏览器DNS缓存

   • 系统DNS缓存

   • 路由器DNS缓存

   • 网络运营商DNS缓存

   • 递归搜索，比如blog.baidu.com

     • .com域名下查找DNS解析

     • .baidu域名下查找DNS解析

     • blog域名下查找DNS解析

     • 出错了

2. TCP连接，TCP三次握手

   • 第一次握手，由浏览器发起，告诉服务器我要发送请求了

   • 第二次握手，由服务器发起，告诉浏览器我准备接收了，你赶紧发送吧

   • 第三次握手，由浏览器发起，告诉服务器，我马上发送了，准备接收吧

3. 发送请求

   请求报文:HTTP协议的通信内容

4. 接收响应

   响应报文

5. 渲染页面

   • 遇见HTML标记，浏览器调用HTML解析器解析成Token并构建成dom树

   • 遇见style/link标记，浏览器调用css解析器，处理css标记并构建cssom树

   • 遇见script标记，调用javascript解析器，处理script代码（绑定事件，修改dom树/cssom树）

   • 将dom树和cssom树合并成一个渲染树

   • 根据渲染树来计算布局，计算每个节点的几何信息（布局）

   • 将各个节点颜色绘制到屏幕上（渲染）

   注意：这5个步骤不一定按照顺序执行，如果dom树或者cssom树被修改了，可能会执行多次布局和渲染

6. 断开连接：TCP四次挥手

   • 第一次挥手：由浏览器发起的，告诉服务器，我东西发送完成了（请求报文），你准备关闭吧

   • 第二次挥手：由服务器发起的，告诉浏览器，我东西接收完了（请求报文），我准备关闭了，你也准备吧

   • 第三次挥手：由服务器发起的，告诉浏览器，我东西发送完了（响应报文），你准备关闭吧

   • 第四次挥手：由浏览器发起的，告诉服务器，我东西接收完了，我准备关闭了（响应报文），你也准备吧