前端面试最常问的浏览器相关问题

前端面试最常问的浏览器相关问题有哪些？疫情好转后。迎来一波复工热潮。在这个时候，也是许多小伙伴求职面试的高峰期。因此小编为大家整理了前端面试中常见的浏览器相关问题，众所周知，浏览器的相关问题是前端面试中的基础问题，也是几乎必考的问题。希望大家可以在前端面试前，多刷刷题，准备得更加充分。

10年积累的成都网站设计、网站制作经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有离石免费网站建设让你可以放心的选择与我们合作。

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

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

2、前端安全 XSS、CSRF是什么？

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

（2）csrf：跨站点伪装请求，CSRF攻击者在用户已经登录目标网站之后，诱使用户访问一个攻击页面，利用目标网站对用户的信任，以用户身份在攻击页面对目标网站发起伪造用户操作的请求，达到攻击目的。防御手段：1.尽量使用 POST，限制 GET，2.加验证码

3、浏览器如何加载页面？

从浏览器地址栏的请求链接开始，浏览器通过 DNS解析查到域名映射的 IP地址，成功之后浏览器端向此 IP地址取得连接，成功连接之后，浏览器端将请求信息通过 HTTP协议向此 IP地址所在服务器发起请求，服务器接受到请求之后等待处理，最后向浏览器端发回响应，此时在 HTTP协议下， 浏览器从服务器接收到 text/html类型的代码，浏览器开始显示此 html， 并获取其中内嵌资源地址，然后浏览器再发起请求来获取这些资源，并在 浏览器的 html中显示。

4、script脚本阻塞有什么解决办法？

（1）推迟加载

如果页面初始的渲染并不依赖于 js或者 CSS可以用推迟加载，就是最后在加载 js和 css，把引用外部文件的代码写在最后。

（2）defer延迟加载

在 文 档 解 析 完 成 开 始 执 行 ， 并且在DOMContentLoaded事件之前执行完成，会按照他们在文档出现的顺序去下载解析。效果和把 script放在文档最后之前是一样的。

（3）异步加载

async异步加载：就是告诉浏览器不必等到加载完外部文件，可以边渲染边下载，什么时候下载完成什么时候执行。

5、defer和 async的区别是什么？

有了 async属性，表示后续文档的加载和渲染与 js脚本的加载和执行是并行进行的， 即异步执行；。有了 defer属性，加载后续文档的过程和 js脚本的加载(此时仅加载不执行)是并行进行的(异步)，js脚本的执行需要等到文档所有元素解析完成之后，DOMContentLoaded事件触发执行之前。

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

强制缓存：是利用 http的返回头中的 Expires或者 Cache-Control两个字段来控制的，用来表示资源的缓存时间。协商缓存：就是由服务器来确定缓存资源是否可用，所以客户端与服务器端要通过某种标识来进行通信，从而让服务器判断请求资源是否可以缓存访问，这主要涉及到下面两组 header字段，这两组搭档都是成对出现的， 即第一次请求的响应头带上某个字段，则后续请求则会带上对应的请求字段， 若响应头没有 Last-Modified或者 Etag字段，则请求头也不会有对应的字段。

7、WEB存储，COOKIES、LOCALSTOGE等的使用规则和区别？

web存储就指的是本地存储，包括 localstorage和 sessionstorage。cookie在浏览器与服务器之间来回传递，cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭，cookie数据不能超过 4k。localStorage不把数据发给服务器，仅在本地保存,始终有效， 长期保存,可以达到 5M或更大存储大小。

8、什么是预加载、懒加载？

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。懒加载：也就是延迟加载。当访问一个页面的时候，先把 img元素或是其他元素的背景图片路径替换成一张大小为 1*1px图片的路径，只有当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。

9、服务器如何识别是你在操作，说说思路？

（1）当浏览器首次访问服务器时,服务器会为客户端创建一个session，并通过特殊算法算出一个 sessionID，用来标识该 session对象。

（2）当浏览器再次（session还在有效时间内）向服务器请求资源的时候，浏览器将 sessionID和请求内容一起发送到服务端。服务端通过对比自身存储的 sessionId来判断用户之前是否存在，并返回对应的内容给不同用户。

（3）因为标识符存在内存里，所以当浏览器关闭时，浏览器保存的sessionId就会消失。服务器将匹配失败，默认为此请求是新用户提出的，如上文顺序，重新创建一个 session容器，和相应的唯一 sessionId， 返回给浏览器。

10、浏览器的渲染流程你了解吗？

（1）解析 HTML文件，创建 DOM树

（2）解析 CSS：优先级：浏览器默认设置<用户设置<外部样式<内联样式

（3）将 CSS与 DOM合并，构建渲染树

（4）布局和绘制，重绘和重排。重排：若渲染树的一部分更新，且尺寸变化，就会发生重排；重绘：部分节点需要更新，但不改变其他集合形状。如改变某个元素的颜色，就会发生重绘。

以上就是前端面试最常问的浏览器相关问题，大家都会做吗？如果有什么地方还有疑问，可以对前端知识点进行针对性的查漏补缺。最后希望大家都可以顺利通过前端面试，拿到理想的offer。