前端性能优化

最新推荐文章于 2025-09-12 14:39:04 发布

转载最新推荐文章于 2025-09-12 14:39:04 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ytwanzi/p/7327057.html

文章标签：

#前端 #人工智能 #ViewUI

本文介绍了网站中图片和视频的优化方法，包括不同格式图片的特点及应用场合、雪碧图的使用来减少请求次数，以及响应式动态图片加载技术。同时，文章还探讨了视频播放器的选择与自定义方案。

一、图片

　　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 自定义播放器

转载于:https://www.cnblogs.com/ytwanzi/p/7327057.html