前端面试简单小结六例

一．div+css 的布局较 table 布局有什么优点？
改版的时候更方便 只要改 css 文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。

a> div+css布局的好处：
1.符合W3C标准，代码结构清晰明了，结构、样式和行为分离，带来足够好的可维护性。
2.布局精准，网站版面布局修改简单。
3.加快了页面的加载速度（最重要的）。
4.节约站点所占的空间和站点的流量。
5.用只包含结构化内容的HTML代替嵌套的标签，提高另外搜索引擎对网页的搜索效率。
b> table布局的好处（table布局也不是一点用的没有，这点是毋庸置疑的）
1.容易上手。
2.可以形成复杂的变化，简单快速。
3.表现上更加“严谨”，在不同浏览器中都能得到很好的兼容。

二．vue路由懒加载方式；
方法一 resolve
这一种方法较常见。它主要是使用了resolve的异步机制，用require代替了import,实现按需加载

方法二 官网方法
vue-router在官网提供了一种方法，可以理解也是为通过Promise的resolve机制。因为Promise函数返回的Promise为resolve组件本身，而我们又可以使用import来导入组件。

方法三 require.ensure
这种模式可以通过参数中的webpackChunkName将js分开打包。
component: resolve => require.ensure([], () => resolve(require(’@/components/’+componentName)), ‘webpackChunkName’)

结合 Vue 的异步组件和 Webpack 的代码分割功能，把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件

三．redux工作流程；
首先，用户发出 Action。然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。State 一旦有变化，Store 就会调用监听函数。listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

四．Es6 module和commonjs的区别；
CommonJS和ES6 Module是目前使用较为广泛的模块标准。它们的主要区别在于
1.前者建立模块依赖关系是在运行时，后者是在编译时；
2.在模块导入方面，CommonJS导入的是值拷贝，ES6 Module导入的是只读的变量映射；
3.ES6 Module通过其静态特性可以进行编译过程中的优化，并且具备处理循环依赖的能力。

五．hash、chunkhash、contenthash三者区别
一、hash（所有文件哈希值相同，只要改变内容跟之前的不一致，所有哈希值都改变，没有做到缓存意义）
二、chunkhash（同一个模块，就算将js和css分离，其哈希值也是相同的，修改一处，js和css哈希值都会变，同hash，没有做到缓存意义）
三、contenthash（只要文件内容不一样，产生的哈希值就不一样）

六．React 中 keys 的作用是什么？
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。