前端面试题整理

1、xhtml和html有什么区别？ HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言 最主要的不同： XHTML 元素必须被正确地嵌套。 XHTML 元素必须被关闭。 标签名必须用小写字母。 XHTML 文档必须拥有根元素。 2、什么是盒子模型？ 在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。 3、对WEB标准以及W3C的理解与认识？ 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性； 4、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？ 行内元素：a、b、span、img、input、strong、select、label、em、button、textarea 块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote 空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img 5、CSS引入的方式有哪些? link和@import的区别是? 内联 内嵌 外链 导入 区别 ：同时加载 前者无兼容性，后者CSS2.1以下浏览器不支持 link 支持使用javascript改变样式，后者不可 6、CSS实现垂直水平居中 一道经典的问题，实现方法有很多种 详情请看 这15种CSS居中的方式，你都用过哪几种？ 7、简述一下src与href的区别 href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。 src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。 8、CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪个优先级高? 标签选择符 >类选择符 >id选择符 继承不如指定 Id>class>标签选择 后者优先级高 9、前端页面有哪三层构成，分别是什么?作用是什么? 结构层 Html 表示层 CSS 行为层 js 10、简述同步和异步的区别 同步是阻塞模式，异步是非阻塞模式。 同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去； 异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。 11、你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto) 12、px和em的区别 px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。 浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em 相关文章web开发中该用 em 还是 rem 呢？ 13、什么叫优雅降级和渐进增强？ 渐进增强 progressive enhancement： 针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 graceful degradation： 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 区别： a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给 b. 渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要 c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带 14、什么是语义化的HTML? 直观的认识标签 对于搜索引擎的抓取有好处 15、描述css reset的作用和用途。 Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一 16、解释css sprites，如何使用。 Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量 17、display:none和visibility:hidden的区别？ display:none 隐藏对应的元素，在文档布局中不再给它分配空间，它各边的元素会合拢， 就当他从来不存在。 visibility:hidden 隐藏对应的元素，但是在文档布局中仍保留原来的空间。 18、介绍一下CSS的盒子模型？ 1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading; 2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

19、解释下浮动和它的工作原理？清除浮动的技巧 浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。 1.使用空标签清除浮动。 这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。 2.使用overflow。 给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。 3.使用after伪对象清除浮动。 该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素； **

** 1、es5和es6的区别，说一下你所知道的es6 ECMAscript5，即ES5，是ECMAscript的第五次修订，于2009年完成标准化ECMAscript6，即ES6，是ECMAscript的第六次修订，于2015年完成，也称ES2015ES6是继ES5之后的一次改进，相对于ES5更加简洁，提高了开发效率ES6新增的一些特性： 1）let声明变量和const声明常量，两个都有块级作用域ES5中是没有块级作用域的，并且var有变量提升，在let中，使用的变量一定要进行声明 2）箭头函数ES6中的函数定义不再使用关键字function()，而是利用了()=>来进行定义 3）模板字符串模板字符串是增强版的字符串，用反引号（`）标识，可以当作普通字符串使用，也可以用来定义多行字符串 4）解构赋值ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值 5）for of循环for…of循环可以遍历数组、Set和Map结构、某些类似数组的对象、对象，以及字符串 6）import、export导入导出ES6标准中，Js原生支持模块(module)。将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用 7）set数据结构Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数 8）… 展开运算符可以将数组或对象里面的值展开；还可以将多个值收集为一个变量 9）修饰器 @decorator是一个函数，用来修改类甚至于是方法的行为。修饰器本质就是编译时执行的函数 10）class 类的继承ES6中不再像ES5一样使用原型链实现继承，而是引入Class这个概念11）async、await使用 async/await, 搭配promise,可以通过编写形似同步的代码来处理异步流程, 提高代码的简洁性和可读性async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成 12）promisePromise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、强大 13）SymbolSymbol是一种基本类型。Symbol 通过调用symbol函数产生，它接收一个可选的名字参数，该函数返回的symbol是唯一的 14）Proxy代理使用代理（Proxy）监听对象的操作，然后可以做一些相应事情2、var、let、const之间的区别 var声明变量可以重复声明，而let不可以重复声明 var是不受限于块级的，而let是受限于块级 var会与window相映射（会挂一个属性），而let不与window相映射 var可以在声明的上面访问变量，而let有暂存死区，在声明的上面访问变量会报错 const声明之后必须赋值，否则会报错 const定义不可变的量，改变了就会报错 const和let一样不会与window相映射、支持块级作用域、在声明的上面访问变量会报错3、使用箭头函数应注意什么？ （1）用了箭头函数，this就不是指向window，而是父级（指向是可变的） （2）不能够使用arguments对象 （3）不能用作构造函数，这就是说不能够使用new命令，否则会抛出一个错误 （4）不可以使用yield命令，因此箭头函数不能用作 Generator 函数4、ES6的模板字符串有哪些新特性？并实现一个类模板字符串的功能 基本的字符串格式化。 将表达式嵌入字符串中进行拼接。 用{name} 已经 ${age}岁了’ str = str.replace(/${([^}]*)}/g,function(){ return eval(arguments[1]); }) console.log(str);//你好，web 已经 10岁了 5、介绍下 Set、Map的区别？ 应用场景Set用于数据重组，Map用于数据储存Set：　 （1）成员不能重复 （2）只有键值没有键名，类似数组 （3）可以遍历，方法有add, delete,has Map: （1）本质上是健值对的集合，类似集合 （2）可以遍历，可以跟各种数据格式转换6、ECMAscript 6 怎么写 class ，为何会出现 class？ ES6的class可以看作是一个语法糖，它的绝大部分功能ES5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法//定义类 class Point { constructor(x,y) { //构造方

1. javascript的typeof返回哪些数据类型. 答案：string,boolean,number,undefined,function,object
2. 例举3种强制类型转换和2种隐式类型转换? 答案：强制（parseInt,parseFloat,number） 隐式（== ===）
3. split() join() 的区别 答案：前者是将字符串切割成数组的形式，后者是将数组转换成字符串
4. 数组方法pop() push() unshift() shift() 答案：push()尾部添加 pop()尾部删除 unshift()头部添加 shift()头部删除
5. IE和标准下有哪些兼容性的写法 答案： var ev = ev || window.event document.documentElement.clientWidth || document.body.clientWidth Var target = ev.srcElement||ev.target
6. ajax请求的时候get 和post方式的区别 答案： 一个在url后面 ，一个放在虚拟载体里面 get有大小限制(只能提交少量参数) 安全问题 应用不同 ，请求数据和提交数据
7. call和apply的区别 答案： Object.call(this,obj1,obj2,obj3) Object.apply(this,arguments)
8. ajax请求时，如何解析json数据 答案：使用JSON.parse
9. 事件委托是什么 答案: 利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
10. 闭包是什么，有什么特性，对页面有什么影响 答案：闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收，如果过多使用闭包，容易导致内存泄露
11. 如何阻止事件冒泡 答案：ie:阻止冒泡ev.cancelBubble = true;非IE ev.stopPropagation();
12. 如何阻止默认事件 答案：(1)return false；(2) ev.preventDefault();
13. 添加 删除 替换 插入到某个接点的方法 答案： 1）创建新节点 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 2）添加、移除、替换、插入 appendChild() //添加 removeChild() //移除 replaceChild() //替换 insertBefore() //插入 3）查找 getElementsByTagName() //通过标签名称 getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性
14. 解释jsonp的原理，以及为什么不是真正的ajax 答案：动态创建script标签，回调函数 Ajax是页面无刷新请求数据操作
15. document load 和document ready的区别 答案：document.onload 是在结构和样式,外部js以及图片加载完才执行js document.ready是dom树创建完成就执行的方法，原生种没有这个方法，jquery中有 $().ready(function)
16. ””和“=”的不同 答案：前者会自动转换类型,再判断是否相等 后者不会自动类型转换，直接去比较
17. 函数声明与函数表达式的区别？ 在Javscript中，解析器在向执行环境中加载数据时，对函数声明和函数表达式并非是一视同仁的，解析器会率先读取函数声明，并使其在执行任何代码之前可用（可以访问），至于函数表达式，则必须等到解析器执行到它所在的代码行，才会真正被解析执行。
18. 对作用域上下文和this的理解，看下列代码： var User = { count: 1, getCount: function() { return this.count; } }; console.log(User.getCount()); // what? var func = User.getCount; console.log(func()); // what? 问两处console输出什么？为什么？ 答案:是1和undefined。 　　func是在window的上下文中被执行的，所以不会访问到count属性。
19. 看下面代码，给出输出结果。 for(var i = 1; i <= 3; i++){ //建议使用let 可正常输出i的值 setTimeout(function(){ console.log(i); },0); }; 答案：4 4 4

一、什么是MVVM？ MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？ mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。 场景：数据操作比较多的场景，更加便捷 三、vue的优点是什么？ 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。 四、 组件之间的传值？ 父组件与子组件传值 父组件通过标签上面定义传值 子组件通过props方法接受数据 子组件向父组件传递数据 子组件通过router.push） 六、vue.cli中怎样使用自定义的组件？有遇到过哪些问题吗？ 第一步：在components目录新建你的组件文件（indexPage.vue），script一定要export default {} 第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage.vue’ 第三步：注入到vue的子组件的components属性上面,components:{indexPage} 第四步：在template视图view中使用， 例如有indexPage命名，使用的时候则index-page

七、vue如何实现按需加载配合webpack设置 webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import 这样的方式引入，改为const定义的方式进行引入。 不进行页面按需加载引入方式：import home from ‘…/…/common/home.vue’ 进行页面按需加载的引入方式：const home = r => require.ensure( [], () => r (require(’…/…/common/home.vue’))) 八、vuex面试相关 （1）vuex是什么？怎么使用？哪种功能场景使用它？ vue框架中状态管理。在main.js引入store，注入。新建一个目录store，…… export 。场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车 （2）vuex有哪几种属性？ 有五种，分别是 State、 Getter、Mutation 、Action、 Module vuex的State特性 A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新 C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中 vuex的Getter特性 A、getters 可以对State进行计算操作，它就是Store的计算属性 B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用 C、 如果一个状态只在一个组件内使用，是可以不用getters vuex的Mutation特性 Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。 mutations => 提交更改数据的方法，同步！ actions => 像一个装饰器，包裹mutations，使之可以异步。 modules => 模块化Vuex

（3）不用Vuex会带来什么问题？ 可维护性会下降，想修改数据要维护三个地方； 可读性会下降，因为一个组件里的数据，根本就看不出来是从哪来的； 增加耦合，大量的上传派发，会让耦合性大大增加，本来Vue用Component就是为了减少耦合，现在这么用，和组件化的初衷相背。 九、 v-show和v-if指令的共同点和不同点 v-show指令是通过修改元素的display的CSS属性让其显示或者隐藏； v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果； 使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

十、 如何让CSS只在当前组件中起作用 将当前组件的style标签添加scoped 十一、 的作用是什么? 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免重新渲染。 十二、Vue中引入组件的步骤? 1）采用ES6的import … from …语法或CommonJS的require()方法引入组件 2）对组件进行注册,代码如下 // 注册Vue.component(‘my-component’, { template:’ A custom component! '}) 3）使用组件 十三、指令v-el的作用是什么? 提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标.可以是 CSS 选择器，也可以是一个 HTMLElement 实例

十四、在Vue中使用插件的步骤 采用ES6的import … from …语法或CommonJSd的require()方法引入插件 使用全局方法Vue.use( plugin )使用插件,可以传入一个选项对象Vue.use(MyPlugin, { someOption: true }) 十五、请列举出3个Vue中常用的生命周期钩子函数 created: 实例已经创建完成之后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段还没有开始, $el属性目前还不可见 mounted: el被新创建的 vm.e l 替 换 ， 并 挂 载 到 实 例 上 去 之 后 调 用 该 钩 子 。 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 ， 当 m o u n t e d 被 调 用 时 v m . el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el替换，并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素，当mounted被调用时vm.el 也在文档内。 activated: keep-alive组件激活时调用 十六、active-class是哪个组件的属性？ vue-router模块的router-link组件。 十七、怎么定义vue-router的动态路由以及如何获取传过来的动态参数？ 在router目录下的index.js文件中，对path属性加上/:id。 使用router对象的params.id。 十八、vue-router有哪几种导航钩子？ 三种，一种是全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。 第二种：组件内的钩子； 第三种：单独路由独享组件 十九、生命周期相关面试题

总共分为8个阶段创建前/后，载入前/后，更新前/后，销毁前/后。 创建前/后： 在beforeCreate阶段，vue实例的挂载元素el和数据对象data都为undefined，还未初始化。在created阶段，vue实例的数据对象data有了，el还没有。 载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。 更新前/后：当data变化时，会触发beforeUpdate和updated方法。 销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在 （1）、什么是vue生命周期 答： Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 （2）、vue生命周期的作用是什么 答：它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 （3）、vue生命周期总共有几个阶段 答：可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后 （4）、第一次页面加载会触发哪几个钩子 答：第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子 （5）、DOM 渲染在 哪个周期中就已经完成 答：DOM 渲染在 mounted 中就已经完成了。 （6）、简单描述每个周期具体适合哪些场景 答：生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom 二十、说出至少4种vue当中的指令和它的用法？ v-if：判断是否隐藏；v-for：数据循环；v-bind:class：绑定一个属性；v-model：实现双向绑定 Vue如何创建自定义指令？ 二十一、vue-loader是什么？使用它的用途有哪些？ 解析.vue文件的一个加载器。 用途：js可以写es6、style样式可以scss或less、template可以加jade等

二十二、scss是什么？在vue.cli中的安装使用步骤是？有哪几大特性？ 答：css的预编译。 使用步骤： 第一步：先装css-loader、node-loader、sass-loader等加载器模块 第二步：在build目录找到webpack.base.config.js，在那个extends属性中加一个拓展.scss 第三步：在同一个文件，配置一个module属性 第四步：然后在组件的style标签加上lang属性 ，例如：lang=”scss” 特性: 可以用变量，例如（$变量名称=值）； 可以用混合器，例如（） 可以嵌套 二十三、为什么使用key？ 当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。 二十四、为什么避免 v-if 和 v-for 用在一起 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，通过v-if 移动到容器元素，不会再重复遍历列表中的每个值。取而代之的是，我们只检查它一次，且不会在 v-if 为否的时候运算 v-for。 二十五、VNode是什么？虚拟 DOM是什么？ Vue在 页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树建立起来的整个 VNode 树的称呼。