参考 ： https://www.cnblogs.com/Peng2014/p/4725524.html
1、 window对象 https://www.runoob.com/jsref/obj-window.html
属性：
a、onpopstate 和 onhashchange：这两个事件都是 url变化的监听器（必须是同一个document文档上，url变化才会触发这个事件。如：单页面应用的url，history.pushState创建的url）。
b、window.name：每个窗口都有独立的window.name属性，这个属性是挂在窗口上的，这个窗口 document文档 无论怎么变，文档的js都可以读写到。（只要窗口不关，就不会销毁）
c、window.parent：parent 属性返回当前窗口的父窗口。
d、window.self：self 属性返回指向当前 window 对象的引用。
e、window.top：Top属性返回当前窗口的最顶层浏览器窗口。
f、window.innerWidth：返回窗口的文档显示区的宽度。
方法：
a、window.scrollTo()：把内容滚动到指定的坐标。
b、window.scrollBy()：按照指定的像素值来滚动内容。
2.、history对象 （常用） ：https://blog.csdn.net/u012028371/article/details/67636395 或 https://developer.mozilla.org/zh-CN/docs/Web/API/History_API（推荐） 或 https://www.cnblogs.com/accordion/p/5699372.html（有实践案例）
history对象保存着从窗口被打开起的历史记录，每个浏览器窗口、标签页、框架都有自己的history对象。
history的使用 http://www.cnblogs.com/yy95/p/5678961.html （有时间研究下）
用history api"偷换"浏览器历史记录 ： http://justcoding.iteye.com/blog/2219339
a、pushState(stateObject, title, url) ：三个参数，pushState函数向浏览器的 url堆栈 压入一个设定值的 url 记录，并改变 url堆栈的当前指针至栈顶。（亲测，这个url必须和当前URL在同一个域，感觉是为hybrid-App开发的）
url 的值有多种用法：
1、"" 【添加一个当前的url进去】、 2、"?data=1" 【拼接在之前url后面】 3、"https://www.cnblogs.com/?data=1" 【添加的就是这个url】 4、"data/1" 【替换url最后一个目录的值】 5、"/data/1" 【替换url根下的所有值】 6、"data=1" 【替换url最后一个目录的值】等等
history.pushState 给 url堆栈 添加的的url，只是一个url标志，占一个位置,并没有真实请求这个地址的文件。手动刷新下页面，就会真实发起请求。所以一般的都是添加一个当前 url+string
b、replaceState()：和 pushState是一样的用法，replaceState是替换浏览器历史堆栈的当前历史记录为设定的ur。
c、onpopstate事件触发（该事件是window的属性）：在不改变document的前提下，一旦当前指针改变则会触发onpopstate事件。（跳转到其他的html文档不会触发这个事件）
document文档不变（即html文件不变），只有两种情况，地址栏url变化，而html文档不变。第一种是，单页面的跳转，文档是不变的；第二种是，history.pushState创建的url地址，前进回退，页面html文档不变。
onpopstate触发条件：点击后退或前进按钮(或者在JavaScript中调用history.back()或history.go()方法)时触发。 http://www.mamicode.com/info-detail-1331288.html
注意：在 history 中插入新的url是不会触发这个事件的，即页面中正常的链接跳转是不会触发这个事件的。
d、history.state：获取当前状态
案例说明：history.pushState 的功能，在 hybrid-App 中就很有用（所有 点击回退按钮，而不希望页面跳转，只是执行某个程序的功能，都会用到history.pushStat。因为，点击回退按钮，url是一定会后退的）。
- 需求描述：H5中调用 原生的 app 分享功能，底部弹出原生分享组件。这个时候如果点击回退按钮，H5页面肯定会退回到上一个页面，但是我们实际需求是页面不变，分享组件退出去。
- 实现原理：点击回退按钮，H5页面回退到上一个页面肯定是改不了的。但是我们可以通过history.pushState，给url堆栈中加一个url，但是页面又不变。这个时候url堆栈回退了，H5页面并没有刷新动作。
为什么使用 history：history带来的更好的体验 https://segmentfault.com/a/1190000002447556
体会：history 使得 url改变的同时，而页面不刷新。页面刷新后，url上的状态参数也会发送到服务器；hash 参数也能实现 改变url，页面不刷新。但是 hash参数并不会发送的服务器。
所以 history 一般用于作为url参数（即状态），页面不会属性的同时，url上保留了页面的状态。【url上保留了页面状态，则页面在 分享或刷新 都会把相应的状态带过去】
3.、location对象 （常用）：既是window对象的属性，同时也是document对象的属性
location对象提供了与当前窗口中加载的文档有关的信息以及一些导航功能;它既是window对象的属性，同时也是document对象的属性.
a、location.href 跳转页面 会刷新页面，所以单页面之间的跳转，不要使用 location.href 来实现，功能上虽然是实现了。但是会有bug(用户体验的问题)，当页面刷新时，vue实例都会被重新加载，页面跳转会出现闪烁。
主要属性有：
4.、navigator对象
navigator对象用来描述浏览器本身，包括浏览器的名称、版本、语言、系统平台、用户特性字符串等信息.
5.、screen对象
screen对象用来表明客户端显示器的能力。 包括浏览器窗口外部的显示器的信息，如像素宽度和高度等，每个浏览器中的screen对象都包含着各不相同的属性。
6.、document对象
document对象既是BOM顶级对象的一个属性，更是DOM模型中的顶级对象，在DOM中一起总结。
总结：
1、location.href 和 history.pushState 对浏览器 url 堆栈的操作：（这里url堆栈就是，保存 浏览器历史记录的一些信息，即地址栏上url每次的改变都反馈到 url堆栈中）
a、location 和 history对象都有 操作 浏览器 url堆栈 的API接口。（如，location.href 、history.pushStat 等）
b、window.location.href=newUrl和window.history.pushState(obj，" ",newUrl)之间有什么区别：
相同点：他们都会使 浏览器向 url堆栈 中 push newURl，url地址变成newURl。
不同点：location.href 操作后，使用新的url向服务器发送请求刷新页面；而
history.pushState 不会去请求，也不会刷新页面。
但是，history.pushState不允许跨域使用。location.href 跳转到当前url上，刷新页面，浏览器不会向url堆栈中push newURl，而history.pushState会把这个url压入url堆栈中。
比如：
个人理解：随着技术的发展（SPA和Hybrid的广泛使用），在location对象下的历史记录功能不够用，于是创建一个history对象，和历史记录相关的属性方法在这个对象里面（history对象操作url必须是tongyu，感觉就是为单页面应用开发的功能）。
location对象的历史记录更多的是这个窗口的一个历史记录，所以 location.href 可以跳转 任意的地址。
location对象的历史记录和history对象是两个东西，他们各管个的。只是两个对象都有操作 url 堆栈 的API（location.href，history.pushState）。
2、（个人理解，只是猜测的一个模型，至于底层具体怎么实现的，这是浏览器工程师考虑的问题，我们不需要去深究）可以想象 url堆栈 是一个二维数组 形式的 储存对象。比如：
pushState = [pushState1,pushState2] // history.pushState 生成的 url地址。url指针 指向 pushState 时，刷新一次浏览器，之后url指针 在pushState内变化时，就不去刷新页面了 urls = [url0,url1,pushState,url3,url4,url5] // 浏览器当前url指针在外层数组中变化会刷新浏览器，在内层数组中数组中变化不会刷新页面。
基于这种模型就很好理解 location.href 和 history.pushState的差别了，前一个是操作外层数组；后一个是操作内层数组。