当前播放: 03 | 图片优化：如何为不同格式的图片选择合适的应用场景？
00:00 / 00:00
高清
- 高清
1.0x
- 2.0x
- 1.5x
- 1.25x
- 1.0x
- 0.5x
网页全屏
全屏
00:00
付费课程，可试看
课程目录
第一章：课程背景介绍 (2讲)
01 | 课程介绍
免费
02 | 内容综述
免费
第二章：静态资源优化 (15讲)
03 | 图片优化：如何为不同格式的图片选择合适的应用场景？
免费
04 | 图⽚优化：怎样让图片加载得更快？
免费
05 | 图片优化：在服务器端进行图片自动优化的原理是什么？
免费
06 | HTML：怎样精简优化HTML的代码结构？
07 | CSS：CSS的优化应该遵循哪些原则？
08 | JavaScript：如何提升JavaScript的执行效率？
09 | JavaScript ：如何对JavaScript的缓存进行优化？
10 | JavaScript：如何选择合适的模块化加载方案？
11 | 怎样才能减少浏览器的回流和重绘？
12 | DOM编程优化：怎样控制DOM大小并简化DOM操作？
13 | 静态文件：有哪些常用的压缩工具？
14 | 静态文件：怎样打包才更合理？
15 | 静态文件：版本号更新，你应该遵循哪些策略？
16 | 构建工具：常用的前端构建工具有哪些？如何选型？
17 | 打包优化：提升webpack打包效率的6个小技巧
第三章：页面渲染架构设计与性能优化 (13讲)
18 | 浏览器渲染：你是否清楚浏览器的渲染过程？
19 | 页面渲染：主流的页面渲染技术架构和方案有哪些？
20 | 后端同步渲染：JSP是如何同步渲染出页面的？
21 | 页面静态化：动态页面静态化要如何实施？
22 | 前后端分离：如何正确理解和实现前后端分离？
23 | 单页面应用：什么情况下该选择单页面应用？怎样实现？
24 | BigPipe：什么是BigPipe？你了解它的工作原理吗？
25 | 同构直出：有哪些主流的同构直出方案？如何选择？
26 | PWA：如何做到媲美原生应用的体验？
27 | 页面渲染：怎样选择合理的技术方案？
28 | 页面加载：加载策略都有哪些？又该如何选型？
29 | 接口优化：如何对接口调用进行优化？
30 | 接口优化：如何对接口缓存进行优化？
03 | 图片优化：如何为不同格式的图片选择合适的应用场景？
刘威
前端架构师
62讲 约600分钟1708
订阅¥129
5
本节摘要
登录 后留言
精选留言(1)
拖鞋gif 与 svg动画哪个更好呢作者回复: 您好，具体来讲：
维护成本上，SVG可以通过代码直接修改，GIF动画需要用图像编辑器对每一帧进行修正；
体积大小上，SVG相对GIF更小；
内容上，SVG是矢量图片，可以自由缩放，GIF和PNG、JPEG一样，放大后图片质量就下降了；
浏览器支持方面，SVG在低版本浏览器支持不好，GIF支持所有浏览器；
所以，总体建议，运营用的动画Banner图片可以考虑GIF，研发负责的动画可尽情选用SVG。2019-12-11 1
收起评论
看过的人还看
