社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
本文旨在加深对前端知识点的理解,资料来源于网络,由本人(博客:http://segmentfault.com/u/trigkit4) 收集整理。
1.自我介绍:除了基本个人信息以外,面试官更想听的是你与众不同的地方和你的优势。
2.项目介绍
3.如何看待前端开发?
4.平时是如何学习前端开发的?
5.未来三年的规划是怎样的?
absolute
:生成绝对定位的元素, 相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed
(老IE不支持)生成绝对定位的元素,相对于浏览器窗口进行定位。
relative
生成相对定位的元素,相对于其在普通流中的位置进行定位。
static
默认值。没有定位,元素出现在正常的流中
原理是:动态插入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>
服务器端对于CORS
的支持,主要就是通过设置Access-Control-Allow-Origin
来进行的。如果浏览器检测到相应的设置,就可以允许Ajax
进行跨域的访问。
将子域和主域的document.domain
设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain
进行跨域
主域相同的使用document.domain
window
对象有个name
属性,该属性有个特征:即在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name
的,每个页面对window.name
都有读写的权限,window.name
是持久存在一个窗口载入过的所有页面中的
window.postMessage
方法来跨域传送数据
还有flash、在服务器上设置代理页面等跨域方式。个人认为window.name
的方法既不复杂,也能兼容到几乎所有浏览器,这真是极好的一种跨域方法。
XML
和JSON
的区别?(1).数据体积方面。
JSON相对于XML来讲,数据的体积小,传递的速度更快些。
(2).数据交互方面。
JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。
(3).数据描述方面。
JSON对数据的描述性比XML较差。
(4).传输速度方面。
JSON的速度要远远快于XML。
WebPack
是一个模块打包工具,你可以使用WebPack
管理你的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS
以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源,webpack
有对应的模块加载器。webpack
模块打包器会分析模块间的依赖关系,最后
生成了优化且合并后的静态资源。
webpack
是加强版的Browserify
。
webpack
的两大特色:
1.code splitting(可以自动完成)
2.loader 可以处理各种类型的静态文件,并且支持串联操作
require.js
的所有功能它都有。
编绎过程更快,因为require.js
会去处理不需要的文件
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的标志:SYN
和ACK
。
发送端首先发送一个带SYN
标志的数据包给对方。接收端收到后,回传一个带有SYN/ACK
标志的数据包以示传达确认信息。
最后,发送端再回传一个带ACK
标志的数据包,代表“握手”结束。 若在握手过程中某个阶段莫名中断,TCP
协议会再次以相同的顺序发送相同的数据包。
断开一个TCP连接则需要“四次握手”:
第一次挥手:主动关闭方发送一个FIN
,用来关闭主动方到被动关闭方的数据传送,也就是主动关闭方告诉被动关闭方:我已经不 会再给你发数据了(当然,在fin包之前发送出去的数据,如果没有收到对应的ack确认报文,主动关闭方依然会重发这些数据),但是,此时主动关闭方还可
以接受数据。
第二次挥手:被动关闭方收到FIN
包后,发送一个ACK
给对方,确认序号为收到序号+1
(与SYN
相同,一个FIN
占用一个序号)。
第三次挥手:被动关闭方发送一个FIN
,用来关闭被动关闭方到主动关闭方的数据传送,也就是告诉主动关闭方,我的数据也发送完了,不会再给你发数据了。
第四次挥手:主动关闭方收到FIN
后,发送一个ACK
给被动关闭方,确认序号为收到序号+1,至此,完成四次挥手。
TCP
(Transmission Control Protocol,传输控制协议)是基于连接的协议,也就是说,在正式收发数据前,必须和对方建立可靠的连接。一个TCP
连接必须要经过三次“对话”才能建立起来
UDP
(User Data Protocol,用户数据报协议)是与TCP相对应的协议。它是面向非连接的协议,它不与对方建立连接,而是直接就把数据包发送过去! UDP适用于一次只传送少量数据、对可靠性要求不高的应用环境。
作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问,变量访问到window
对象即被终止,作用域链向下访问变量是不被允许的。
时间上:onmousemove事件触发后,再触发onmouseover事件。
按钮上:不区分鼠标按钮。
动作上:onmouseover只在刚进入区域时触发,onmousemove除了刚进入区域触发外,在区域内移动鼠标,也会触发
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
渐进增强 :针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 :一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令。
总的来说有以下几点:
1.永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号和双"-"进行转换等。
2.永远不要使用动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询存取。
3.永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接。
4.不要把机密信息明文存放,请加密或者hash掉密码和敏感的信息。
Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意 html
标签或者javascript
代码。比如:攻击者在论坛中放一个
看似安全的链接,骗取用户点击后,窃取cookie
中的用户私密信息;或者攻击者在论坛中加一个恶意表单,
当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点。
首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”
等字符做过滤;其次任何内容写到页面之前都必须加以encode
,避免不小心把html
tag
弄出来。这一个层面做好,至少可以堵住超过一半的XSS
攻击。
首先,避免直接在cookie
中泄露用户隐私,例如email、密码等等。
其次,通过使cookie
和系统ip
绑定来降低cookie
泄露后的危险。这样攻击者得到的cookie
没有实际价值,不可能拿来重放。
尽量采用POST
而非GET
提交表单
XSS
是获取信息,不需要提前知道其他用户页面的代码和数据包。CSRF
是代替用户完成指定的动作,需要知道其他用户页面的代码和数据包。
要完成一次CSRF
攻击,受害者必须依次完成两个步骤:
登录受信任网站A,并在本地生成Cookie。
在不登出A的情况下,访问危险网站B。
服务端的CSRF
方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数。
通过验证码的方法
1.通过 worker = new Worker( url ) 加载一个JS文件来创建一个worker,同时返回一个worker实例。
2.通过worker.postMessage( data ) 方法来向worker发送数据。
3.绑定worker.onmessage方法来接收worker发送过来的数据。
4.可以使用 worker.terminate() 来终止一个worker的执行。
WebSocket
是Web
应用程序的传输协议,它提供了双向的,按序到达的数据流。他是一个HTML5
协议,WebSocket
的连接是持久的,他通过在客户端和服务器之间保持双工连接,服务器的更新可以被及时推送给客户端,而不需要客户端以一定时间间隔去轮询。
HTTP
协议通常承载于TCP协议之上,有时也承载于TLS
或SSL
协议层之上,这个时候,就成了我们常说的HTTPS。
默认HTTP的端口号为80,HTTPS
的端口号为443。
HTTPS
安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息,而如果使用HTTPS
,密钥在你和终点站才有。https
之所以比http
安全,是因为他利用ssl/tls
协议传输。它包含证书,卸载,流量转发,负载均衡,页面适配,浏览器适配,refer传递等。保障了传输过程的安全性
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!