这篇文章主要是想谈谈有关业务响应慢的一些简单的优化。众所周知，当响应慢的时候，用户的兴趣和耐心会被逐渐消磨，一定会影响到用户对系统的信心等等问题，这个时候会有人说“加服务器，扩容，提硬件性能”。确实，这个方法简单粗暴，理论上可以应对所有的性能问题，但是在考虑到成本和绩效的时候，我们是不是真的把当前的硬件、中间件的极限发挥出来了呢？这就是今天想谈谈的地方。
什么时候需要优化
首先，需要知道什么时候需要做优化，过早、过度的做优化，不光会增加开发者的高血压，还会增加变现环节的高血压。我总结的优化的前提有两点：短期急需、长期布局。
- 短期急需，最常见的就是用户侧开始感觉到卡顿了。
- 长期布局，最常见的应该是大头上当下没有要紧的业务开发工作而是转向市场战略方向时——比如我以前工作的地方，主要是做可视化和Saas服务，后来逐渐开始转向做内部系统。
在讨论优化，首先要分析出是哪里慢。慢有很多情况，包括可视部分（即前端）、业务处理部分（即后端）、数据持久化部分（数据库），其次就是资金有多少，最后就是一个合适的优化方案。
今天我们先谈谈可视部分的优化
1. 因为过早的引入外部资源导致慢。
最常见的一种就是前端依赖的css、js文件过早的加载，同时这些被依赖的css和js文件都很大。
这种情况下我的建议，最简单的办法，就是让css和js的加载晚一些或者是异步加载，最好是html部分先加载出来，css和js随后加载。比如这样
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
<script type="text/javascript" src="./jq.js"></script>
<script type="text/javascript">
function a(){
//调用jq.js里面的方法
}
</script>
</html>
2. 本地缓存。
这个方法不仅仅适用于js和css，也适用于一些其他的数据的存储，比如说登录后的用户id。在浏览器中有一个application，里面有storage，这里有一些存储的方式。
一般来说，可以在前端进行缓存的信息不会太多，所以可以用localStorage和sessionStorage来存一些东西。这两个在大部分的浏览器中默认的存储空间有5M，且存储的数据是kv结构的。不同的地方在于，localStorage存起来以后浏览器只要不清空数据，理论上他会一直存在；sessionStorage则是打开一个标签，这个标签内的活动就是一个会话，当关闭的时候，里面的数据就会清除。
3. cdn加速（和老板说加钱，资金充裕的前提下可以考虑）
众所周知，很多人学习的时候，最初的都是使用一个单独的web服务器，所有的js啊、css啊都需要从提供业务的服务器上拿，结果就是一个页面，最低需要请求js、css，然后页面本身还要再占用一个请求，也就是一共三个请求。如果访问量上去一点，这个3就会不断的去*，最后一定会导致服务器的压力暴增。那服务器自然会慢。
4. 多媒体
图片其实也是一种极其占用速度的资源。这里我随便找个网站
这是我请求这个网站的时候，里面的图片，可以看到每个图片都是一个请求。图片太大咱们解决不了，但是可以从加载的量上来想想办法。
从实际角度考虑，大概率不会有谁一上来就能看到几百几千张图片，我这里搜索的bing的图片，撑死了也就3张左右。这个时候就可以考虑只加载这一部分的图片不就好了？本来需要几百、几千的请求，这下仅仅需要几十个请求，对dom本身也好，对前端也好，都是很舒适的。
视频和音频也是同理，不会有哪个用户真的打算一次加载几十个视频、音频，然后同时播放。我们只需要加载出需要的部分就足够了。
5. 因为接口导致的慢
后端接口因为各种原因，短期不好修改，其数据量由太大，一次全部渲染出来很慢，且由于dom结构太多，部分老年机运行起来很吃力。
这个是我最近在知乎上看到的“后端传给前端的数据不能直接用，还需要前端做二次处理合理吗？”
我们且不论这个情况的合理性，如果不得不考虑到这种情况，我的建议是直接把这个数据塞到本地的缓存localStorage，然后通过js处理并加载出需要的部分。下次访问，异步更新后端的数据的同时加载出你上次缓存的部分数据即可。
4502
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
