• 在线客服

  • 扫描二维码
    下载博学谷APP

  • 扫描二维码
    关注博学谷微信公众号

  • 意见反馈

原创 前端面试中常见的浏览器相关问题

发布时间:2020-03-23 17:47:15 浏览 4406 来源:博学谷 作者:照照

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

     

    前端面试浏览器问题

     

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

     

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

     

    2、前端安全 XSSCSRF 是什么?

     

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

     

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

     

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

     

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

     

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

     

    1)推迟加载

     

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

     

    2defer 延迟加载

     

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

     

    3)异步加载

     

    async 异步加载:就是告诉浏览器不必等到加载完外部文件,可以边渲染边下载,什么时候下载完成什么时候执行。<script type="text/javascript" src="a.js" async></script>

     

    5defer 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 字段,则请求头也不会有对应的字段。

     

    7WEB 存储,COOKIESLOCALSTOGE 等的使用规则和区别?

     

    web 存储就指的是本地存储,包括 localstorage sessionstoragecookie 在浏览器与服务器之间来回传递,cookie 只在设置的cookie 过期时间之前一直有效,即使窗口或浏览器关闭,cookie 数据不能超过 4klocalStorage 不把数据发给服务器,仅在本地保存,始终有效, 长期保存,可以达到 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前端面试排序算法总结

相关推荐 更多

热门文章

  • 前端是什么
  • 前端开发的工作职责
  • 前端开发需要会什么?先掌握这三大核心关键技术
  • 前端开发的工作方向有哪些?
  • 简历加分-4步写出HR想要的简历
  • 程序员如何突击面试?两大招带你拿下面试官
  • 程序员面试技巧
  • 架构师的厉害之处竟然是这……
  • 架构师书籍推荐
  • 懂了这些,才能成为架构师
  • 查看更多

扫描二维码,了解更多信息

博学谷二维码