5k字长文总结性能优化：构建你的前端知识体系

浏览器架构

第一阶段：单进程架构(2007年以前)

进程中的任意一个线程出问题会导致整个进程的崩溃，而插件线程容易崩溃；渲染引擎模块不稳定，复杂一点的JavaScript计算逻辑，比如无限循环，会独占整个线程，导致运行在该线程的其他模块难以执行，就会导致整个页面的崩溃；页面的内存泄露会使单进程变慢，一般来说，页面使用时间越长，内存占用越高，浏览器响应速度越慢。

第二阶段：多进程架构(2008年以后)

• 浏览器主进程，负责页面的展示、用户交互和子进程管理
• 渲染进程，负责HTML,CSS,Javascript的渲染与展示，默认一个chrome为一个tab页建立一个渲染进程，为了安全都运行在沙箱下
• 网络进程，负责页面的网络资源加载
• 插件进程，负责插件的运行，由于插件容易崩溃，需要独立一个插件进程隔离
• GPU进程，负责3D CSS(GPU加速)

虽然多进程架构解决了单进程的不安全、不流畅、不稳定问题，也带来了新问题

• 占用更多资源
• 体系架构更复杂

大纲：

1.图片优化2.DOM优化3.css优化4.JavaScript优化5.音视频优化6.静态文件优化7.打包构建优化8.页面渲染优化9.浏览器优化10.接口优化11.前端缓存图片优化

图片格式对比

1. jpg是有损压缩，png是无损压缩位图，文件比gif和jpg大，但是图像质量更好；gif是位图图形格式，采用LZW压缩算法进行编码，只支持完全透明和完全不透明图形；webp是一种现代图像格式，支持无损压缩和有损压缩

2. jpg不适合线条图形和文字、图标图形，压缩算法不支持这些图形；gif不适合存储彩色图片，因为只有8像素；webp图像质量好，体积小，采用8位压缩算法，不适合彩色图片

3. 使用场景，jpg适合颜色丰富图片，不规则的图形，彩色图大焦点图；png适合纯色透明线条绘图，图标；边缘清晰、有大块相同的颜色区域；gif适合图标，动画；webp适用于图形和半透明图像 

图体积优化

前端开发经常处理图片，图片体积过大会导致页面渲染速度减慢，有时甚至会出现白屏。对图片进行压缩处理，可以显著的提升页面加载速度，提升用户体验

常用的图片压缩工具：

• node-pngquant-native

用于png图片压缩

• jpegtran

用于jpeg图片压缩

• gifsicle

通过改变每帧的比例减少gif大小，同时可以使用透明达到更小的文件大小

• tinypng

简单、体积小，适用于多种图片格式

webpack压缩图片

• 使用CompressionWebpackPlugin

1.安装依赖

$ npm install compression-webpack-plugin --save-dev 

2.配置webpack

// webpack.prod.conf.js
const CompressionPlugin = require("compression-webpack-plugin");

module.exports = {plugins: [new CompressionPlugin({filename(pathData) {if (/.svg$/.test(pathData.filename)) {return "assets/svg/[path][base].gz";}return "assets/png/[path][base].gz";},})],
};