最近看到很多互联网公司发布招聘web前端的公告。小编看了一下岗位要求，个人认为要求不难，但稍微繁琐。今天，为了帮助即使面试web前端的求职者顺利进入大厂，准备了一些易被问道以及部分难点的前端面试题，希望可以帮助大家更加顺利完成求职，找到自己满意的工作

一、http状态码
http状态码是表示服务器对请求的响应状态，主要分为以下几个部分
1**：这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束
2**：表示请求成功，
3**：表示重定向
4**：表示客户端错误
5**：表示服务器端错误

00（continue），客户端应当继续发送请求。这个临时响应是用来通知客户端它的部分请求已经被服务器接收

200（OK），表示请求成功，请求所希望的响应头或数据体将随此响应返回。
202（Accepted），服务器已接受请求，但尚未处理。
204（No-Content），服务器成功处理了请求，但不需要返回任何实体内容
205（Reset-Content），服务器成功处理了请求，且没有返回任何内容。但是与204响应不同，返回此状态码的响应要求请求者重置文档视图。该响应主要是被用于接受用户输入后，立即重置表单，以便用户能够轻松地开始另一次输入。

206（Partial-Content），服务器已经成功处理了部分 GET 请求。
301（Moved-Permanently），永久性重定向
302（Moved-Temporarily），暂时性重定向
304（Not-Modified），浏览器端缓存的资源依然有效
400（Bad-Reques），请求有误，当前请求无法被服务器理解。
401（Unauthorized），当前请求需要用户验证。
403（Forbidden），服务器已经理解请求，但是拒绝执行它。
404（Not-Found），请求的资源没有被找到
500（Interval Server Error），服务器内部错误
502（Bad GateWay），网关出错
503（Service Unavailable），由于临时的服务器维护或者过载，服务器当前无法处理请求。
504（Gateway Timeout），作为网关或者代理工作的服务器尝试执行请求时，未能及时从上游服务器（URI标识出的服务器，例如HTTP、FTP、LDAP）或者辅助服务器（例如DNS）收到响应。

二、HTTP请求发起和响应
在一个web程序开发中，一般都有前端和后端之分，前端负责向后端请求数据和展示页面，后端负责接收请求和做出响应发回给前端，他们之间的协作桥梁是API，而API其实就是一个URL，作为HTTP连接的一种具体载体。
用户输入URL到浏览器显现给用户页面经过了什么过程
用户输入URL，浏览器获取到URL
浏览器(应用层)进行DNS解析（直接输入IP地址既跳过该步骤）
根据解析出的IP地址+端口，浏览器（应用层）发起HTTP请求，请求中携带（请求头header（也可细分为请求行和请求头）、请求体body）

请求到达传输层，tcp协议为传输报文提供可靠的字节流传输服务，它通过三次握手等手段来保证传输过程中的安全可靠。通过对大块数据的分割成一个个报文段的方式提供给大量数据的便携传输。
到网络层， 网络层通过ARP寻址得到接收方的Mac地址，IP协议把在传输层被分割成一个个数据包传送接收方。
数据到达数据链路层，请求阶段完成
接收方在数据链路层收到数据包之后，层层传递到应用层，接收方应用程序就获得到请求报文。

接收方收到发送方的HTTP请求之后，进行请求文件资源（如HTML页面）的寻找并响应报文
发送方收到响应报文后，如果报文中的状态码表示请求成功，则接受返回的资源（如HTML文件），进行页面渲染。
（header：1、请求的方法（get、post、put..）2、协议（http、https、ftp、sftp…）3目标url（具体的请求路径已经文件名）4一些必要信息（缓存、cookie之类）。)
（body包含请求的内容）

三、流式布局如何实现，响应式布局如何实现？
流式布局：也叫fluid，当上面一行的空间不够容纳新的TextView时候才开辟下一行的空间。场景：主要用于关键词搜索或者热门标签等场景；他主要是按照页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变，使用%百分比定义宽度，高度大都是用px来固定，可以根据可视区域和父元素的实时尺寸来调整，尽可能适应各种分辨率。
响应式布局：主要是实现不同屏幕分辨率的终端上浏览网页的不同展示方式，通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验；首先设置meta标签，通过媒体查询来设置样式Media Queries，然后再设置多种试图宽度

四、什么是“use strict”，好处和坏处是什么？
ECMAscript 5添加了第二种运行模式：“严格模式”（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行。
好处：消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为；消除代码运行的一些不安全之处，保证代码运行的安全；提高编译器效率，增加运行速度；为未来新版本的 Javascript 做好铺垫。注：经过测试IE6，7，8，9均不支持严格模式。
缺点：现在网站的JS都会进行压缩，一些文件用了严格模式，而另一些没有。这时这些本来是严格模式的文件，被merge后，这个串就到了文件的中间，不仅没有指示严格模式，反而在压缩后浪费了字节。

五、link和@import的区别
两者都是外部引用 CSS 的方式，但是存在一定的区别：
（1）link是XHTML标签，除了能够加载CSS，还可以定义RSS等其他事务；而@import属于CSS范畴，只可以加载CSS。
（2）link引用CSS时，在页面载入时同时加载；@import需要页面完全载入以后再加载。
（3）link是XHTML标签，无兼容问题；@import则是在CSS2.1提出的，低版本的浏览器不支持。
（4）link支持使用Javascript控制DOM改变样式；而@import不支持。

六、浅拷贝和深拷贝的问题
1. 深拷贝和浅拷贝是只针对Object和Array这样的复杂类型的
2. 也就是说a和b指向了同一块内存，所以修改其中任意的值，另一个值都会随之变化，这就是浅拷贝
3. 浅拷贝， ”Object.assign() 方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。它将返回目标对象
4. 深拷贝，JSON.parse()和JSON.stringify()给了我们一个基本的解决办法。但是函数不能被正确处理

七、jquery如何绑定事件，有几种类型和区别？
jquery 绑定事件的方法分别是：bind()，live()，delegate()和 on()，像bind()，live()，delegate()，随着jquery版本的更新，已经被移除。注意：bind()是在3.0版本之后被移除的，现在用的最多的是on()，on()既可以绑定单事件，也可以绑定多事件，还可以进行事件委托。
区别：bind()的事件绑定是只对当前页面选中的元素有效，对动态创建的元素bind()事件，是没有办法达到效果的，而其余三个可以。
以上就是我总结的Web前端面试时经常问道以及部分难点。如果还有对Web前端面试抱有疑问的小伙伴，可以持续关注我哦！
注：部分内容来源于网络！