浏览器相关面试题

为什么会有跨域的问题出现？

跨域,指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限
制，防止他人恶意攻击网站
比如一个黑客,他利用iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名和密码登录时,如果没有同源限制,他的页面就可以通过JavaScript读取到你的表单中输入的内容,这样用户名和密码就轻松到手了。

前端安全XSS,CSRF这些是什么？

1. xss：跨站脚本攻击。xss攻击的主要目的是想办法获取目标攻击网站的cookie，因为有了cookie相当于有了session。
   恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该网页之时，嵌入其中Web里面的Script代码会被执
   行，从而达到恶意攻击用户的目的，避免采取的措施：编码、过滤、校验
2. 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事件触发执行之前

浏览器强制缓存和协商缓存是什么？

1. 强制缓存：是利用http的返回头中的Expires或者Cache-Control两个字段来控制的，用来表示资源的缓存时间
2. 协商缓存：就是由服务器来确定缓存资源是否可用，所以客户端与服务器端要通过某种标识来进行通信，从而让服
   务器判断请求资源是否可以缓存访问，这主要涉及到下面两组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
}

拆解一下URL的各个部分，分别是什么意思？