浏览器

[py-tofee]

Window.history - 只读属性

History 对象提供了操作浏览器会话历史的接口

history.back();     // 等同于点击浏览器的回退按钮
history.forward();     // 等同于点击浏览器的前进按钮
history.go(-1);     //等同于history.back();
history.go(1);     //等同于history.forward();
history.go(n);  // 如果n超出界限或者n不为整数或者不传，那么这个方法没有任何效果也不会报错

History.pushState 和 History.replaceState

可以改变网址(存在跨域限制)而不刷新页面，vue-router基于此实现

window.history.pushState(data, title, targetURL);
//状态对象：传给目标路由的信息,可为空
//页面标题：目前所有浏览器都不支持,填空字符串即可
//可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data
window.history.replaceState(data, title, targetURL);
//类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录

popstate事件

调用history.pushState()或history.replaceState()不会触发popstate事件。只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退和前进按钮（或调用history.back()、history.forward()、history.go()方法）时触发；

window.addEventListener('popstate', (event) => {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null
history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}

hash/hashchange

如果location.hash发生变化，也会导致历史记录栈的变化，并触发popstate事件；

hashchange是老API, 浏览器支持度高, 本来是用来监听hash变化的, 可以被利用来做客户端前进后退， 但应该不是这个API的存在的主要目的。而popstate, 及相关api, pushState等属于HTML5新标准, 产生的目的就是做客户端前进后退的, 不仅可以支持hash, 非hash的同源url也支持.所以一般用法是浏览器支持就用popstate, 不支持再降级使用hashchange。

[py-tofee]

跨域

出于安全考虑，浏览器遵守同源策略；

同源策略：

如果两个页面的协议、域名和端口都一致，那么它们具有相同的源；如果不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源；有效隔离了恶意文件的攻击。

原理：

跨域是浏览器行为，不是服务器行为；实际上，跨域请求已经到达服务器了，只不过返回的时候被浏览器拦截了；所以，需要配置代理，代理就是在客户端和目标服务器之间 有一台代理服务器，所有的请求都通过代理服务器转发；

跨域方案：

1. JSONP 利用src属性不受同源策略限制的原理，实现跨域获取资源；
2. webpack-dev-server插件，proxy配置 webpack-dev-server插件使用 http-proxy-middleware 实现跨域代理； changeOrigin设置为true，本地就会虚拟一个服务器接受满足条件的请求，并代理转发到目标服务器；

   module.exports = {
   //...
   devServer: {
       proxy: {
           '/api': {
               target: 'http://localhost:3000',
               changeOrigin: true,
           }
       }
   }
   };

3. Nginx反向代理
4. Web sockets web sockets不受同源策略的影响

[py-tofee]

正向代理与反向代理

正向代理即客户端代理，代理客户端，服务端不知道实际发起请求的客户端；如翻墙软件 反向代理即服务端代理，代理服务端，客户端不知道实际提供服务的服务端； 参考链接

[py-tofee]

客户端存储

1. cookie
   • 受同源策略的限制
   • 通常回随着请求头一起发送到服务器端
   • 浏览器限制cookie大小，每个cookie通常不能大雨4kb，如果超过大小限制，则会被静默删除
   • cookie的name和value必须经过URL编码（encodeURLComponent()函数），防止中文乱码等
   • 获取cookie，需要使用decodeURLComponent()函数 解码
   • cookie的构成：name-名称，value-值，domain-域，path-路径，expires-过期时间，secure-安全标志；这些参数在请求头部中的Set-cookie中使用分号加空格 隔开；Set-cookie: name=value; path=/;
   • domain、path、expires、secure用于告诉浏览器，在什么情况下应该在请求中包含该cookie；这些参数不会发送给服务器，实际发送的只有cookie的name和value;
   • 在JavaScript中操作cookie比较麻烦，没有原生的API；可以通过辅助函数CookieUtil来简化操作；
   • 删除cookie的原理：设置cookie的过期时间为过去的某个时间即可；
2. localStorage、sessionStorage web storage 的目的是 通过客户端存储数据，且不需要频繁的发送回服务器；Storage实例跟其他对象一样，但增加了以下方法：
   • clear()
   • getItem(name)
   • key(index)
   • removeItem(name)
   • setItem(name, value) Storage 类型只能存储字符串，所以存储json前需要先序列化； 通常限制每个源不能超过5MB

     sessionStorage

     存储会话数据，当会话关闭时会消失； 页面刷新或者崩溃并重启恢复 不受影响； sessionStorage与服务器会话紧密相关，所以在运行本地文件时不可用；

localStorage

存储在localstorage中的数据，会永久保留，直到通过js删除或者用户清除浏览器缓存；

[py-tofee]

屏幕刷新率

• 目前大多数设备的屏幕刷新率是 60次/秒
• 浏览器渲染动画或者页面的每一帧的速率也要跟设备屏幕的刷新率保持一致，这样才不会让用户感觉卡顿
• 页面是一帧一帧绘制的，当每秒绘制的帧数（FPS）达到60时，页面时流畅的，小于60，用户会感觉卡顿
• 每帧的运算时间是 1秒/60 = 16ms，所以编写代码时，力求不让一帧的工作时间超过16ms

  帧

• 每个帧的开头包括 样式计算，布局和绘制
• JavaScript执行
  • JS引擎线程和GUI渲染线程是互斥的，如果某个任务执行时间过长（JS引擎线程占据主线程时间过长），那么浏览器会推迟渲染，造成卡顿现象