- 动画不能低于60帧。ui反馈不能低于100ms。
- ui反馈不必追求最快，可故意拖延到100ms。并利用这个时间做其他事。
- 尽量增加线程空闲时间，以快速反馈。
- ui反馈优先级最高，交互期间尽量停下其他任务。
- 页面要在五秒内变得可交互。
- 评估所有依赖是否必要，权衡利弊。
- 依赖的下载路径是否可靠，不可用时候是否会阻碍整个页面。
- 依赖是否充分优化了。
- 产品设计时候就需要抛弃浪费带宽的设计。
- 浏览器可以分批渲染dom tree，但必须获取所有css后才能渲染css。
- 算法、工具、压缩资源。
- 服务器配置gzip。
- 去掉不必要的图片。
- 尽量使用CSS3。
- 用艺术字体，而不是图片。
- 减少图片可能意味着更多的html、js、css。但意味深长的图片能节省很多描述文字。
- 多种分辨率的位图供不同页面大小使用。
- 手机DPI越来越高，导致图片必须有更高像素，才能显示清楚。
- 推荐SVG优化工具:svgo
- 一个像素需要四个字节（RGBA）
- 即便传输过程有压缩，浏览器显示后，仍会占用图片实际所需的内存。
- 使用压缩率更高的图片格式（用更少的字节代表颜色，但可使用颜色减少）。
- 图片分辨率要尽可能小，避免图片分辨率大于显示分辨率。
- 额外提供WebP和JPEG XR，提供更好体验。
| 格式 | 透明 | 动画 | 兼容性 |
|---|---|---|---|
| GIF | Yes | Yes | All |
| PNG | Yes | No | All |
| JPEG | No | No | All |
| JPEG | XR | Yes | Yes |
| WebP | Yes | Yes | Chrome, Opera, Android |
- 如何选择图片。
- 压缩工具。
| Tool | Description |
|---|---|
| gifsicle | create and optimize GIF images |
| jpegtran | optimize JPEG images |
| optipng | lossless PNG optimization |
| pngquant | lossy PNG optimization |
- gif体积大，可用视频、H.264或WebM（Chrome，Firefox，Opera支持）代替。
- baseline jpeg 从上到下显示。
- progressive jpeg. 从模糊到清楚显示。
- 如果没有指明
的宽高，当图片加载后会导致页面重新布局reflow；
- 解码和缩放图片很消耗计算资源。
- Image spriting, 把许多小图片合成一个图片，节约了请求次数。但是修改其中一个图标，回导致所有图标缓存失效。HTTP/2里，一个链接内可以发起多个请求，便无需使用Image spriting
- 图片懒加载库 https://github.com/aFarkas/lazysizes
- display:none时，浏览器是否请求图片。https://jakearchibald.github.io/request-quest/
- 可以让浏览器提前请求图片，并不阻塞。但会是其他资源的优先级下降
- 将 WOFF 2.0 变体提供给支持它的浏览器。
- 将 WOFF 变体提供给大多数浏览器。
- 将 TTF 变体提供给旧 Android（4.4 版以下）浏览器。
- 将 EOT 变体提供给旧 IE（IE9 版以下）浏览器。
- 某些字体格式包含附加的元数据，如字体提示和字距调整信息，这些信息在某些平台上可能并非必要信息，这样便可进一步优化文件大小
- @font-face 中unicode-range可以制定字符范围，用来避免下载不需要的语言的字符。
- CSSOM构建完成后才会请求字体文件。
- Safari 会在字体下载完成之前延迟文本渲染。
- Chrome 和 Firefox 会将字体渲染暂停最多 3 秒，之后他们会使用一种后备字体。并且字体下载完成后，他们会使用下载的字体重新渲染一次文本。
- IE 会在请求字体尚不可用时立即使用后备字体进行渲染，然后在字体下载完成后进行重新渲染
- js的FontFace对象可以定义和控制CSS字体。