浏览器相关面试题

[shuangmianxiaoQ]

浏览器输入URL到展示的过程

• DNS域名解析
• TCP三次握手
• 发送请求，向服务端请求页面
• 服务端返回请求的文件
• 浏览器解析
  • HTML解析 -> DOM树
  • CSS解析 ->CSS规则树
  • DOM树 + CSS规则树 -> Render渲染树
• 浏览器渲染
  • Layout：布局
  • Paint：绘制

重绘与重排

• 重绘（repaint）：元素的样式改变而不影响布局的时候，损耗较小
• 重排（reflow）：又叫回流，元素的尺寸、结构或触发某些属性时，浏览器重新计算布局渲染页面，损耗较大。像以下操作会触发回流：
  • 页面初次渲染
  • 浏览器窗口大小变化
  • 元素尺寸、位置、内容发生变化
  • 添加或删除DOM元素
  • 激活CSS伪类
  • 调用某些属性或方法：clientWidth, clientHeight, clientTop, clientLeft；offsetWidth, offsetHeight, offsetTop, offsetLeft；scrollWidth, scrollHeight, scrollTop, scrollLeft；getComputedStyle()；getBoundingClientRect()；scrollTo()
• 回流必定触发重绘，重绘不一定触发回流

浏览器事件循环机制（Event Loop）

1. 执行同步代码，执行完成后清空调用栈
2. 遇到异步代码，将异步代码先加入任务队列
   • 微任务（Microtask）：Promise, Ajax
   • 宏任务（Macrotask）：定时器, IO操作, UI Rendering
3. 从微任务队列中取出队首的任务，放入调用栈执行，直到所有微任务执行完毕
4. 从宏任务队列中取出队首的任务，放入调用栈执行，直到所有宏任务执行完毕

浏览器存储

区别

特性	Cookie	localStorage	sessionStorage	indexDB
生命周期	一般由服务器生成，可设置失效时间，没有设置的话默认关闭浏览器后失效	除非手动清除，否则永久保存	仅在当前会话生效，关闭页面或浏览器后被清除	除非手动清理，否则一直存在
存放数据大小	4K左右	一般为5MB	一般为5MB	无限
与访服务器通信	每次请求都会携带在HTTP头中，如果使用Cookie保存过多数据会带来性能问题	仅在客户端保存	仅在客户端保存	仅在客户端保存
易用性	需要自己封装，原生Cookie接口不友好	原生接口可以接受，可再次封装对对象更好的支持	原生接口可以接受，可再次封装对对象更好的支持	使用相对复杂

应用场景

• Cookie：存储用户相关信息。记住密码下次自动登录；购物车功能；记录用户浏览数据进行推荐
• localStorage：存储一些内容稳定的资源
• sessionStorage：刷新页面时不丢失的数据
• indexDB：大量结构化的数据，如图片，文件等

垃圾回收与内存泄漏

垃圾回收：将内存中不再使用的数据进行清理，释放出内存空间，常用的GC回收方式是标记清除法 内存泄漏：由于某种原因导致程序未能释放不再使用的内存，场见的内存泄漏有：意外的全局变量，闭包，未清除的定时器，未销毁的监听事件，DOM引用