前端知识点
https://github.com/helloqingfeng/Awsome-Front-End-learning-resource/tree/master/21-Front-end-Interview-questions#%EF%BF%A4%EF%BE%B8%EF%BE%80%EF%BF%A4%EF%BE%BA%EF%BE%9B%EF%BF%A5%EF%BE%BC%EF%BE%80%EF%BF%A6%EF%BE%94%EF%BE%BE%EF%BF%A6%EF%BE%80%EF%BE%A7%EF%BF%A9%EF%BE%A2%EF%BE%98%EF%BF%A7%EF%BE%9B%EF%BE%AE
一些开放性题目
1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。
2.项目介绍
3.如何看待前端开发?
4.平时是如何学习前端开发的?
5.未来三到五年的规划是怎样的?
position的值, relative和absolute分别是相对于谁进行定位的?
-
absolute
:生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。 -
fixed
(老IE不支持)生成绝对定位的元素,通常相对于浏览器窗口或 frame 进行定位。 -
relative
生成相对定位的元素,相对于其在普通流中的位置进行定位。 -
static
默认值。没有定位,元素出现在正常的流中 -
sticky
生成粘性定位的元素,容器的位置根据正常文档流计算得出
如何解决跨域问题
1)JSONP:
http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html
http://blog.csdn.net/joyhen/article/details/21631833
原理是:动态插入script
标签,通过script
标签引入一个js
文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json
数据作为参数传入。
由于同源策略的限制,XmlHttpRequest
只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script
标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。
优点是兼容性好,简单易用,支持浏览器与服务器双向通信。缺点是只支持GET请求。
JSONP
:json+padding
(内填充),顾名思义,就是把JSON填充到一个盒子里
<script> function createJs(sUrl){ var oScript = document.createElement('script'); oScript.type = 'text/javascript'; oScript.src = sUrl; document.getElementsByTagName('head')[0].appendChild(oScript); } createJs('jsonp.js'); box({ 'name': 'test' }); function box(json){ alert(json.name); } </script>
或
JSONP包含两部分:回调函数和数据。 回调函数是当响应到来时要放在当前页面被调用的函数。 数据就是传入回调函数中的json数据,也就是回调函数的参数了。 function handleResponse(response){ console.log('The responsed data is: '+response.data); } var script = document.createElement('script'); script.src = 'http://www.baidu.com/json/?callback=handleResponse'; document.body.insertBefore(script, document.body.firstChild); /*handleResonse({"data": "zhe"})*/ //原理如下: //当我们通过script标签请求时 //后台就会根据相应的参数(json,handleResponse) //来生成相应的json数据(handleResponse({"data": "zhe"})) //最后这个返回的json数据(代码)就会被放在当前js文件中被执行 //至此跨域通信完成
2)、CORS
服务器端对于CORS
的支持,主要就是通过设置Access-Control-Allow-Origin
来进行的。如果浏览器检测到相应的设置,就可以允许Ajax
进行跨域的访问。
3)、通过修改document.domain来跨子域
将子域和主域的document.domain
设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain
进行跨域
主域相同的使用document.domain
4)、使用window.name来进行跨域
window
对象有个name
属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name
的,每个页面对window.name
都有读写的权限,window.name
是持久存在一个窗口载入过的所有页面中的
5)、使用HTML5中新引进的window.postMessage
方法来跨域传送数据
还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name
的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。
XML
和JSON
的区别?
(1).数据体积方面。 JSON相对于XML来讲,数据的体积小,传递的速度更快些。 (2).数据交互方面。 JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。 (3).数据描述方面。 JSON对数据的描述性比XML较差。 (4).传输速度方面。 JSON的速度要远远快于XML。
谈谈你对webpack的看法
WebPack
是一个模块打包工具,你可以使用WebPack
管理你的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS
以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源,webpack
有对应的模块加载器。webpack
模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源。
webpack
的两大特色:
1.code splitting(可以自动完成)
2.loader 可以处理各种类型的静态文件,并且支持串联操作
webpack
是以commonJS
的形式来书写脚本滴,但对 AMD/CMD
的支持也很全面,方便旧项目进行代码迁移。
webpack
具有requireJs
和browserify
的功能,但仍有很多自己的新特性:
1. 对 CommonJS 、 AMD 、ES6的语法做了兼容
2. 对js、css、图片等资源文件都支持打包
3. 串联式模块加载器以及插件机制,让其具有更好的灵活性和扩展性,例如提供对CoffeeScript、ES6的支持
4. 有独立的配置文件webpack.config.js
5. 可以将代码切割成不同的chunk,实现按需加载,降低了初始化时间
6. 支持 SourceUrls 和 SourceMaps,易于调试
7. 具有强大的Plugin接口,大多是内部插件,使用起来比较灵活
8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快
说说TCP传输的三次握手四次挥手策略
为了准确无误地把数据送达目标处,TCP
协议采用了三次握手策略。用TCP协议把数据包送出去后,TCP
不会对传送 后的情况置之不理,它一定会向对方确认是否成功送达。握手过程中使用了TCP的标志:SYN
和ACK
。
发送端首先发送一个带SYN
标志的数据包给对方。接收端收到后,回传一个带有SYN/ACK
标志的数据包以示传达确认信息。 最后,发送端再回传一个带ACK
标志的数据包,代表“握手”结束。 若在握手过程中某个阶段莫名中断,TCP
协议会再次以相同的顺序发送相同的数据包。
断开一个TCP连接则需要“四次握手”:
-
第一次挥手:主动关闭方发送一个
FIN
,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不 会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但是,此时主动关闭方还可 以接受数据。 -
第二次挥手:被动关闭方收到
FIN
包后,发送一个ACK
给对方,确认序号为收到序号+1
(与SYN
相同,一个FIN
占用一个序号)。 -
第三次挥手:被动关闭方发送一个
FIN
,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了。 -
第四次挥手:主动关闭方收到
FIN
后,发送一个ACK
给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。
由于TCP连接是全双工的,因此每个方向都必须单独进行关闭。这个原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的连接。收到一个 FIN只意味着这一方向上没有数据流动,一个TCP连接在收到一个FIN后仍能发送数据。首先进行关闭的一方将执行主动关闭,而另一方执行被动关闭。 (1)客户端A发送一个FIN,用来关闭客户A到服务器B的数据传送(报文段4)。 (2)服务器B收到这个FIN,它发回一个ACK,确认序号为收到的序号加1(报文段5)。和SYN一样,一个FIN将占用一个序号。 (3)服务器B关闭与客户端A的连接,发送一个FIN给客户端A(报文段6)。 (4)客户端A发回ACK报文确认,并将确认序号设置为收到序号加1(报文段7)。
TCP和UDP的区别
TCP
(Transmission Control Protocol,传输控制协议)是基于连接的协议,也就是说,在正式收发数据前,必须和对方建立可靠的连接。一个TCP
连接必须要经过三次“对话”才能建立起来
UDP
(User Data Protocol,用户数据报协议)是与TCP相对应的协议。它是面向非连接的协议,它不与对方建立连接,而是直接就把数据包发送过去! UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。
说说你对作用域链的理解
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window
对象即被终止,作用域链向下访问变量是不被允许的。
当代码在一个环境中执行时,会创建变量对象的的一个作用域链(scope chain)。作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链的前端,始终都是当前执行的代码所在环境的变量对象。如果这个环境是一个函数,则将其活动对象作为变量对象。
创建ajax过程
http://www.cnblogs.com/kennyliu/p/3876729.html
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
1) <script language = "javascript" type = "text/javascript"> var xmlHttpRequest; //定义一个变量,用于存放XMLHttpRequest对象 function createXMLHttpRequest() //创建XMLHttpRequest对象的方法 { if(window.ActiveXObject) //判断是否是IE浏览器 { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); //创建IE浏览器中的XMLHttpRequest对象 } else if(window.XMLHttpRequest) //判断是否是Netscape等其他支持XMLHttpRequest组件的浏览器 { xmlHttpRequest = new XMLHttpRequest(); //创建其他浏览器上的XMLHttpRequest对象 } } </script> createXMLHttpRequst(); //调用创建对象的方法 2) XMLHttpRequest.open(method,URL,flag,name,password) xmlHttpRequest.open("get","http://www.aspxfans.com/BookSupport/JavaScript/ajax.htm",true); 3) 从创建XMLHttpRequest对象开始,到发送数据、接收数据、XMLHttpRequest对象一共会经历以下5中状态。 XMLHttpRequest对象可以响应readystatechange事件,该事件在XMLHttpRequest对象状态改变时(也就是readyState属性值改变时)激发。因此,可以通过该事件调用一个函数,并在该函数中判断XMLHttpRequest对象的readyState属性值。如果readyState属性值为4则使用responseText属性或responseXml属性来获取数据。具体代码如下所示: //设置当XMLHttpRequest对象状态改变时调用的函数,注意函数名后面不要添加小括号 xmlHttpRequest.onreadystatechange = getData; //定义函数 function getData() { //判断XMLHttpRequest对象的readyState属性值是否为4,如果为4表示异步调用完成 if(xmlHttpRequest.readyState == 4) { //设置获取数据的语句 } } 4) XMLHttpRequest.send(data) 只有在使用send()方法之后,XMLHttpRequest对象的readyState属性值才会开始改变,也才会激发readystatechange事件,并调用函数。 5) 如果XMLHttpRequest对象的readyState属性值等于4,表示异步调用过程完毕,就可以通过XMLHttpRequest对象的responseText属性或responseXml属性来获取数据。 但是,异步调用过程完毕,并不代表异步调用成功了,如果要判断异步调用是否成功,还要判断XMLHttpRequest对象的status属性值,只有该属性值为200,才表示异步调用成功,因此,要获取服务器返回数据的语句,还必须要先判断XMLHttpRequest对象的status属性值是否等于200
渐进增强和优雅降级
渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
常见web安全及防护原理
1)sql注入原理
就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。
假设我们在浏览器中输入URL www.sample.com,由于它只是对页面的简单请求无需对数据库动进行动态请求,所以它不存在SQL Injection,当我们输入www.sample.com?testid=23时,我们在URL中传递变量testid,并且提供值为23,由于它是对数据库进行动态查询的请求(其中?testid=23表示数据库查询变量),所以我们可以该URL中嵌入恶意SQL语句。
总的来说有以下几点:
1.永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号和双"-"进行转换等。
2.永远不要使用动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接。
4.不要把机密信息明文存放,请加密或者hash掉密码和敏感的信息。
2)XSS原理及防范
Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html
标签或者javascript
代码。比如:攻击者在论坛中放一个看似安全的链接,骗取用户点击后,窃取cookie
中的用户私密信息;或者攻击者在论坛中加一个恶意表单,当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点。
XSS防范方法:
首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”
等字符做过滤;其次任何内容写到页面之前都必须加以encode
,避免不小心把html tag
弄出来。这一个层面做好,至少可以堵住超过一半的XSS
攻击。
首先,避免直接在cookie
中泄露用户隐私,例如email、密码等等。
其次,通过使cookie
和系统ip
绑定来降低cookie
泄露后的危险。这样攻击者得到的cookie
没有实际价值,不可能拿来重放。
如果网站不需要再浏览器端对cookie
进行操作,可以在Set-Cookie
末尾加上HttpOnly
来防止javascript
代码直接获取cookie
。
尽量采用POST
而非GET
提交表单
3)XSS与CSRF有什么区别吗?
XSS
是获取信息,不需要提前知道其他用户页面的代码和数据包。CSRF
是代替用户完成指定的动作,需要知道其他用户页面的代码和数据包。
要完成一次CSRF
攻击,受害者必须依次完成两个步骤:
登录受信任网站A,并在本地生成Cookie。
在不登出A的情况下,访问危险网站B。
4)CSRF的防御
-
服务端的
CSRF
方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数。 -
通过验证码的方法
Web Worker 和webSocket
web worker:http://blog.jobbole.com/30592/
http://blog.csdn.net/aitangyong/article/details/49445307
1)worker主线程:
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker,同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.可以使用 worker.terminate() 来终止一个worker的执行。
worker新线程:
1.通过postMessage( data ) 方法来向主线程发送数据。
2.绑定onmessage方法来接收主线程发送过来的数据。
利用web worker我们可以在前端执行一些复杂的大量运算而不会影响页面的展示,并且不会弹出恶心的脚本正忙提示。
2)webSocket
WebSocket
是Web
应用程序的传输协议,它提供了双向的,按序到达的数据流。他是一个HTML5
协议,WebSocket
的连接是持久的,他通过在客户端和服务器之间保持双工连接,服务器的更新可以被及时推送给客户端,而不需要客户端以一定时间间隔去轮询。
HTTP和HTTPS
HTTP
协议通常承载于TCP协议之上,在HTTP
和TCP
之间添加一个安全协议层(SSL
或TSL
),这个时候,就成了我们常说的HTTPS。
默认HTTP的端口号为80,HTTPS
的端口号为443。
https://segmentfault.com/a/1190000007064737
为什么HTTPS
安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息,而如果使用HTTPS
,密钥在你和终点站才有。https
之所以比http
安全,是因为他利用ssl/tls
协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer传递等。保障了传输过程的安全性
对前端模块化的认识
AMD 是
RequireJS
在推广过程中对模块定义的规范化产出。CMD 是
SeaJS
在推广过程中对模块定义的规范化产出。