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等新图片格式来替代原始格式,这些具有更好的压缩比。

  • 相关阅读:
    宝藏 题解
    Xorequ 题解
    2020.12.26 模拟赛 题解
    数据结构 100 题 1~10 线段树
    关于模拟退火
    诗意狗 题解
    Keyboading 思路
    体育成绩统计/ Score
    【(抄的)题解】P5686 [CSP-SJX2019]和积和
    【笔记】简单博弈
  • 原文地址:https://www.cnblogs.com/liuhao-web/p/8706103.html
Copyright © 2011-2022 走看看