前端面试笔试知识汇总1含答案 前端面试笔试知识汇总2含答案；前端面试笔试知识汇总3含答案；2017年秋季校招前端面经百度，腾讯，网易，华为，乐视等各个公司前端笔试题回顾

另外两篇文章链接如下：

前端面试笔试知识汇总2（含答案）；

前端面试笔试知识汇总3（含答案）；

结合我的秋招面经来看，效果更佳：2017年秋季校招前端面经（百度，腾讯，网易，华为，乐视等）

以及各个公司校招笔试题回忆录：各个公司前端笔试题回顾

 

1、从输入网址到显示网页的过程分析

1、应用层DNS解析域名：客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。

2、浏览器与服务器建立TCP连接（默认端口80）(详细点可以说下三次握手的过程)

3、应用层客户端发送HTTP请求。

4、服务器响应请求：查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码（200-300，成功；304使用缓存）。

5、服务器返回相应文件给浏览器。

6、Tcp连接释放(可以说下四次挥手的过程)。

  7、浏览器对HTML文件进行解析构建DOM树 ，构建渲染树 ，js根据DomAPI操作执行绑定事件等，页面显示完成。

2、两栏分布

第一种采用calc；

第二种采用:都设置position:absolute; 然后设置右边的left:309px;  width:auto;

3、Cookie的读取，set,以及删除

 

 

4、前端存在哪些安全问题？

CSRF

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。

你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账......造成的问题包括：个人隐私泄露以及财产安全。

1. 检查报头中的Referer参数确保请求发自正确的网站（但XHR请求可调用setRequestHeader方法来修改Referer报头）；

2. 对于任何重要的请求都需要重新验证用户的身份；

3. 创建一个唯一的令牌（Token），将其存在服务端的session中及客户端的cookie中，对任何请求，都检查二者是否一致。

XSS的预防可以从多方面着手：

xss表示Cross Site Scripting(跨站脚本攻击)，它与SQL注入攻击类似，SQL注入攻击中以SQL语句作为用户输入，从而达到查询/修改/删除数据的目的，而在xss攻击中，通过插入恶意脚本，实现对用户游览器的控制。

（1）如前面所述，浏览器自身可以识别简单的XSS攻击字符串，从而阻止简单的XSS攻击；

（2）从根本上说，解决办法是消除网站的XSS漏洞，这就需要网站开发者运用转义安全字符等手段，始终把安全放在心上；

（3）对于普通网民，需要注意尽量抵挡诱惑，别去点击非知名网站的链接。

5、跨域的实现方式

由于浏览器同源策略，凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

JSONP

　　这种方式主要是通过动态插入一个script标签。浏览器对script的资源引用没有同源限制，同时资源加载到页面后会立即执行（没有阻塞的情况下）。

 

通过修改document.domain来跨子域

浏览器都有一个同源策略，其限制之一就是第一种方法中我们说的不能通过ajax的方法去请求不同源中的文档。 它的第二个限制是浏览器中不同域的框架之间是不能进行js的交互操作的。有一点需要说明，不同的框架 之间（父子或同辈），是能够获取到彼此的window对象的，但蛋疼的是你却不能使用获取到的window对象的属性和方法(html5中的 postMessage方法是一个例外，还有些浏览器比如ie6也可以使用top、parent等少数几个属性)，总之，你可以当做是只能获取到一个几乎 无用的window对象。比如，有一个页面，它的地址是http://www.example.com/a.html  ， 在这个页面里面有一个iframe，它的src是http://example.com/b.html,很显然，这个页面与它里面的iframe框架是不同域的，所以我们是无法通过在页面中书写js代码来获取iframe中的东西的：

在页面 http://www.example.com/a.html 中设置document.domain:

 

在页面 http://example.com/b.html 中也设置document.domain，而且这也是必须的，虽然这个文档的domain就是example.com,但是还是必须显示的设置document.domain的值：

 

这样我们就可以通过js访问到iframe中的各种属性和对象了。

 

使用HTML5中新引进的window.postMessage方法来跨域传送数据

window.postMessage(message,targetOrigin)  方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、 FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类 型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 *  。

需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

上面所说的向其他window对象发送消息，其实就是指一个页面有几个框架的那种情况，因为每一个框架都有一个window对象。在讨论第二种方法 的时候，我们说过，不同域的框架间是可以获取到对方的window对象的，而且也可以使用window.postMessage这个方法。下面看一个简单 的示例，有两个页面

 

图片ping

图片可以从任何URL中加载，所以将img的src设置成其他域的URL，即可以实现简单的跨域，可以使用onload和onerror事件来确定是否接受到了响应。

 

这里新建了一个img对象，给出的url是博客地址，这里是个error事件，所以弹出error；如果将URL改为一张图片http://images.jb51.net//710118/o_MacBook%20Air.png，就会弹出onload加载信息success，从而实现了简单的跨域。

使用图片ping跨域只能发送get请求，并且不能访问响应的文本，只能监听是否响应而已，可以用来追踪广告点击。

 

6、php包含文件有哪些？

include_once()语句的语法和include()语句类似，主要区别也是避免多次包含一个文件而引起函数或变量的重复定义。

require_once语句有一个引用链，它可以保证文件加入你的程序仅仅只有一次，而且会避开变量值和函数名之间的冲突。

和require_once语句一样，include_once语句把include的功能扩展了。在程序执行期间，将指定的文 件包含进来，如果从文件引用进来的程序先前已经包含过的时候，include_once()就不会把它再包含进来。也就是仅仅可以引用同一个文件一次！

require()所包含的文件中不能包含控制结构，而且不能使用return这样的语句。在require()所包含的文件中使用return语句会产生处理错误。

不象include()语句，require()语句会无条件地读取它所包含的文件的内容，而不管这些语句是否执行。所以如果你 想按照不同的条件包含不同的文件，就必须使用include()语句。当然，如果require()所在位置的语句不被执行，require()所包含的 文件中的语句也不会被执行。

 

7、php有哪些安全问题？

1、SQL注入

所谓SQL注入，就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令。具体来说，它是利用现有应用程序，将(恶意)的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入(恶意)SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

2、Xss

3、Csrf

 

8、jquery绑定click的方法有几种

bind()函数只能针对已经存在的元素进行事件的设置；但是live(),on(),delegate()均支持未来新添加元素的事件设置；

bind()函数在jquery1.7版本以前比较受推崇，1.7版本出来之后，官方已经不推荐用bind()，替代函数为on(),这也是1.7版本新添加的函数，同样，可以用来代替live()函数，live()函数在1.9版本已经删除；

live()函数和delegate()函数两者类似，但是live()函数在执行速度，灵活性和CSS选择器支持方面较delegate()差些。

on()方法绑定事件可以提升效率

on()方法可以绑定动态添加到页面元素的事件

10、css3新特性（最熟悉的）

1: CSS3选择器部分

　　   E[att^="val"]            匹配具有att属性、且值以val开头的E元素

         E[att$="val"]            匹配具有att属性、且值以val结尾的E元素

         E[att*="val"]            匹配具有att属性、且值中含有val的E元素

         E:root                匹配文档的根元素。在HTML中，根元素永远是HTML

         E:nth-child(n)           匹配父元素中的第n个子元素E

         E:nth-last-child(n)     匹配父元素中的倒数第n个结构子元素E

         E:nth-of-type(n)        匹配同类型中的第n个同级兄弟元素E

         E:nth-last-of-type(n)     匹配同类型中的倒数第n个同级兄弟元素E

         E:last-child            匹配父元素中最后一个E元素

         E:first-of-type          匹配同级兄弟元素中的第一个E元素

         E:only-child            匹配属于父元素中唯一子元素的E

         E:only-of-type         匹配属于同类型中唯一兄弟元素的E

         E:empty              匹配没有任何子元素（包括text节点）的元素E

         :target            匹配相关URL指向的E元素

         E:enabled          匹配所有用户界面（form表单）中处于可用状态的E元素

         E:disabled          匹配所有用户界面（form表单）中处于不可用状态的E元素

         E:checked          匹配所有用户界面（form表单）中处于选中状态的元素E

         E::selection        匹配E元素中被用户选中或处于高亮状态的部分

         E:not(s)           匹配所有不匹配简单选择符s的元素E

         E ~ F              匹配E元素之后的F元素

2、 CSS3特效部分1：圆角，阴影，渐变

　　   border-radius

         box-shadow

         text-shadow

         -webkit-gradient

3、 CSS3特效部分2：背景，边框背景

　　   background-origin

　　   background-clip

　　   background-size

　　   multiple backgrounds

　　   border-image

4、 CSS3特效部分3： 变形

　　   rotate

　　   X/Y/Z

         scale

         translate

　　   transform-origin,transition-property,transition-duration,

　　   transition-timing-function,transition-delay'

         skew

         matrix

5、 CSS3特效部分4：动画

　　　animation-name

         animation-duration

         animation-timing-function

         animation-delay

         animation-iteration-count

         -webkit-animation-direction

 

11、移动端适配问题

下面这段代码，做过移动端项目的同学一定不会陌生。

 

假设你已经见过上面的代码，并有所应用，对响应式设计如何工作有大概的了解，但不一定清楚一些细节。最近在做一个移动端的项目，要求做到精确还原设计稿，像素级。

12、盒模型

 

 

13、http1.1 和http2之间的区别

 

14、HTTP最常见的响应头如下所示

 Allow：服务器支持哪些请求方法（如GET、POST等）；

• Content-Encoding： 文档的编码（Encode）方法。只有在解码之后才可以得到Content-Type头指定的内容类型。利用gzip压缩文档能够显著地减少HTML文档 的下载时间。Java的GZIPOutputStream可以很方便地进行gzip压缩，但只有Unix上的Netscape和Windows上的IE 4、IE 5才支持它。因此，Servlet应该通过查看Accept-Encoding头（即request.getHeader("Accept- Encoding")）检查浏览器是否支持gzip，为支持gzip的浏览器返回经gzip压缩的HTML页面，为其他浏览器返回普通页面；

• Content-Length： 表示内容长度。只有当浏览器使用持久HTTP连接时才需要这个数据。如果你想要利用持久连接的优势，可以把输出文档写入 ByteArrayOutputStram，完成后查看其大小，然后把该值放入Content-Length头，最后通过 byteArrayStream.writeTo(response.getOutputStream()发送内容；

• Content-Type： 表 示后面的文档属于什么MIME类型。Servlet默认为text/plain，但通常需要显式地指定为text/html。由于经常要设置 Content-Type，因此HttpServletResponse提供了一个专用的方法setContentTyep。 可在web.xml文件中 配置扩展名和MIME类型的对应关系；

• Date：当前的GMT时间。你可以用setDateHeader来设置这个头以避免转换时间格式的麻烦；

• Expires：指明应该在什么时候认为文档已经过期，从而不再缓存它。

• Last-Modified：文档的最后改动时间。客户可以通过If-Modified-Since请求头提供一个日期，该请求将被视为一个条件GET，只有改动时间迟于指定时间的文档才会返回，否则返回一个304（Not Modified）状态。Last-Modified也可用setDateHeader方法来设置；

• Location：表示客户应当到哪里去提取文档。Location通常不是直接设置的，而是通过HttpServletResponse的sendRedirect方法，该方法同时设置状态代码为302；

• Refresh：表示浏览器应该在多少时间之后刷新文档，以秒计。除了刷新当前文档之外，你还可以通过setHeader("Refresh","5; URL=http://host/path")让浏览器读取指定的页面。注意这种功能通常是通过设置HTML页面HEAD区的<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://host/path"> 实现，这是因为，自动刷新或重定向对于那些不能使用CGI或Servlet的HTML编写者十分重要。但是，对于Servlet来说，直接设置 Refresh头更加方便。注意Refresh的意义是“N秒之后刷新本页面或访问指定页面”，而不是“每隔N秒刷新本页面或访问指定页面”。因此，连续 刷新要求每次都发送一个Refresh头，而发送204状态代码则可以阻止浏览器继续刷新，不管是使用Refresh头还是<META HTTP-EQUIV="Refresh" ...>。注意Refresh头不属于HTTP 1.1正式规范的一部分，而是一个扩展，但Netscape和IE都支持它。

 

csdn，本网站的截图如下：

 

15、Flex布局是什么？

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。Webkit内核的浏览器，必须加上-webkit前缀。子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。

以下6个属性设置在容器上。

1、flex-direction： row | row-reverse | column | column-reverse;

属性决定主轴的方向（即项目的排列方向）。

2、flex-wrap： nowrap | wrap | wrap-reverse;

默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

3、flex-flow：<flex-direction> || <flex-wrap>;

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4、justify-content：     flex-start | flex-end | center | space-between | space-around;

属性定义了项目在主轴上的对齐方式。

5、align-items：flex-start | flex-end | center | baseline |stretch;

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

6、align-content： flex-start | flex-end | center | space-between | space-around |

属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目的属性

以下6个属性设置在项目上。

1、order：order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

2、flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

3、flex-shrink: 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

4、flex-basis: <length> | auto; /* default auto */;

属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

5、Flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ];

flex属性是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。该属性有两个快捷值：auto (11 auto) 和 none (0 0 auto)。

6、align-self: auto | flex-start | flex-end | center | baseline | stretch;

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

16、柯里化

 

17、Bind函数

 

18、Js继承

 

缺点：属性共享；

借用构造函数：函数复用问题无从谈起。

 

组合模式

 

19、深拷贝

 

20、浅复制