性能优化

性能优化

优化的目的是让用户有“快”的感受，那如何让用户感受到快呢？

• 加载速度真的很快，用户打开输入网址按下回车立即看到了页面

• 加载速度并没有变快，但用户感觉你的网站很快

传输快

真快就是网站资源以最快的速度达到用户的浏览器，我们先大致定一下基本原则：

• 传输内容体积小

• 传输内容数量少

• 网速足够快

• 服务器响应及时

• 能重复利用的资源利用好

• 暂时不需要的资源先不要

• 将来需要的资源抽空再要

接下来我们来做一个细化：

1. 传输的内容体积要小

• 图片要压缩

• 图片根据支持情况选择体积更小的格式(如 webp)

• css、js 内容压缩

• 服务端开启 Gzip，在传输数据之前再次压缩

2. 传输的内容数量要少

• 图片图标合并（css sprite）、svg 图标合并（svg sprite）

• css、js 文件打包合并

3. 网速足够快

• 服务器出口带宽要够

• 考虑到南北差异、运营商差异，在不同地区部署服务器

• 静态资源放 CDN

4. 服务器响应要及时

• 接口响应速度要快(数据库优化、查询优化、算法优化)

• cpu、内存、硬盘读写不要成为瓶颈；多加几台机器

• 重要页面(首页)静态化。服务端提前渲染后首页生成静态页面，用户访问首页直接返回静态页面，不需要像其他页面那样还需加载 css、js 再获取数据渲染展示

5. 能重复利用的资源要利用好

• 服务器设置合适的静态资源缓存时间

• 前端文件打包时做合理的分块，让公共的资源缓存后能被多个页面复用

6. 暂时不需要的资源先不要

• 图片懒加载

• 功能、模块、组件按需加载

7. 将来需要的资源抽空先拿到

1. DNS 预解析 <link rel="dns-prefetch" href="//jirengu.com">

2. 预连接 <link rel="preconnect" href="//jirengu.com">

3. 预获取 <link rel="prefetch" href="image.png">

4. 预渲染 <link rel="prerender" href="//xiedaimala.com">

体验快

体验快就是让用户觉得网站的交互是“流畅的”、“舒适的”。

1. 滚动页面不会有迟滞感

• 短时间连续大量操作需要节流

2. 一些常见操作不要拖泥带水

• DOM操作不要过于频繁

• 不要有内存泄露

• 优化复杂运算

3. 动画不要卡顿

• 多用CSS动画，少用JS动画

• 开启硬件加速

• 不要用setTimeout/setInterval去模拟动画

• 动画或者过渡的执行时间不要太长