zoukankan      html  css  js  c++  java
  • 前端图片优化的方案

    1:将图片转换为base64编码字符串inline到页面或css中,适用于图片大小小于2KB,页面上引用图片总数不多的情况。

    2:将多个页面上用到的背景图片合并成一个大的图片在页面中引用 ,可以有效的较少请求个数。但是合并的大图也不要太大。

    3:对应图片比较多的页面,可以考虑通过js来实现图片的延迟加载,先让一部分图片优先请求下来,当用户滚动页面的时候进一步加载图片。

    4:css方式可以用来绘制相对简单的团来代替图片,一般使用before或者after伪元素来丰富图案的复杂度。使用css,svg,iconfont减少图片尺寸,请求数据少。

    5:不同终端对同一个图片需求不一样,可以根据终端加载不同的图片来节省没必要的流量 。

    6:默认情况下浏览器会对页面中和当前域名(正在浏览网页的域名)不在同一个域的域名进行预获取,并且缓存结果,这就是隐式的DNS Prefetch。如果想对页面中没有出现的域进行预获取,那么就要使用显示的DNS Prefetch了,也就是使用link标签。

    7:使用webp、bpg、sharpP等新图片格式来替代原始格式,这些具有更好的压缩比。

  • 相关阅读:
    11 2
    10 29
    10 22
    dp的本质
    笛卡尔树小结
    Gitlab 备份迁移恢复报错gtar: .: Cannot mkdir: No such file or directory
    升级Jenkins版本
    当linux中的所有指令突然不能使用的时候
    合并范围
    每股收益列报计算
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/8706103.html
Copyright © 2011-2022 走看看