【前端】前端面试题 [2]

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

 

另外两篇文章连接以下：

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

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

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

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

 

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

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

二、浏览器与服务器创建TCP链接（默认端口80）(详细点能够说下三次握手的过程)

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

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

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

六、Tcp链接释放(能够说下四次挥手的过程)。

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

二、两栏分布

第一种采用calc；

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

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

 

 

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

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）对于普通网民，须要注意尽可能抵挡诱惑，别去点击非知名网站的连接。

五、跨域的实现方式

因为浏览器同源策略，凡是发送请求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请求，而且不能访问响应的文本，只能监听是否响应而已，能够用来追踪广告点击。

 

六、php包含文件有哪些？

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

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

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

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

不象include()语句，require()语句会无条件地读取它所包含的文件的内容，而无论这些语句是否执行。因此若是你 想按照不一样的条件包含不一样的文件，就必须使用include()语句。固然，若是require()所在位置的语句不被执行，require()所包含的 文件中的语句也不会被执行。

 

七、php有哪些安全问题？

一、SQL注入

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

二、Xss

三、Csrf

 

八、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()方法能够绑定动态添加到页面元素的事件

十、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元素

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

　　   border-radius

         box-shadow

         text-shadow

         -webkit-gradient

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

　　   background-origin

　　   background-clip

　　   background-size

　　   multiple backgrounds

　　   border-image

四、 CSS3特效部分3： 变形

　　   rotate

　　   X/Y/Z

         scale

         translate

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

　　   transition-timing-function,transition-delay'

         skew

         matrix

五、 CSS3特效部分4：动画

　　　animation-name

         animation-duration

         animation-timing-function

         animation-delay

         animation-iteration-count

         -webkit-animation-direction

 

十一、移动端适配问题

下面这段代码，作过移动端项目的同窗必定不会陌生。

 

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

十二、盒模型

 

 

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

 

1四、HTTP最多见的响应头以下所示

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

• Content-Encoding： 文档的编码（Encode）方法。只有在解码以后才能够获得Content-Type头指定的内容类型。利用gzip压缩文档可以显著地减小HTML文档 的下载时间。Java的GZIPOutputStream能够很方便地进行gzip压缩，但只有Unix上的Netscape和Windows上的IE 四、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，本网站的截图以下：

 

1五、Flex布局是什么？

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

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

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

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

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

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

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

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

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

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

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

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

六、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。

1六、柯里化

 

1七、Bind函数

 

1八、Js继承

 

缺点：属性共享；

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

 

组合模式

 

1九、深拷贝

 

20、浅复制