前端面试题

 什么是HTTP持久化和管线化

出现背景： HTTP 最初的版本中，每进行一次 HTTP 通信，就要断开一次 TCP 连接（无连接）

为解决上述问题，HTTP/1.1 增加了持久连接（HTTP Persistent Connections ）的方法，其特点是，只要一方未明确提出断开连接，则另一方保持 TCP 连接状态

管线化是指将多个 HTTP 请求整批发送，在发送过程中不用等待对方响应

管线化是在持久连接的基础上实现的，管线化的实现，能够同时并行发送多个请求，而不需要一个接一个的等待响应

为什么利用多个域名来存储网站资源会更有效

CDN 缓存更方便

突破浏览器并发限制

节约 cookie 带宽

节约主域名的连接数，优化页面响应速度

防止不必要的安全问题

使用XHTML的局限有哪些？

XHTML 与HTML的区别为：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

局限：

所有的 XHTML 元素都必须被正确地嵌套，XHTML 必须拥有良好的结构，所有的标签必须小写，并且所有的 XHTML 元素必须被关闭。所有的 XHTML 文档必须拥有 DOCTYPE 声明，并且 html、head、title 和 body 元素必须存在。虽然代码更加的优雅，但缺少容错性，不利于快速开发。

盒子垂直居中方法

position: absolute;left:50%;top:50%;width:400px;

height:400px;margin-left:-200px;margin-top:-200px;

 浮动元素清除浮动方法

四种方法：1、使用空标签清除浮动2、使用overflow属性。（overflow:auto；zoom:1″用于兼容IE6）3、使用after伪对象清除浮动。 该方法只适用于非IE浏览器4、浮动外部元素，float-in-float。这种方法很简单，就是把“#outer”元素也进行浮动（向左或者向右）。

 闭包的理解，javascript的作用域

a、闭包就是能够读取其他函数内部变量的函数。b、在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包的用途闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。 实例如下：根据作用域链的规则，底层作用域没有声明的变量，会向上一级找，找到就返回，没找到就一直找，直到window的变量，没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。

varcount=10;//全局作用域 标记为flag1

functionadd(){varcount=0;//函数全局作用域 标记为flag2

returnfunction(){        count+=1;//函数的内部作用域alert(count);    }    }

vars = add()    s();//输出1s();//输出2

网站性能优化的方法

1）将css和js文件放在独立外部文件中引用

2) 使用gzip压缩网页内容

3）将CSS放在页面顶端，JS文件放在页面底端

4）使JS文件内容最小化

5）尽量减少外部脚本的使用，减少DNS查询时间

（ 文件合并

  文件最小化/文件压缩

  使用 CDN 托管

  缓存的使用（多个域名来提供缓存））

vuex 原理

vuex 仅仅是作为 vue 的一个插件而存在，不像 Redux,MobX 等库可以应用于所有框架，vuex 只能使用在 vue 上，很大的程度是因为其高度依赖于 vue 的 computed 依赖检测系统以及其插件系统，

vuex 整体思想诞生于 flux,可其的实现方式完完全全的使用了 vue 自身的响应式设计，依赖监听、依赖收集都属于 vue 对对象 Property set get 方法的代理劫持。最后一句话结束 vuex 工作原理，vuex 中的 store 本质就是没有 template 的隐藏着的 vue 组件；

eval是做什么的

它的功能是把对应的字符串解析称js代码运行；

应该避免使用eval,不安全，非常耗能.

setState 和 replaceState 的区别

setState 是修改其中的部分状态，相当于 Object.assign，只是覆盖，

不会减少原来的状态 replaceState 是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么 state 中就没有这个状态了

react diff 原理

把树形结构按照层级分解，只比较同级元素。

给列表结构的每个单元添加唯一的 key 属性，方便比较。

React 只会匹配相同 class 的 component（这里面的 class 指的是组件的名字） 合并操作，调用 component 的 setState 方法的时候, React 将其标记为 dirty.

到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能

状态(state)和属性(props)之间有何区别

State 是一种数据结构，用于组件挂载时所需数据的默认值。

State 可能会随着时间的推移而发生突变，但多数时候是作为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件，并且就子组件而言，props 是不可变的(immutable)。

组件不能改变自身的 props，但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据--回调函数也可以通过 props 传递。

.shouldComponentUpdate 是做什么的？

shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。

当你调用 setState 的时候，发生了什么事？

将传递给 setState 的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的 react 元素树，与上一个元素树进行对比（ diff ），从而进行最小化的重渲染。

如果网页内容需要支持多语言，你会怎么做？

下面这些问题需要考虑：

应用字符集的选择，选择UTF-8编码

语言书写习惯&导航结构

数据库驱动型网站

React 优势

1、React 速度很快：它并不直接对 DOM 进行操作，引入了一个叫做虚拟 DOM 的概念，安插在 javascript 逻辑和实际的 DOM 之间，性能好。

2、跨浏览器兼容：虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的 API，甚至在 IE8 中都是没问题的。

3、一切都是 component：代码更加模块化，重用代码更容易，可维护性高。

4、单向数据流：Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构，它随着 React 视图库的开发而被 Facebook 概念化。

5、同构、纯粹的 javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行，预渲染你的应用有助于搜索引擎优化。

6、兼容性好：比如使用 RequireJS 来加载和打包，而 Browserify 和 Webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

在 React 当中 Element 和 Component 有何区别？

React Element 是描述屏幕上所见内容的数据结构，是对于 UI 的对象表述。

典型的 React Element 就是利用 JSX 构建的声明式代码片然后被转化为 createElement 的调用组合。

React Component 是一个函数或一个类，可以接收参数输入，并且返回某个 React Element

action 执行函数中第一个参数 store 从哪里获取的？

store 初始化时，所有配置的 action 和 mutation 以及 getters 均被封装过。在执行如 dispatch('submitOrder', payload)的时候，actions 中 type 为 submitOrder 的所有处理方法都是被封装后的，其第一个参数为当前的 store 对象，所以能够获取到 { dispatch, commit, state, rootState } 等数据。

Javascript中，执行时对象查找时，永远不会去查找原型的函数？

Object.hasOwnProperty(proName)：是用来判断一个对象是否有你给出名称的属性。不过需要注意的是，此方法无法检查该对象的原型链中是否具有该属性，该属性必须是对象本身的一个成员。

DOM操作

（1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() //在已有的子节点前插入一个新的子节点

（3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById() 

.css 动画和 js 动画的差异

代码复杂度，js 动画代码相对复杂一些

动画运行时，对动画的控制程度上，js 能够让动画，暂停，取消，终止，css 动画不能添加事件

动画性能看，js 动画多了一个 js 解析的过程，性能不如 css 动画好