笔记:刘威(putaoshu)的前端全链路性能优化实战
1、图片
JPEG:适合颜色丰富的照片、彩色图大焦点图、通栏banner图、结构不规则的图形;不适合线条图像、不支持透明度等(常用:照片)
PNG:适合纯色、透明、线条绘图、图标;边缘清晰、有大块相同颜色区域;颜色数较少但需要半透明;由于是无损存储,彩色图像体积太大(常用:图标)
GIF:适合动画、会动的图标。只能完全透明或完全不透明。
webp:适用于图形和半透明图像。不适合彩色图片。比GIF有更好的动画,可以设置透明度。无损的webp比PNG小,有损的webp比JPEG小。
(不确定是不是webp还未支持ie,目前看到jd首页给ie返回的是jpg图片,给chrome返回了webp格式的图片)
2、压缩工具
(1)压缩png:node-pngquant-native
可以npm install直接安装。
使用:pngquant.option({}).compress(buffer);
(2)压缩jpg:jpegtran
使用:jepgtran -copy none -optimize -outfile out.jpg in.jpg
(3)压缩gif:Gifsicle,通过改变每帧比例,同时可以使用透明来达到更小的文件大小
使用:优化基本设置为不小于2. gitsicle --optimize=3 -o out.gif in.gif
3、图片尺寸随网络环境变化
通过在图片URL后缀加不同参数来控制不同网络环境下加载不同尺寸和像素的图片
4、响应式图片
不同窗口大小、不同设备上展示不同大小的图片
(1)JavaScript绑定事件检测窗口大小
(2)CSS媒体查询
@media screen and (max-640px){
my_image{640px;} }
(3)img标签属性
<img srcset='img-320w.jpg,img-640w.jpg 2x,img-960w.jpg 3x',
src="img-960w.jpg" alt="img">
5、逐步加载图像
(1)统一使用占位符
(2)使用LQIP:低质量图片占位,可通过npm install lqip安装
(3)使用SQIP:基于svg的图像占位符,可通过npm install sqip安装
6、真的需要图片吗?
(1)web font代替图片
(2)使用data url代替图片
(3)采用image sprite(雪碧图)
7、图片服务器自动优化
图片服务器自动化优化是可以在图片url上增加不同特殊参数,服务器自动化生产不同格式、大小、质量的图片
处理方法:图片裁剪(剪切、填充、拉伸、缩放等)、图片格式转换、图片处理(加水印、高斯模糊、重心处理等)、AI能力(鉴黄、智能抠图、智能排版等)
8、精简HTML代码
(1)减少HTML的嵌套
(2)减少DOM节点数
(3)减少无语义代码
(4)删除http或者https。如果url的协议头和当前页面的协议头一致,或多协议头都可用,就可以考虑删除协议头
(5)删除多余的空格、换行、缩进和不必要的注释
(6)省略冗余标签和属性
(7)使用相对路径的URL
(8)文件放在合适位置
a)css样式文件链接尽量放在页面头部
b)js引用放在html,防止阻塞渲染
c)设置favicon.ico:防止控制台报错,且出于用户观感考虑
d)增加首屏必要的css和js:出于用户体验考虑
9、css的优化:
1)提升css渲染性能
谨慎使用expensive属性(如:nth-child伪类、position:fixed定位);尽量减少样式层级数;尽量避免使用占用过多CPU和内存的属性(如text-indnt:-9999px);尽量避免使用耗电量大的属性(CSS3 3D transforms、CSS3 transitions、Opacity);
尽量避免使用CSS表达式;尽量避免使用通配符选择器;尽量避免类正则的属性选择器;
2)提升CSS文件加载性能
使用外链的css;尽量避免使用@import
3)精简css代码
a)使用缩写语句
b)删除不必要的零、不必要的单位、过多的分号;
c)删除空格和注释
d)尽量减少样式表的大小
4)合理使用Web Fonts
a)将字体布署CDN上
b)将字体以base64形式保存在css中并通过localstorage进行缓存
c)Google字体库使用国内托管服务
5)css动画优化
a)尽量避免同时动画
b)延迟动画初始化
c)结合SVG