最全的前端⼯程师⾯试题库【转载】
⼀些开放性题⽬
1  1.⾃我介绍：除了基本个⼈信息以外，⾯试官更想听的是你与众不同的地⽅和你的优势。
2
3  2.项⽬介绍
4
5  3.如何看待前端开发？
6
7  4.平时是如何学习前端开发的？
8
9  5.未来三到五年的规划是怎样的？
position的值， relative和absolute分别是相对于谁进⾏定位的？
如何解决跨域问题
JSONP：
原理是：动态插⼊script标签，通过script标签引⼊⼀个js⽂件，这个js⽂件载⼊成功后会执⾏我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传⼊。
由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端⼝）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执⾏回调函数，从⽽解决了跨域的数据请求。
优点是兼容性好，简单易⽤，⽀持浏览器与服务器双向通信。缺点是只⽀持GET请求。
JSONP：json+padding（内填充），顾名思义，就是把JSON填充到⼀个盒⼦⾥
<script>
function createJs(sUrl){
var oScript = ateElement('script');
oScript.src = sUrl;
}
createJs('jsonp.js');
box({
'name': 'test'
});
function box(json){
alert(json.name);
}
</script>
CORS
服务器端对于CORS的⽀持，主要就是通过设置Access-Control-Allow-Origin来进⾏的。如果浏览器检测到相应的设置，就可以允
许Ajax进⾏跨域的访问。
通过修改document.domain来跨⼦域
将⼦域和主域的document.domain设为同⼀个主域.前提条件：这两个域名必须属于同⼀个基础域名!⽽且所⽤的协议，端⼝都要⼀致，否则⽆法利⽤document.domain进⾏跨域
主域相同的使⽤document.domain
使⽤window.name来进⾏跨域
window对象有个name属性，该属性有个特征：即在⼀个窗⼝(window)的⽣命周期内，窗⼝载⼊的所有的页⾯都是共享⼀
个window.name的，每个页⾯对window.name都有读写的权限，window.name是持久存在⼀个窗⼝载⼊过的所有页⾯中的
使⽤HTML5中新引进的window.postMessage⽅法来跨域传送数据
还有flash、在服务器上设置代理页⾯等跨域⽅式。个⼈认为window.name的⽅法既不复杂，也能兼容到⼏乎所有浏览器，这真是极好的⼀种跨域⽅法。
XML和JSON的区别？
(1).数据体积⽅⾯。
JSON相对于XML来讲，数据的体积⼩，传递的速度更快些。
(2).数据交互⽅⾯。
JSON与JavaScript的交互更加⽅便，更容易解析处理，更好的数据交互。
(3).数据描述⽅⾯。
JSON对数据的描述性⽐XML较差。
(4).传输速度⽅⾯。
JSON的速度要远远快于XML。
谈谈你对webpack的看法
WebPack是⼀个模块打包⼯具，你可以使⽤WebPack管理你的模块依赖，并编绎输出模块们所需的静态⽂件。它能够很好地管理、打包Web开发中所⽤到的HTML、Javascript、CSS以及各种静态⽂件（图⽚、字体等），让开发过程更加⾼效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后⽣成了优化且合并后的静态资源。
webpack的两⼤特⾊：
1  1.code splitting（可以⾃动完成）
2
3  2.loader 可以处理各种类型的静态⽂件，并且⽀持串联操作
webpack是以commonJS的形式来书写脚本滴，但对AMD/CMD的⽀持也很全⾯，⽅便旧项⽬进⾏代码迁移。
webpack具有requireJs和browserify的功能，但仍有很多⾃⼰的新特性：
1  1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
2
3  2. 对js、css、图⽚等资源⽂件都⽀持打包
4
5  3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的⽀持
6
7  4. 有独⽴的配置⽂件fig.js
8
9  5. 可以将代码切割成不同的chunk，实现按需加载，降低了初始化时间
10
11  6. ⽀持 SourceUrls 和 SourceMaps，易于调试
12
137. 具有强⼤的Plugin接⼝，⼤多是内部插件，使⽤起来⽐较灵活
14
158.webpack 使⽤异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
说说TCP传输的三次握⼿四次挥⼿策略
为了准确⽆误地把数据送达⽬标处，TCP协议采⽤了三次握⼿策略。⽤TCP协议把数据包送出去后，TCP不会对传送后的情况置之不理，它⼀定会向对⽅确认是否成功送达。握⼿过程中使⽤了TCP的标志：SYN和ACK。
发送端⾸先发送⼀个带SYN标志的数据包给对⽅。接收端收到后，回传⼀个带有SYN/ACK标志的数据包以⽰传达确认信息。最后，发送端再回传⼀个带ACK标志的数据包，代表“握⼿”结束。若在握⼿过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。
断开⼀个TCP连接则需要“四次握⼿”：
TCP和UDP的区别
TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对⽅建⽴可靠的连接。⼀个TCP连接必须要经过三次“对话”才能建⽴起来
UDP（User Data Protocol，⽤户数据报协议）是与TCP相对应的协议。它是⾯向⾮连接的协议，它不与对⽅建⽴连接，⽽是直接就把数据包发送过去！ UDP适⽤于⼀次只传送少量数据、对可靠性要求不⾼的应⽤环境。
说说你对作⽤域链的理解
作⽤域链的作⽤是保证执⾏环境⾥有权访问的变量和函数是有序的，作⽤域链的变量只能向上访问，变量访问到window对象即被终⽌，作⽤域链向下访问变量是不被允许的。
创建ajax过程
(1)创建XMLHttpRequest对象，也就是创建⼀个异步调⽤对象.
(2)创建⼀个新的HTTP请求，并指定该HTTP请求的⽅法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调⽤返回的数据.
(6)使⽤JavaScript和DOM实现局部刷新.
渐进增强和优雅降级
渐进增强：针对低版本浏览器进⾏构建页⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能达到更好的⽤户体验。
优雅降级：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容。
常见web安全及防护原理
sql注⼊原理
就是通过把SQL命令插⼊到Web表单递交或输⼊域名或页⾯请求的查询字符串，最终达到欺骗服务器执⾏恶意的SQL命令。
总的来说有以下⼏点：
XSS 原理及防范Xss(cross-site scripting)攻击指的是攻击者往Web 页⾯⾥插⼊恶意 html  标签或者javas
cript  代码。⽐如：攻击者在论坛中放⼀个
看似安全的链接，骗取⽤户点击后，窃取 cookie  中的⽤户私密信息；或者攻击者在论坛中加⼀个恶意表单，
当⽤户提交表单的时候，却把信息传送到攻击者的服务器中，⽽不是⽤户原本以为的信任站点。
XSS 防范⽅法⾸先代码⾥对⽤户输⼊的地⽅和变量都需要仔细检查长度和对 ”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页⾯之前都必须加
以 encode  ，避免不⼩⼼把 html tag  弄出来。这⼀个层⾯做好，⾄少可以堵住超过⼀半的 XSS  攻击。
⾸先，避免直接在 cookie  中泄露⽤户隐私，例如email 、密码等等。其次，通过使 cookie  和系统 ip  绑定来降低 cookie  泄露后的危险。这样攻击者得到的 cookie  没有实际价值，不可能拿来重放。如果⽹站不需要再浏览器端对 cookie  进⾏操作，可以在 Set-Cookie  末尾加上HttpOnly  来防⽌ javascript  代码直接获取 cookie  。尽量采⽤ POST  ⽽⾮ GET  提交表单
XSS 与CSRF 有什么区别吗？
XSS  是获取信息，不需要提前知道其他⽤户页⾯的代码和数据包。
CSRF  是代替⽤户完成指定的动作，需要知道其他⽤户页⾯的代码和数据包。
要完成⼀次 CSRF  攻击，受害者必须依次完成两个步骤：
CSRF 的防御
Web Worker 和webSocket
worker 主线程:
WebSocket  是 Web  应⽤程序的传输协议，它提供了双向的，按序到达的数据流。他是⼀个 HTML5 协议， WebSocket  的连接是持久的，他通过在客户端和服务器之间保持双⼯连接，服务器的更新可以被及时推送给客户端，⽽不需要客户端以⼀定时间间隔去轮询。HTTP 和HTTPS HTTP  协议通常承载于TCP 协议之上，在 HTTP  和 TCP  之间添加⼀个安全协议层（ SSL  或 TSL  ），这个时候，就成了我们常说的HTTPS 。
默认HTTP 的端⼝号为80， HTTPS  的端⼝号为443。1
2
1.永远不要信任⽤户的输⼊，要对⽤户的输⼊进⾏校验，可以通过正则表达式，或限制长度，对单引号和双"-"进⾏转换等。3
4
2.永远不要使⽤动态拼装SQL ，可以使⽤参数化的SQL 或者直接使⽤存储过程进⾏数据查询存取。5
6      3.永远不要使⽤管理员权限的数据库连接，为每个应⽤使⽤单独的权限有限的数据库连接。7
8      4.不要把机密信息明⽂存放，请加密或者hash 掉密码和敏感的信息。
1
登录受信任⽹站A ，并在本地⽣成Cookie 。2
3在不登出A 的情况下，访问危险⽹站B 。
1.通过 worker = new  Worker( url ) 加载⼀个JS ⽂件来创建⼀个worker ，同时返回⼀个worker 实例。
2.通过worker.postMessage( data ) ⽅法来向worker 发送数据。
3.绑定ssage ⽅法来接收worker 发送过来的数据。
4.可以使⽤ inate() 来终⽌⼀个worker 的执⾏。
为什么HTTPS安全
因为⽹络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，⽽如果使⽤HTTPS，密钥在你和终点站才有。https之所以⽐http安全，是因为他利⽤ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页⾯适配，浏览器适配，refer传递等。保障了传输过程的安全性
对前端模块化的认识
AMD 是RequireJS在推⼴过程中对模块定义的规范化产出。
CMD 是SeaJS在推⼴过程中对模块定义的规范化产出。
AMD是提前执⾏，CMD是延迟执⾏。webpack打包流程 面试
AMD推荐的风格通过返回⼀个对象做为模块对象，CommonJS的风格通过对ports或exports的属性赋值来达到暴露模块对象的⽬的。
CMD模块⽅式
1define(function(require, exports, module) {
2
3      // 模块代码
4
5    });
Javascript垃圾回收⽅法
标记清除（mark and sweep）
这是JavaScript最常见的垃圾回收⽅式，当变量进⼊执⾏环境的时候，⽐如函数中声明⼀个变量，垃圾回收器将其标记为“进⼊环境”，当变量离开环境的时候（函数执⾏结束）将其标记为“离开环境”。
垃圾回收器会在运⾏的时候给存储在内存中的所有变量加上标记，然后去掉环境中的变量以及被环境中变量所引⽤的变量（闭包），在这些完成之后仍存在标记的就是要删除的变量了
引⽤计数(reference counting)
在低版本IE中经常会出现内存泄露，很多时候就是因为其采⽤引⽤计数⽅式进⾏垃圾回收。引⽤计数的策略是跟踪记录每个值被使⽤的次数，当声明了⼀个变量并将⼀个引⽤类型赋值给该变量的时候这个值的引⽤次数就加1，如果该变量的值变成了另外⼀个，则这个值得引⽤次数减1，当这个值的引⽤次数变为0的时候，说明没有变量在使⽤，这个值没法被访问了，因此可以将其占⽤的空间回收，这样垃圾回收器会在运⾏的时候清理掉引⽤次数为0的值占⽤的空间。
在IE中虽然JavaScript对象通过标记清除的⽅式进⾏垃圾回收，但BOM与DOM对象却是通过引⽤计数回收垃圾的，也就是说只要涉
及BOM及DOM就会出现循环引⽤问题。
你觉得前端⼯程的价值体现在哪
1为简化⽤户使⽤提供技术⽀持（交互部分）
2
3为多个浏览器兼容性提供⽀持
4
5为提⾼⽤户浏览速度（浏览器性能）提供⽀持
6
7为跨平台或者其他基于webkit或其他渲染引擎的应⽤提供⽀持
8
9为展⽰数据提供⽀持（数据接⼝）
谈谈性能优化问题
代码层⾯：避免使⽤css表达式，避免使⽤⾼级选择器，通配选择器。
缓存利⽤：缓存Ajax，使⽤CDN，使⽤外部js和css⽂件以便缓存，添加Expires头，服务端配置Etag，减少DNS查等
请求数量：合并样式和脚本，使⽤css图⽚精灵，初始⾸屏之外的图⽚资源按需加载，静态资源延迟加载。
请求带宽：压缩⽂件，开启GZIP，

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。