前言
具体分类
- 网络层面的优化
- DOM操作与渲染层面的优化
- 数据层面的优化
前端优化的需求
- 用户角度：网页快速流畅
- 开发人员角度：快速，整洁，规范
网络方面
一，减少http请求
主要是优化js，css和图片资源三个方面
- 合并js文件
- 合并css文件
- 雪碧图的使用(css sprite)
- 使用base64表示简单的图片
合并js文件和css文件可以使用webpack等打包工具。
雪碧图有专门的制作工具。
图片编码使用base64，对于一些简单的图片可以使用base直接写入html。
二，减少资源体积
- gzip压缩 参考
- js混淆
- css压缩
- 图片压缩
gzip压缩: gzip主要是针对html文件而言，可以将html中重复的部分进行一个打包，多次复用。
js混淆: 可以有简单的压缩(将空白字符删除)、丑化(丑化的方法，就是将一些变量缩小)
css压缩：就是进行简单的压缩
图片压缩：主要也是减小体积，在不影响观感的前提下，尽量压缩图片，使用png等图片格式，减少矢量图、高清图等的使用。
三，缓存
- DNS缓存
- CDN部署与缓存
- http缓存
DOM操作与渲染层面的优化
浏览器是如何渲染网页的
- 使用HTML创建文档对象模板(DOM)
- 使用CSS创建CSS对象模板(CSSOM)
- 基于DOM和CSSOM执行脚本(Scripts)
- 合并DOM和CSSOM形成渲染树(Render Tree)
- 使用渲染树布局(Layout)所有元素
- 渲染(Paint)所有元素
一，优化网页渲染
- css样式放在头部，js文件放在尾部或者设置异步
- 尽量避免内联内联样式
二，DOM操作优化
- 减少回流和重绘
- 避免在doucument上直接进行频繁的DOM操作
- 使用Classname代替大量的内联样式修改
- 对于复杂的UI元素，设置position为absolute或fixed
- 尽量使用CSS动画而非js动画
- 使用requestAnimationFrame代替setInterval
- 适当使用canvas
- 尽量减少css表达式
- 使用事件代理
四，移动端优化
- 长列表滚动优化
- IOS尽量使用局部滚动
- android尽量使用全局滚动
- 函数防抖和函数节流
- 使用touchstart，touchend代替click
- HTML的viewport设置
- 开启GPU渲染加速
函数防抖和函数节流：设计滚动等会被频繁触发的DOM事件，需要做好防抖和节流的工作。他们都是为了限制函数的执行频次，以优化函数触发频率过高导致响应的速度跟不上触发频率，出现延迟，假死或卡顿的现象。
函数防抖：当调用动作经过n毫秒后，才会执行该函数，若在这n毫秒内又调用此函数将会重新计算执行时间。
函数节流：预先设定一个执行周期，按照固定的周期执行一次函数，然后进入下一个新周期。
数据方面的优化
一，图片加载处理
- 图片预加载
- 图片懒加载
- 首屏加载时进度条的显示
预加载：提前加载内容
图片懒加载：在最初给图片的src设置一个比较简单的图片，然后将图片的真实地址设置给自定义属性，做一个占位。然后给图片设置监听事件，一旦图片到达视口范围，从图片的自定义属性中获取真地址，然后赋值给src，让其加载。
首屏进度条的显示：往往对于首屏优化后的数据量并不满意的话，同时也不能进一步缩短首屏包的长度了，就可以使用进度条的方式，来提醒用户进行等待
二，异步请求优化
- 使用正常的json数据格式进行交互
- 部分常用的数据缓存
- 数据埋点的统计
可以将一些用户的基本信息等常用的信息做一个缓存，这样可以保证ajax请求的减少。
webWorker: 为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。