浏览器解析

浏览器打开一个页面需要启动哪些进行

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

渲染机制

  1. 解析html，构建DOM树
  2. 解析CSS，生成CSSOM树
  3. 合并dom树和css规则树，生成render渲染树
  4. 根据render渲染树进行布局
  5. 调用GPU对渲染树进行绘制，合成图层，显示在屏幕上

注意：

  1. 浏览器在生成网页的过程中，至少渲染一次
  2. 在用户浏览的过程中，还会不断重新渲染 （render = n+1）
  3. 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢
  4. 当 HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载 JS 文件。并且CSS也会影响 JS 的执行，只有当解析完样式表才会执行 JS，所以也可以认为这种情况下，CSS 也会暂停构建 DOM

浏览器为什么要请求并发数限制

  1. 对操作系统端口资源考虑

PC总端口数为65536，那么一个TCP（http也是tcp）链接就占用一个端口。操作系统通常会对总端口一半开放对外请求，以防端口数量不被迅速消耗殆尽。
2. 过多并发导致频繁切换产生性能问题

一个线程对应处理一个http请求，那么如果并发数量巨大的话会导致线程频繁切换。而线程的上下文切换有时候并不是轻量级的资源。这导致得不偿失，所以请求控制器里面会产生一个链接池，以复用之前的链接。所以我们可以看作同域名下链接池最大为4～8个，如果链接池全部被使用会阻塞后面请求任务，等待有空闲链接时执行后续任务。
3. 避免同一客服端并发大量请求超过服务端的并发阈值

在服务端通常都对同一个客户端来源设置并发阀值避免恶意攻击，如果浏览器不对同一域名做并发限制可能会导致超过服务端的并发阀值被BAN掉。
4. 客户端良知机制

为了防止两个应用抢占资源时候导致强势一方无限制的获取资源导致弱势一方永远阻塞状态。

缓存机制

Service Worker

  Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。

  1. 注册Service Worker
  2. 监听到install事件以后就可以缓存需要的文件
  3. 在下次用户访问的时候就可以通过拦截请求的方式查询是否存在缓存，存在缓存直接读取文件，否则就去请求数据。

Memory Cache

  内存中的缓存，主要包含的是当前页面中已经抓取到的资源，例如页面上已经下载的样式、脚本、图片等。特点读取快，持续时间短，内容小导致存储数据小

Disk Cache

  存储在硬盘中的缓存，读取速度慢点，但是什么都能存储到磁盘中，比之 Memory Cache 胜在容量和存储时效性上。

Push Cache

  Push Cache（推送缓存）是 HTTP/2 中的内容，当以上三种缓存都没有命中时，它才会被使用。只在会话中存在，缓存时间短

跨域

跨域问题的出现

  当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不一同，即跨域：

同源策略的限制

  1. 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
  2. 无法接触非同源网页的 DOM
  3. 无法向非同源地址发送 AJAX 请求

跨域解决方法

  1. 设置document.domain(此方案仅限主域相同，子域不同的跨域应用场景。)
  2. window.postMessage()
  3. JSONP（json with padding）
  4. CORS 是跨域资源分享
  5. websocket
  6. Nginx反向代理

浏览器常见攻击方式

XSS（跨站脚本攻击）

  XSS 攻击是指黑客往 HTML 文件中或者 DOM 中注入恶意脚本，从而在用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。

CSRF(跨站请求伪造)

  CSRF 攻击就是利用了用户的登
录状态，并通过第三方的站点来做一些坏事。而且CSRF 攻击并不需要将恶意代码注入用户的页面，仅仅是利用服务器的漏洞和用户的登录状态来实施攻击

浏览器加载资源顺序

  1. 最高级：html、css、font
  2. js、xhr
  3. 图片、语音、视频
  4. prefecth预加载的资源

浏览器输入url到页面展示出来的全过程

  1. 用户在浏览器中输入url地址
  2. 浏览器解析域名得到服务器ip地址
  3. TCP三次握手建立客户端和服务器的连接
  4. 客户端发送HTTP请求获取服务器端的静态资源
  5. 服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源
  6. TCP四次挥手关闭客户端和服务器的连接
  7. 浏览器解析文档资源并渲染页面

渲染引擎什么情况下才会为特定的节点创建新的图层

  1. 拥有层叠上下文属性的元素会被提升为单独的一层。
  2. 需要剪裁（clip）的地方也会被创建为图层。

定时器与requestAnimationFrame、requestIdleCallback

setTimeout

  执行该语句时，是立即把当前定时器代码推入事件队列，当定时器在事件列表中满足设置的时间值时将传入的函数加入任务队列，之后的执行就交给任务队列负责。但是如果此时任务队列不为空，则需等待，所以执行定时器内代码的时间可能会大于设置的时间

1
2
3
4
setTimeout(() => {
    console.log(1);
}, 0)
console.log(2); // 2, 1

setInterval

  以指定周期调用函数，而setInterval则是每次都精确的隔一段时间推入一个事件（但是，事件的执行时间不一定就不准确，还有可能是这个事件还没执行完毕，下一个事件就来了）.

requestAnimationFrame

  requestAnimationFrame是浏览器用于定时循环操作的一个接口，类似于setTimeout，主要用途是按帧对网页进行重绘。

requestIdleCallback()

  requestIdleCallback则会在每次屏幕刷新时，判断当前帧是否还有多余的时间，如果有，则会调用requestAnimationFrame的回调函数