Web 性能实战

1.优化压缩CSS/JS/HTML  CSS,JS,HTML写法优化  

2.优化压缩图片（JPG,PNG,SVG,GIF），字体（字体压缩，font-face次联，font-display,unicode-range）   jpeg优化插件

3.页面懒加载

4.页面渲染性能及渲染机制（重构、回流、重排 ）
   渲染流程->  
   解析HTML以创建DOM，
   解析CSS以创建CSSOM
   布局元素（DOM+CSSOM 树组合创建渲染树，然后执行布局，应用CSS规则，创建UI）
   绘制页面

5.网络请求 
  a.排队请求
  b.DNS查找
  c.连接设置
  d.SSL握手
Accept-Encoding: gzip, deflate
http 请求压缩 gzip, compress, 以及deflate编码都是无损压缩算法，用于减少传输报文的大小，不会导致信息损失。 其中gzip通常效率最高， 使用最为广泛。

6.缓存
   磁盘缓存，内存缓存
   当用户量体量较大时，不方便使用清空当前浏览器历史缓存的方式
   如何更新当前css样式 css.min.css?v=1/2 相当于请求路径更改，重新访问，CDN资源托管

google Chrome - Performance面板

   蓝色：加载中，网路相关事件，http请求，http解析，css解析，图像解码等
   黄色：执行脚本，JavaScript事件，包括特定DOM的活动，垃圾收集等
   紫色：渲染，与页面渲染相关的所有事件，包括CS应用于网页HTML的活动，重新渲染等，以及JavaScript触发的页面HTML更高
   绿色：绘制，将布局绘制到屏幕上相关的时间，例如层合成和光栅化

jank帧是指交互和动画效果卡顿，或未能顺利渲染。
   单一jank帧不会造成太大麻烦，但是一旦堆积帧效率下降。
   原因：脚本触发频繁，加载事件花费事件太长，以及任何其他导致渲染和绘制操作效率低下的活动造成。

解决：

   图片使用 TinyPNG 进行图像压缩 可能压缩 20~60%