浏览器知识点二：浏览器与服务器建立 TCP 连接，TCP 三次握手：为了让客户端和服务端都能确定彼此发起和响应的能力是

requestAnimationFrame

window.requestAnimationFrame()（请求动画帧）执行更新动画，参数是一个回调函数，由系统决定回调函数的执行时机，每次刷新的间隔中会执行一次回调函数，不会引起丢帧，不会卡顿和 cpu 节能、函数节流，seTimeout 延时器则会受队列影响而导致执行时间不同，并且隐藏时依旧会执行动画

从输入网址到页面展示

一：DNS 解析，将域名解析为 IP 地址

二：浏览器与服务器建立 TCP 连接，TCP 三次握手：为了让客户端和服务端都能确定彼此发起和响应的能力是否靠谱，客户端首先发送证明客户端有发送的能力，服务端接受后返回证明服务端有响应和发送的能力，但这个时候还不能知道客户端的响应能力，所以客户端再响应之后，表明彼此连接的通道是顺畅的，然后 HTTP 请求就可以传输数据了，TCP 四次挥手：关闭连接是双向的，客户端和服务器都可以提出，四次挥手是为了不让关闭太仓促，保证可靠性，如客户端首先会告知服务器申请关闭连接，服务器收到后告诉客户端收到了，不过我还没有准备好，让客户端等等。服务端数据发送数据完毕后，再次告诉客户端，我准备关闭连接了。客户端收到后怕网络不好，服务器不知道要关闭，所以第四次发送信息确认，服务器收到后断开连接，客户端也断开连接

三、浏览器向服务器发起 HTTP 请求

四、服务器处理请求，服务器响应请求　

五、服务器接收请求并响应，返回相应的文件

六、浏览器接收从服务端返回的数据，并进行页面渲染

使用Chrome部分网站无法登录

Chrome 修改对未设置 SameSite 的 cookie，视作 SameSite:Lax 处理的变更，即只有在特定情况下，才会携带 cookie，会出现部分页面无法登录
后台设置：SameSite:None; Secure
临时解决方案：在 chrome 地址栏输入 chrome://flags、在配置项中，搜索 samesite、将 samesite 相关3项，设置为 disabled

localStorage 设置有效期

// localStorage设置有效期
export const timeLocalStorage = {  
    setItem: function (key, value, dayNum) {    
        let data = { 
            value: value, 
            expirse: new Date().getTime() + dayNum * 1000 * 60 * 60 * 24 
        };    
        localStorage.setItem(key, JSON.stringify(data));  
    },  
    getItem: function (key) {    
        if (localStorage.getItem(key)) {      
            let data = JSON.parse(localStorage.getItem(key));      
            if (data !== null) {        
                if (data.expirse != null && data.expirse < new Date().getTime()) { 
                 localStorage.removeItem(key);        
                } else {          
                    return data.value;        
                }      
            }    
        }   
     return null;  
    }
}