前端面试

工作经验


自我介绍一下!

回答:

接触前端多久了?学习的渠道是什么?看过有关前端开发的书籍有哪些?最近在看什么书?

回答:

你在学习js的时候,遇到过哪些js方面的坑、 你觉得js哪些知识会难一些。

回答:

对前端工程师这个职位你是怎么样理解的?

回答:

以前做过什么项目?使用了什么技术?

回答:

你都使用过哪些框架?zepto 和 jquery 是什么关系,有什么联系么?

回答:

angular、react、vue和jQuery适合哪些应用场景

回答:

有没有看过框架的源码?jquery 源码中你对哪个部分印象最深,讲一讲?

回答:

你学习过什么框架,现在在学习什么框架?为什么先开始学习 React 而不是 vue、Angular 或其它框架呢?

回答:

你是通过业余时间完全自学的前端,你是如何制定学习计划和学习目标的?你学习的过程中,有没有真正的做过什么东西?

回答:

有没有经常和前端同行业的人交流,通过什么途径交流?

回答:

你最大的优点是什么?那你最大的缺点呢?

回答:

前端现在更新的这么快,你对前端行业有什么看法?

回答:

未来3-5年有什么规划?什么是全栈,你理解的全栈是干嘛的?

回答:

github开源做过哪些,贡献过什么,pr过吗?

回答:

现在给你一个项目,有两个框架可以选择,一个你比较熟悉,另一个是个新框架,大家都没用过,你会如何选择?

回答:

如果有个功能你写的代码有一个 bug , 刚好你同事的代码可以弥补你这个 bug, 但是他的代码有新的 bug 怎么办?

回答:

如果小组开发的时候对于一个软件的各个功能,每个人都有一定的 bug 怎么办?

回答:

现在你的领导给你了一份工作,要求你一个星期完成,但你看了需求以后估计需要3周才能完成,你该怎么办?

回答:

给你一个项目,你使用jquery还是vue、react。为什么。

回答:

平时项目中有遇到最难的问题是什么?

回答:

在和队友沟通的时候遇到什么麻烦?

回答:

怎么设计好的组件?

回答:

你觉得什么样的代码是好的代码?

回答:

你所知道的前端大会有哪些?

回答:比如腾讯web前端大会,CSS conf大会,js conf大会。

你还投了哪些公司,现在招聘进度如何?

回答:

你还有什么问题想问我?

回答:

对加班有什么看法?

回答:

设计一个产品,实现非前端人员或者运维人员可以方便使用,达到不需要专业前端开发人员就可以实现前端交互实现的功能,详细介绍产品设计的思路、技术选型、用户体验考虑、前端底层支撑实现、项目架构设计和后台架构设计。

回答:

给你一个团队,怎么去带,怎么分配任务和把控项目进度!

回答:

JavaScript面试题


对象&原型与继承

说一说原型链!在JS里面如何做到继承呢?

回答:原型链、组合模式、寄生组合式继承

说一说原型和原型链,object是最上面的吗?

回答:

prototype和__proto__的关系是什么?

回答:

假如构造函数有一个test()方法,prototype上也有一个test()这两个方法有区别吗?

回答:

请谈谈 Object.getPrototypeOf()、 Object.setPrototypeOf()、Object.create() !

回答:

请实现ECMAScript 5中的Object.getPrototypeOf() 函数!

回答:

JavaScript 中,有一个函数,执行对象查找时,永远不会去查找原型,这个函数是哪个?

回答:

JS对象属性的可枚举性,hasOwnProperty()属性有什么用?

回答:

Object.defineProperty()是干什么用的?

回答:

比较typeof与instanceof?

回答:

深拷贝和浅拷贝的区别,手写深拷贝!

回答:

函数与作用域

函数调用的方式有哪些。他们的区别是什么。

回答:

call和apply还有bind是干嘛的?

回答:

表述您对javascript this工作原理的理解!

回答:

this在不同情况下有哪些可能的值?

回答:

请谈谈JS中的执行上下文和作用域链!

回答:

请谈谈变量提升!

回答:

闭包是怎么回事?为什么要用它?有什么注意事项?

回答:

匿名的自执行函数又是怎么回事?

回答:

具名函数表达式知道吗?函数声明和函数表达式有什么区别吗?

回答:

"use strict"是干什么用的?

回答:

ajax请求

简述同步和异步的区别!

回答:

ajax如何实现、ajax请求的过程、readyState五种状态的含义

回答:

AJAX请求总共有多少种CALLBACK?

回答:

Ajax的优缺点及工作原理?

回答:

get和post的区别

回答:

说一下同源策略!

回答:

在平时开发中,遇到过跨域的问题吗?如何处理跨域呢?还有其他跨域方式吗?

回答:

JSONP的实现原理是什么?

回答:

如何进行CORS跨域?需要什么条件?

回答:

对服务器来说,返回json数据和JSONP数据有什么不一样?

回答:

如何解决ajax无法后退的问题?

回答:我回答了用哈希值,然后用history函数,面试官又问,那你知道history的什么函数吗,。这个我真不知道,之前看阮一峰的教程上,有写那两个函数,但是我实在是想不起来了。

关于数组

在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

回答:

怎么判断一个对象是不是数组,尽可能多的说出你知道的方法?

回答:

怎么把一个类数组对象转为数组?

回答:

类数组有哪些?

回答:

编写一个方法 去掉一个数组的重复元素!

回答:

求数组中的最大值、最小值!

回答:

["1","2","3"].map(parseInt) 的答案是多少?

回答:

关于DOM

JavaScript中Element与Node的区别,children与childNodes的区别!

回答:

兼容浏览器的获取指定元素(elem)的样式属性(name)的方法!

回答:

如何获取光标的水平位置?

回答:

浏览器事件

浏览器里面的事件都会按照一定的规则去传递,这个规则是什么?

回答:

事件流的三个阶段,哪些事件不能冒泡?如何阻止冒泡?

回答:

事件代理,事件委托是什么意思?

回答:

请谈谈事件循环(event loop)!

回答:

请指出document load和document ready的区别?

回答:

IE与火狐的事件机制有何区别?

回答:

能否写一个通用的事件侦听器函数?

回答:

表单的change事件和input事件有什么区别?

回答:

模块化:requirejs、seajs、CommonJS、ES6 Module

amd和cmd的区别,怎么了解到这些区别的,是否是去看了规范

回答:

requirejs/seajs那些经常用的方法,然后对其进行解释

回答:

请谈谈你对ES6 Module的理解!如何使用ES6 Module?

回答:

CommonJS 和 ES6 Module对比有哪些区别?

回答:

关于ES6

谈一谈你对 ECMAScript6 的了解?

回答:

ECMAScript 6 怎么写 class ,为何会出现 class?

回答:

ES6用到什么程度?谈谈async/await!

回答:

所有的 ES6 特性你都知道吗?如果遇到一个东西不知道是 ES6 还是 ES5, 你该怎么区分它?

回答:

说一说回调地狱是什么,有什么问题。异常捕获怎么做。

回答:

知道 promise 么?它用来做什么?Promise.all() 是干什么用的,怎么用?

回答:

说一说promise。一个promise有多个then,如果第一个then出错,后面的还会执行吗,如何捕获异常。
如果第一个then出错了,我还想要后面的继续执行,应该怎么做。

回答:

你最喜欢的es6中的特性是什么,为什么。

回家:

箭头函数和普通函数区别!

回答:this指向、不能做构造函数、不能使用arguments等.

let暂时性死区和块级作用域!

回答:

因为引用计数产生的内存泄漏,在ES6中的解决办法是什么?

回答:

怎么在当下浏览器环境使用ES6,Babel如何使用,如何配置?

回答:

关于Node

nodejs 你了解多少?全局对象是什么

回答:

Express 和 koa 有什么关系,有什么区别?

回答:

为什么数据库使用的是mongodb而不是mysql。

回答:

为什么选 nodeJS 为什么不喜欢 php 和 python?

回答:

Buffer模块是干什么的

回答:

Stream是什么,使用的两种模式

回答:

node中的process是什么?

回答:

node中如何创建子进程?

回答:

http模块如何将异步处理方式实现成同步处理方式

回答:

面试官建议去阅读node的http模块和Stream模块源码

nodejs http获取百度页面,把百度改为千百度!

回答:

如何判断当前脚本运行在浏览器还是 node 环境中?

回答:

关于jQuery

jQuery 库中的 $() 是什么?

回答:

$(this) 和 this 关键字在 jQuery 中有何不同?

回答:

jQuery.extend 与 jQuery.fn.extend 有何区别?

回答:

是否了解针对 jQuery 性能的优化方法?

回答:

jQuery 与 jQuery UI 有何区别?

回答:

jquery怎么移除标签onclick属性?

回答:

jQuery中的Delegate()函数有什么作用?

回答:

$(document).ready()方法和window.onload有什么区别?

回答:

如何用jQuery禁用浏览器的前进后退按钮?

回答:

jquery中$.get()提交和$.post()提交有区别吗?

回答:

jQuery的事件委托方法bind 、live、delegate、on之间有什么区别?

回答:

关于MVVM

前端 MVC、MVVM概念,MVVM的好处!

回答:

JQuery和三大框架的区别?react和vue的区别?

回答:

vue接触过多长时间?react接触过多长时间?

回答:

vue和react有什么区别?angular用过吗?

回答:

为什么要用vue和react,而不用JQuery,给你一个项目,什么情况下使用单页面应用?什么情况下使用多页面应用?

回答:

React的思想和原理,虚拟DOM树和diff算法!

回答:

说一下vue和react中的路由实现方式?

回答:

vue中的路由是如何管理的?你知道他的实现方式吗?

回答:

vue中v-if和v-show的区别是什么?

回答:

vue中的数据双向绑定是如何实现的?

回答:

vue父子组件和兄弟组件的通信问题;

回答:

vue的事件监听;

回答:

vue-router获取自定义参数;

回答:

vue-router的go相关;

回答:

vue组件设计相关;

回答:

vuex的原理;

回答:

vuex的action和mutation的异步操作和同步操作问题;

回答:

关于TypeScript

Typescript你用过吗?

回答:

JS代码优化

谈谈垃圾回收机制方式及内存管理!

回答:

哪些操作会造成内存泄漏?

回答:

开发过程中遇到的内存泄露情况,如何解决的?

回答:

变量常驻内存会带来什么问题?如何避免这种问题?怎么销毁?

回答:

进程和线程的区别是什么?

回答:

设计模式

有没有学过设计模式?说一说观察者模式吧!能不能写出来?

回答:

了解过设计模式吗?

回答:

开发中间用过什么设计模式?

回答:

说一下工厂模式是什么样子!

回答:

手写给出一个工厂方法实现!

回答:

手写给出一个策略模式实现!

回答:

手写给出一个装饰者模式实现!

回答:

为什么只知道这么几个设计模式?

回答:

JS习题

一个DOM树,其中有两个节点,找出这两个节点公共的父节点?

回答:

获取页面上个数top3标签!

回答:

如何实现一个倒计时功能,类似于蘑菇街中的秒杀?

回答:

在100 0000个数中选出最大的五个数字,那种排序方法最为快速?

考点: 堆排序,合并排序,快速排序,希尔排序(插入排序的一种,也称缩小增量排序)

一瓶饮料3块钱,喝完三瓶饮料可以拿空瓶子再换一瓶,我有300块钱,可以喝到多少饮料?

回答:

给定两个整数a和b,要求在使用任何辅助空间的情况下,交换两个的值!

回答:

给10个箱子,有一个比其他得要轻,用最少的比较次数找出这个箱子!

回答:

想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)。

回答:

判断一个字符串中出现次数最多的字符,统计这个次数。

回答:

编写一个方法 求一个字符串的字节长度!

回答:

写一个function,清除字符串前后的空格。

回答:

怎样用js实现千位分隔符?

回答:

说一下二叉树?如果反转二叉树?

回答:

如何自定义dialog组件?

回答:

说一下图片轮播的思路!

回答:

自定义表单,使各浏览器表现一致,如何实现?

回答:

Javascript中实现类似PHP的print_r函数!

回答:

请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象!

回答:

delegate如何实现

回答:

weex实现大致原理

回答:

前端异常监测如何实现

回答:

初步了解了前端异常监测,并且了解了百姓网、腾讯和阿里在前端异常监测的一些方案和框架。

js的uglify如何实现

回答:

其他

原生js的选择器有哪些?

回答:

setTimeout和setInterval的区别!

回答:

JavaScript 代码中的 "use strict"; 是什么意思?使用它的区别是什么?

回答:

字符串的substr、substring、slice有什么区别?

回答:

如何说服对方使用jsBridge

回答:

unicode与utf-8字符编码方式关系

回答:

如何规避javascript多人开发函数重名问题?

回答:

JS中基本类型在内存中存储方式是什么?引用类型的存储方式是什么?

回答:

HTML/HTML5 API


浏览器存储

cookie和session有什么区别?

回答:

前端存储了解多少?cookie和stroage的区别是?

回答:

sessionStorage 、localStorage 和 cookie 之间的区别!

回答:

localStorage 的最大存储空间是多少?如果存超了会怎么样?

回答:

localStorage 是注册在几级域名底下的?

回答:

Web Storage与Cookie相比存在的优势!

回答:

websocket

websocket聊天室如果发送失败了,你怎么解决这个问题?如何做到发送图片? 有了文字、图片等不同的数据类型之后,你如何实现数据的存储,如何设计,前端如何获取?

回答:

websocket聊天室有输入框,那么怎么获取的,对于使用div来模仿textarea,我说使用正则去掉div,那么用户输入的也是div呢?如果发送失败了呢?  究竟应该是先发送,还是应该先存储到redux中,考虑用户体验(仿照微信)。

回答:

websocket的使用,底层是如何处理的。

回答:

websocket是如何实现服务器端推送的?

回答:

websocket和http的区别是什么?websocket的优点是什么?

回答:

为什么使用websocket? websocket是怎么连接的,一定需要通过http协议吗? 短轮询、commet、长轮训都介绍一下。各有什么优缺点。

回答:

聊天室如何兼容IE8?

回答:

webSocket 如何兼容低浏览器?

回答:

其他

用过canvas吗,你了解多少?

回答:

Canvas和SVG的比较!

回答:

页面中一个video,可能格式不支持,那么前端如何判断并给出提示?

回答:

HTML5的离线存储怎么使用?能否解释一下工作原理?

回答:

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

回答:

页面可见性(Page Visibility) API可以有哪些用途?

回答:

如何在页面上实现一个圆形的可点击区域?

回答:

网页布局


HTML部分

浏览器的内核分别是什么?

回答:

meta标签作用!

回答:

iframe 有哪些缺点?

回答:

HTML5的form如何关闭自动完成功能?

回答:

简述一下src与href的区别?

回答:

介绍一下盒模型!

回答:

行内元素有哪些?块级元素有哪些?空(void)元素有那些?

回答:

有没有做过整站?会不会切图?切图时会保存成什么格式?不透明的时候会保存成png格式吗?png8和png24怎么选择?

回答:

CSS部分

float和display:inline-block;的区别。

回答:

浮动是怎么样的?文档流又是怎么回事?如何清除浮动?

回答:

说一下position的几个属性。

回答:

position:absolute;与position:fixed的区别?

回答:

有没有了解过css3的position:sticky;

回答:

除了border之外还有一种方法可以给div划线,你了解过这个吗?

回答:outline,它不占宽度。

css选择器优先级。

回答:

什么时候用ID,什么时候用class?

回答:

有没有遇到过这样的问题: 一个有border的div,里面有一个图片,发现图片和下面的border有一定的空隙(baseline)。

回答:

css高度坍塌:两个盒子,一个下边据20px,一个上边据50px,最后为两个盒子之间的距离为多少?如何解决高度坍塌?

回答:

两侧固定,中间自适应的布局解决方案!

回答:

CSS中居中的几种方式!

回答:

你平时都用什么布局?你所知道的布局方式有哪些?

回答:

display有哪些?

回答:尽可能多回答,全面!

CSS中的单位有哪些?分别说一说!

回答:尽可能多回答,全面!

rem和em的区别?rem如何定位?

回答:尽可能多回答,全面!

px和em的区别!

回答:尽可能多回答,全面!

怎么让Chrome支持小于12px 的文字?

回答:body{-webkit-text-size-adjust:none}

现在HTML5中css3可以写出一个旋转的立方体,请写出要用到的CSS属性。

回答:body{-webkit-text-size-adjust:none}

介绍一下 Sass 和 Less 是什么?它们有何区别?

回答:body{-webkit-text-size-adjust:none}

::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。

回答:

请谈谈对CSS3 Flex布局!

回答:

flex布局是什么,默认的方向是什么,如何改变方向?

回答:

请谈谈对CSS3 Grid布局!

回答:

说一说CSS3中的动画,animation中可以取哪些值?

回答:

说一说CSS3中的变形,transform都有哪些选项?

回答:

CSS3了解多少?说说优雅降级和渐进增强?

回答:

css3动画和jquery动画的差别是什么?

回答:

你前端用了Bootstrap,知道它的响应式是如何实现的吗?

回答:

Boostrap怎么用css实现的栅格布局?

回答:

媒体查询的原理是什么?知道流媒体查询吗?

回答:

移动端


有没有做过移动端页面?

回答:

meta viewport原理!

回答:

retina屏幕的了解!

回答:

说一说移动端的布局(flexible)。知道原理吗?怎么自己去实现一个flexible? rem布局的实现原理?

回答:

移动端的点透是什么,有没有了解?

回答:

移动端如何真机调试?

回答:

手机上页面有问题怎么办?怎么调试?

回答:weinre!

tap是怎么回事、和click的区别!tap为什么有300毫秒的延迟?

回答:

移动端解决屏幕旋转问题!

回答:这个我一开始没回答上来,后来想到了通过检测浏览器的宽来实现,虽然面试官说有一个内置的函数,但是也算勉强回答对了。

性能优化


常规

异步加载JS文件的方式有哪些?

回答:

请说出三种减低页面加载时间的方法!

回答:

页面加载速度很慢,如何加速页面的渲染?

回答:

图片很大,如何进行优化?

回答:

那些购物网站有那么多图片,怎么保证的加载速度?

回答:

性能动画方面,为什么用css3?

回答:因为css3动画能启动GPU渲染。

首屏、白屏时间如何计算!

回答:

域名收敛是什么?

回答:

前端开发中,如何优化图像?图像格式的区别?

回答:

文件、脚本合并是如何优化的呢?

回答:

页面性能优化有哪些方式?你所知道的前端优化有哪些内容?

回答:

浏览器原理

输入了一个URL之后发生了什么?

回答:

浏览器是如何渲染页面的?

回答:

重绘,重排是怎么回事?有什么区别?

回答:

请举例说明重绘,什么情况下会重绘?

回答:

你认为样式是会引起重绘的吗?什么样式会引起重绘/重排?什么属性会引起重绘/重排?

回答:

浏览器缓存

说一下浏览器缓存问题!说一下强缓存和协商缓存?

回答:

浏览器如何知道一个文件资源是否需要缓存?

回答:

前端缓存如何实现?etag和Last-Modified的优先级哪个比较高以及为什么?cache-control和expire优先级哪个比较高以及为什么?

回答:

前端缓存机制!如果去掉etags\last-modefied\cache-control\expires这些控制缓存的字段,浏览器会怎么处理缓存?

回答:

Web请求与网络安全


http协议

HTTP的几种请求方法用途!

回答:

一次完整的HTTP事务是怎样的一个过程?

回答:

熟不熟悉 http? http 和 https 有什么区别?https的整个过程画一下!

回答:

httPS需要多少时间?比http慢多少?怎么优化?

回答:

https有什么缺点?

回答:

http2有哪些特性?头部压缩和多路复用怎么回事?

回答:

画出TCP三次握手的过程!

回答:

http1.0、http1.1、http2的三者比较!

回答:

http1.1中的keep-alive是怎么理解的?

回答:

accept是什么,怎么用?

回答:

http协议状态码,302和303的区别

回答:

304和200的区别是什么?

回答:

HTTP状态码304,502,503

回答:

1,2,3,4,5 开头的状态码都表示什么?

回答:

网络安全

你所了解到的Web攻击技术!

回答:

网页验证码是干什么用的?是为了解决什么安全问题?

回答:

做代码的时候有没有考虑过安全问题?怎么防止注入?

回答:

如何防止 XSS 和 CORS? 被攻击了该怎么办?

回答:

知道 XSS 吧,怎么防护?cross-site script

回答:

知道 CSRF 么,怎么防止 CSRF? cross-site request forgery

回答:

简要阐述XSS和CSRF攻击及防范!

回答:

XSS脚本劫持,如何截获?

回答:

xss怎么防范?尖括号应该怎么过滤?

回答:

你项目中如何进行用户输入过滤的?都过滤了那些内容?

回答:

开发工具


开发页面时怎么debug?

回答:

前端工程化方面做了哪些东西?

回答:

已经上线的项目,出问题,怎么样去处理异常?

回答:

构建工具除了Webpack,还接触过其他的吗?

回答:

Webpack的优点和应用场景?

回答:

gulp 和 webpack 有什么区别,为什么你要用 gulp?

回答:

设计一个自己的打包工具需要设计哪些主要功能?

回答:

熟不熟悉 git,你用它做过什么?git命令了解哪些?

回答:

其他


说一下restful api吧!

回答:

兼容性说一说,你做的PC端兼容性是到哪的?

回答: