静态资源优化

图片优化

图片格式以及使用场景

JPEG（Joint Photographic Experts Group）

  • JPEG是一种针对彩色照片而广泛使用的有损压缩图形格式
    • 介绍：栅格图形。常用文件扩展名为.jpg，也有.jpeg、.jpe。JPEG在互联网上常被应用于存储和传输照片。
    • 不适合：线条图形和文字、图标图形，因为他的压缩算法不太适合这些类型的图形，并且不支持透明度。
    • 非常适合：颜色丰富的照片、彩色图、大焦点图、通栏banner图；结构不规则图形。

PNG（Portable Network Graphics）

  • PNG是一种无损压缩的位图片形格式，支持索引、灰度、RGB三种颜色方案以及Alpha通道等特性。
    • 介绍：栅格图形。PNG最初是作为替代GIF来设计的，能够显示256色，文件比JPEG或者GIF大，但是PNG非常好的保留了图像质量。支持Alpha通道的半透明和透明特性。最高支持24位彩色图像（PNG-24）和8位灰度图像（PNG-8）。
    • 不适合：由于是无损存储，彩色图片体积太大，所以不适合。
    • 非常适合： 纯色、透明、线条绘图、图标；边缘清晰、有大块相同颜色区域；颜色数较少但需要半透明。

GIF（Graphics Interchange Format）

  • GIF是一种位图图形文件格式，以8位色（即256种颜色）重现真彩色图像，采用LZW压缩算法进行编码
    • 介绍：栅格图形。支持256色；尽至此完全透明和完全不透明；如果需要比较通用的动画，GIF是唯一选择
    • 不适合：每个像是只有8比特，不适合存储彩色图片
    • 非常适合：动画、图标

WebP

  • webp 是一种现代图像格式，可为图像提供无损压缩和有损压缩，这使得它非常灵活。
    • 介绍： 优秀算法能同时保证一定程序上的图像质量和比较小体积；可以插入多帧，实现动画效果；可以设置透明度；采用8位压缩算法。无损的webp比PNG小26%，有损的webp比JPEG小25-34%，比GIF有更好的动画。
    • 不适合： 最多处理256色，不适合彩色图片
    • 非常适合： 适用于图形和半透明图像

图片加载速度优化

  • 压缩PNG

  • 压缩JPG

  • 压缩GIF

  • 图片尺寸随网络环境变化

  • 响应式图片

    • JavaScript 绑定事件监测窗口大小

    • CSS 媒体查询

      1
      2
      3
      4
      5
      @media screen and (max-width:640px) {
          my_img {
              width: 640px;
          }
      }

    • img标签属性（html5 srcset）

      1
      2
      3
      <img srcset="img-320w.jpg,img-640w.jpg 2x, img-960w.jpg 3x"
       src="img-960w.jpg" alt="img"> 
       // x 描述符： 表示图像的设备像素比

  • 逐步加载图像

    • 使用同一占位符
    • LQIP（基于Base低质量图像占位符）
      • npm install lqip
    • SQIP (基于SVG图像占位符)
      • npm install sqip

  • 真的需要图片吗？

    • Web Font 代替图片
      • 小图标
    • 使用 Data URL 代替图片
      • base64
    • 采用Image spriting（雪碧图）

在服务器端进行图片自动化优化

图片服务器优化是可以在图片URL链接上增加不同特殊参数，服务器自动化生成不同格式、大小、质量、特殊能力等的图片。

处理方式

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

技术实现

  • 将图片压缩、图片裁剪、图片格式转换等本地工具部署至线上服务器集群上
  • 内部运营或外网用户上传至图片服务器后，服务器默认处理转换成多种图片格式，并推送至图片CDN服务器上
  • 图片服务器对外开放多个域名（如：images1.com、images2.com等）,同时对各个业务线开放不同的业务路径（如images1.com/homepage等）
  • 外网用户请求带特殊参数的图片URL时，图片服务器根据URL中不同的参数类型，从本地缓存中获取，或者实施对图片进行即时处理，并返回给客户端
  • https://m.360buying.com/test/s500*500_ifs/t2362/199/2707005502/100242/616257ce/56e66b21N7b8c2be8.jpg

精简HTML代码

优化HTML结构

  • 减少HTML嵌套
  • 减少DOM节点数
  • 减少物寓意代码（比如： <div class="clear"></div> 消除浮动）
  • 删除http桌和 https, 如果URL的协议头和当前页面的协议头一致，或者此URL在多个协议头都是可用的，则可用考虑删除协议头
  • 删除多余的空格、换行、缩进和不必要的注释
  • 省略冗余标签和属性
  • 使用相对路径URL

文件放在合适的位置

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

增强用户体验

  • 设置favicon.icon
  • 增加首屏必要的CSS和JS
    • 页面如果需要等待所的依赖的 JS 和 CSS 加载完成才显示，则在渲染过程中页面会一直显示空白，影响用户体验，建议增加首屏必要的 CSS 和 JS，比如页面框架背景图片（骨架屏幕）或者loading 图标，内联在 HTML 页面中。这样做，首屏能快速显示出来，相对减少用户对页面加载等待过程。（比如新浪微博 M 站页面框架）

页面渲染架构设计以及方案选型

原生APP优化

服务端优化

研发开发流程优化

全链路质量监控体系建设