来，聊一聊性能优化

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

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

传输快 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点半免费直播】《校招算法面试通关秘籍》，讲师简介：亚马逊工程师，北邮本硕