【浏览器】浏览器原理及常见考点

admin 管理员组

文章数量: 887021

浏览器原理及常见考点

• 一、浏览器安全
• • 1、XSS（跨站脚本）攻击
  • 2、CSRF攻击
  • 3、中间人攻击
  • 4、哪些操作会引起浏览器安全问题？？？
  • 5、网络劫持有哪几种？如何防范？
• 二、 进程与线程
• • 1、进程与线程的概念
  • 2、浏览器的进程
  • 3、浏览器渲染进程的线程有哪些
  • 4、进程之间的通信方式
  • 5、僵尸、孤儿进程
  • 6、死锁产生的原因，如何解决
  • 7、如何实现浏览器内多个标签页之间的通信
  • 8、对serviceWroker的理解
• 三、浏览器缓存机制
• • 1、对浏览器缓存机制的理解
  • 3、为什么需要浏览器缓存？？？
• 四、浏览器的组成
• • 1、对浏览器的理解
• 五、浏览器渲染原理
• • 1、浏览器渲染过程
  • 2、浏览器渲染优化
  • 3、渲染过程中遇到JS文件如何处理？
  • 4、什么是文档的预解析
  • 5、css如何阻塞文档解析？？
  • 6、如何优化关键渲染路径？
• 六、浏览器本地存储
• • 1、浏览器本地存储方式及使用场景
  • 2、cookie有哪些字段
  • 3、Cookie、LocalStorage、SessionStorage区别
• 七、浏览器同源策略
• 1、什么是同源策略
• • 2、如何解决跨域问题
  • • 1、CORS
    • 2、JSONP
    • 3、postMessage跨域
    • 4、nginx代理跨域
    • 5、nodejs 中间件代理跨域
    • 6、document.domain + iframe跨域
    • 7、WebSocket协议跨域
• 八、浏览器事件机制
• • 1、事件是什么？事件模型？
  • 2、如何阻止事件冒泡
  • 3、对事件委托的理解
  • 5、同步和异步的区别
  • 6、对事件循环的理解
  • 7、微任务与宏仁务
  • 8、什么是执行栈
• 九、浏览器的垃圾回收

一、浏览器安全

1、XSS（跨站脚本）攻击

XSS 的本质是因为网站没有对恶意代码进行过滤，与正常的代码混合在一起了，浏览器没有办法分辨哪些脚本是可信的，从而导致了恶意代码的执行。

攻击者可以通过这种攻击方式可以进行以下操作：
● 获取页面的数据，如DOM、cookie、localStorage；
● DOS攻击，发送合理请求，占用服务器资源，从而使用户无法访问服务器；
● 破坏页面结构；
● 流量劫持（将链接指向某网站）；

xss可以分为存储型、反射型、DOM型

● 存储型指的是恶意脚本会存储在目标服务器上，当浏览器请求数据时，脚本从服务器传回并执行。
● 反射型指的是攻击者诱导用户访问一个带有恶意代码的 URL 后，服务器端接收数据后处理，然后把带有恶意代码的数据发送到浏览器端，浏览器端解析这段带有 XSS 代码的数据后当做脚本执行，最终完成 XSS 攻击。
● DOM 型指的通过修改页面的 DOM 节点形成的 XSS。

反射型 XSS 跟存储型 XSS 的区别是：存储型 XSS 的恶意代码存在数据库⾥，反射型 XSS 的恶意代码存在 URL ⾥。

• 如何防御XSS攻击
  ● 可以从浏览器的执行来进行预防，一种是使用纯前端的方式，不用服务器端拼接后返回（不使用服务端渲染）。另一种是对需要插入到 HTML 中的代码做好充分的转义。对于 DOM 型的攻击，主要是前端脚本的不可靠而造成的，对于数据获取渲染和字符串拼接的时候应该对可能出现的恶意代码情况进行判断。
  ● 使用 CSP ，CSP 的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码的注入攻击。
  ●对一些敏感信息进行保护，比如cookie使用http-only,使得脚本无法获取。也可以使用验证码，避免脚本伪装成用户执行一些操作。

  使用CSP，csp的本质是建立一个白名单，告诉浏览器哪些外部资源可以加载和执行，从而防止恶意代码注入攻击-
  只需要配置规则，如何拦截有浏览器自己实现，

开启csp的两种方式：

• 设置http首部中的Content-Security-Policy
• 一种是设置meta标签

2、CSRF攻击

跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。

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

● GET 类型的 CSRF 攻击，比如在网站中的一个 img 标签里构建一个请求，当用户打开这个网站的时候就会自动发起提交。
● POST 类型的 CSRF 攻击，比如构建一个表单，然后隐藏它，当用户进入页面时，自动提交这个表单。
● 链接类型的 CSRF 攻击，比如在 a 标签的 href 属性里构建一个请求，然后诱导用户去点击。

如何防御：

• 1、本质是，cookie在同源请求中会携带，要进行同源检测，服务器根据http请求头中的origin或者referer信息来判断，是否为允许访问的站点，
• 2、使用 CSRF Token 进行验证 服务器向用户返回一个随机数 Token ，当网站再次发起请求时，在请求参数中加入服务器端返回的 token ，然后服务器对这个 token 进行验证。这种方法解决了使用 cookie 单一验证方式时，可能会被冒用的问题，但是这种方法存在一个缺点就是，我们需要给网站中的所有请求都添加上这个 token
• 3、对 Cookie 进行双重验证
• 4、在设置 cookie 属性的时候设置 Samesite ，限制 cookie 不能作为被第三方使用

3、中间人攻击

中间⼈ (Man-in-the-middle attack, MITM) 是指攻击者与通讯的两端分别创建独⽴的联系, 并交换其所收到的数据, 使通讯的两端认为他们正在通过⼀个私密的连接与对⽅直接对话, 但事实上整个会话都被攻击者完全控制。在中间⼈攻击中，攻击者可以拦截通讯双⽅的通话并插⼊新的内容。

4、哪些操作会引起浏览器安全问题？？？

• XSS：跨站脚本 (Cross-Site Scripting, XSS): ⼀种代码注⼊⽅式, 为了与 CSS 区分所以被称作 XSS。早期常⻅于⽹络论坛, 起因是⽹站没有对⽤户的输⼊进⾏严格的限制, 使得攻击者可以将脚本上传到帖⼦让其他⼈浏览到有恶意脚本的⻚⾯, 其注⼊⽅式很简单包括但不限于 JavaScript / CSS / Flash 等；
• iframe的滥⽤: iframe中的内容是由第三⽅来提供的，默认情况下他们不受控制，他们可以在iframe中运⾏JavaScirpt脚本、Flash插件、弹出对话框等等，这可能会破坏前端⽤户体验；
• 跨站点请求伪造（Cross-Site Request Forgeries，CSRF）: 指攻击者通过设置好的陷阱，强制对已完成认证的⽤户进⾏⾮预期的个⼈信息或设定信息等某些状态更新，属于被动攻击
• 恶意第三⽅库: ⽆论是后端服务器应⽤还是前端应⽤开发，绝⼤多数时候都是在借助开发框架和各种类库进⾏快速开发，⼀旦第三⽅库被植⼊恶意代码很容易引起安全问题。

5、网络劫持有哪几种？如何防范？

⽹络劫持分为两种:
（1）DNS劫持: (输⼊京东被强制跳转到淘宝这就属于dns劫持)
● DNS强制解析: 通过修改运营商的本地DNS记录，来引导⽤户流量到缓存服务器
● 302跳转的⽅式: 通过监控⽹络出⼝的流量，分析判断哪些内容是可以进⾏劫持处理的,再对劫持的内存发起302跳转的回复，引导⽤户获取内容
（2）HTTP劫持: (访问⾕歌但是⼀直有贪玩蓝⽉的⼴告),由于http明⽂传输,运营商会修改你的http响应内容(即加⼴告)

DNS劫持由于涉嫌违法，已经被监管起来，现在很少会有DNS劫持，⽽http劫持依然⾮常盛⾏，最有效的办法就是全站HTTPS，将HTTP加密，这使得运营商⽆法获取明⽂，就⽆法劫持你的响应内容。

二、 进程与线程

1、进程与线程的概念

进程是资源分配的最小单位，线程是cpu调度的最小单位

一个进程就是一个程序的运行实例。

启动一个程序的时候，操作系统会为该程序创建一块内存，用来存放代码、运行中的数据和一个执行任务的主线程，我们把这样的一个运行环境叫进程

进程是运行在虚拟内存上的，虚拟内存是用来解决用户对硬件资源的无限需求和有限的硬件资源之间的矛盾的。从操作系统角度来看，虚拟内存即交换文件；从处理器角度看，虚拟内存即虚拟地址空间。

如果程序很多时，内存可能会不够，操作系统为每个进程提供一套独立的虚拟地址空间，从而使得同一块物理内存在不同的进程中可以对应到不同或相同的虚拟地址，变相的增加了程序可以使用的内存

进程与线程的关系：

• 进程中任一线程执行出错，都会导致整个进程的崩溃
• 线程之间共享进程中的数据
• 当一个进程关闭之后，操作系统会回收进程所占用的内存
• 进程之间的内容相互隔离

2、浏览器的进程

chrome浏览器的进程有：

• 多个渲染进程
• 多个插件进程
• 一个网络请求进程
• 一个GPU进程
• 一个浏览器主进程

这些进程的功能：
● 浏览器进程：主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
● 渲染进程：核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
● GPU 进程：其实， GPU 的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。
● 网络进程：主要负责页面的网络资源加载，之前是作为一个模块运行在浏览器进程里面的，直至最近才独立出来，成为一个单独的进程。
● 插件进程：主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

打开一个网页至少需要四个进程：

• 一个网络进程
• 一个渲染进程
• 一个GPU
• 一个浏览器进程

3、浏览器渲染进程的线程有哪些

核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。

• JS引擎线程
• 事件触发线程
• 定时器触发线程
• GUI渲染线程
• 异步http请求线程

（1）GUI渲染线程
负责渲染浏览器页面，解析HTML、CSS，构建DOM树、构建CSSOM树、构建渲染树和绘制页面；当界面需要重绘或由于某种操作引发回流时，该线程就会执行。

注意：GUI渲染线程和JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起，GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。

（2）JS引擎线程
JS引擎线程也称为JS内核，负责处理Javascript脚本程序，解析Javascript脚本，运行代码；JS引擎线程一直等待着任务队列中任务的到来，然后加以处理，一个Tab页中无论什么时候都只有一个JS引擎线程在运行JS程序；

注意：GUI渲染线程与JS引擎线程的互斥关系，所以如果JS执行的时间过长，会造成页面的渲染不连贯，导致页面渲染加载阻塞。

（3）事件触发线程
事件触发线程属于浏览器而不是JS引擎，用来控制事件循环；当JS引擎执行代码块如setTimeOut时（也可是来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件触发线程中；当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理；

注意：由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）；

（4）定时器触发进程
定时器触发进程即setInterval与setTimeout所在线程；浏览器定时计数器并不是由JS引擎计数的，因为JS引擎是单线程的，如果处于阻塞线程状态就会影响记计时的准确性；因此使用单独线程来计时并触发定时器，计时完毕后，添加到事件队列中，等待JS引擎空闲后执行，所以定时器中的任务在设定的时间点不一定能够准时执行，定时器只是在指定时间点将任务添加到事件队列中；

注意：W3C在HTML标准中规定，定时器的定时时间不能小于4ms，如果是小于4ms，则默认为4ms。

（5）异步http请求线程
● XMLHttpRequest连接后通过浏览器新开一个线程请求；
● 检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将回调函数放入事件队列中，等待JS引擎空闲后执行；

4、进程之间的通信方式

• 管道通信 管道就是操作系统在内核中开辟的一段缓冲区，进程1可以将需要交互的数据拷贝到这段缓冲区，进程2就可以读取了。
• 消息队列通信
• 信号量通信
• 享内存通信
• 套接字通信

5、僵尸、孤儿进程

● 孤儿进程：父进程退出了，而它的一个或多个进程还在运行，那这些子进程都会成为孤儿进程。孤儿进程将被init进程(进程号为1)所收养，并由init进程对它们完成状态收集工作。
● 僵尸进程：子进程比父进程先结束，而父进程又没有释放子进程占用的资源，那么子进程的进程描述符仍然保存在系统中，这种进程称之为僵死进程。

6、死锁产生的原因，如何解决

所谓死锁，是指多个进程在运行过程中因争夺资源而造成的一种僵局，当进程处于这种僵持状态时，若无外力作用，它们都将无法再向前推进。

系统中的资源可以分为两类：
● 可剥夺资源，是指某进程在获得这类资源后，该资源可以再被其他进程或系统剥夺，CPU和主存均属于可剥夺性资源；
● 不可剥夺资源，当系统把这类资源分配给某进程后，再不能强行收回，只能在进程用完后自行释放，如磁带机、打印机等。

产生死锁的原因：
（1）竞争资源
● 产生死锁中的竞争资源之一指的是竞争不可剥夺资源（例如：系统中只有一台打印机，可供进程P1使用，假定P1已占用了打印机，若P2继续要求打印机打印将阻塞）
● 产生死锁中的竞争资源另外一种资源指的是竞争临时资源（临时资源包括硬件中断、信号、消息、缓冲区内的消息等），通常消息通信顺序进行不当，则会产生死锁
（2）进程间推进顺序非法
若P1保持了资源R1，P2保持了资源R2，系统处于不安全

本文标签： 浏览器 考点 原理 常见