前端性能优化

图片相关

使用正确的图片格式

JPEG

它由联合图像专家组(Joint Photographic Experts Group)开发，它用有损压缩方式去除冗余的图像和彩色数据，在获得极高的压缩率的同时能展现十分丰富生动的图像，即可以用较少的磁盘空间得到较好的图片质量。
常用文件扩展名为.jpg，.jpeg，.jpe
不适合：线条图形和文字，图标图形。
非常适合：颜色丰富的照片，彩色图大焦点图，通栏banner；结构不规则的图形。

PNG

便携式网络图形(Portable Network Graphics)是一种无损压缩的位图片形格式。
特点：体积小，同时还支持真彩和灰度级图像的Alpha通道透明度。
不适合：彩色图像体积太大，不适合
适合：纯色，透明，图标

GIF

图形交换格式(Graphics Interchange Format)是一种位图图形格式，以8位色（256种颜色）重现真彩色的图像。
不适合：彩色图片
适合：动画，图标

WebP

由于目前互联网上传输的数据有65%都是图片，WebP就是出于减少数据量、加速网络传输的目的而开发的。WebP (发音"weppy")，是一种同时提供了有损压缩与无损压缩的图片文件格式，派生自图像编码格式VP8 。
WebP格式图像的体积要比JPEG格式图像小40%。
不适合：彩色图片
适合：图形和半透明图像

图片压缩

压缩png

node-pngquant-native

压缩jpg

jpegtran

压缩gif

gifsicle

图片预加载

1.html标签

<img src="xxxx" style="display:none" />

2.使用image对象

const image = new Image();
image.src="https://xxx.xxx.jpg";

3.使用preload,prefetch和preconnect

<link rel="preload" href="src/css/index.css" as="style" >
<link rel="prefetch" href="src/image/a.png" >
<link rel="dns-prefetch" href="https://xx.com">
<link rel="preconnect" href="https://xx.com" crossorigin>

图片尺寸动态加载

• 不同网络环境（wifi/3g/4g），加载不同的尺寸图片，在url中加参数后缀动态加载。
  eg: https://my.cdn.com/image/200_300/a.png
• js绑定事件检测窗口大小
• css媒体查询

@media screen and(max-width:640px) {
	this_image{ width:640px; }
}

• img标签属性

<img srcset="img-320.jpg,img-640w.jpg 2x, img-960w.jpg 3x" src="img-960w.jpg" alt="img" />

• 使用统一占位符
• 使用LQIP
• 使用SQIP

真的需要图片吗？

• Web Font代替图片
• 使用Data URI代替图片
• 使用雪碧图

HTML

精简代码

• 减少HTML的嵌套
• 减少DOM节点数
• 减少无语意代码
  eg:<div> class="clear"></div>清除浮动
• 删除多余的http或者https
• 删除多余的空格，换行符，缩进以及不必要的注释
• 使用相对路径的URL
• 省略冗余标签和属性

文件放在合适的位置

• css样式文件链接尽量放在页面头部
  CSS加载不会阻塞DOM Tree解析，但是会阻塞DOM Tree渲染，也会阻塞后面的js执行。
• JS引用放在HTML底部
  防止JS的加载、解析、执行对阻塞页面后续元素的正常渲染。

首屏资源加载

首屏仅加载必要的CSS和JS

CSS

提升CSS渲染性能

• 谨慎使用expensive属性
  eg: :nth-child以及position:fixed定位等。
• 尽量减少样式层级数
  eg:div ul li span { color: red;}
• 尽量避免使用占用过多CPU的内存的属性
  eg:text-indnt: -99999px
• 尽量避免使用耗电大的属性
  eg: css3 3d transforms、css3 transtitions、 opacity

适当的CSS选择器的使用

• 尽量避免使用css表达式
  eg: background-color:expression((new Date()).getHours()%2?'#fff':'#000');
• 尽量避免使用通配符选择器
  eg:body > a{font-size:32px}
• 尽量避免类正则的属性选择器
  eg: *= |= ^= $=

提升CSS文件加载性能

• 使用外链的CSS
• 尽量避免使用 @import

精简CSS代码

• 使用缩写语句
• 减少不必要的0
• 删除不必要的单位，px
• 删除过多的分号
• 删除空格和注释

动画相关

• 尽量避免同时动画
• 延迟动画的初始化
• 结合SVG

减少回流重绘

• 避免过多样式嵌套
• 避免使用CSS表达式
• 使用绝对定位，可以让动画元素脱离文档流
• 避免使用table布局
• 尽量不适用float布局
• 图片最好设置好width和height
• 避免频繁设置样式，最好把style属性设置完成后，一次性更改

JS相关

JS变量和函数优化

• 尽量使用id选择器
• 避免使用eval
• 使用事件节流函数
• 事件委托

js动画优化

• 减少JS动画，尽量使用css3动画
• 尽量使用canvas动画
• 合理使用raf动画代替setTimeout、setInterval

合理使用缓存

• 缓存dom对象
• 缓存列表长度
• 使用可缓存的ajax

DOM编程优化

• 使用fragment合并dom操作
• 使用流行框架react、vue等VDom

静态文件压缩

• html–> html-minifier
• css–>clean-css
• js–>uglify-js

Webpack

建议使用新版本

其他

• 按需加载
• 资源接口上CDN
• 资源缓存
• 减少http请求数
• 减少不必要的cookie
• gzip