前端性能优化

Posted 2020-10-02 樱桃&丸子

一、图片

　　1.1 图片分类

　　　　1.1.1  jpg，全名JPEG。以24位颜色存储单个位图，颜色丰富，高质量压缩。

　　　　1.1.2  png，透明，半透明。

　　　　1.1.3  GIF ，通用动画，不支持半透明

　　　　1.1.4  Svg ， 矢量图（xml），可用于做地图

　　　　1.1.5  APNG和WebP 出现较晚，尚未被Web标准采纳

　　1.2 替代方案

　　　　用css效果（圆角，阴影等），css动画，字体图标替代图片。

　　1.3 css-Sprites(雪碧图/精灵图片）

　　　　1.3.1 减少图片请求次数

               1.3.2 制作工具

　　　　　　https://alloyteam.github.io/gopng/  腾讯

　　　　　　http://fis.baidu.com   百度

　　　　　　http://gruntjs.com   开发者

      1.4 响应式动态图片加载　

<picture>
    <source srcset="smaller.png" media="(max-width: 768px)">
    <source srcset="big.png" media="(max-width: 1000px)>
    <img srcdet="default.png">
</picture>

 

二、视频

　　2.1 播放器形式

　　　　video标签播放

　　　　flash播放器播放

      2.2 目前方案

　　　　flash+html5

　　2.3 浏览器播放器

　　　　Flowplayer：功能简单，使用方便  https://flowplayer.org/player/

　　　　VideoJs：功能强大，使用复杂  http://videojs.com/

　　2.4 视频优化解决问题

　　　　按照设计图做播放器

　　　　用户进来就能看到视频

　   2.5 自定义播放器