介绍

TIP

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

前端性能优化

一、基础知识

1 进程和线程

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

2 浏览器的进程与线程

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

浏览器的多进程模型

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

浏览器的多线程内核

• 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等)

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

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

多线程

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

tomcat是多进程

单线程优点

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

HTTP缓存问题 https://www.cnblogs.com/ranyonsue/p/8918908.html

#

浏览器渲染原理

二、性能分析

性能解决

CSS书写顺序

建议遵循以下顺序：

// 1. 布局定位属性：(建议 display 第一个写，毕竟关系到模式)
display / position / float / clear / visibility / overflow

// 2. 自身属性：
width / height / margin / padding / border / background

// 3. 文本属性：
color / font / text-decoration / text-align / vertical-align / white- space / break-word

// 4. 其他属性（CSS3）：
content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient

/* 一个示例 */
.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

缩小样式计算范围

• 降低选择器的复杂性和深度
• 减少dom元素的数量和选择器的数量

缩小样式计算的范围并降低其复杂性

性能分析

Chrome DevTools 工具

Coverage 代码覆盖率

coverage使用

打开方式：More tools > Coverage