《繁星网的前端性能优化之路-final@白伟民》.pdf

繁星网的前端性能优化之路 ——白伟民 5s 2s 为什么要进行前端性能优化？ 被各种骂 • 用户A ：你们网站好卡啊！！！ • 用户B ：卡出翔了，什么破网站！！！ • 用户C ：我艹，卡死了，怎么玩！！！ • 用户D ：繁星网天天来大姨妈！！！ • 产品A ：你看人家XXX ，一点儿都不卡 • 产品B ：我也做过网页开发，你不行让我来吧 • 领导：想当年我们怎样怎样，如何如何，优化吧 • 老板：繁星网又卡了，啥时候能不卡？？？ 如何进行前端性能优化？ “卡”之解读 服务端 网络 客户端 “卡”之对付——服务端 没事少烦我 “卡”之对付——繁星网 • 接口按需请求 • 接口走cdn • 静态资源缓存(移动端走离线存储) • 静态资源走cdn “卡”之对付——网络 省着点儿用！ “卡”之对付——繁星网 • 背景图合并 • Js文件选择性合并 • Css文件选择性合并 • 图片按需加载 • 业务功能模块按需加载 • Css压缩 • Js压缩 • 图片控制大小 • Gzip开启 • 合理使用静态资源域名 “卡”之对付——客户端 像我一样持家！ “卡”之对付——繁星网 加载 聊天 视频 动画 “卡”之对付——加载 • Js文件——尾部、异步 • 非核心模块——异步 • 合理分配域名 “卡”之对付——聊天 CPU是我的，内 存也是我的! “卡”之对付——聊天 • 聊天消息如何清理？ • 何时清理？如何清理？ “卡”之对付——聊天 “卡”之对付——视频 快点出来!再快点！ “卡”之对付——视频 • 视频加载提前至合理位置 • 主动延后一部分模块加载，给视频让路 • 直接使用object标签，而非js 输出 “卡”之对付——动画 “卡”之对付——动画 • 降低礼物资源本身对资源的消耗水平 • 适当使用canvas实现礼物，代替flash • 合理控制礼物展示与消失 如何证明前端性能优化成果？