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

青旅半醒 2022-05-30 10:28 237阅读 0赞

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

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

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

[Link 1]: http://mp.blog.csdn.net/postedit/79506401

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

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 web前端中高级面试题

相关 web前端面试必问的面试题

相关前端面试总结---CSS相关面试题

相关 web前端工程师面试题

相关 2021Web前端人事面试题总结精选

相关 web前端经典面试题

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

相关 Web前端初级面试题

相关面试题总结web一些

相关 Web前端JQuery面试题（三）