性能优化经验

TIP

本篇来搜集和整理下网页的性能优化知识

前端性能优化

一、基础知识-进程和线程

1 进程和线程

• 进程(process) 和 线程 (thread)
• 进程是操作系统资源分配的最小单位(基本单位)，线程是程序执行的最小单位
• 一个进程包含一个或多个线程
• 进程之间是相互独立的，各自处理相关事务

2 浏览器的进程与线程

• 浏览器是采用了多进程模型组成的，目的是为了提升浏览器的稳定性和安全性
• 浏览器每一个页卡都是一个单独的进程，保持互不影响
• 浏览器的内核为多线程

3 浏览器的多进程模型

• 浏览器主进程(一个)
  1. 主控进程，负责协调其他各个进程
  2. 负责界面显示
  3. 与用户交互，如前进、后退等
  4. 提供存储等
• 渲染进程(一个 tab 一个，运行模式为沙箱环境)
  1. 页面渲染
  2. 脚本执行
  3. 事件处理等
• 插件进程(一类插件一个)
  1. 负责管理 chrome 中安装的插件运行，因插件易崩溃，需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响
• GPU 进程(一个)
  1. 绘制 UI、3D 绘制
• 网络进程(一个)
  1. 负责页面的网络资源加载(HTML、CSS,、JS 等)

4 浏览器的多线程内核

• GUI 渲染线程，负责渲染浏览器界面
  1. 解析 html 和 css 》 构建 DOM 树和 Render 树 》 布局和绘制
  2. 处理重绘(Repaint)和回流(Reflow)
• JS 引擎线程，也称 JS 内核，负责处理 JavaScript 脚本程序，(例如 V8 引擎)
  1. 解析 JavaScript 脚本程序，运行代码
  2. 当没有任务的时候，会一直等待任务(宏任务和微任务)到来，然后处理
  3. 一个 Tab 页的渲染进程中无论什么时候都只有一个 JS 线程在运行 JS 程序，即 JS 单线程模式
• 事件触发线程
  1. 负责管理 chrome 中安装的插件运行，因插件易崩溃，需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响
• 定时器触发线程
  1. 绘制 UI、3D 绘制
• 异步 HTTP 请求线程
  1. 负责页面的网络资源加载(HTML、CSS,、JS 等)

5 GUI 渲染线程与 JS 引擎线程是互斥的

• 由于 JavaScript 可以操纵 DOM，为了保证页面渲染的元素 渲染线程 如果在修改这些元素属性同时渲染界面（即 JS 线程和 UI 线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。 这种互斥关系就是为了防止渲染出现不可预期的结果 当 JS 引擎执行时 GUI 线程会被挂起，GUI 更新则会被保存在一个队列中等到 JS 引擎线程空闲时立即被执行 由此也可推断，JS 如果执行时间过长就会阻塞页面

6 浏览器中的（5 个）进程

• 浏览器进程：负责界面显示、用户交互、子进程管理，提供存储等。
• 渲染进程：每个也卡都有单独的渲染进程，核心用于渲染页面。
• 网络进程：主要处理网络资源加载(HTML、CSS,、JS等)
• GPU 进程：3d绘制,提高性能
• 插件进程： chrome 中安装的一些插件

7 多线程

• 优点：可以同时处理多个请求， 适合 cpu 密集型 （运算）
• 缺点：如果多个线程操作同一个资源得上锁
• 群发短信 多线程并不是一起去干一些事，而是靠的是切换上下文 （浪费一些性能）

tomcat 是多进程

8 单线程优点

• 不需要开启多个线程 节省资源，不适合做大量 cpu 操作。 开启子进程