前端面试笔试知识汇总1（含答案） 前端面试笔试知识
|
另外两篇文章链接如下： 前端面试笔试知识汇总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、前端存在哪些安全问题？CSRFCSRF（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.aspzz.cn//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、Xss3、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、盒模型? ? |
