5年前端面试题整理汇总100题

1.一些开放性题目

1.自我介绍：除了基本个人信息以外，面试官更想听的是你与众不同的地方和你的优势。

2.项目介绍

3.如何看待前端开发？

4.平时是如何学习前端开发的？

5.未来三到五年的规划是怎样的？

---

2、position的值， relative和absolute分别是相对于谁进行定位的？

• absolute :生成绝对定位的元素: 相对于最近一级的定位不是 static 的父元素来进行定位。
• fixed （老IE不支持）生成绝对定位的元素: 通常相对于浏览器窗口或 frame窗口 进行定位。
• relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
• static 默认值。没有定位，元素出现在正常的流中
• sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出

3、如何解决跨域问题?

JSONP：

原理是：动态插入script标签，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

优点是兼容性好，简单易用，支持浏览器与服务器双向通信。缺点是只支持GET请求。

JSONP：json+Padding（内填充），顾名思义，就是把JSON填充到一个box盒子里

<script>
    function createJs(sUrl){
        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }
	
    createJs('jsonp.js');
    
    //以下内容是jsonp.js中的代码
	//执行box函数
    box({
       'name': 'test'
    });

	//定义box函数
    function box(json){
    	//给json对象声明一个name属性，还没有给name赋值
        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的方法既不复杂，也能兼容到几乎所有浏览器，这真是极好的一种跨域方法。

======================================================================

4、XML和JSON的区别？

(1).数据体积方面。

JSON相对于XML来讲，数据的体积小，传递的速度更快些。

(2).数据交互方面。

JSON与JavaScript的交互更加方便，更容易解析处理，能进行更好的数据交互。

(3).数据描述方面。

JSON对数据的描述性比XML较差。

(4).传输速度方面。

JSON的速度要远远快于XML。

======================================================================

5、谈谈你对webpack的看法？

web pack相比于requireJS和browserify有哪些新特性？

WebPack 是一个模块打包工具，你可以使用WebPack管理你的模块依赖，并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、JavaScript、CSS以及各种静态文件（图片、字体等），让开发过程更加高效。对于不同类型的资源，webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系，最后 生成了优化且合并后的静态资源。

webpack的两大特色：

1.code splitting（可以自动完成代码的分解）

2.loader 可以处理各种类型的静态文件，并且支持串联操作

webpack 是以commonJS的形式来书写脚本的，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。

[Browserify](file:///Applications/%E6%9C%89%E9%81%93%E8%AF%8D%E5%85%B8.app/Contents/Resources/#)Browserify is an open-source JavaScript tool that allows developers to write Node.js-style modules that compile for usein the browser.With Browserify, you can write code that uses require() in the same way that you would use it in Node. Node.js and npm popularized use of the CommonJS require() statement to write modules, but web browsers don’t have built-in support for CommonJS. With browserify, developers can make use of many of the hundreds of thousands of modules on npm in the browser. 【Browser-ify】

webpack具有requireJs和browserify浏览器的功能，但仍有很多自己的新特性：

1. 对 CommonJS 、 AMD 、ES6的语法做了兼容

2. 对js、css、图片等资源文件都支持打包

3. 串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对CoffeeScript、ES6的支持

4. 有独立的配置文件webpack.config.js

5. 可以将代码切割成不同的chunk(大块)，实现按需加载，降低了初始化时间

6. 支持 SourceUrls 和 SourceMaps，易于调试

7. 具有强大的Plugin(插件)接口，大多是内部插件，使用起来比较灵活

8.webpack使用异步IO并具有多级缓存。这使得 webpack 很快且在增量编译上更加快

======================================================================

6、说说TCP传输的【三次握手】和【四次挥手】策略。

客户端和服务器端

发送端和接收端

TCP建立连接需要3次握手，断开连接需要4次挥手。

为了准确无误地把数据送达目标处，TCP协议采用了三次握手策略。用TCP协议把数据包送出去后，TCP不会对传送 后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志：SYN和ACK。

发送端首先发送一个带SYN标志的数据包给对方。接收端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息。
最后，发送端再回传一个带ACK标志的数据包，代表“握手”结束。
若在握手过程中某个阶段莫名中断，TCP协议会再次以相同的顺序发送相同的数据包。

举例子：我给你寄了一封信，这封信携带一个SYN标记(第一次握手)；你收到这封信之后，向我确认已经收到了这封信，带SYN/ACK标记(第2次握手) ACK ==SYN+1；我收到你的确认信息后，再向你回传一个信息，告诉你我已经知道你收到我的信了，携带ACK标记(第3次握手)。

=====================================================================

断开一个TCP连接则需要“四次挥手”：

• 第一次挥手：主动关闭方发送一个FIN，用来关闭主动方到被动关闭方的数据传送，也就是主动关闭方告诉被动关闭方：我已经不会再给你发数据了(当然，在fin包之前发送出去的数据，如果没有收到对应的ack确认报文，主动关闭方依然会重发这些数据)，但是，此时主动关闭方还可以接受数据。
• 第二次挥手：被动关闭方收到FIN包后，发送一个ACK给对方，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号）。
• 第三次挥手：被动关闭方发送一个FIN，用来关闭被动关闭方到主动关闭方的数据传送，也就是告诉主动关闭方，我的数据也发送完了，不会再给你发数据了。
• 第四次挥手：主动关闭方收到FIN后，发送一个ACK给被动关闭方，确认序号为收到序号+1，至此，完成四次挥手。
• ===================================================================
• 举例子：比如我是主动关闭方，你是被动关闭方。
• 1—我发送一个FIN标记给你(表示我以后不再向你发送数据包)；
• 2-—你收到FIN包后，向我发送一个ACK包(表示你已经知道了)；ACK == FIN + 1
• 3—你发送一个FIN包给我(表示你不会再给我发送数据包了)；
• 4-—我收到FIN后，向你发送一个ACK标记(ACK==FIN+1) 确认我知道你不会向我发送数据了。
• =================================================================
• 举个最简单的例子来说明TCP传输的3次握手和4次挥手
• 【恋爱表白的例子】解释3次握手(建立连接的过程)：
• 张三说：“李四我爱你”(第一次握手)
• 李四说：“我知道了”(第二次握手)
• 张三说 ：“哦，你终于知道了啊”(第三次握手)
• 【分手的例子】解释4次挥手(断开连接的过程)：
• 张三说：“我要跟你分手，我以后不再送花给你了”(第一次挥手)
• 李四说:“哦，我知道了”(第二次挥手)
• 张三说:“分手就分手，我以后也不理你了”(第三次挥手)
• 李四说：“哦，我知道了”(第四次挥手)
• =================================================================

7、TCP和UDP的区别

TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，也就是说，在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来。TCP的传输是安全的，数据不会丢失，但是传输的效率低。

UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去！ UDP的传输是不安全的，可能会丢包，但是传输的效率高。
UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。

==================================================================================

8、说说你对【作用域链】的理解

【作用域链的作用】是保证执行环境里有权访问的变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象即被终止，作用域链向下访问变量是不被允许的。

假设一种情景：儿子可以用父亲的东西，父亲不能用儿子的东西

孙子可以用爷爷的东西，爷爷不能用孙子的东西

或者举个栗子：“回”字型的结构，外面的口字是一个作用域，里面的口字是一个作用域。那么内部的口字和外部的口字就构成作用域链。特征是：内部的作用域可以向外访问，但是外部的作用域不能向内访问。可以逐级向外层访问，直到访问到最外层的口字的作用域为止。最外层的作用域是window对象。

9、【归纳】创建ajax过程?

(1)创建XMLHttpRequest对象,也就是创建一个【异步调用对象】.

(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.

(3)设置【响应HTTP请求状态变化的函数】

(4)发送HTTP请求.

(5)获取【异步调用返回的数据】

(6)使用【JavaScript和DOM实现局部刷新】 12345678...

10、渐进增强和优雅降级

渐进增强 ：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

11、常见web安全及防护原理

sql注入原理

就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令的目的。

总的来说有以下几点：

    1.永远不要信任用户的输入，要对用户的输入进行校验，可以通过正则表达式，或限制长度，对单引号和双"-"进行转换等。
    2.永远不要使用动态拼装SQL，可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
    3.永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。
    4.不要把机密信息明文存放，请加密或者hash掉密码和敏感的信息。12345678...

XSS原理及防范

Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html标签或者JavaScript代码。比如：攻击者在论坛中放一个看似安全的链接，骗取用户点击后，窃取cookie中的用户私密信息；或者攻击者在论坛中加一个恶意表单，当用户提交表单的时候，却把信息传送到攻击者的服务器中，而不是用户原本以为的信任站点。

XSS防范方法

首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤；其次任何内容写到页面之前都必须加以encode，避免不小心把html tag 弄出来。这一个层面做好，至少可以堵住超过一半的XSS 攻击。

首先，避免直接在cookie 中泄露用户隐私，例如email、密码等等。

其次，通过使co