高级前端面试题 重要
一、前端工程化
关于前端工程化，是一个很大的命题，你在知乎上搜索前端工程化，会有一些文章，这些文章可以帮助你理解前端工程化。
说一下我理解的前端工程化吧，前端工程化不单单包括前端的模块化、组件化、自动化，还包括前端性能优化，前端目录规划，前端规范化，自动化测试，发布等等一系列知识。这里我就不一 一介绍了，感兴趣的也可以去读读张云龙的文章：
https://github.com/fouber/blog/issues/3
https://github.com/fouber/blog/issues/10
二、 前端设计模式
其实这里可以作为一篇文章来书写了，不过，假如你不了解，可以网上搜了一下前端设计模式，关于设计模式也是有不少文章的。
三、 前端安全性问题
当然，这个是老的话题，有的在初中级前端面试中也会提及到。但是在中高级面试的时候，你要说出前端安全性问题防御，及前端常见安全性问题的攻击原理是什么。
1、xss跨站脚本攻击（原理、如何进行的、防御手段是什么，要说清楚）
2、CSRF跨站请求伪造（如何伪造法？怎么防御？等等都要说清楚）
3、sql脚本注入（注入方式，防御方式）
4、上传漏洞 （防御方式）
四、 跨域问题的处理
关于跨域，我前面很多文章也提及了，浏览器跨域访问解决方案，这篇文章可以看一下。
另外，面试官可能会问及 cookie跨域及localStorage跨域问题，关于这一点，也可以看我之前刚刚写的文章：http://www.haorooms.com/post/kuayu_localstorage_cookie
五、前端数据加密
1、base64加密
在页面中引入base64.js文件，调用方法为：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>base64加密</title>
<script type="text/javascript" src="base64.js"></script>
<script type="text/javascript">
var b = new Base64();
var str = b.encode("admin:admin");
alert("base64 encode:" + str);
//解密
str = b.decode(str);
alert("base64 decode:" + str);
</script>
</head>
<body>
</body>
</html>2、md5加密
在页面中引用md5.js文件，调用方法为
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>md5加密</title>
<script type="text/ecmascript" src="md5.js"></script>
<script type="text/javascript">
var hash = hex_md5("123dafd");
alert(hash)
</script>
</head>
<body>
</body>
</html>3、sha1加密
据说这是最安全的加密
页面中引入sha1.js，调用方法为
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>sha1加密</title>
<script type="text/ecmascript" src="sha1.js"></script>
<script type="text/javascript">
var sha = hex_sha1('mima123465')
alert(sha)
</script>
</head>
<body>
</body>
</html>六、http相关问题
这个可能涉及的东西也蛮多，可以看我前段时间总结的系列文章：
http://www.haorooms.com/post/long_lianjie_websocket
七、 知识点问题介绍
上面问题可能是前端通用问题吧，下面的问题可能都是相关知识点的，下面简单总结一下：
1、 webpack相关
这个考察你对webpack的理解是使用程度。
例如可能考察如下知识点：
1、hash（contenthash, chunkhash）
2、多页面配置
3、发布上线流程
4、如何加快打包速度，减少打包体积
5、和其他工具的区别（grunt,glup,rollup,parcel,Browserify）
2、状态管理器相关
主要是flux、redux、vuex等
主要问题如下：
一、flux、redux、vuex数据流向，(例如：点击按钮触发到状态更改，数据是如何流向的？)
例如flux：
1、用户访问 View
2、View 发出用户的 Action
3、Dispatcher 收到 Action，要求 Store 进行相应的更新
4、Store 更新后，发出一个"change"事件
5、View 收到"change"事件后，更新页面二、vuex和redux区别
三、vuex数据流？为什么要遵循这个数据流？假如在页面中直接修改state,而不是通过mutation 的commit方式修改，会怎么样？
3、 vue相关
vue相关的问题有很多。仅举例：
1、vue-router如何做历史返回提示？
2、vue-router如何做用户登录权限等？
3、vue生命周期
4、vue组件通信
5、vue服务器渲染
6、vue性能优化4、 nodejs相关
1、nodejs常用模块
2、nodejs爬虫
3、nodejs 流
4、nodejs请求如何返回大文件5、 es6相关
1、generate和async await
...
6、算法
1、冒泡排序
2、数据去重方法
3、取1000个数字里面的质数7、模块化
1、amd,cmd及commonjs区别
2、import、require区别
8、其他
1、自动化测试相关 2、mock数据相关 3、pwa相关 4、nginx相关 5、微信小程序相关 6、敏捷开发等
前言
之前在兴安得力的时候，我也出过前端的面试题。那么前端人员在外面面试的时候，一般技术人员都会考察我们那些地方呢？我在这里不妨总结一下！（PS：有点小邪恶，这个公开之后，对于面试者来说是方便了。但是，假如你是公司技术人员，是面试官，您不妨修改一下题目，变通一下！）
javascript常见题目
一、您对js的原型是如何理解的？您对js的继承是如何理解的？能否举例说明js的继承？
关于这个题目，我之前的一篇文章 http://www.haorooms.com/post/js_constructor_pro ，您可以看一下。理解一下原型prototype，关于继承，那主要是js原型链的继承。关于继承的理解及举例（我这里就不详细介绍了，简单介绍之后，你即使背过了，也不一定理解，对于公司也是不公平的）。我还是推荐面试者看一本书《[JavaScript高级程序设计(第3版)]》，这本书对js讲的很详细。关于这个题目，您可以阅读其第六章就可以了！认真阅读之后，相信你能理解，也能够简单的说出来！
关于js的继承，确实是重点和难点，我写过两篇博客，大家可以看下：http://www.haorooms.com/post/js_lei_jicheng
http://www.haorooms.com/post/js_jc_lei2
二、js闭包？举例并说明其主要的作用！
关于闭包，其实是指有权访问另一个函数作用域中变量的函数。具体我之前也写过一篇文章，可以看一看！
javascript闭包的理解 http://www.haorooms.com/post/js_bb
javascript闭包入门理解（二）：http://www.haorooms.com/post/js_bbtwo
三、js数组主要有哪些方法？主要参数你了解吗？
具体你可以查一下，常用的一般有如下：
1 、shift():删除数组的第一个元素,返回删除的值。这里是0
2 、unshift(3,4):把参数加载数组的前面，返回数组的长度。现在list:中是3,4,0,1,2
3、pop():删除数组的最后一个元素，返回删除的值。这里是2.
4、push(3):将参数加载到数组的最后，返回数组的长度，现在List中时：0,1,2,3
5、concat(3,4):把两个数组拼接起来。
6、splice(start,deleteCount,val1,val2,...)：从start位置开始删除deleteCount项，并从该位置起插入val1,val2,...
7、reverse：将数组反序
var a = [1,2,3,4,5]; var b = a.reverse(); //a：[5,4,3,2,1] b：[5,4,3,2,1]8、sort(orderfunction)：按指定的参数对数组进行排序 var a = [1,2,3,4,5]; var b = a.sort(); //a：[1,2,3,4,5] b：[1,2,3,4,5]
9、slice(start,end)：返回从原数组中指定开始下标到结束下标之间的项组成的新数组
var a = [1,2,3,4,5]; var b = a.slice(2,5); //a：[1,2,3,4,5] b：[3,4,5]
四、js迭代的方法
every() 、fliter()、forEach()、map()、some()具体大家可以查一下！
五、js数组去重和排序
具体我就不详细描述了。
六、js正则表达式
关于正则：http://www.haorooms.com/post/js_regex_refuse ，这篇文章应对面试足够了！
让你写个简单的正则，去掉字符串左右空格。具体看看我之前的文章http://www.haorooms.com/post/js_kong_ge
关于正则，你可以去了解一下！
七、纯js的ajax请求原理
可以查询，了解一下！看下这几篇文章http://www.haorooms.com/post/js_ajax_chun 和http://www.haorooms.com/post/js_shixian_jquery 最后关于js实现ajax的，最新出了js的fetch方法，很不错的！
八、js模块化
可以看下我之前的文章：http://www.haorooms.com/post/js_require_zz
九、双等号隐性转换
具体看文章：http://www.haorooms.com/post/js_yinxingleixing
十、js操作符，字符串截取等
具体请看：http://www.haorooms.com/post/js_czf_mst
字符串截取，substr 、substring等的区别
十一、js中继承中call和apply（）的区别
用法差不多，传递参数不同。具体你可以网上查查，也可以看下我的文章 http://www.haorooms.com/post/js_constructor_pro
十二、类数组转换为数组的方法
Array.prototype.slice.call(arguments);十三、cookie 不设置过期时间，默认过期时间是多少？
关闭浏览器就结束了
十四、改变数组长度的方法有哪些？
shift、unshift、pop、push
十五、js事件循环 event loop
请看文章：http://www.haorooms.com/post/js_xiancheng
十六、require 和 import的区别
看文章：http://blog.csdn.net/qq_28702545/article/details/54892562
前端常见题目
一、如何处理跨域？
jsonp等，可以看下我写的 浏览器跨域访问解决方案
二、如何处理缓存？如何清除缓存。
ajax随机数、ajax参数、meta中设置等。可以看下我写的 js清除浏览器缓存的几种方法
三、http请求问题，HTTP请求信息由那3部分组成？
1、请求方法URI协议/版本 （例如：GET/haorooms.jspHTTP/1.1）
2、请求头(Request Header)（例如：Accept:image/gif.image/jpeg.*/* Accept-Language:zh-cn Connection:Keep-Alive Host:localhost等等）
3、请求正文 关于图片的请求，可以看我之前的一篇文章 http://www.haorooms.com/post/web_http_request
四、前端性能优化问题，你是如何处理前端性能问题的？
看我之前的一篇文章：http://www.haorooms.com/post/web_xnyh_jscss 及 前端性能优化补充篇
五、网站js和css如何压缩？有哪些方法？
ant+yuicompressor具体可以看看我之前的一篇文章：http://www.haorooms.com/post/ant_yuicom
ant:http://www.haorooms.com/tools/ant_book/
SASS等 可以对css进行自动压缩！
也可以用Grunt构建工具进行。可以看下 前端js和css的压缩合并之grunt
六、用到哪些css插件？
bootstrap，animate.css 等
七、让你自己搭建一个网站，你是如何做架构的？
考察前端架构能力。
八、一些状态码你了解吗？
200成功类、300重定向类、400客户端类、500服务器端类。具体可以网上查一下！
九、如何用浏览器进行代码调试？
谷歌浏览器、火狐、IE等。（不明白的同学具体网上可以查一下）
十、json字符串转为json的方法
具体请看：http://www.haorooms.com/post/js_jsons_h
http://www.haorooms.com/post/json_object_json_string
html+css+html5+css3 常见题目
一、假如一个页面，左侧固定，右侧自适应，你是如何做到的？
方法很多，一般是margin和浮动，具体可以网上查一下。很简单。
二、html5新的标签和特性有哪些？
html5标签有很多，你可以网上查一下。
三、你常用的css3有哪些？说出你记得的。
哈哈哈，这个很多，你要再复习一下css3包括其动画等等。
四、如何处理浏览器兼容性问题？
请看：http://www.haorooms.com/post/IE_jianrong
五、如何用css美化radio、checkbox等按钮样式？
具体可以看我的一篇文章：http://www.haorooms.com/post/css_mh_ck_radio
web touch常见题目
一、做手机网站长见的兼容问题有哪些？
看下手机网站相关文章。
二、网站如何自适应的？响应式网站一般如何制作？
可以随便聊聊。可以看下http://www.haorooms.com/post/css3media
三、zepto.js使用过程中有哪些问题？jquerymobile用过吗？会有哪些问题？
用过的话，可以随便聊一下！
加分项
例如，你们聊到数据库，数一下如何用mongo做分页等等，包括mysql数据库等等。
聊到inux系统，linux常用的命令。
聊到angularjs，vue.js、angularjs的指令，双向数据绑定。MVVM模式和mvc模式的区别及mvp模式。
聊到前端架构，及百度fits的jello等。
聊到常用的版本控制工具git或者SVN，讲讲git常用的命令，git回滚到某个版本怎么做（ $ git reset --hard 某个版本号）
人事面试
人事面试和技术面试是有区别的，人事一般问一些概况总结方面的问题，我下面举一些列子吧！
一、你做了这么多项目，让你感受最深，印象最深的是哪个项目？你从中学到了什么？为什么会感受最深？
二、做前端开发这么多年来？说下你的感受吧！
三、简单自我介绍一下自己。
四、你对公司有什么需要了解的？
五、谈到薪资，谈到离职原因，谈到未来几年的规划等等，我在这里就不具体说了。
上面是我面试过程中最常见的一些问题。注意：面试的时候千万要真诚，不要撒谎，是什么就是什么，我列举上面题目的原因是有些前端人员可能技术很好，但是面试的时候紧张，没有准备。这样你简单准备了之后，就能发挥自己正常水平！广大朋友们，加油吧！
分享几个前端干货，面试经常提
前言
我前面的文章，也有几篇讲过面试的，不过都没有很细致的讲，例如：总结前端面试过程中最容易出现的问题，等等。还有一些文章，也是面试中可能提问的。今天，分享几个小知识，算是干货吧！前端面试中也经常会问及，不过问及的几率相对较少。我个人认为，面试中你把基础的知识打好，就可以无敌！哪些基础知识呢？例如：js的继承、js函数等等，万变不离其宗，都是这些的扩展及应用。这些知识理解透彻了，再加一些面试技巧就可以了！
一、怎么让Chrome支持小于12px 的文字？
这个我们在做移动端的时候，设计师图片上的文字假如是10px，我们实现在网页上之后。往往设计师回来找我们，这个字体能小一些吗？我设计的是10px？为啥是12px?其实我们都知道，谷歌Chrome最小字体是12px，不管你设置成8px还是10px，在浏览器中只会显示12px，那么如何解决这个坑爹的问题呢？
我们的做法是：
针对谷歌浏览器内核，加webkit前缀，用transform:scale()这个属性进行缩放！
<style>
p span{font-size:10px;-webkit-transform:scale(0.8);display:block;}
</style>
<p><span>haorooms博客测试10px</span></p>二、IOS手机浏览器字体齿轮
修改-webkit-font-smoothing属性，结果是：
-webkit-font-smoothing: none: 无抗锯齿
-webkit-font-smoothing: antialiased | subpixel-antialiased | default: 灰度平滑三、如何修改chrome记住密码后自动填充表单的黄色背景？
大体可以通过input : -webkit-autofill来进行修改！
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}四、谷歌浏览器运行下面代码，并解释！
[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) })运行上面代码之后，会发现HTML层都被使用不同的颜色添加了一个高亮的边框。为什么会这样呢？
首先我们来看
[].forEach.call()，关于call()和apply()，我前面有文章也写过，具体可以看http://www.haorooms.com/post/js_constructor_pro
[].forEach.call()等价于Array.prototype.forEach.call()
其次我们来看$$("*")
你可以在你的Chrome浏览器控制台中输入$$('a')，然后你就能得到一个当前页面中所有锚元素的列表。
$$函数是许多现代浏览器命令行API中的一个部分，它等价于document.querySelectorAll,你可以将一个CSS选择器作为这个函数的参数，然后你就能够获得当前页面中所有匹配这个CSS选择器的元素列表。如果你在浏览器控制台以外的地方，你可以使用document.querySelectorAll('')来代替$$('')
为元素添加颜色
为了让元素都有一个漂亮的边框，我们在上面的代码中使用了CSS属性outline。outline属性位于CSS盒模型之外，因此它并不影响元素的属性或者元素在布局中的位置，这对于我们来说非常有用。这个属性和修改border属性非常类似，因此下面的代码应该不会很难理解：
a.style.outline="1px solid #" + color真正有趣的地方在于定义颜色部分：
（~~(Math.random()*(1<<24))).toString(16)~~的作用相当于parseInt，和我前面讲解的“|”功能类似，关于运算符“I” ，可以去看看！
通过上面代码可以获取到一个随机的颜色值！
五、input [type=search] 搜索框右侧小图标如何美化？
美化效果如下图：
右侧默认的比较难看的按钮，美化成右侧效果。
input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance: none;height: 15px; width: 15px;border-radius: 8px;background:url("images/searchicon.png") no-repeat 0 0;background-size: 15px 15px;}用到的是伪元素::-webkit-search-cancel-button，关于什么是伪类和为元素，请看：http://www.haorooms.com/post/css_wl_wys
六、iOS safari 如何阻止“橡皮筋效果”？
可以参考一下知乎上的回答 https://www.zhihu.com/question/22256539 。
但是，我们遇到的问题不是这样，我是要解决弹跳导致弹出层（position:absolute）的覆盖层高度小于100%;
针对这个问题，我想到的解决方案如下：
方法一： 把position:absolute改成position:fixed，并在弹出层之后，设置body的高度是100%；overflow是hidden。
方法二：
思路是获取苹果浏览器导航栏的高度。然后滚动的时候，重新获取其高度。在导航栏高度变小的时候，给弹出层增加高度的百分比！
代码如下：
//ios safari 伸缩判断
var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
$(window).scroll(function () {
if(agent.indexOf("iPhone")!=-1 || agent.indexOf("iPad")!=-1){
var topbarHeightNow=window.outerHeight-window.innerHeight;
if(topbarHeightNow<topbarHeight){
globleflag=false
//此处写处理逻辑
}else{
globleflag=true
//此处写处理逻辑
}
}
});七、实现点击文字，文字后面radio选中效果
这个效果是前端很经常用到和遇到的效果了，实现这个效果的方式也很多，很多朋友用js和jquery来实现，但是最简单的，我们可以直接用lable标签的 for 属性来实现。
看下下面例子：
<form> <label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br /> <label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>label 的for属性后面跟着input的id,就可以点击label，来触发input效果了，大家可以试一试！
八、网站中，图片文件（jpg，png,gif），如何点击下载？而非点击预览？
我们平时在网站中的图片，假如我们要下载，如下写：
<a href="haorooms博客.jpg">下载</a>我们点击下载按钮，只会预览“haorooms博客.jpg”这张图片，并不会出现下载框，另存为那种？那么我们如何做呢？
我们只需要如下写
<a href="haorooms博客.jpg" download >下载</a>就可以下载了。点击如下进行尝试吧！下载
不但如次，我们还可以指定文件名称，如下写法：
<a href="haorooms博客.jpg" download="haoroom前端博客图片下载" >下载</a>测试如下：下载
上面就是指定下载的写法！
九、Math.min()比Math.max()大
Math.min() < Math.max() // false
Math.min() > Math.max() // true因为Math.min() 返回 Infinity, 而 Math.max()返回 -Infinity。
十、经典面试题目
const Greeters = []
for (var i = 0 ; i < 10 ; i++) {
Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 10
Greeters[1]() // 10
Greeters[2]() // 10把 var 改成 let试试！
const Greeters = []
for (let i = 0 ; i < 10 ; i++) {
Greeters.push(function () { return console.log(i) })
}
Greeters[0]() // 0
Greeters[1]() // 1
Greeters[2]() // 2十一、数组对象全等比较
// 这些可以
'abc' === 'abc' // true
1 === 1 // true
// 然而这些不行
[1,2,3] === [1,2,3] // false
{a: 1} === {a: 1} // false
{} === {} // false因为[1,2,3]和[1,2,3]是两个不同的数组，只是它们的元素碰巧相同。因此，不能简单的通过===来判断。
十二、关于数字和点号
3.toString()
3..toString()
3...toString()这个题也挺逗, 答案是
error, '3', error你如果换一个写法就更费解了
var a = 3;
a.toString()这个答案就是 '3';
为啥呢?
因为在 js 中 1.1, 1., .1 都是合法的数字. 那么在解析 3.toString 的时候这个 . 到底是属于这个数字还是函数调用呢? 只能是数字, 因为3.合法啊!
十三、变量提升
如下题目
var name = 'World!';
(function () {
if (typeof name === 'undefined') {
var name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();理解这个，我们可以先看下面的题目：
var x = 1; // Initialize x
console.log(x + " " + y); // '1 undefined'
var y = 2;相当于：
var x = 1; // Initialize x
var y; // Declare y
console.log(x + " " + y); // '1 undefined'
y = 2; // Initialize y变量提升了！
所以上面的自调用函数可以如下理解：
var name = 'World!';
(function () {
var name;
if (typeof name === 'undefined') {
name = 'Jack';
console.log('Goodbye ' + name);
} else {
console.log('Hello ' + name);
}
})();name在scope里面，因此，先找里面，里面找到了name,因此执行的结果是
'Goodbye Jack'十四、局部变量和全局变量
(function(){
var x = y = 1;
})();
console.log(y);
console.log(x);输出：
1, errory 被赋值到全局。x 是局部变量，全局中获取不到。所以打印 x 的时候会报 ReferenceError
十五、正则表达式字面一致也不相等
var a = /123/,
b = /123/;
a == b
a === b即使正则的字面量一致, 他们也不相等.
答案 false, false
十六、函数名称不可改变
function foo() { }
var oldName = foo.name;
foo.name = "bar";
[oldName, foo.name]答案
['foo', 'foo']例如：
function doSomething() {}
doSomething.name; // "doSomething"
var f = function() {};
var object = {
someMethod: function() {}
};
console.log(f.name); // "f"
console.log(object.someMethod.name); // "someMethod"函数的名字是不可以改变的。
十七、写出最简单的去重方式
1、es6的new Set()方式，具体请看：http://www.haorooms.com/post/js_map_set
例如：
let array=[0,3,4,5,3,4,7,8,2,2,5,4,6,7,8,0,2,0,90];
[...new Set(array)]或者直接
[...new Set([1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0])]2、es5的Array filter()
[1,3,4,5,1,2,3,3,4,8,90,3,0,5,4,0].filter(function(elem,index,Array){
return index === Array.indexOf(elem);
})
