前端全链路性能优化

一、静态资源优化

1、图片的优化

1.1 图片格式及应用场景

• jpeg

        是一种针对彩色照片而广泛使用的有损压缩图形格式。

        应用于存储和传输照片。

        不适合：线条图形和文字、图标图形，不支持透明度。

        适合 ：颜色丰富的照片、彩色图、通栏banner图；结构不规则的图形。

        压缩:

npm i -g jpegtran

jpegtran -copy none -optimize -outfile out.jpg in.jpg

      

• png

        一种无损压缩的位图图形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。

        最高支持24位彩色图像（PNG-24）和8位灰度图像（PNG-8）

        不适合：由于是无损存储，彩色图像体积太大，所以不适合

        适合：纯色、透明、线条绘图，图标；边缘清晰、有大块相同颜色区域；颜色数较少但需要半透明。

压缩：

npm i node-pngqueant-native

• GIF

        一种位图图形文件格式，以8位色（256中颜色）重现真彩色的图片，采用LZW压缩算法进行编码。仅支持完全透明和完全不透明；如果需要比较通用的动画，gif是唯一的选择。

        不适合：每个像素只有8比特，不适合存储彩色图片。

        适合：动画、图标。

        压缩： gifsicle

• webp

1.2 如何让图片加载更快？

1.3 在服务器端进行图片自动优化的原理

1.4 真的需要图片么？

• web Font 代替图片
• 使用Data URI代替图片

• 采用Image spriting(雪碧图)

2、精简HTML的代码结构

• 减少HTML的嵌套
• 减少DOM节点数

• 减少无语义代码（比如 <div class='clear'></div>清除浮动）
• 删除HTTP或者HTTPS，如果URL的协议头和当前页面的协议头一致的，或者此URL在多个协议头都是可用的，则可以考虑删除协议头

• 删除多余的空格、换行符、缩进、不必要的注释
• 省略冗余标签和属性

• 使用相对路径的URL
• 文件放在合适位置

     css样式链接放在页面头部

css加载不会阻塞DOM解析，但会阻塞DOM tree渲染，也会阻塞后面JS执行。任何body元素之前，可以确保在文档部分中解析了所有css样式（内联和外联），从而减少了浏览器必须重排文档的次数。如果放在页面底部，就会等待最后一个css文件下载完，此时会出现‘白屏’。

JS放在HTML底部

防止js的加载、解析、执行对阻塞页面后续元素的渲染。

• 增强用户体验

设置favicon.ico 

如果不设置网站控制台会报错，页面加载过程中也没有图标loading的过程，同时也不利于记忆网站的品牌。

增加首屏必要的css和JS

3、CSS的优化遵循的规则

3.1 提升CSS渲染性能

• 谨慎使用expensive属性

如 nth-child 伪类 position：fiexd等

• 尽量减少样式层级数
• 尽量避免使用占用过多CPU和内存的属性

如 text-indent:-99999px

• 尽量避免使用耗电量大的属性

如css3 3D transforms \css3 transitions/opacity

3.2 合理使用css选择器

• 尽量避免css表达式
• 尽量避免使用通配符选择器

• 尽量避免类正则的属性选择器 ^= $= |= 

3.3 提升css文件加载性能

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

3.4 精简css代码

• 使用缩写语句
• 删除不必要的0

• 删除不必要的单位 如px
• 删除过多的分号

• 删除空格和注释
• 尽量减少样式表的大小

3.5 合理使用web fonts