前端性能优化

此知识内容是看一个大佬的视频，记录下的。

性能优化原则

要先找到最大的性能瓶颈
先防止恶化，然后才是优化
要找到性能问题的根由
不要做过度反常态的优化
要考虑各种情况下的性能
不要做过早不成熟的优化
一切以数据说话
不要做表面的肤浅优化

常用优化措施

一、图片优化

1、消除不必要的图片

考虑是否可用CSS实现
考虑是否可用SVG
用Web Font代替

2、减少不必要的图片请求

把小图片转成base64
应用CSS Script

3、根据场景选择合适的格式

JPEG ：有损压缩图形格式。栅格图形
不合适：线条图形和文字、图标图形（与其压缩算法有关）；不支持透明度
合适：颜色丰富的照片、彩色图大焦点图、通栏 banner 图；结构不规则的图形。

PNG：是一种无损压缩的位图图形格式，支持索引、灰度、RGB 三种颜色及Alpha通道。属于栅格图形
不适合：颜色丰富图片（无损存储，颜色丰富的图像体积太大。
合适：纯色、透明、线条绘图，图标；边条清晰、有大块相同颜色区域；颜色数较少但需要半透明。

GIF：位图图形文件格式，支持255色，采用LZW压缩算法进行编码。属于栅格图形；仅支持完全透明和完全不透明
不合适：存储色彩丰富的图片（每个像素只有8比特）
合适：动画，图标。动画图片格式

WebP：现代图像格式，可为图像提供无损压缩和有损压缩，这样更加灵活。可实现动画效果；可设置透明度；无损的WebP 比PNG 小26%，有损的WebP比JPEG小23～34% ，比GIF 有更好的动画
不合适：最多处理256色齐，不适合彩色图片
合适：适用于图形和半透明图像

4、压缩

在线图片压缩工具：
tinypng: https://tinypng.com
docsmall: https://docsmall.com/gif-compress
img.top: https://img.top

压缩JPEG：
工具：Jpegtran（http://jpegclub.org/jpegtran )，跨平台，有Linux、Mac、Windows的解决方案
安装方法：npm install -g jpegtran
使用方法：jpegtran -copy none - optimize - outfile plaid-shirt- optimized.jpg plaid-shirt.jpg

压缩PNG：
工具：node-pngquant- native （https://www.nomes.com/package/node-pngquant-native ），跨平台，压缩比高，压缩png24非常好
安装方法：npm install node-pngquant-native

压缩GIF：
工具：Gifsicle（ http://www.lcdf.org/gif siclel) 通过改变没帧比例，减小gif文件大小，同时可以使用透明来达到更小的文件大小。注意优先级别设置不小于2，若设置为1的话基本不压缩。加上 --crop–transparency 参数会将透明部分截去
安装方法：npm install gifsicle
使用方式：gifsicle --optimize=3 -o plaid-shirt- optimized.gif plaid-shirt.gif

5、加载的过程中使用占位图

使用默认的占位图
使用根据图片生成的占位符

低质量图像占位符（模糊图片）：
安装：npm install lqip
使用：
const lqip = require(‘lqip’);
const file = ‘./plaid-shirt.jpg’;
lqip.base64(file).then(res=> {console.log(res
)};
有webpack的loader：https://github.com/zouhir/lqip-loader

6、图片尺寸随环境而变化

Javascript 绑定事件检测窗口大小
CSS 媒体查询
img标签属性srcset属性设置几倍图格式解决兼容

7、服务器根据参数自动化优化图片

可以在图片URL链接上增加不同特色参数，服务器自动化生成不通格式、大小、质量的图片

处理方式：
图片裁剪，包括按长边、短边、填充、拉伸等缩放
图片格式转换，包括支持JPG，GIF，PNG，Webp等，支持不同的图片压缩率
图片处理，包括添加图片水印、高斯模糊，重心处理，裁剪边框等
AI能力，包括鉴黄以及智能抠图、智能排版、智能配色、智能合成等AI功能。

二、HTML的优化

1、HTML 精简

减少HTML的嵌套
减少DOM节点数
删除http或者https如果URL的协议头和当前页面的协议头一致的，或者此URL在多个协议头都是可用的，则可以考虑删除协议头
使用相对路径的URL
删除多余的空格、换行符我、缩进和不必要的注释，减少无语义代码
省略冗余标签和属性

2、引用文件顺序的优化

CSS 样式文件链接尽量放在页面头部（CSS加载不会阻塞DOM tree解析，但会阻塞DOM Tree渲染，也会阻塞后面JS执行。放在body元素之前，可以确保在文档部分中解析了所有CSS样式 内联和外联，从而减少了浏览器必须重排文档的次数。如果放置在页面底部，就要等待后一个CSS文件下载完成，此时会出现“白屏”，影响用户体验。）

JS 引用放在HTML底部（防止JS的加载、解析、执行对阻塞页面后续元素的正常渲染）

3、体验的优化

设置favicon.ico，增强用户体验：
网站如果不设置favicon.ico，控制台会报错，另外页面加载过程中也没有图标loading过程，同时也不利于记忆网站品牌

增加首屏必要的CSS和JS：
页面若需要等待所依赖的JS和CSS加载完成才显示，则在渲染过程中页面会一直空白，影响用户体验，建议增加首屏必要的CSS和JS，比如页面框架背景图片或者loading图标，内联在HTML页面中。这样做，首屏能快速显示出来，相对减少用户对页面加载等待过程。

三、CSS的优化

1、CSS选择器的使用

尽量避免使用CSS表达式：
background-color:expression((new Date().Gethours0)%2?#FFF":"#000")
尽量避免使用通配选择器（顺序从右向左查找）
body > a {font-weight:blod;}
尽量避免类正则的属性选择器：
*=、｜=、^=、$=

2、CSS样式的引入

使用 标签而不是@import（会阻塞其他资源）
谨慎使用expensive属性，如：nth-child ；position：fixed定位
尽量减少样式层级数，如div ul li span i ｛color：blue｝
尽量避免使用占用过多CPU和内存属性，如text- indent：-9999px
尽量避免使用耗电量大的属性，如CSS3 3D transforms CSS3 transitions、Opacity

3、精简CSS代码

使用属性缩写语句
删除不必要的零
删除不必要的单位，如0px的px
删除过多分号
删除空格和注释
尽量减少样式表的大小

4、CSS动画优化

尽量避免同时出现多个动画
延迟动画初始化（先将样式加载完）
结合SVG

5、减少CSS引起的回流和重绘

避免多样式嵌套
避免使用CSS表达式
使用绝对定位，让动画元素脱离文档流
避免table布局
尽量不使用float布局
图片最好设置好width和height
尽量简化浏览器不必要的任务，减少页面重新布局
使用Viewport 设置屏幕缩放级别
避免频繁设置样式，最好把新style属性设置完成后，进行一次更改
避免使用引起回流/重绘的属性，最好把相应变了缓存起来

四、JS的优化

1、JS变量和函数优化

尽量使用id选择器
尽量避免使用eval
JS函数尽可能保持简洁
使用事件节流函数
使用事件委托

2、JS动画优化

避免添加大量JS动画
尽量使用CSS3动画
尽量使用Canvas动画
合理使用requestnimationframe 动画代替 settimeout、setinterval

3、善于使用缓存

合理缓存DOM对象
缓存列表长度
使用可缓存的Ajax（catch）

4、本地缓存的使用

Cookie（请求头会携带cookie会影响网络请求性能）
sessionStorage
LocalStorage
IndexedDb

5、JS减少回流、重构的优化

减少回流：为了减少回流发生次数，避免频繁或操作DOM，可合并多次并对DOM修改（DOM操作优化：可使用fragment，尽量避免再页面DOM Tree里面直接操作），然后一次性批量处理
控制绘制过程绘制区域：绘制过程开销比较大的属性设置应该尽量避免减少使用减少绘制区域范围
避免使用query SelectorAll或getElementByTagName方法查找某一个节点会非常耗时间。元素绑定事件冒泡和事件捕获的执行也会相对耗时间

五、加载策略优化

1、懒加载

2、预加载（使用预加载让浏览器预先加载某些资源，作缓存等需要时就直接去浏览器缓存取，不用去服务器再次请求）dns处理：rel= dns- prefetch

3、预渲染（提前页面中渲染组件，并不是直接在页面中显示，而是渲染后先隐藏起来，用的时候直接展示）

4、按需加载

常规按需加载（如原生JS、JQ）
不同App按需加载（如JS-SDK脚步文件）
不同设备按需加载（如PC和HTML5样式文件）
不同分辨率按需加载（CSS Media Query）

性能评估标准

用户响应（从点击到绘制完成小于100ms）例如：用户点击按钮
动画（每帧工作小于等于10ms，js绘制完成小于16ms）用户滚动页面、拖拽手指
空闲时间（将主线程JS工作分成不大于50ms）用户没有与页面操作，但主线程应足够用于处理下一个用户输入
加载资源（页面可以在1000ms内就绪）用户加载页面并看得关键路径内容

优化关键

白屏时间（浏览器开始显示内容的时间，一般认为浏览器开始渲染body或解析完head标签时刻就是页面白屏结束的时间点）
计算白屏时间：performance.timing.responseStart
performance.timing.navigationStart
优化白屏时间就是优化用户体验

首屏时间（优化html和css结构，合理放置js）
页面整体加载时间（css、js、图片全部加载完时间）

计算：
performance.timing.loadEventEnd
performance.timing.navigationSart
传统采用window.onload记录时间戳

页面可交互时间（用户可进行正常点击、输入等操作，默认可统计domready时间）
功能交互响应时间

常用工具

Yslow
Pagespeed Insights
WebPage Test
Chrome DevTools
PhantomJS
Jsperf