一、浏览器存储相关
1.浏览器存储数据方式有哪些
- cookie
- localStorage
- sessionStorage
- indexedDB（类似于一个数据库，可存储大量结构化数据）
2.Cookie、localStorage和sessionStorage的区别？
- 存储大小：cookie小，4kb；其余两个容量相对较大，5mb
- 有效期：cookie可自定义有效期，过期后自动清除；
- local要手动删除，否则会一直保存在浏览器中；
- session当前页面关闭时会被清除
- 与服务器交互：cookie会在每次http请求时被发送到服务器，增加网络开销，剩余两个不会随请求发送，仅在客户端使用
- 作用域：cookie可通过设置路径和域名确定作用范围
- local在同个域名下所有页面都能访问
- session仅在当前标签页中可以访问
3.为什么不能把敏感信息存储在Cookie中？
答：cookie容易被窃取，首先他每次请求都会发送到服务器，而且可以通过脚本或一些第三方工具拦截获取信息，造成信息泄露，不安全
4.localstorage 和 sessionStorage的应用场景
- localStorage：是和存储一些长期有效的配置信息，用户偏好等
- sessionStorage：常用于存储临时数据，比如用户在填写表单过程中的中间状态等
5.Vuex 和 sessionStorage 区别？
答：存储位置：vuex实在vue应用内部的内存中存储数据，随着应用的运行而存在，页面刷新会清除数据 sessionStorage时浏览器提供的本地存储，数据存在浏览器进程里，关闭当前会话就会清除。
二、浏览器缓存有什么作用，他的缓存策略有哪些？
1.缓存作用
答：能存储网页资源，比如css、js文件、图片等。在下次访问相同页面或者资源时，浏览器不用再从服务器请求，直接从本地缓存读取，大大加快页面加载速度，减少网络请求量。
2.缓存策略（强缓存 协商缓存）
- 强缓存：浏览器会根据资源缓存过期时间判断，如果未过期->直接从本地缓存加载资源，不会向服务器发送请求。
- 协商缓存：浏览器先向服务器发送请求，服务器根据资源状态判断资源是否有更新。若没更新，服务器返回304，浏览器从本地缓存加载，若更新，服务器返回最新资源（比如ETag时服务器给资源生成的唯一标识，每次请求时浏览器带上该表示，服务器对比标识就知道资源有无变化）
三、浏览器跨域问题是怎么产生的
- 是由于浏览器的同源策略限制。
- 同源策略：要求在同一个域名（包括协议、域名、端口）都相同下才能进行资源访问和交互，不同源的请求会被浏览器拦截。
四、浏览器跨域问题的常见解决方法
1.CORS（跨域资源共享）-最常用：
服务器端设置响应头Access-Control-Allow-Origin，来允许特定源访问资源。 *：允许所有源访问 || 设置具体域名 ||设置特定 http方法
2.JSONP只支持get请求
利用 HTML 标签中 script 标签没有跨域限制的特性。页面动态创建script标签，指定src到跨域的接口地址，服务器返回带有函数调用的JSON数据，页面接收到后自动执行函数。
3.代理服务器：proxy
在服务器端搭建代理，将跨域请求转发到目标服务器。客户端向自己的服务器发送请求，由于是同域不i被拦截，服务器再将请求转发给真正的目标服务器并获取数据，最后返回给客户端。
4.Websocket
Websocket协议本身没有同源限制，它实现了全双工通信。客户端和服务器只需要完成一次握手，就可以创建持久连接并进行双向通信，能很好地解决跨域通信问题。比如在实时聊天、在线协作等场景中广泛应用。
四、浏览器事件循环机制
调用栈优先执行同步任务，同步任务队列清空后，优先执行微任务队列，微任务队列清空后再执行宏任务队列；每个宏任务执行完都会检查微任务队列是否有新任务，有则优先处理微任务。 宏任务：定时器、延时器、点击事件等 微任务：promise回调
五、浏览器怎么解析HTML？
- 词法分析：把html文档解析成一个个令牌，即拆分成各种符号和标签；比如开始结束标签、属性名、属性值等。
- 语法分析：那令牌组装成语法树；即检查令牌是否符合html语法规则，不符合会报错；
- 渲染树构建：结合css样式，把语法树转化成渲染树，浏览器根据渲染树绘制页面。
六、从输入 URL 到看到页面发生的全过程
- 输入URL
- 浏览器解析URL：解析出对应服务器的IP地址
- 建立TCP连接：根据IP地址，通过TCP协议与服务器建立通信连接
- 发送http请求：建立连接后，向服务器端发送HTTP请求
- 服务器处理请求：根据请求进行相应处理，比如查询数据等
- 响应http请求：服务器处理完请求后，会发送http响应给浏览器端
- 浏览器解析响应绘制页面
七、浏览器缓存的优先级
- 内存缓存
- 磁盘缓存
- service worker
- 如果都没找到就只能重新发起请求
八、浏览器的重绘和回流
- 重绘：当元素的央视改变了，但没影响他的布局，比如修改颜色，背景色这些。
- 回流：当元素的姐属性发生变化，比如宽高、位置、边距等，浏览器需要重新计算布局，构建渲染树就是回流
怎样减少重绘和回流
- 避免使用内联样式
- 批量修改样式或者Dom
- 避免频繁操作样式
- 利用浏览器的缓存机制，把不经常变动的静态资源通过浏览器缓存机制，减少请求次数
- 使用绝对定位
九、浏览器事件机制
包括事件绑定和事件传播。
1.事件绑定：
通过各种方式给页面元素添加事件处理函数。（比如：DOM0级：element.onclick;DOM2级：addEventListener()；DOM3级：鼠标事件、键盘事件、表单事件）
2.事件传播：
- 捕获阶段：从页面根元素往目标元素走
- 目标阶段：事件到达真正触发时间的元素
- 冒泡阶段：从目标元素往页面根元素走
十、浏览器的垃圾回收机制
当变量、资源等不再被使用时，浏览器通过垃圾回收机制对其进行回收释放内存，避免内存泄漏
1.标记清除算法
会定期遍历内存中的所有对象，给那些还在使用的对象加上标记，没有被标记的对象就会被浏览器回收
2.引用计数算法
给每个对象设置一个引用计数。当有地方引用这个对象，计数就+1；引用没了计数就-1，如果计数为0，就会被浏览器回收
3.闭包可能会导致内存泄漏
除非外部函数对内部局部变量使用后，外部函数不再被调用，那么在标记清除法定期清理时，会对其进行回收
十一、进程与线程
1.定义
- 进程：进程是系统进行资源分配和调度的基本单位，有自己独立的地址空间、内存等资源，不同进程之间的资源相互隔离，一个进程无法直接访问另一个进程的资源，可保证各个进程的运行互不干扰
- 线程：线程是进程中的一个执行单元，是CPU调度和分配的基本单位。一个进程可以包含多个线程，这些线程共享所属进程的资源。每个线程都有自己独立的栈空间和寄存器等少量资源，用于存储线程执行过程中的局部变量和中间结果等
2.区别
a.资源分配：
进程：拥有独立的地址空间、内存等资源，不同进程之间资源相互隔离 线程：共享所属进程资源，但有自己独立的栈空间和寄存器等少量资源
b.调度
进程：调度时需要切换进程的上下文环境，包括内存空间、寄存器等，开销大 线程：调度只需切换线程的栈空间和寄存器等少量信息，开销较小
c.并发性
进程：多个进程可以并发执行，但进程间的通信和同步相对复杂 线程：统一进程内的多个线程可以并发执行，且线程间通信和同步较为方便，可直接访问共享内存
d.独立性
进程：独立性强，一个进程崩溃一般不会影响其他进程 线程：一个线程崩溃可能导致整个进程崩溃。
十二、浏览器渲染进程有哪些线程
1.GUI 渲染线程：
负责渲染浏览器界面，与用户交互密切相关
2.JS 引擎线程
负责执行js代码，由于js时单线程语言，同一时间只能执行一个任务，所以该线程在执行js代码是会阻塞其他线程，如GUI线程
3.事件触发线程：
用于处理各种事件，如鼠标点击，键盘输入等。当事件发生时，该线程会将事件添加到事件队列中，等待js引擎线程来处理
4.定时器触发线程
负责处理定时器相关任务。当定时器设定时间到达时，该线程会将对应的回调函数添加到事件队列中
5.异步HTTP请求线程
负责处理浏览器的异步HTTP请求当发起一个AJAX请求时，该线程会在后台执行请求操作，当请求完成后，将回调函数添加到事件队列中，一边js引擎线程执行
十三、WEB安全攻击方式及防御方法
1.SQL注入攻击
- 攻击方式：攻击者通过在用户输入或其他数据源中注入二选一的SQL语句，篡改或获取数据库中的信息
- 防御方法：在对数据库数据进行查询或存储的过程中，对用户进行严格的过滤和验证，限制数据库权限
2.XSS（跨站脚本攻击）
- 攻击方式：将恶意脚本注入到网页中，当用户访问该网页时，脚本会在用户浏览器中执行，从而且去用户信息或执行其他恶意操作
- 防御方法：对用户输入和输出进行严格的过滤和转移，使用csp：服务器通过在HTTP响应头中设置csp字段，向浏览器传达安全策略，浏览器根据这些策略来决定是否允许加载和执行各种资源
3.CSRF（跨站请求伪造）
- 攻击方式：诱导用户在已登录的情况下访问恶意网站，利用用户的身份信息在用户不知情的情况下执行一些操作，如转账、修改密码等
- 防御方法：在关键操作中使用CSRF令牌，验证请求来源的合法性，检查Referer字段
- CSRF令牌：在用户访问包含关键操作页面时，服务器会生成一个随即令牌，并将其包含在页面的表单或HTTP请求头中，当用户发起请求时，这个令牌会随着请求一起发送到服务器。服务器接收请求后，会验证令牌的有效性和一致性，验证未通过就拒绝处理该请求。
4.Cookie攻击
- 攻击方式：利用XSS漏洞攻击
- 防御方法：为cookie设置HttpOnly属性，只有在HTTP请求中才能被发送到服务器
