自用前端面试题集锦(浏览器)

182 阅读9分钟

1.讲一下浏览器从加载⻚面到渲染⻚面的过程?

2-60页-浏览器从加载⻚面到渲染⻚面的过程

2.总结前端性能优化的解决方案

2-61页-总结前端性能优化的解决方案
补充:6-1页-什么是防抖和节流?有什么区别?如何实现?

3.前端(浏览器)常⻅的安全问题有哪些?

攻击:juejin.cn/post/691615…
劫持:juejin.cn/post/691615… 补充:2-64页-前端常⻅的安全问题有哪些
补充:juejin.cn/post/718706… 补充:5
补充:6-9页-Cookie如何防范XSS攻击

4.从输入URL到页面加载的全过程(重点难点)

条理清晰答案:80-四、当在浏览器中输入 Google.com 并且按下回车之后发生了什么
不太清晰答案:juejin.cn/post/701659…

5.讲一下浏览器的渲染过程

juejin.cn/post/691615…
更详细的答案:35-76页-浏览器渲染原理

6.如何进行浏览器渲染优化

juejin.cn/post/691615…

7.如何优化关键渲染路径?

juejin.cn/post/691615…

8.什么情况会阻塞渲染?

juejin.cn/post/691615…

9.渲染过程中遇到JS文件是如何处理的?

juejin.cn/post/691615…

10.什么是文档的预解析?

juejin.cn/post/691615…

11.浏览器是怎样解析CSS选择器的?

36-3页-浏览器是怎样解析CSS选择器的

12.为什么操作DOM慢

35-78页-为什么操作DOM慢

13.浏览器重绘与重排的区别?

juejin.cn/post/701659…

14.如何触发重绘和重排?

juejin.cn/post/701659…

15.如何避免重绘和重排?

juejin.cn/post/701659…

16.讲一下你了解的浏览器的重绘和回流导致的性能问题

6-11页-你了解的浏览器的重绘和回流导致的性能问题
14-20页-第22题

17.如何减少重绘和回流?

35-78页-减少重绘和回流

18.介绍一下304的过程

juejin.cn/post/701659…

19.介绍一下浏览器的缓存机制

全面解析(位置、类型、过程):www.jianshu.com/p/54cc04190…
常见答案(过程):juejin.cn/post/691615…

20.协商缓存和强缓存的区别

juejin.cn/post/691615…

21.为什么需要浏览器缓存(浏览器缓存作用)

juejin.cn/post/691615…

22.浏览器是如何对 HTML5 的离线储存资源进行管理和加载

www.bilibili.com/read/cv1804…

23.说一下进程、线程和协程

juejin.cn/post/701659…

24.定时器的执行顺序和机制

6-5页-定时器的执行顺序或机制

25.什么是Bom?有哪些常用的Bom属性?

blog.csdn.net/haotian1997…
补充:6-8页-什么是Bom?有哪些常用的Bom属性?

26.讲一下Cookie、sessionStorage、localStorage的区别

juejin.cn/post/691615…

27.讲一下浏览器本地存储方式及使用场景

juejin.cn/post/691615…

28.Cookie有哪些字段?作用分别是什么?

juejin.cn/post/691615…

29.前端储存的⽅式有哪些?

juejin.cn/post/691615…

30.IndexedDB有哪些特点?

juejin.cn/post/691615…

31.什么是Cookie隔离?(请求资源时如何不携带Cookie)

36-3页-什么是Cookie隔离

32.什么是VDOM?VDOM的作用及机制?

juejin.cn/post/718706…
6-14页-为什么虚拟dom会提高性能

33.讲一下defer和async的区别

7-2页-defer和async的区别

34.浏览器的主要组成部分是什么?

juejin.cn/post/691615…

35.为什么JavaScript是单线程的?岂不是与异步机制冲突吗?

  1. JS中其实是没有线程概念的,所谓的单线程也只是相对于多线程而言。JS的设计初衷就没有考虑这些,针对JS这种不具备并行任务处理的特性,我们称之为“单线程”。
  2. JS的单线程是指一个浏览器进程中只有一个JS的执行线程,同一时刻内只会有一段代码在执行。
  3. 异步机制是浏览器的两个或以上常驻线程共同完成的,是浏览器行为。如定时器触发(settimeout和setinterval) 是由浏览器的定时器线程执行的定时计数,然后在定时时间把定时处理函数的执行请求插入到JS执行队列的尾端(所以用这两个函数的时候,实际的执行时间是大于或等于指定时间的,不保证能准确定时的)。

36.CSS 如何阻塞文档解析?

juejin.cn/post/691615…

37.DOMContentLoaded 与 load 的区别 ?

  • DOMContentLoaded事件触发时:仅当DOM解析完成后,不包括样式表,图片等资源。
  • onload 事件触发时,页面上所有的 DOM,样式表,脚本,图片等资源已经加载完毕。

38.谈一谈你对requestAnimationFrame(rAF)理解

函数说明

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。
调用该方法后有两个效果

  1. 渲染新的一帧;
  2. 当渲染新的一帧时需要执行传入的回调函数。

requestAnimationFrame可用于实现高性能的流畅动画

rAF(requestAnimationFrame) 最大的优势是由系统来决定回调函数的执行时机。rAF的执行跟着系统的绘制频率走,它能保证回调函数在屏幕每一次的绘制间隔中只被执行一次,这样就不会引起丢帧现象,也不会导致动画出现卡顿的问题。

对比setTimeout实现动画的优势

  • 当页面隐藏或者最小化时,setTimeout仍然在后台执行动画,此时页面不可见或者是不可用状态,动画刷新没有意义,而言浪费CPU。
  • rAF不一样,当页面处理未激活的状态时,该页面的屏幕绘制任务也会被系统暂停,因此跟着系统步伐走的rAF也会停止渲染,当页面被激活时,动画就从上次停留的地方继续执行,有效节省了 CPU 开销。

39.讲一下浏览器事件循环(event loop)的机制(重点难点)

深度解析:juejin.cn/post/684490…
简略答案:juejin.cn/post/691615…

40.用浏览器内核实现解释eventloop

同23题

41.宏任务和微任务分别有哪些?

juejin.cn/post/691615…

42.什么是执行栈?

juejin.cn/post/691615…

43.事件触发的过程是怎样的?

juejin.cn/post/691615…

44.讲一下浏览器和Node各自的事件循环的区别

juejin.cn/post/691615…

45.什么是浏览器事件?事件模型有哪些?

juejin.cn/post/691615…

46.如何阻止事件冒泡

juejin.cn/post/691615…

47.讲一下对事件委托(代理)的理解

juejin.cn/post/691615…

48.事件委托(代理)的使用场景有哪些?

juejin.cn/post/691615…

49.移动端浏览器事件和PC端浏览器事件的区别(TODO)

zhuanlan.zhihu.com/p/66363905

50.同步和异步的区别

juejin.cn/post/691615…

51.讲一下浏览器资源加载过程与优化手段

juejin.cn/post/684490…

52.讲一下浏览器的同源策略

www.jianshu.com/p/438183ddc…

53.什么是同源策略?

juejin.cn/post/691615…

54.如何实现跨域?

juejin.cn/post/691615…

55.正向代理和反向代理的区别

juejin.cn/post/691615…

56.讲一下Nginx的概念及其工作原理

juejin.cn/post/691615…

57.浏览器单线程是怎么优化的?(TODO)

可能是要问浏览器实现异步逻辑的原理,涉及到进程、线程和事件循环,微任务、宏任务,可以参照这些问题答案

58.浏览器进程和线程有何区别?

juejin.cn/post/691615…

59.浏览器渲染进程的线程有哪些?

juejin.cn/post/691615…

60.进程间的通信方式有哪些?

juejin.cn/post/691615…

61.僵尸进程和孤儿进程是什么?

juejin.cn/post/691615…

62.死锁产生的原因是什么?如何解决死锁的问题?

juejin.cn/post/691615…

63.如何实现浏览器内多个标签页之间的通信?

juejin.cn/post/691615…

64.讲一下对Servicew Worker的理解

juejin.cn/post/691615…

65.点击刷新按钮或者按 F5、按 Ctrl+F5 (强制刷新)、地址栏回车有什么区别?

juejin.cn/post/691615…

66.讲一下对浏览器的理解(浏览器的作用,组成)

juejin.cn/post/691615…

67.讲一下对浏览器内核的理解

juejin.cn/post/691615…

68.常见浏览器内核有哪些?各有什么特点?

juejin.cn/post/691615…

69.V8的垃圾回收机制是怎样的?

juejin.cn/post/691615…

70.哪些操作会造成内存泄漏?

juejin.cn/post/691615…

71.讲一下你对浏览器盒模型的理解(box-sizing的使用)

blog.csdn.net/qq_43305958…
补充:76-1页-什么是盒子模型

72.静态页面缓存有哪些方式?对应的属性分别是什么含义?

同9.介绍一下浏览器的缓存机制

73.浏览器乱码的原因是什么?如何解决?

blog.csdn.net/weixin_6613…

74.Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

Doctype声明于文档最前面,告诉浏览器以何种方式来渲染页面,这里有两种模式,严格模式和混杂模式。

  • 严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
  • 混杂模式,向后兼容,模拟老式浏览器,防止浏览器无法兼容页面。

75.Cookie如何防范XSS攻击?

XSS(跨站脚本攻击)是指攻击者在返回的HTML中嵌入javascript脚本,为了减轻这些攻击,需要在HTTP头部配上,set-cookie:

  • httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。
  • secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

76.浏览器协商缓存Last-Modified能精确到的最小时间单位是什么?

77.浏览器协商缓存Last-Modified为什么还会有etag

Last-Modified有以下缺点

  1. 最小单位是秒。也就是说如果我短时间内资源发生了改变,Last-Modified 并不会发生变化;
  2. 周期性变化。如果这个资源在一个周期内修改回原来的样子了,我们认为文件是没有变化的是可以使用缓存的,但是 Last-Modified 记录的是上次修改时间,即使文件没有变化,但修改时间变了,所以它认为缓存失效。

为了解决Last-Modified不精确的问题引入了ETag
Etag 一般是由文件内容 hash 生成的,也就是说它可以保证资源的唯一性,资源发生改变就会导致 Etag 发生改变。 同样地,在浏览器第一次请求资源时,服务器会返回一个 Etag 标识。当再次请求该资源时, 会通过 If-no-match 字段将 Etag 发送回服务器,然后服务器进行比较,如果相等,则返回 304 表示未修改。

78.当连接不安全外网时,可能会遇到页面注入广告信息等,该怎么解决?

一般直接换用https协议访问,可以有效防止被劫持和注入广告代码