为什么会有跨域的问题出现?
跨域,指的是浏览器不能执行其他网站的脚本,它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限
制,防止他人恶意攻击网站
比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过JavaScript读取到你的表单中输入的内容,这样用户名和密码就轻松到手了。
前端安全XSS,CSRF这些是什么?
- xss:跨站脚本攻击。xss攻击的主要目的是想办法获取目标攻击网站的cookie,因为有了cookie相当于有了session。
恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该网页之时,嵌入其中Web里面的Script代码会被执
行,从而达到恶意攻击用户的目的,避免采取的措施:编码、过滤、校验 - csrf:跨站点伪装请求,CSRF攻击者在用户已经登录目标网站之后,诱使用户访问一个攻击页面,利用目标网站对
用户的信任,以用户身份在攻击页面对目标网站发起伪造用户操作的请求,达到攻击目的。防御手段:1. 尽量使用
POST,限制GET,2. 加验证码
浏览器如何加载页面的,script脚本阻塞有什么解决办法,defer和async的区别是什么?
从浏览器地址栏的请求链接开始,浏览器通过DNS解析查到域名映射的IP地址,成功之后浏览器端向此IP地
址取得连接,成功连接之后,浏览器端将请求信息通过HTTP协议向此IP地址所在服务器发起请求,服务器接
受到请求之后等待处理,最后向浏览器端发回响应,此时在HTTP协议下,浏览器从服务器接收到text/html
类型的代码,浏览器开始显示此html,并获取其中内嵌资源地址,然后浏览器再发起请求来获取这些资源,并
在浏览器的html中显示
1 推迟加载(延迟加载)
如果页面初始的渲染并不依赖于js或者CSS可以用推迟加载,就是最后在加载js和css,把引用外部文件的代
码写在最后
2 defer延迟加载
<scriptsrc=""defer></script>在文档解析完成开始执行,并且在DOMContentLoaded事件之前执行完成,
会按照他们在文档出现的顺序去下载解析。效果和把script放在文档最后</body>之前是一样的。
注:defer最好用在引用外部文件中使用,用了defer不要使用document.write()方法;使用defer时
最好不要请求样式信息,因为样式表可能尚未加载,浏览器会禁止该脚本等待样式表加载完成,相当于样式表阻塞脚本执行
3 异步加载
async异步加载:就是告诉浏览器不必等到加载完外部文件,可以边渲染边下载,什么时候下载完成什么时候执
行。<scripttype="text/javascript"src="a.js"async></script>
defer和async的区别:<scriptasyncsrc="example.js"></script>有了async属性,表示后续文档的加载和
渲染与js脚本的加载和执行是并行进行的,即异步执行;<scriptdefersrc="example.js"></script>
有了defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本的执行
需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发执行之前
浏览器强制缓存和协商缓存是什么?
- 强制缓存:是利用http的返回头中的Expires或者Cache-Control两个字段来控制的,用来表示资源的缓存时间
- 协商缓存:就是由服务器来确定缓存资源是否可用,所以客户端与服务器端要通过某种标识来进行通信,从而让服
务器判断请求资源是否可以缓存访问,这主要涉及到下面两组header字段,这两组搭档都是成对出现的,即第一次
请求的响应头带上某个字段(Last-Modified或者Etag),则后续请求则会带上对应的请求字段(If-Modified-Since
或者If-None-Match),若响应头没有Last-Modified或者Etag字段,则请求头也不会有对应的字段
浏览器的全局变量有哪些?
有:alert,location,open(),setTimeout(),clearInterval()等
浏览器同一时间能够从一个域名下载多少个资源?
一般是限制在10个以内
按需加载,不同页面的元素判断标准是怎么样的?
访问的数据量过大的时候用缓存明显不太合适的时候。可以用按需加载 。
如果是数据量不是很多的话可以放在
WEB存储,COOKIES,LOCALSTOGE等的使用规则和区别?
web存储就指的是本地存储,包括localstorage和sessionstorage
Cookies:cookie在浏览器与服务器之间来回传递,cookie只在设置的cookie过期时间之前一直有效,即使窗口或浏
览器关闭,cookie数据不能超过4k。
localStorage:localStorage不把数据发给服务器,仅在本地保存,始终有效,长期保存,可以达到5M或更大存储大小
浏览器内核你都知道哪些?
什么是预加载,懒加载?
预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染
懒加载:也就是延迟加载。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为
1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片真正
的路径,让图片显示出来。这就是图片懒加载
一个XMLHttpRequest实例它有几种状态分别代表什么?
DNS解析原理,输入网址之后如何查找服务器?
服务器如何识别是你在操作,说说思路?
①当浏览器首次访问服务器时,服务器会为客户端创建一个session(每个用户独有的房间,用来存放这个对象的相关
信息和内容),并通过特殊算法算出一个sessionID(类似于双方都知道的唯一暗号),用来标识该session对象。
②当浏览器再次(session还在有效时间内)向服务器请求资源的时候,浏览器将sessionID和请求内容一起发送到服务端。服务端通过对比自身存储的sessionId来判断用户之前是否存在,并返回对应的内容给不同用户。
③因为标识符存在内存里,所以当浏览器关闭时,浏览器保存的sessionId就会消失。服务器将匹配失败,默认为此
请求是新用户提出的,如上文顺序,重新创建一个session容器,和相应的唯一sessionId,返回给浏览器。
一分钟专业解释:
①服务器在响应头内加上”Set-Cookie:XXXXXXXXXXXXX“(相当于一个唯一的ID符),此信息是服务
器随机生成的,放在服务器内存里,不会重复,这就是sessionid。
②当浏览器得到这个sessionid会将它放在自己的进程内存里,.然后你继续发请求给这个网站的时候,浏
览器就会把这个sessionid放在请求头里发送给该服务器了,这样服务器得到sessionid后再和自己内存里存放的
sessionid对比锁定客户端,从而区分不同客户端,完成会话.
③关闭浏览器结束进程,则这个sessionid将消失,如果用户又打开浏览器想继续这次会话的时候,就会因
为发送的请求中没有这个sessionid,而使服务器无法辨别请求身份。
浏览器的渲染流程你了解吗?
介绍几个IE浏览器的兼容问题?
块属性标签float之后,又有横向的margin值,在IE6中显示会比设置的大(IE6双边距bug)
设置较小的高度标签(一般小于10px),在IE6,IE7,会超出自己设置的高度,解决办法:设置较小的高度标签(一般小于10px),在IE6,IE7,遨游中超出自己设置的高度
图片默认有间距,解决方案:使用float为img布局
给一个元素设置了高度和宽度的同时,还为其设置margin和padding的值,会改变该元素的实际大
小。解决办法:在需要加margin和padding的div内部加一个div,在这个div里设置margin和
padding值
对于Session 你知道哪些内容?
session是存放在服务器的内存中里,所以session里的数据不断增加会造成服务器的负担,所以会把很重要的信息
存储在session中,session的信息是通过sessionid获取的,而sessionid是存放在会话cookie当中的,当浏览器
关闭的时候会话cookie消失,所以sessionid也就消失了,但是session的信息还存在服务器端。一般session是和
cookie结合起来使用的
如何实现一个拖拽,说一下思路?(表述方式需要修改)
基本思路如下,代码省略:拖拽状态=0鼠标在元素上按下的时候{
拖拽状态=1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}
鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1,那么
元素y= 现在鼠标y- 原来鼠标y+ 原来元素y
元素x= 现在鼠标x- 原来鼠标x+ 原来元素x
}
鼠标在任何时候放开的时候{
拖拽状态=0
}