对于前后端分离的项目，前后端的优化都是很重要的。后台优化服务器，排查SQL命令等。前后台优化都是相辅相成的，后台的响应速度快，前端的页面加载速度也要快速，用户体验才能更好。
优化HTTP请求数，由于用户浏览的往往是局部网页，所以只加载用户可视范围内的资源，就会减少一些不必要的请求，也会减少浏览器加载资源的消耗。页面优化主要包括网络加载类、页面渲染类、CSS优化类、JavaScript执行类、缓存类、图片类、架构协议类等几类；
图片延迟加载
延长加载也称懒加载。我们常用的是react-lazyload(Lazyload your Components, Images or anything matters the performance.) 来进行图片的预加载和延迟加载处理。前面有懒加载和预加载的文章。
定义图片大小限制
加载的单张图片一般建议不超过30KB，避免大图片加载时间长而阻塞页面其他资源的下载，因此推荐10KB以内，如果用户上传的图片过大，建议设置告警系统，帮助我们观察了解整个网站的图片流量情况，做出进一步的改善。
预加载资源（图片和数据请求）
但有一些需求是希望尽量少出现延迟加载带来的“等待”过程，这时就可以预加载资源。
资源合并
可以把多个脚本合并到一个js文件内，然后统一引用它就能减少http请求。
通用的CSS样式可以合并到一个文件里。
通用的组件和方法可以提取出来。
引用优化
引用css放在
内，引用js放在结束标签前。css加载是异步的，更早的加载出样式就能更早呈现出页面。
js放在尾部，防止浏览器加载js而阻塞页面，造成页面“白屏”现象。单独域名存放资源
如果有条件的话，我们还可以启用额外的服务器，域名来存放资源
这样能减少主域名的HTTP请求数，让主服务器更快响应请求
还能减少主域名的cookie请求离线存储
在移动端应用的比较多
它和缓存不同，它设置好之后，离线也能访问，无论用户刷新或者新窗口，链接等等本地存储localStorage
本地存储数据一直是网页端的弱项，在没有HTML5的localStorage前，用cookie可以保存一点数据
但付出的代价很大，cookie能保存的数据很少，并且它会伴随着每一次请求一起发送localStorage就好多了，默认5MB的大小，除非用户手动清除，否则一直不过期，就连IE8浏览器都支持
这里要注意，localStorage和cookie一样受到跨域的限制
可以使用domain控制CSS3替换js动画
在js中，我们实现动画，就是利用定时器循环改变dom元素的属性来达到动画效果
但是许多属性更改之后会造成浏览器重绘，增加性能消耗css3在动画效率上面有增强，浏览器会单独处理css3动画，不占用js主线程，还可以硬件加速