1.1. 浏览器状态同步和路由
1.1.1. 前端路由和服务端路由
工作日常、面试重点、前端架构
前端路由和History API
浏览文境（Browser Context）
会话历史（Session History）
会话栈是共享的，可以通过前进后退进行跳转。
History API
操控浏览器会话历史，也就是控制History API
history.go()
1-前边的页面 forward()
0-当前的页面
-1-历史页面 back()
.png)
history.pushState(state,title,url)
新增一个状态到会话栈中，但是并不自动跳转新的状态（页面）
state：需要添加的新状态，在会话栈中的变量
title：新页面的标题
url：新页面的地址
.png)
history.replaceState(state,title,url)
替换掉会话栈中的当前状态
在用户付款成功后的付款页面，是没有必要继续放在会话栈中的，所以可以使用这个方法，替换掉。
如果在付款（页面C）前还有加入购物车（页面A），选择种类（页面B）A => B => C ，如果想要将AB都清空掉，可以先go到A，然后在replace掉A，就可以清空会话栈
.png)
实战服务端路由
实战前端路由（单页面应用）
1.1.2. Session&Cookie&State&单点登录系统
工作日常、面试重点、前端架构
Seesion和Storage
Session代表一次会话
SessionID是这一次会话的唯一标识，由服务端发送
客户端接收到SessionID就是Cookie
登录场景
在用户刚登录时是无状态的，发给服务端做验证，验证成功后就创建一个会话记录并发送SessionID，前端浏览器拿到之后用Cookie储存。
跨域场景中的Set-Cookie
跨二级域
如果需要带上Cookie需要额外设置一个Headers（Access-Control-Allow- Credentials）
跨主域
一般很少做这样的事情
需要给Cookie设置额外的标识（SameSite=None;Secure...），不然Cookie传递不过去
Cookie浏览器端存储
localStorage写入时需要加try-catch，因为会出错。
SessionStorage只在这次会话中有用。
Storage可以用来在单页面应用中传参，数据共享
Token
Oauth协议：
用户在互联网获取资源的开放（委托形式）授权标准
资源所有者为服务的情况：
第三方应用去腾讯拿用户的资源，本质上第三方应用是去找用户拿资源的，但是用户把资源委托给了腾讯，腾讯在检查第三方应用具有获取用户资源的权限后，就会代用户下发给第三方应用许可。
第三方应用拿到许可就会去授权服务器拿令牌。
拿到令牌之后，再去资源服务器拿资源。
摘要算法
将数据运算成一段不可逆的唯一摘要
不重复，不可逆。
Token Table
如何确保Token唯一：
通过随机数，散列算法sha(client_id + rnd + timestamp)，查重。
id+随机数+时间戳
单点登录系统
SSO为单点登录平台，比如微信、Github
也就是业务整合
通过Oauth实现SSO
Oauth服务器就是将资源所有者和授权服务器绑定在一起，比如腾讯。
1.1.3. SSR和单页面应用
工作日常、面试重点、前端架构
单页面应用（Single Page Application）
用户体验：更加流畅、想用更快，浏览器不会重新加载刷新
架构方面：更容易组件化，前后端分离，前端更容易数据驱动。
生态方面：BaaS/FaaS（只把服务器当作一个服务），服务端渲染。
性能&安全：节省IO，性能有很大的提升；组件化做好之后，容错率会更高。
缺点
CPU开销大（组件vs时间）：都使用js渲染页面，浏览器CPU开销会比较大
流量开销大（一次加载多张页面）：首次进入需要请求多个组件和页面。其实流量不太重要。
需要好的系统架构：单页面应用需要一个好的架构设计
搜索引擎不友好：搜索引擎是看不到页面内容的。
服务端渲染（Server Side Rendering）
服务端渲染是没法加事件的，需要客户端重建并加上事件
SSR：服务端渲染函数。
开发一个生成html节点并且管理时间的函数
实现render函数的服务端渲染和客户端渲染能
`render(node,renderAS='dom/html/rehydrate'.path = [])
dom的话就是客户端渲染，渲染成dom🌲
html的话就是服务端渲染，渲染成html字符串
rehydrate是「水合」客户端重建html，加入事件
path指的是渲染函数渲染的节点路径
SSR的优缺点
TTI：可交互时间，指开始加载到用户可以交互的时间
服务端渲染减少了js的运行时间，只需要「水合」各种事件。客户端开销变小，用户可以更快的使用上，也就是TTI减少。
内网数据组装，是服务端渲染，在内网将组件组装成一个页面再返回给客户端，这样子客户端只请求了一次，减少了请求次数，速度提升是极快的
服务端渲染的话，相对于SPA的SEO是一种解决方案，爬虫是可以拿到部分页面而不是空页面。