网页执行的过程

网页从输入url到呈现页面的过程

1. DNS解析：把域名解析成IP地址

2. TCP连接三次握手：建立安全可靠的传输协议

   • TCP：是一种传输控制协议
   • TCP作用：保证HTTP网络传输是安全+可靠的（检测客户端与服务器的网卡是不是通的）
   • TCP三次握手：
     1. 第一次：浏览器->服务器（检测浏览器发送功能）
     2. 第二次：服务器->浏览器（检测服务器：接收+发送功能）
     3. 第三次：浏览器->服务器（检测浏览器接收功能）

3. HTTP建立连接

   • 客户端发送请求

   • 服务器处理请求

   • 服务器响应请求

4. 渲染引擎开始渲染响应返回的HTML文本

   • 解析HTML生成：dom树
   • 解析css生成：样式树
   • dom树与样式树合并，得到渲染树
   • 页面加载

默认事件

1. dom对象.onclick（） ：只能触发点击事件，没有注册则无法触发

2. dom对象.click（） ：触发注册 + 触发默认点击事件 (a标签、form按钮 、 file表单)

自定义文件上传的思路：

1. 隐藏file表单（设置display：none)

2. 给自定义按钮注册点击事件，点击注册file表单‘默认’点击事件

   触发注册点击事件：dom元素.onclick（）

   触发‘默认’点击事件：dom对象.click（）

函数防抖

1. 含义：单位时间内，频繁触发一个事件，以最后一次触发为准
2. 应用：输入框的输入事件
3. 原理：利用一次性定时器原理
4. 作用：解决输入框访问服务器次数过多的问题

函数节流

1. 含义：单位时间内，频繁的触发一个事件，只会触发一次

2. 应用：解决高频事件（滚动条事件高频触发）

3. 原理：

   1. 声明一个全局变量存储触发时间 let lasttime =null
   2. 每一次触发事件，获取当前时间， let currentTime = Date.now()
   3. 判断当前时间 与上一次触发时间，是否超过间隔 currentTime - lastTime>=500
   4. 如果超过触发间隔，则执行事件处理代码，然后存储本次触发事件 lastTime=currentTime