在线客服
扫描二维码
下载博学谷APP
扫描二维码
关注博学谷微信公众号
疫情好转后。迎来一波复工热潮。在这个时候，也是许多小伙伴求职面试的高峰期。因此小编为大家整理了前端面试中常见的浏览器相关问题，众所周知，浏览器的相关问题是前端面试中的基础问题，也是几乎必考的问题。希望大家可以在前端面试前，多刷刷题，准备得更加充分。
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 延迟加载
<script src="" defer></script> 在 文 档 解 析 完 成 开 始 执 行 ， 并且在DOMContentLoaded 事件之前执行完成，会按照他们在文档出现的顺序去下载解析。效果和把 script 放在文档最后</body>之前是一样的。
（3）异步加载
async 异步加载：就是告诉浏览器不必等到加载完外部文件，可以边渲染边下载，什么时候下载完成什么时候执行。<script type="text/javascript" src="a.js" async></script>
5、defer 和 async 的区别是什么？
<script async src="example.js"></script> 有了 async 属性，表示后续文档的加载和渲染与 js 脚本的加载和执行是并行进行的， 即异步执行；<script defer src="example.js"></script>。有了 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：优先级：浏览器默认设置<用户设置<外部样式<内联
样式<HTML 中的 style 样式
（3）将 CSS 与 DOM 合并，构建渲染树
（4）布局和绘制，重绘和重排。重排：若渲染树的一部分更新，且尺寸变化，就会发生重排；重绘：部分节点需要更新，但不改变其他集合形状。如改变某个元素的颜色，就会发生重绘。
以上就是前端面试中常见的浏览器相关问题，大家都会做吗？如果有什么地方还有疑问，可以对前端知识点进行针对性的查漏补缺。最后希望大家都可以顺利通过前端面试，拿到理想的offer。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
零基础如何学好前端？有什么建议？
下一篇：
Web前端面试排序算法总结
相关推荐 更多
如何理解HTML结构的语义化？
HTML的语义化，就是在你写的HTML结构，是用相对应的有一定予以的英文字母来表示标记的。不仅对自己来说，更加容易阅读书写，别人再看你代码和结构的时候也会非常容易理解。因此在前端开发中，尽量使用官方的有予以的标签。
10556
2019-07-09 17:01:58
常见三大缓存问题分析及解决方案
一般来讲，常见三大缓存问题不外乎就是缓存穿透、缓存击穿、缓存雪崩。三者的共同点都是高并发，缓存更新、缓存失效居多。而且三者也会相互恶化，导致问题更加严重，因此一旦有一个问题就需要马上解决，以免最引起“雪崩”。本文将分别分析缓存并发、缓存雪崩、缓存击穿三大问题，并提出对应的解决方案。
7019
2019-11-01 18:23:18
前端关于ES6的面试题汇总含答案
ES6全称是ECMAScript6，它可以帮助JavaScript语言成为企业级开发语言，编写大型且复杂的应用程序。在前端面试中，ES6也是一个经常出现的考点。本文整理汇总了ES6相关的面试题以及对应的参考答案，大家可以在面试前梳理一遍相关知识点，用最好的状态去迎接面试。
9705
2019-11-03 18:04:48
前端模块化相关面试题整理
随着Web2.0时代的到来，使用模块化规范进行管理成为许多人开始考虑的想法。本文为大家整理总结了前端模块化的相关面试题，大家可以借此机会把模块化的相关知识点梳理一遍。了解异步模块加载机制、使用模块化的原模块化的优缺点等等内容。希望本文可以让大家彻底掌握前端模块化的相关面试题！
6942
2020-01-13 09:26:48
Web前端CSS面试题及答案
Web前端CSS面试题及答案，CSS层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS在Web设计领域是一个突破，CSS实现修改一个小的样式更新与之相关的所有页面元素。是前端工程师面试过程中必不可少的考核点。
5852
2020-05-22 16:36:30
