前端面试笔试知识汇总(含答案)

2019年11月09日 阅读数:116
这篇文章主要向大家介绍前端面试笔试知识汇总(含答案),主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

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

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

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

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

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

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

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

二、两栏分布

第一种采用calc;java

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

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

 

 

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

CSRF

CSRF(Cross-site request forgery),中文名称:跨站请求伪造,也被称为:one click attack/session riding,缩写为:CSRF/XSRF。ios

你这能够这么理解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九、深拷贝