通过近期面试(面试历程详见链接),对自己有一个更清晰的认识,现将遇到的面试题做出总结,希望可以给目前像我一样也正在找工作的你们一些建议吧,如下:
1、项目中遇到的浏览器兼容性有哪些?原因、解决办法是什么?常用hack技巧?(举例一二)
兼容性 解决办法
(1)png24位的图片在IE6浏览器上出现背景 将图片做成png8格式
(2)浏览器默认的margin、padding不同 加一个全局*{margin:0; padding:0}来统一
(3)浮动IE产生双倍距离——20px
#box{float:left; width:10px; margin:0 0 0 100px} 再标签样式控制中加入——_dispaly:inline
2、什么是CSS预处理器/后处理器?
(1)预处理器:例如less、sass、stylus,用来编译sass或less,增加css代码的复用性,
还有层次、mixin、变量、循环、函数等
(2)后处理器:postCss,通常被视为在完成的样式表中根据css规范处理css,
目前常用的是给css属性添加浏览器私有前缀, 实现跨浏览器兼容性问题。
3、Javascript原型、原型链?有什么特点?
(1)原型:每个对象都会在内部初始化一个属性,就是Prototype(原型)
(2)原型链:当我们访问一个对象的属性时,若对象内部不存在这个属性,那么就会去prototype属性中找该属性,而prototype又有自己的prototype,一直找下去,即有“原型链”概念。
特点:Javascript对象是通过引用传递的,我们创建的每个新对象实体中没有一份属于自己的原型副本。当修改原型时,对应相关的对象也会继承这一改变。
当我们需要一个属性值时,js引擎会先看当前对象是否有该属性;若没有,查看其prototype原型是否有,如此类推,一直检索到Object内置对象。
4、javascript作用域链?
(1)全局函数无法查看局部函数内部细节,但局部函数可以查看其上层的函数细节,直至全局细节;
(2)当需要从局部函数中查找某一属性或者方法,若当前作用域没有找到,会上溯到上层作用域查找,直至全局函数,这种组织形式就是“作用域链”
5、谈谈this对象的理解
(1)this总是指向函数的直接调用者,
(2)若有new关键字,this会指向new出来的那个对象;
(3)事件中,this指向触发这个事件的对象,IE中attachEvent指向的是Window
6、什么是闭包?为什么使用它?
(1)闭包,是指有权访问另一个函数作用域中变量的函数。
创建闭包的方式,常用的就是在一个函数内创建另一个函数,通过另一个函数访问这个函数的局部变量。
(2)利用闭包可以突破作用域链,将函数内部的变量和方法传递到外部。
(3)闭包特性:
函数内嵌套函数
内部函数可以引用外部函数的参数和变量
参数和变量不会被垃圾回收机制回收
7、json了解?
(1)json是一种轻量级的数据交换格式。
(2)特点:数据简单、易于读写、占用带宽小
转换json对象——var obj = JSON.parse(str);
转换json字符串——var last = obj.toJSONString();
8、Ajax是什么?如何创建?
(1)Ajax(asyn.. javascript and xml)异步传输+js+xml
异步——向服务器发送请求时,不必等待结果,而是同时做其他事情,等有结果它会进行后续操作。
与此同时,不会引发整个页面刷新,提高了用户体验。
(2)Ajax创建
2-1:创建XMLHttpRequest对象(xhr),即一个异步调用对象;
2-2:创建一个新的http请求,指定该http请求的方法(get/post)/url/验证信息(true/false)
2-3:设置响应http请求状态变化的函数onReadyState
2-4::发送http请求send()
2-5:获取异步调用返回的数据
2-6:使用js和dom实现局部刷新flush()
9、如何解决跨域问题?
jsonp、iframe、....
10、异步加载js方式有哪些?
defer、asyn、创建script,插入到dom中,加载完毕后callback回调函数
11、call()和apply()区别?
相同点:二者都是作为函数的引用;
异同点:第二个参数不同,call()是一个一个参数输出(a,b,c),apply()为输出一个对象“[a,b,c]”
12、哪些会引起内存泄漏?解决办法?
(1)setTimeout第一个参数使用字符串而非函数,会引起内存泄漏
(2)闭包、控制台日志、循环
(3)解决办法:引用计数、标记清除
13、做过的项目有没有用过或自己实现一些polyfill方案(兼容性解决方案)?
html5shiv、placeholder
14、用过的哪些性能优化的方法?
(1)减少http请求:css sprites、文件压缩、cdn托管
(2)前端模板js
(3)用innerHTML代替dom操作,可减少dom请求
(4)少用全局变量,避免使用css表达式
(5)图片预加载,样式表顶部,js底部,使用时间戳
15、Vue前端开发框架(vue-router、vue-resouce...),写几个vue命令
(1)Vue渐进式框架,采用自底向上增量开发的设计。基于MVVM框架,vue核心(ViewModel,vue的一个实例vm)只关注视图层,提供更加简洁、易于理解的API
DomListener + DataBingings —— 实现双向绑定关键
监听View层Dom元素变化 监听Model层数据
a、当View层Dom层元素发生变化,Model层随之变化;
b、当Model层数据发生变化,View层的Dom元素随之变化。
(2)特点:简洁(页面HTML+JSON数据+Vue实例)、数据驱动(computed计算属性和追踪以来的表达式)、组件化(采用可复用、解耦的组件构建页面)、轻量快速(代码量小,精确有效批量dom更新)、模块友好(npm安装)
(3)v-if与v-show均为条件渲染指令
a、v-if值为true,元素才存在HTML代码中;
b、v-show无论是true或者false,均会出现在HTML代码中,表示css样式
(4)css只在当前组件有效,设置为“scoped”
(5)指令keep-alive含义:若把切换出去的组件保留在内存中,可保留它的状态或者避免重新渲染
(6)v-bind v-on:click v-model
vue -V
vue init webpack test1
16、vue-resource与axios区别?
(1)vue-resource:与ajax相似,通过XHR或者jsonp发送请求并处理响应。比起ajax而言,其API更为简洁;
案例:Vue.http.get('/someUrl',[option]/body).then(successCallback,errorCallback)
(2)axios:是vue2.0升级,尤雨溪不再对vue-resource进行维护,用的axios需要代理服务器相关。
17、html5/css3新特性?
(1)Html5——header、footer、aside、article、localstorage、sessionstroage、地图等。
(2)Css3——border-radius圆角,box-shadow阴影,gradiant渐变,text-decoration下划线,transform转换等。
18、ES6新特性并举例说明
(1)变量定义(let、const)
(2)解构赋值(一个对象的方法属性定义给另一个)
varfirst = someArray[1] varsecond = someArray[2] varthird = someArray[3]
var[first,second,third] = someArray;
(3)箭头函数(input=>output)
(4)set和map结构(set唯一存储key值,而map存储键值对key-value)
(5)模板字符串(嵌入变量,需要将变量名写在${}中,空格tab符同是)
(6)数组新API(Array.form()、values())
(7)Promise对象(包含resolve、reject两个属性)
案例:var promise = new Promise(function(resolve,reject) {
if(异步操作成功) { resolve(value); }
else { reject(error); }
})
promise.then(function(value){
//success
},function(value) {
//error
})
19、ESLint规范以及版本使用?
(1)ESLint保证代码一致性,避免错误;(详见官方文档)
(2)安装命令:npm install -g eslint
20、Node怎么样?
Node运行在服务端,是Chrome V8引擎,事件驱动I/O,
基于Node环境下开发的Express服务端框架,是MVC模式的,提供丰富的HTTP工具以及connect中间件技术
21、面向对象编程的三大特性,解释每个特点?
(1)封装:客观事物抽象为类。类是抽象的,对象是具体的,对象抽象类的实物表达;
(2)继承:子类(派生类)继承父类(基类),从一般到特殊,子类可以继承父类的属性和方法
(3)多态:接口重用,一个事物可以存在多种形态
实现多态的两种方法——覆盖(子类重新定义父类中的方法)、重载(允许函数名相同,参数个数不同)
20、MVC与MVVM框架的理解?二者区别是什么?
(1)从字面定义来说,
MVC: model-view-controller 单向绑定
MVVM:model-view-viewmodel 双向绑定
(2)从原理上来说,
MVC:SSH、ASP.net
用户操作—>View(负责接收用户输入操作)—>controller(业务逻辑层)—>Model(数据持久化)—>View(结果反馈给用户)
MVVM:.NET的WPF、Vue
View与Model无任何联系,view与Viewmodel、viewmodel与model是双向改变的
(3)从优点触发,
MVC:比较直观的后台框架,易于维护,减少耦合度,易于管理
MVVM:低耦合(view可独立model变化/更改,viewmodel可绑定到多个view中,view与model可以双向绑定)
可重用性(将视图逻辑放于viewModel中,view可重用viewModel实例)
独立开发(开发人员——viewModel业务逻辑+数据,设计人员——view界面)
可测试性(针对viewModel对view界面进行测试)
21、webpack构建工具(与gulp区别)、npm包管理器?
(1)gulp是一个工具,用于优化前端工作流程,比如刷新界面——需要手写处理任务
(2)webpack是一个打包工具,提供模块化的解决方案——有现成的解决方案
22、模块化、组件化区别?
(1)模块化:关注功能和数据的封装,根据项目业务内容划分大模块;
(2)组件化:关注UI部分的设计,根据小功能通用性和可复用性抽象组件
区别:一个模块(抽象)包含多个组件(具体),组件是模块的子集。
23、Linux命令
常见的有20个常用命令,诸如cd、ls(list)、find、cp(copy)、mv(move)、rm(remove)、kill、file等
详情见博文:Linux——http://blog.csdn.net/ljianhui/article/details/11100625
24、浏览器调试工具用过哪些?
(1)chrome:Elements、console、Source(设置断点调试)
(2)firefox:安装firebug插件,与chrome相同
25、PS常用技能?
切图以及快捷键
26、git命令(举例说明)
(1)创建和使用 git ssh key (5)git push/pull
(2)配置git config (6)git commit
(3)变更git remote set (7)git add/remove
(4)查看git show (8)git log(日志)/branch(分支)
27、webpack命令(举例说明)
(1)安装:npm install webpack -g
(2)下载插件:npm install webpack --save-dev
(3)自动监控:webpack --watch
(4)打包隐藏:webpack --display
(5)安装loader:npm install {whatever}-loader --save-dev
28、AMD与CMD区别?
AMD:是Require.js规范,提前执行,——依赖前置,一个视为多个
CMD:是Sea.js规范,延迟执行,——依赖就近,单一
温馨提示:上述答案仅作为个人简要的见解,仅做参考,如有不当地方还请在评论区多多指正,(这只是大概的,后续如果有还会更新,敬请关注)。