1.Ajax原理

Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎)，通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。使用户操作与服务器响应异步化。这其中最关键的一步就是从服务器获得请求数据

Ajax的过程只涉及JavaScript、XMLHttpRequest和DOM。XMLHttpRequest是ajax的核心机制

ajax 有那些优缺点?

优点：

通过异步模式，提升了用户体验.

优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用.

Ajax在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

Ajax可以实现动态不刷新（局部刷新）

缺点：

安全问题 AJAX暴露了与服务器交互的细节。

对搜索引擎的支持比较弱。

不容易调试。

2 异步加载JS的方式有哪些？

设置<script>属性 async="async" （一旦脚本可用，则会异步执行）

动态创建 script DOM：document.createElement('script');

XmlHttpRequest 脚本注入

异步加载库 LABjs

模块加载器 Sea.js

3 那些操作会造成内存泄漏？

JavaScript 内存泄露指对象在不需要使用它时仍然存在，导致占用的内存不能使用或回收

未使用 var 声明的全局变量

闭包函数(Closures)

循环引用(两个对象相互引用)

控制台日志(console.log)

移除存在绑定事件的DOM元素(IE)

setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收

4 说说你对AMD和Commonjs的理解

CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数

AMD推荐的风格通过返回一个对象做为模块对象，CommonJS的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的

5 常见web安全及防护原理

sql注入原理

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令

总的来说有以下几点

永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等

永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取

永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接

不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息

XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点

XSS防范方法

首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击

XSS与CSRF有什么区别吗？

XSS是获取信息，不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作，需要知道其他用户页面的代码和数据包。要完成一次CSRF攻击，受害者必须依次完成两个步骤

登录受信任网站A，并在本地生成Cookie

在不登出A的情况下，访问危险网站B

CSRF的防御

服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数

通过验证码的方法

6 用过哪些设计模式？

工厂模式：

工厂模式解决了重复实例化的问题，但还有一个问题,那就是识别问题

主要好处就是可以消除对象间的耦合，通过使用工程方法而不是new关键字

构造函数模式:

使用构造函数的方法，即解决了重复实例化的问题，又解决了对象识别的问题，该模式与工厂模式的不同之处在于

直接将属性和方法赋值给 this对象;

7 offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

offsetWidth/offsetHeight返回值包含content + padding + border，效果与e.getBoundingClientRect()相同

clientWidth/clientHeight返回值只包含content + padding，如果有滚动条，也不包含滚动条

scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

8 javascript有哪些方法定义对象

对象字面量： var obj = {};

构造函数： var obj = new Object();

Object.create(): var obj = Object.create(Object.prototype);

9 你觉得jQuery源码有哪些写的好的地方

jquery源码封装在一个匿名函数的自执行环境中，有助于防止变量的全局污染，然后通过传入window对象参数，可以使window对象作为局部变量使用，好处是当jquery中访问window对象的时候，就不用将作用域链退回到顶层作用域了，从而可以更快的访问window对象。同样，传入undefined参数，可以缩短查找undefined时的作用域链

jquery将一些原型属性和方法封装在了jquery.prototype中，为了缩短名称，又赋值给了jquery.fn，这是很形象的写法

有一些数组或对象的方法经常能使用到，jQuery将其保存为局部变量以提高访问速度

jquery实现的链式调用可以节约代码，所返回的都是同一个对象，可以提高代码效率

10 Node的应用场景

特点：

1、它是一个Javascript运行环境

2、依赖于Chrome V8引擎进行代码解释

3、事件驱动

4、非阻塞I/O

5、单进程，单线程

优点：

高并发（最重要的优点）

缺点：

1、只支持单核CPU，不能充分利用CPU

2、可靠性低，一旦代码某个环节崩溃，整个系统都崩溃

11 说几条写JavaScript的基本规范

不要在同一行声明多个变量

请使用===/!==来比较true/false或者数值

使用对象字面量替代new Array这种形式

不要使用全局函数

Switch语句必须带有default分支

If语句必须使用大括号

for-in循环中的变量 应该使用var关键字明确限定作用域，从而避免作用域污

12 js延迟加载的方式有哪些

设置<script>属性 defer="defer" （脚本将在页面完成解析时执行）

动态创建 script DOM：document.createElement('script');

XmlHttpRequest 脚本注入

延迟加载工具 LazyLoad

13 defer和async

defer并行加载js文件，会按照页面上script标签的顺序执行

async并行加载js文件，下载完成立即执行，不会按照页面上script标签的顺序执行

14 说说严格模式的限制

变量必须声明后再使用

函数的参数不能有同名属性，否则报错

不能使用with语句

不能对只读属性赋值，否则报错

不能使用前缀0表示八进制数，否则报错

不能删除不可删除的属性，否则报错

不能删除变量delete prop，会报错，只能删除属性delete global[prop]

eval不会在它的外层作用域引入变量

eval和arguments不能被重新赋值

arguments不会自动反映函数参数的变化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局对象

不能使用fn.caller和fn.arguments获取函数调用的堆栈

增加了保留字（比如protected、static和interface）

15 attribute和property的区别是什么

attribute是dom元素在文档中作为html标签拥有的属性；

property就是dom元素在js中作为对象拥有的属性。

对于html的标准属性来说，attribute和property是同步的，是会自动更新的

但是对于自定义的属性来说，他们是不同步的

16 谈谈你对ES6的理解

新增模板字符串（为JavaScript提供了简单的字符串插值功能）

箭头函数

for-of（用来遍历数据—例如数组中的值。）

arguments对象可被不定参数和默认参数完美代替。

ES6将promise对象纳入规范，提供了原生的Promise对象。

增加了let和const命令，用来声明变量。

增加了块级作用域。

let命令实际上就增加了块级作用域。

还有就是引入module模块的概念。

17 异步编程的实现方式

回调函数

优点：简单、容易理解

缺点：不利于维护，代码耦合高

事件监听(采用时间驱动模式，取决于某个事件是否发生)：

优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数

缺点：事件驱动型，流程不够清晰

发布/订阅(观察者模式)

类似于事件监听，但是可以通过‘消息中心’，了解现在有多少发布者，多少订阅者

Promise对象

优点：可以利用then方法，进行链式写法；可以书写错误时的回调函数；

缺点：编写和理解，相对比较难

Generator函数

优点：函数体内外的数据交换、错误处理机制

缺点：流程管理不方便

async函数

优点：内置执行器、更好的语义、更广的适用性、返回的是Promise、结构清晰。

缺点：错误处理机制

18 项目做过哪些性能优化？

减少 HTTP 请求数

减少 DNS 查询

使用 CDN

避免重定向

图片懒加载

减少 DOM 元素数量

减少DOM 操作

使用外部 JavaScript 和 CSS

压缩 JavaScript 、 CSS 、字体、图片等

优化 CSS Sprite

使用 iconfont

字体裁剪

多域名分发划分内容到不同域名

尽量减少 iframe 使用

避免图片 src 为空

把样式表放在link 中

把JavaScript放在页面底部

19 浏览器缓存

浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下

先根据这个资源的一些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；

当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些request header验证这个资源是否命中协商缓存，称为http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；

强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源； 区别是，强缓存不对发送请求到服务器，但协商缓存会。

当协商缓存也没命中时，服务器就会将资源发送回客户端。

当 ctrl+f5 强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存；

当 f5刷新网页时，跳过强缓存，但是会检查协商缓存；

强缓存

Expires（该字段是 http1.0 时的规范，值为一个绝对时间的 GMT 格式的时间字符串，代表缓存资源的过期时间）

Cache-Control:max-age（该字段是 http1.1的规范，强缓存利用其 max-age 值来判断缓存资源的最大生命周期，它的值单位为秒）

协商缓存

Last-Modified（值为资源最后更新时间，随服务器response返回）

If-Modified-Since（通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存）

ETag（表示资源内容的唯一标识，随服务器response返回）

If-None-Match（服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存）

20 谈谈变量提升？

当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境

变量提升

这是因为函数和变量提升的原因。通常提升的解释是说将声明的代码移动到了顶部，这其实没有什么错误，便于大家理解。但是更准确的解释应该是：在生成执行环境时，会有两个阶段。第一个阶段是创建的阶段，JS 解释器会找出需要提升的变量和函数，并且给他们提前在内存中开辟好空间，函数的话会将整个函数存入内存中，变量只声明并且赋值为 undefined，所以在第二个阶段，也就是代码执行阶段，我们可以直接提前使用

在提升的过程中，相同的函数会覆盖上一个函数，并且函数优先于变量提升

21 什么是单线程，和异步的关系

单线程 - 只有一个线程，只能做一件事

原因 - 避免 DOM 渲染的冲突

浏览器需要渲染 DOM

JS 可以修改 DOM 结构

JS 执行的时候，浏览器 DOM 渲染会暂停

两段 JS 也不能同时执行（都修改 DOM 就冲突了）

webworker 支持多线程，但是不能访问 DOM

解决方案 - 异步

22 JavaScript 对象生命周期的理解

当创建一个对象时，JavaScript 会自动为该对象分配适当的内存

垃圾回收器定期扫描对象，并计算引用了该对象的其他对象的数量

如果被引用数量为 0，或惟一引用是循环的，那么该对象的内存即可回收

23 说说从输入URL到看到页面发生的全过程，越详细越好

首先浏览器主进程接管，开了一个下载线程。

然后进行HTTP请求（DNS查询、IP寻址等等），中间会有三次捂手，等待响应，开始下载响应报文。

将下载完的内容转交给Renderer进程管理。

Renderer进程开始解析css rule tree和dom tree，这两个过程是并行的，所以一般我会把link标签放在页面顶部。

解析绘制过程中，当浏览器遇到link标签或者script、img等标签，浏览器会去下载这些内容，遇到时候缓存的使用缓存，不适用缓存的重新下载资源。

css rule tree和dom tree生成完了之后，开始合成render tree，这个时候浏览器会进行layout，开始计算每一个节点的位置，然后进行绘制。

绘制结束后，关闭TCP连接，过程有四次挥手

24 说一下浏览器的缓存机制

浏览器缓存机制有两种，一种为强缓存，一种为协商缓存

对于强缓存，浏览器在第一次请求的时候，会直接下载资源，然后缓存在本地，第二次请求的时候，直接使用缓存。

对于协商缓存，第一次请求缓存且保存缓存标识与时间，重复请求向服务器发送缓存标识和最后缓存时间，服务端进行校验，如果失效则使用缓存

协商缓存相关设置

Exprires：服务端的响应头，第一次请求的时候，告诉客户端，该资源什么时候会过期。Exprires的缺陷是必须保证服务端时间和客户端时间严格同步。

Cache-control：max-age：表示该资源多少时间后过期，解决了客户端和服务端时间必须同步的问题，

If-None-Match/ETag：缓存标识，对比缓存时使用它来标识一个缓存，第一次请求的时候，服务端会返回该标识给客户端，客户端在第二次请求的时候会带上该标识与服务端进行对比并返回If-None-Match标识是否表示匹配。

Last-modified/If-Modified-Since：第一次请求的时候服务端返回Last-modified表明请求的资源上次的修改时间，第二次请求的时候客户端带上请求头If-Modified-Since，表示资源上次的修改时间，服务端拿到这两个字段进行对比

25 ajax、axios、fetch区别

jQuery ajax

$.ajax({type:'POST',url:url,data:data,dataType:dataType,success:function(){},error:function(){}});

优缺点：

本身是针对MVC的编程,不符合现在前端MVVM的浪潮

基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案

JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

axios

axios({method:'post',url:'/user/12345',data:{firstName:'Fred',lastName:'Flintstone'}}).then(function(response){console.log(response);}).catch(function(error){console.log(error);});

优缺点：

从浏览器中创建 XMLHttpRequest

从 node.js 发出 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防止CSRF/XSRF

fetch

try{letresponse=awaitfetch(url);letdata=response.json();console.log(data);}catch(e){console.log("Oops, error",e);}

优缺点：

fetcht只对网络请求报错，对400，500都当做成功的请求，需要封装去处理

fetch默认不会带cookie，需要添加配置项

fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费

fetch没有办法原生监测请求的进度，而XHR可以

26 说几条写JavaScript的基本规范

代码缩进，建议使用“四个空格”缩进

代码段使用花括号{}包裹

语句结束使用分号;

变量和函数在使用前进行声明

以大写字母开头命名构造函数，全大写命名常量

规范定义JSON对象，补全双引号

用{}和[]声明对象和数组

27 如何编写高性能的JavaScript

遵循严格模式："use strict";

将js脚本放在页面底部，加快渲染页面

将js脚本将脚本成组打包，减少请求

使用非阻塞方式下载js脚本

尽量使用局部变量来保存全局变量

尽量减少使用闭包

使用 window 对象属性方法时，省略 window

尽量减少对象成员嵌套

缓存 DOM 节点的访问

通过避免使用 eval() 和 Function() 构造器

给 setTimeout() 和 setInterval() 传递函数而不是字符串作为参数

尽量使用直接量创建对象和数组

最小化重绘(repaint)和回流(reflow)

28 script 的位置是否会影响首屏显示时间

在解析 HTML 生成 DOM 过程中，js 文件的下载是并行的，不需要 DOM 处理到 script 节点。因此，script的位置不影响首屏显示的开始时间。

浏览器解析 HTML 是自上而下的线性过程，script作为 HTML 的一部分同样遵循这个原则

因此，script 会延迟 DomContentLoad，只显示其上部分首屏内容，从而影响首屏显示的完成时间

29 解释JavaScript中的作用域与变量声明提升

JavaScript作用域：

在Java、C等语言中，作用域为for语句、if语句或{}内的一块区域，称为作用域；

而在 JavaScript 中，作用域为function(){}内的区域，称为函数作用域。

JavaScript变量声明提升：

在JavaScript中，函数声明与变量声明经常被JavaScript引擎隐式地提升到当前作用域的顶部。

声明语句中的赋值部分并不会被提升，只有名称被提升

函数声明的优先级高于变量，如果变量名跟函数名相同且未赋值，则函数声明会覆盖变量声明

如果函数有多个同名参数，那么最后一个参数（即使没有定义）会覆盖前面的同名参数

30 css定位

1 相对定位 relative

相对定位是元素在移动位置的时候，是相对于它原来的位置来说的（自恋型）

相对定位的特点：（务必记住）

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）。

原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

因此，相对定位并没有脱标。它最典型的应用是给绝对定位当爹的。。。

2 绝对定位 absolute

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的（拼爹型）。

绝对定位的特点：（务必记住）

如果没有祖先元素（父元素）或者祖先元素没有定位，则以浏览器为准定位（Document 文档）。

如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。

绝对定位不再占有原先的位置。（脱标）

所以绝对定位是脱离标准流的。

3 固定定位 fixed

生成绝对定位的元素，相对于浏览器窗口进行定位。只需设置它相对于各个方向的偏移值，就可以将该元素固定在页面固定的位置，通常用来显示一些提示信息，脱离文档流；

31 介绍事件“捕获”和“冒泡”执行顺序和事件的执行次数

按照W3C标准的事件：首是进入捕获阶段，直到达到目标元素，再进入冒泡阶段

事件执行次数（DOM2-addEventListener）：元素上绑定事件的个数

注意1：前提是事件被确实触发

注意2：事件绑定几次就算几个事件，即使类型和功能完全一样也不会“覆盖”

事件执行顺序：判断的关键是否目标元素

非目标元素：根据W3C的标准执行：捕获->目标元素->冒泡（不依据事件绑定顺序）

目标元素：依据事件绑定顺序：先绑定的事件先执行（不依据捕获冒泡标准）

最终顺序：父元素捕获->目标元素事件1->目标元素事件2->子元素捕获->子元素冒泡->父元素冒泡

注意：子元素事件执行前提 事件确实“落”到子元素布局区域上，而不是简单的具有嵌套关系

在一个DOM上同时绑定两个点击事件：一个用捕获，一个用冒泡。事件会执行几次，先执行冒泡还是捕获？

该DOM上的事件如果被触发，会执行两次（执行次数等于绑定次数）

如果该DOM是目标元素，则按事件绑定顺序执行，不区分冒泡/捕获

如果该DOM是处于事件流中的非目标元素，则先执行捕获，后执行冒泡

事件的代理/委托

事件委托是指将事件绑定目标元素的到父元素上，利用冒泡机制触发该事件

优点：

可以减少事件注册，节省大量内存占用

可以将事件应用于动态添加的子元素上

缺点： 使用不当会造成事件在不应该触发时触发

32 Javascript垃圾回收方法

标记清除（mark and sweep）

这是JavaScript最常见的垃圾回收方式，当变量进入执行环境的时候，比如函数中声明一个变量，垃圾回收器将其标记为“进入环境”，当变量离开环境的时候（函数执行结束）将其标记为“离开环境”

垃圾回收器会在运行的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引用的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了

引用计数(reference counting)

在低版本IE中经常会出现内存泄露，很多时候就是因为其采用引用计数方式进行垃圾回收。引用计数的策略是跟踪记录每个值被使用的次数，当声明了一个 变量并将一个引用类型赋值给该变量的时候这个值的引用次数就加1，如果该变量的值变成了另外一个，则这个值得引用次数减1，当这个值的引用次数变为0的时 候，说明没有变量在使用，这个值没法被访问了，因此可以将其占用的空间回收，这样垃圾回收器会在运行的时候清理掉引用次数为0的值占用的空间

33 Vue-Router

1、hash模式

hash模式是开发中默认的模式，也称作锚点，它的URL带着一个#，例如：www.abc.com/#/vue，它的hash值就是#/vue。

特点：

hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端没有影响。所以改变hash值不会重新加载页面。

这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。

hash路由被称为是前端路由，已经成为SPA（单页面应用）的标配。

原理：

hash模式的主要原理就是onhashchange()事件：

window.onhashchange = function(event){

console.log(event.oldURL, event.newURL);

let hash = location.hash.slice(1);

使用onhashchange()事件的好处就是，在页面的hash值发生变化时，无需向后端发起请求，window就可以监听事件的改变，并按规则加载相应的代码。除此之外，hash值变化对应的URL都会被浏览器记录下来，这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器，但是页面的hash值和对应的URL关联起来了。

获取页面hash变化的方法：

（1）监听$route的变化：

// 监听,当路由发生变化的时候执行

watch: {

  $route: {

    handler: function(val, oldVal){

      console.log(val);

    },

    // 深度观察监听

    deep: true

  }

},

（2）通过window.location.hash读取#值：

window.location.hash 的值可读可写，读取来判断状态是否改变，写入时可以在不重载网页的前提下，添加一条历史访问记录。

2、history模式

history模式直接指向history对象，它表示当前窗口的浏览历史，history对象保存了当前窗口访问过的所有页面网址。URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。

特点：

当使用history模式时，URL就像这样：hhh.com/user/id。相比hash模式更加好看。

虽然history模式不需要#。但是，它也有自己的缺点，就是在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来。

history api可以分为两大部分，切换历史状态 和 修改历史状态：

修改历史状态：

包括了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法，这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了url，但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果，就需要前端用上这两个API。

切换历史状态：

包括forward()、back()、go()三个方法，对应浏览器的前进，后退，跳转操作。

配置：

想要设置成history模式，就要进行以下的配置（后端也要进行配置）：

const router = new VueRouter({

  mode: 'history',

  routes: [...]

})

3、两者对比

调用 history.pushState() 相比于直接修改 hash，存在以下优势:

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL。

pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中。

pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串。

pushState() 可额外设置 title 属性供后续使用。

hash模式下，仅hash符号之前的url会被包含在请求中，后端如果没有做到对路由的全覆盖，也不会返回404错误；history模式下，前端的url必须和实际向后端发起请求的url一致，如果没有对用的路由处理，将返回404错误。

4、总结

hash模式URL上带有#，仅 hash 符号之前的内容会被包含在请求中，如 www.hhh.com，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误。

history模式URL上没有#，前端的 URL 必须和实际向后端发起请求的 URL 一致，如 www.hhh.com/user/id。如果后端缺少对 /use/id 的路由处理，将返回 404 错误。