来，聊一聊性能优化

本文为饥人谷原创文章，首发于 前端学习指南。

不管是应付前端面试还是改进产品体验，性能优化都是躲不开的话题。这里我们就简单聊一聊性能优化。

传输快 vs 体验快

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

1. 加载速度真的很快，用户打开输入网址按下回车立即看到了页面
2. 加载速度并没有变快，但用户感觉你的网站很快

传输快

所谓的真快就是网站资源以最快的速度到达用户浏览器，那如何去做呢？我们先粗略定一些原则：

• 传输的内容体积要小
• 传输的内容数量要少
• 网速要足够快
• 服务器响应要及时
• 能重复利用的资源要利用好
• 暂时不需要的资源先不要
• 将来需要的资源抽空要

下面就能顺藤摸瓜，做个细化

1. 传输的内容体积要小

   1. 图片要压缩
   2. 图片根据支持情况选择体积更小的格式(如 webp)
   3. css、js 内容压缩
   4. 服务端开启 Gzip，在传输数据之前再次压缩

2. 传输的内容数量要少

   1. 图片图标合并（css sprite）、svg 图标合并（svg sprite）
   2. css、js 文件打包合并

3. 网速要足够快

   1. 服务器出口带宽要够
   2. 考虑到南北差异、运营商差异，在不同地区部署服务器

3.静态资源放 CDN

1. 服务器响应要及时

   1. 接口响应速度要快(数据库优化、查询优化、算法优化)
   2. cpu、内存、硬盘读写不要成为瓶颈；多加几台机器
   3. 重要页面(首页)静态化。服务端提前渲染后首页生成静态页面，用户访问首页直接返回静态页面，不需要像其他页面那样还需加载 css、js 再获取数据渲染展示

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

   1. 服务器设置合适的静态资源缓存时间
   2. 前端文件打包时做合理的分块，让公共的资源缓存后能被多个页面复用

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

   1. 图片懒加载
   2. 功能、模块、组件按需加载

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

   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. 滚动页面不要有迟滞感
   1.对于短时连续大量触发的操作要做节流

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

   1. DOM 的操作不要过于频繁
   2. 不要出现内存泄露
   3. 优化复杂运算

3. 动画不要卡顿

   1. 多用 CSS 动画，少用 JS 动画
   2. 开启硬件加速
   3. 不要用 setTimeout/setInterval 去模拟动画
   4. 动画或者过渡的执行时间不要太久

性能优化的建议

臆想的优化不是优化，无明显成效的优化不是优化。浏览器的性能已经足够快，不要因为“过渡优化”牺牲代码的可读性

先做简单见效快的优化，再做复杂见效慢的优化。一张未压缩的大图片可能抵消辛辛苦苦做的全部其他技术优化

本文作者：若愚，本周若愚老师新班正式开班了，目前还剩不到10个名额，想报名的速度~

加饥人谷官方微信号:hungervalley， 可进群面基、吐槽老板、关注新机会，当然很多免费课奉上，近期免费好课：

合格的前端必会知识点3小时速成 若愚老师的js 免费课(视频已经上传)

校招专场经验分享(上)-拿到bilibili、美团、百度校招 offer 的饥人谷校友分享应届生如何准备校招(视频已经上传)

【本周日(12月24)晚上8点免费直播】校招专场经验分享(下) 拿到趣店、51信用卡校招 offer 的饥人谷校友分享前端面试题和如何写简历

【本周五(12月22)晚上8点半免费直播】《校招算法面试通关秘籍》，讲师简介：亚马逊工程师，北邮本硕