面试题——web前端面试总结

  通过近期面试（面试历程详见链接），对自己有一个更清晰的认识，现将遇到的面试题做出总结，希望可以给目前像我一样也正在找工作的你们一些建议吧，如下：

    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规范，延迟执行，——依赖就近，单一

温馨提示：上述答案仅作为个人简要的见解，仅做参考，如有不当地方还请在评论区多多指正，（这只是大概的，后续如果有还会更新，敬请关注）。