加载过多js导致速度变慢的优化办法
js加载模式
在页面中我们通常会引用外部文件，而浏览器在解析HTML页面是从上到下依次解析、渲染，如果<head>中引用了一个a.js文件，而这个文件很大或者有问题，需要2秒加载，那么浏览器会停止渲染页面（此时是白屏显示，就是页面啥都没有），2秒后加载完成才会继续渲染，这个就是造成阻塞。
当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现。.
js文件压缩合并
js文件的大小影响着页面的加载速度，所以js文件压缩多少能提升一下速度。网上的工具里有很多，在百度一搜就会有应用，功能很全。把一个已经完善的JS文件进行压缩是主流网站的一个惯性动作，因为压缩量确实很可观。以下是几个比较好的压缩工具：
- YUI压缩工具 (http://developer.yahoo.com/yui/compressor/)
- Dean Edwards Packer (http://dean.edwards.name/packer/)
- JSMin (http://crockford.com/JavaScript/jsmin)
当页面中加载太多js文件而且基本每个页面都需要的话就可以合并为一个文件，减少对js文件的请求。
代码优化：尽量减少DOM访问
使用JavaScript访问DOM元素很容易，代码更容易阅读，但访问DOM的次数越多，代码运行速度越慢。因此，在有其他方案可以代替的时候，我们要尽量减少访问DOM的次数。下面介绍几个要点：限制使用JavaScript来修饰网页布局，把针对访问元素的引用缓存起来。有时，当你的网站依赖大量的DOM改动时，就应该考虑限制你的标记。
异步加载、按需加载
无论是第三方lib库还是自己开发的库，都应该考虑以下：异步加载js、按需加载js。
页面底部引入js
放在Head中脚本会影响页面加载和渲染时间，通常将脚本放在页面最尾端加载，这样浏览器可以先渲染出页面，然后再下载脚本。
把你的JavaScript打包成PNG文件
这个办法是最近在网上看到老外的一种做法，思维很特别，还没有尝试过，有兴趣的朋友可以尝试一下。具体是这样：把你的JS和CSS添加到图片的末尾，然后用CSS来裁切，通过一次HTTP请求来获得应用程序中所需的所有信息，它把你的JavaScript/css数据打包成PNG文件，然后你还可以拆包，只要使用画布API的getImageData()。这种方法效率非常高，可以在不缩小数据的情况下，多压缩35%左右。
CDN缓存加速
把静态js文件缓存到CDN服务器，加速网站的访问速度。
发表评论
要发表评论，您必须先登录。