2022.2.20记录浏览器前端面试题

185 阅读6分钟

1.浏览器的事件传输机制原理你了解吗?

一、背景
1.事件传输机制冒泡和捕获分别由微软和网景公司提出
2.这两个概念都是为了解决页面中事件流(事件发生顺序)的问题
二、事件触发的三个阶段
a.捕获阶段
b.目标阶段
c.冒泡阶段

2.localStorage和SessionStorage的区别有哪些?

一、数据生命周期
1.localStorage除非被清理,否则一直存在
2.SessionStorage页面关闭就清理
二、数据存储大小
1.localStorageSessionStorage 5M
三、localStorageSessionStorage同属于web存储的范涛
四、用于存储客户端的本地数据

3.你对浏览器的事件循环机制了解多少?

1.宏任务:script(整个代码段),setTimeout,setInterval,setImmediate,I/O,UI render
2.微任务:process nextTick,Promise,Async/Await,MutationObserver(html5新特性)
3.执行宏任务,然后执行该红任务产生的微任务,如果微任务在执行过程中产生了新的微任务,则继续
  执行微任务,微任务执行完毕后,再回到宏任务中进行下一轮循环

4.你对浏览器的回流和重绘了解多少?

一、浏览器的渲染过程是怎么样的
1.解析HTML,生成DOM树,解析CSS,生成CSSOM树
2.将DOM树和CSSOM树结合,生成渲染树(Render Tree)
3.Layout(回流):根据生成的渲染树,进行回流(Layout),得到节点的几何信息(位置,大小)
4.Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝对像素
5.调用GPU触发渲染,将结果展示在页面上
二、回流
1.我们通过构造渲染树,我们将可见DOM节点以及它对应的样式结合起来,可是我们还需要计算它们在设备
 视口(viewport)内的确切位置和大小,这个计算的阶段就是回流
2.重新绘制当前页面,包括整个结构和样式
三、重绘
1.我们通过构造渲染树,我们知道了哪些节点是可见的,以及可见节点的样式和具体的几何信息(位置、大小)
  那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素,这个阶段就叫做重绘节点
2.重新绘制当前页面样式
四、结论:回流必然导致重绘,重绘不一定会伴随着回流
五、何时触发回流和重绘
1.添加或删除可见的DOM元素
2.元素的内容、位置或尺寸发生变化
3.页面一开始渲染的时候
4.浏览器的窗口尺寸变化
六、如何避免回流和重绘
1.最小化回流和重绘的次数
2.使用文档片段fragment

5.你对跨域了解多少?

一、什么是浏览器的同源策略
1.同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何与另一个源的资源
  进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。
2.当一个请求url的协议、域名、端口三者之间任意一个当前页面url不同即为跨域
二、跨域的常见解决方案
1.jsonp
a.利用<script>标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的JSON数据,JSONP请求一定需要
  对方的服务器做支持才可以。(https://wwww.xiaolin?callback=getData)
b.优点:简单兼容性好,可用于解决主流浏览器的跨域数据访问的问题
c.缺点:仅支持get方法具有局限性,不安全可能会遭受XSS攻击
2.postMessage
3.nginx反向代理

6.浏览器的主要组件部分是什么?

一.用户界面,浏览器引擎,渲染引擎,网络模块,用户界面后端,javascript解析器,数据存储模块
1.用户界面:包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他
  显示的各个部分都属于用户界面
2.浏览器引擎:在用户界面和呈现引擎之间传送指令
3.渲染引擎:负责显示请求的内容。如果请求的内容是HTML,它就负责解析HTML和CSS内容,并将解析后
 的内容显示在屏幕上
4.网络模块:用于网络调用,比如HTTP请求。其接口与平台无关,并为所有平台提供底层实现
5.用户界面后端:用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层
使用操作系统的用户界面方法
6.javascript解释器:用于解析和执行javascript代码
7.数据存储模块:这是持久层。浏览器需要在硬盘上保存各种数据,例如Cookie, SessionStorage,LocalStorage

7.从输入一个url到页面展示整个过程中发生了什么?

1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL的DNS缓存记录。
3、DNS解析URL对应的IP。
4、根据IP建立TCP连接(三次握手)。
5、HTTP发起请求。
6、服务器处理请求,浏览器接收HTTP响应。
7、渲染页面,构建DOM树。
8、关闭TCP连接(四次挥手)。

8.HTTPS和HTTP的主要区别

1、https协议需要到CA申请证书,一般免费证书较少,因而需要一定费用。
2、http是超文本传输协议,信息是明文传输,https则是具有安全性的ssl/tls加密传输协议。
3、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443。
4、http的连接很简单,是无状态的;HTTPS协议是由SSL/TLS+HTTP协议构建的可进行加密传输、身份认证的网络协议,比http协议安全。

9.常用的http状态码

3XX 重定向
301 Moved Permanently    永久重定向,表示请求的资源已经永久的搬到了其他位置
302 Found  临时重定向,表示请求的资源临时搬到了其他位置
303 See Other  表示请求资源存在另一个URI,应使用GET定向获取请求资源
304 Not Modified  表示客户端发送附带条件的请求(GET方法请求报文中的IF…)时,条件不满足

4XX 客户端错误
400 Bad Request  表示请求报文存在语法错误或参数错误,服务器不理解
401 Unauthorized  表示发送的请求需要有HTTP认证信息或者是认证失败了
403 Forbidden    表示对请求资源的访问被服务器拒绝了
404 Not Found  表示服务器找不到你请求的资源

5XX 服务器错误
500 Internal Server Error  表示服务器执行请求的时候出错了
503 Service Unavailable  表示服务器超负载或正停机维护,无法处理请求
504 网关超时