当前位置：首页 > news >正文

浏览器八股

news 2025/6/7 12:34:52

面试系列文章

万字总结我在寒冬里的面试准备经历
前端铜九铁十面试必备八股文——【HTML&CSS】
前端铜九铁十面试必备八股文——【JavaScript】
前端铜九铁十面试必备八股文——【Vue】
前端铜九铁十面试必备八股文——【浏览器】
前端铜九铁十面试必备八股文——【网络相关】
前端铜九铁十面试必备八股文——【性能优化】
前端铜九铁十面试必备八股文——【工程化】
前端铜九铁十面试必备八股文——【手写代码】

XSS（跨站脚本攻击）

XSS 攻击指的是跨站脚本攻击，是一种 代码注入攻击。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的信息如 cookie 等。

避免方式

不用服务器端拼接后返回（不使用服务端渲染）。
对一些敏感信息进行保护，比如 cookie 使用 http-only，使得脚本无法获取。
对用户输入的地方和变量都需要仔细检查长度和对 ”<",">”,”;”,”’” </",">等字符做过滤

CSRF（跨站请求伪造）

CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。

避免方式

添加验证码验证
使用 token验证
限制 cookie 不能作为被第三方使用
进行同源检测

什么进程和线程？有什么区别

进程（Process）

进程是计算机中正在运行的程序的实例， 一个进程就是一个程序运行实例。它拥有独立的内存空间、代码和数据，并且由操作系统负责调度和管理。 每个进程在执行时都会分配独立的内存空间，不同进程之间的内存是隔离的，一个进程的错误不会直接影响其他进程。 进程之间通过进程间通信（IPC）机制来交换数据和进行通信，常见的 IPC方式包括管道、消息队列、共享内存等。进程的切换开销较大，因为需要保存和恢复进程的完整状态，涉及到内存保护和虚拟内存的切换。

线程（Thread）

线程是进程的子任务，一个进程可以包含多个线程。它们共享相同的代码和数据，但拥有独立的执行栈和寄存器集合。 多个线程可以在同一进程内并发执行，共享进程的资源，如内存空间、打开的文件等。线程间的通信和数据交换比进程间的通信更加方便，因为它们共享相同的地址空间。线程的切换开销较小，因为线程共享进程的地址空间，切换时不需要切换内存页表，速度较快。

区别

进程和线程都可以实现并发执行，但进程是独立的执行实体，而 线程是依赖于进程的。
进程之间资源相互隔离， 线程共享所属进程的资源。
创建和销毁线程的开销较小，而创建和销毁进程的开销较大。
多线程程序的编程复杂度通常比单线程程序高，但多线程可以更好地利用多核处理器来提高程序的执行效率。

浏览器有哪些进程

主进程：负责处理用户输入、渲染页面等主要任务。
渲染进程：渲染进程负责解析 HTML、 CSS和 JavaScript，并将网页渲染成可视化内容。
GPU进程：负责处理浏览器中的 GPU加速任务。
网络线程：网络进程负责处理浏览器中的网络请求和响应，包括下载网页和资源等。
插件进程：负责浏览器插件运行。

协商缓存和强缓存的区别

强缓存

使用强缓存策略时，如果缓存资源有效，浏览器会 从本地读取缓存资源并返回200，不必再向服务器发起请求。强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。

Expires指定资源的过期时间。在过期时间以内，改资源可以被缓存使用，不需要向浏览器发送请求。这个时间依赖于服务器时间，会存在服务器时间和客户端时间不一致。

Cache-Control属性：

private：仅浏览器可以缓存
public：浏览器和代理服务器都可以缓存
max-age=xxx 过期时间，单位为秒
no-cache 不进行强缓存，但会有协商缓存
no-store 不强缓存，也不协商缓存

当两种方式一起使用时， Cache-Control 的优先级要高于 Expires。

协商缓存

如果设置强缓存，无需发起请求，直接使用缓存内容。如果没有命中强缓存，设置了协商缓存，也不需要发起请求，使用缓存。

命中协商缓存条件：

Cache-Control: no-cache
max-age时间过期

在使用协商缓存时， 会先向服务器发送一个请求，如果资源没有发生修改，则请求返回304状态，让浏览器使用本地缓存。如果资源发生修改，则返回修改后的内容

在 request headers中的 Etag属性和 Last-Modified属性，来进行设置。其中， ETage优先于Last-Modified。

Etag文件改动 服务器在返回资源的时候，在头信息中添加 Etag属性，这个属性是资源的唯一标识符。当资源改变，这个值也会改变。下次请求资源时，会在请求头中添加 If-None-Match属性，为上一次请求的资源的 Etag值。服务端会通过这个属性和资源最后一次修改时间进行对比，以此来判断资源是否修改。这种方式比 Last-Modified更加准确。

Last-Modified 上次修改时间 服务器通过在响应头上添加 Last-Modified属性，来指出资源 最后一次修改时间。当浏览器发起请求时，会在请求头上添加一个 IF-Modified-Since属性，值为上一次资源请求的 Last-Modified的值。服务区会通过这个属性和最后修改时间来进行比较，以此来判断资源是否修改。如果没有资源修改，返回 304状态，使用本地缓存。如果资源修改，就返回最新资源， 200状态。

这种方式有个缺点， Last-Modified标记的时间只能精确到1秒，如果文件在1秒内修改，但是 Last-Modified 却没有改变，这样会造成缓存命中的不准确。

区别

强缓存优先级高于协商缓存
协商缓存不论命中与否都会发送一次请求
强缓存返回 200，协商缓存命中返回 304
Ctrl+F5 会强制刷新会跳过所有缓存，而F5刷新跳过强缓存，但是会检查协商缓存。

为什么需要浏览器缓存？

使用浏览器缓存，有以下优点：

减少了服务器的负担，提高了网站的性能
加快了客户端网页的加载速度
减少了多余网络数据传输

常见浏览器所用内核

IE浏览器内核， Trident 内核，也是俗称的 IE内核；
Chrome 浏览器内核，以前是 Webkit 内核，现在是 Blink内核；
Firefox 浏览器内核： Gecko 内核，俗称 Firefox 内核；
Safari 浏览器内核： Webkit 内核；
360浏览器、猎豹浏览器内核： IE + Chrome 双内核；

浏览器的渲染过程

解析文档，生成 DOM树
解析 CSS，根据 CSS规则生成 CSSOM规则树
在 CSSOM树和 DOM树生成完后，合并 DOM、 CSSOM树构建渲染树
渲染树构建完成后，开始计算元素大小和位置【回流发生在这个阶段】
根据计算好的位置信息将内容渲染到屏幕上【重绘发生在这个阶段】

浏览器渲染优化

优化 javaScript， JavaScript会阻塞HTML的解析，改变 JavaScrip加载方式。
- 将 JavaScript放到 body最后面
- 尽量使用异步加载 JS资源，这样不会阻塞 DOM解析，如defer、async
优化CSS加载，
- CSS样式少，使用内嵌样式
- 导入外部样式使用 link，而不是 @import，因为它会阻塞渲染。
减少回流重绘
- 避免频繁操作样式
- 避免频繁操作DOM
- 复杂动画使用定位脱离文当流
- 使用 transform替代动画

Cookie、LocalStorage、SessionStorage区别

Cookie

大小只有4kb
跨域不能共享
不安全，容易被劫持
只存在请求头中

SessionStorage

存储在内存中，体积相对较大
页面关闭，数据会消失
相对Cookie安全

LocalStorage

体积大，可以存储更多内容。
生命周期长，除非手动删除，不然会一直存在
存储在硬盘中，不会像Cookie一样被请求携带

什么是同源策略

跨域问题其实就是浏览器的同源策略造成的。同源指的是：协议、 端口号、域名必须一致。

如何解决跨越问题

CORS：服务器开启跨域资源共享
JSONP：利用 `

Node和浏览器事件循环机制的区别

浏览器事件循环会在宏任务结束后，检查微任务。而Node的微任务是在两个阶段之间执行。
浏览器的process.nextTick和其他微任务优先级一样，而node中要高于其他优先级。