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

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

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：优先级：浏览器默认设置<用户设置<外部样式<内联样式 中的 style 样式

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

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

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