javascript速度优化总结

两个基本点

1. 择重避轻，有所取舍

• 核心优先

通常来讲，系统都是庞大的，不要太完美主义，先抓住重点，理解哪些是我们的核心页面，哪些页面对我们来说事最重要的，哪些页面访问量最高，核心优先

• 主要问题在哪，抓住瓶颈点

治病要医本，优化前，需要进行细致的分析，抓住主要瓶颈点，对症下药。优化那么多的方子，别全采用，通常几个就能达到效果

2. 简单有效才是硬道理

越是简单的东西越容易控制，越不容易出错，尽量避免将系统设计的过于庞大，过于复杂，这是在做产品，而不是在搞研发，很多看似很蠢的方法，往往越是有效。

新技术，新方法的引用是具备一定风险的，要评估，要慎重！

js处理

1. 尽量放在页面尾部

js的加载时阻塞页面，没下载完毕后面的内容不会出来，所以尽量避免把js放在页面头部，按照经验估计，整个页面中所用的js逻辑，90%都是可以放在页面尾部的

2. 延迟加载

很多的业务逻辑并非每次都使用也不是要立即使用，首次加载过程中仅仅加载那些必须的，只有当必要的条件触发，才去加载请求必要的js，比如说权限验证通过，加载管理模块

3. 合并js,减少请求

请求多个小文件的效率远小于请求一个大文件的效率，因为需要多次DNS解析，多次连接，浏览器和server端也需要多次开启进程、权限验证和预处理，以及http请求在数据包传递上的一些问题

所以尽量避免在页面中加载一堆的js文件，将小的js合并成一个大的js文件统一输出，页面因此被卡住的时间肯定会减少很多

4. js压缩

此手段属前端特有，毕竟流量一味着速度，意味着金钱, 是在降低代码的可读性为前提。但事物的两面性告诉我们，可读性差也意味着安全，而且可读性可以通过保存压缩前的源文件解决

所谓的压缩，就是把长的变量名换成短的，去掉没用的空格和换行符，从而节省我们JS程序的长度，不过目前这种处理已经很成熟，通过搜索可以搜出很多相关的工具

经验值，能压缩50%以上，视程序与压缩工具而论

5. 尽量少用第三方库

在我的印象中，很多框架都是很庞大的20K以上，虽然很强大很方便，但如果不是做企业级应用，不要应用，因为我们也许只用了其中很少的一部分却加载了整个框架

6. 合并ajax请求

Ajax请求的数据，如果涉及到请求多种数据，尽量考虑将其合并

7. 合理的使用缓存

缓存似乎是server端的事儿，但是js中也是经常用的

8. 能静态化输出，尽量少用js渲染输出

页面制作

1.素材合并

尽量把页面中的图片合并在一起，利用css sprite切割，这样减少了请求的次数。通常合并成3张大的图片，一张是有固定宽高，另外两张是分别横向或者纵向平铺的

2.css预处理

道理同js压缩，也是很多工具可用

3.图片背景切割平铺

利用好雪碧图， background的各个方法

4.少用iframe和frameset

首先一点是frame会阻塞页面，第二，产生额外的请求，第三，如果涉及交互，增加开发维护成本，第四对搜索引擎优化不好

5.css尽量放到页面头部

浏览器只有等css下载完毕后，才会真正的显示页面，所以为了页面尽快有所输出，把css放在头部，而且浏览器对css处理时并行的，不会像js那也阻塞页面