基础优化
zKing 2018-11-19 前端优化
# 资源合并与压缩
# 理解减少http请求数量和减少请求资源大小两个优化要点
深入理解http请求的过程是前端优化的核心
# 文件合并
- 不合并文件可能导致的问题
- 文件与文件之间有插入的上行请求，增加了 n-1 个网络- 延迟
- 受丢包问题影响更严重
- 经过代理服务器时可能会被断开
- 合并文件可能导致的问题
- 首屏渲染问题
- 缓存失效问题
- 合并文件的建议
- 公共库合并
- 不同页面的合并
- 见机行事，随机应变
- 方法
- 使用在线网站进行文件合并
- 使用对应的构建工具或者打包工具进行文件合并
# 开启 gzip
- http response 设置 Content-Encoding:gzip
- 在服务端将文件 gzip 压缩后返回
# 掌握压缩与合并的原理
# html 压缩
- 原理
- 压缩不显示的字符，包括空格，制表符，换行符等
- 可以压缩 html 注释
- 方法
- 使用在线网站进行压缩
- nodejs 提供了 html-minifier 工具
- 后端模板引擎渲染压缩
# css 压缩
- 原理
- 无效代码删除
- css 语义合并
- 方法
- 使用在线网站进行压缩
- 使用 html-minifier 对 html 中的 css 进行压缩
- 使用 clean-css 对 css 进行压缩
# js 的压缩和混乱
- 原理
- 无效字符的删除
- 剔除注释
- 代码语义的缩减和优化
- 代码保护
- 方法
- 使用在线网站进行压缩
- 使用 html-minifier 对 html 中的 js 进行压缩
- 使用 uglifyjs2 对 js 进行压缩
# 掌握通过在线网站和fis3两种实现压缩与合并的方法
- 不推荐在线网站压缩，比较繁琐，效率低下
- 推荐使用 gulp，webpack 和 fis3 等打包构建工具进行压缩
# 图片相关的优化
# 概念
png8/png24/png32 之间的区别，存储空间从小到大
- png8：2^8 色 + 支持透明
- png24：2^24 色 + 不支持透明
- png32：2^24 色 + 支持透明
每种图片格式都有自己的特点，针对不同的业务场景选择不同的图片格式很重要
# 常用的业务场景
- gif 实现动画场景
- jpg 有所压缩，压缩率高，不支持透明
- png 支持透明，浏览器兼容好
- webp 压缩程度更好，在 ios webview 有兼容性问题
- svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景
# 进行图片压缩
针对真实图片情况，舍弃一些相对无关紧要的色彩信息，可以通过进行 在线网站 图片压缩
# CSS 雪碧图
把你的网站上用到的一些图片整合到一张单独的图片中（现在已经很少用了）
- 优点：减少网站的 http 请求数量
- 缺点：整合图片比较大时，一次加载比较慢
- 方法：点击 这里
# inline-image
将图片的内容内嵌到 html 中
- 原理：使用 base64 方法将图片压缩成字符串
- 优点：减少网站的 http 请求数量
- 缺点：压缩后的体积为原图的三分之四
- 方法：使用webpack等构建工具打包压缩
# 使用矢量图
- 使用 svg 进行矢量图的绘制
- 使用 iconfont 或者 Font Awesome 解决 icon 问题
# 在安卓下使用 webp
- webp 是谷歌自己开发出来的一种图片格式，对于安卓系统支持较好。
- 点击 这里 可以将图片转换成 webp 格式