前端性能优化

页面级优化

• css雪碧图
• 使用cdn加速器
• 压缩合并代码（使用webpack可打包合并）
• 使用dns域解析器

代码级优化

• 减少Dom操作
• 不使用css表达式，使用<link>，不使用@import
• 减小cookie大小
• 异步加载
• 使用requestAnimationFrame代替setTimeout和setInterval
• 图片懒加载

---

异步加载：

  当解析html文件时，遇到Script标签，会去下载这个script标签src所指向的js文件，下载完毕会执行js里面代码，之后再将解析权交给浏览器，去解析剩下的文档；

（defer）加入defer属性，则遇到script文件会去下载该js文件，同时继续解析html文档，直至html文档解析完毕且js文件下载完，才会区执行js文件里面的代码；

（async）加入async属性，则会优先下载js文件，之后继续解析js里面的代码，直至js代码解析完毕才会继续解析剩下的html文档

使用requestAnimationFrame代替setTimeout和setInterval：

屏幕绘制频率，这里的requestAnimationFrame会保持跟浏览器同样的渲染速度，无需指定时间，大约每秒60HZ的速率，1000ms/60 = 16.7ms，也就是说16.7ms进行一次渲染；

requestAnimationFrame需要使用递归

图片懒加载：

应用：像淘宝，京东这一类的电商网站，涉及到大量的图片；

原理：当目标图片的上边距（offsetTop）小于浏览器高度（即可视区高度clientHeight + 滚动高度scrollTop），则直接加载图片，否则，先不加载；

<img src="假地址" data-img=“实际图片地址” />

使用offsetTop属性来获取图片最顶端和可见区域最顶端的距离