前端八股文最新--中级

1.路由#号和没有#号的区别

Hash和History两种路由模式最明显的区别：history#会消失

相同点:

1.当URL改变时，页面不会重新加载;

2.都受页面导航回退前进等影响; 

不同点:

hash：URL：http://www.lindan.com/#/aaa，hash 的值为 #/hello。它的特点在于：hash 虽出现在 URL 中，但不会被包括在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面

history ：前端URL 必须和实际向后端发起请求的 URL 一致（服务端增加覆盖所有情况的候选资源），如http://www.lindan.com/acc/id如果后端缺少对 /acc/id 的路由处理，将返回 404 错误

当使用vue路由模式history时，进行刷新报错404，解决办法？

1.与后端配合，再刷新时返回首页

2.在Vue应用里面写出一个覆盖全局的方法和一个404页面。

2.vuex里面为啥同步和异步是分开的啊？为什么同步异步不能合一起？为什么mutation里面没有异步的?只有同步的?

提示：这里描述项目中遇到的问题：

action虽然是异步，但是最后修改方式还是通过mutation,mutation只需要做一件事，就是修改数据(同步也是可以进行异步操作的

---

3.强缓存如何缓存的，post有没有强缓存

提示：这里填写问题的分析：

例如：Handler 发送消息有两种方式，分别是 Handler.obtainMessage()和 Handler.sendMessage()，其中 obtainMessage 方式当数据量过大时，由于 MessageQuene 大小也有限，所以当 message 处理不及时时，会造成先传的数据被覆盖，进而导致数据丢失。

解决方案：

例如：新建一个 Message 对象，并将读取到的数据存入 Message，然后 mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget();换成 mHandler.sendMessage()。

4.JavaScript 是如何运行的？解释型语言和编译型语言的差异是什么？

答： ①JS代码->解析成 AST虚拟语法树 (期间伴随词法分析、语法分析)->生成字节码（V8）->生成机器码（编译器）

5.一般代码存储在计算机的哪个设备中？代码在 CPU 中是如何运行的？

易失性执行之前，我们的代码主要存储在内存中。 ②CPU读取内存中的数据并放在寄存器内（存放计算数据），运算器负责操作寄存器中的数据

6.简单描述一下 Babel 的编译过程？

Babel的作用是 从一种源码到另一种源码，充当转换编译器的作用，解析（解析JS代码）->转换（解析和修改AST）->重建（将修改后的AST转换成另一种JS代码）

7.浏览器和 Node.js 中的事件循环机制有什么区别？

答： ①浏览器中的事件循环：

 

macrotasks(宏任务):

• script(整体代码)

• setTimeout

• setInterval

• setImmediate

• I/O

• UI rendering

• event listner

microtasks(微任务):

• process.nextTick

• Promises

• Object.observe

• MutationObserver

浏览器环境下的异步（任务）队列有两种：macro（宏任务）队列和 micro（微任务）队列。浏览器先执行<script>中的同步任务，然后取出微队列执行，直到清空；再取出宏任务的一个任务执行

宏任务队列可以有多个，微任务队列只有一个。 主线程运行的时候，会产生堆（heap）和栈（stack），其中堆为内存、栈为函数调用栈 JavaScript 有一个主线程和调用栈，所有的任务最终都会被放到调用栈等待主线程执行

当 macro-task 出队时，任务是一个一个执行的；而 micro-task 出队时，任务是一队一队执行的。

Promise 的then和catch才是 microTask ，本身的内部代码不是

浏览器环境下，microtask的任务队列是每个macrotask执行完之后执行。而在Node.js中，microtask会在事件循环的各个阶段之间执行，也就是一个阶段执行完毕，就会去执行microtask队列的任务。

8.如何实现一个上中下三行布局，顶部和底部最小高度是 100px，中间自适应?

<div class="layout">

<div class="top">top</div>

<div class="content">content</div>
  
<div class="bottom">bottom</div>

</div>


html,

body {

padding: 0;
  
margin: 0;

height: 100%;
  
/*
定义页面整体高度为
100%
，重要
*/

}

.layout {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}

.top {
height: 100px;  
background: red;
}

.content {
  flex: 1;
background: yellow;
}

.bottom {
height: 100px;
background: blue;
}

9.如何判断一个元素 CSS 样式溢出，从而可以选择性的加 title 或者 Tooltip?

答： 可以用元素的scrollHeight属性和clientHeight属性来判断, 当scrollHeight大于clientHeight的时候，元素就是可以垂直滚动的；如果检测水平滚动的话，可以用scrollWidth和clientWidth。

10.发布 / 订阅模式和观察者模式的区别是什么？

如何处理浏览器中表单项的密码自动填充问题？

答： 表单中当input是password类型时，打开浏览器会自动填充浏览器存储的密码，在input中加入autocomplete="new-password"即可解决。autocomplete属性的有效值只有on和off，默认值是on，如果autocomplete的属性是除on和off外的值，那么就是个无效值，那么浏览器就会放弃对该属性的执行。

<input type="password" name="password" placeholder="请输入密码" autocomplete="new-password"/>

JavaScript 中的 const 数组可以进行 push 操作吗？为什么？

答： 可以，也可以进行splice()操作。

const声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。例如，在引用内容是对象的情况下，这意味着可以改变对象的内容（例如，其参数）。

JavaScript 中的 const 数组可以进行 push 操作吗？为什么？

答： 可以，也可以进行splice()操作。

const声明创建一个值的只读引用。但这并不意味着它所持有的值是不可变的，只是变量标识符不能重新分配。例如，在引用内容是对象的情况下，这意味着可以改变对象的内容（例如，其参数）。

.Object.defineProperty 有哪几个参数？各自都有什么作用？

答： 首先它的用法是 Object.defineProperty(object, propertyname, descriptor)

• object 必需。 要在其上添加或修改属性的对象。 这可能是一个本机 JavaScript对象（即用户定义的对象或内置对象）或 DOM 对象。

• propertyname 必需。 一个包含属性名称的字符串。

• descriptor 必需。 属性描述符。 它可以针对数据属性或访问器属性。

它内部的descriptor参数如下：

• value 属性的值，默认为 undefined

• get 一旦目标对象访问该属性，就会调用这个方法，并返回结果。默认为 undefined。

• set 一旦目标对象设置该属性，就会调用这个方法。默认为 undefined。

Object.defineProperty 和 ES6 的 Proxy 有什么区别？

答： Proxy的优势如下

• Proxy可以直接监听整个对象而非属性。

• Proxy可以直接监听数组的变化。

• Proxy有13中拦截方法，如ownKeys、deleteProperty、has 等是 Object.defineProperty 不具备的。

• Proxy返回的是一个新对象，我们可以只操作新的对象达到目的，而Object.defineProperty只能遍历对象属性直接修改;

Object.defineProperty 的优势如下

• 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平。

Object.defineProperty 不足在于：

• Object.defineProperty 只能劫持对象的属性,因此我们需要对每个对象的每个属性进行遍历。

• Object.defineProperty不能监听数组。是通过重写数据的那7个可以改变数据的方法来对数组进行监听的。

• Object.defineProperty 也不能对 es6 新产生的 Map,Set 这些数据结构做出监听。

• Object.defineProperty也不能监听新增和删除操作，通过 Vue.set()和 Vue.delete来实现响应式的。