不用再担心JS文件限制你的速度

ljmst

有的人为了给网站增加炫目效果，往往会使用一些JS效果代码，这在上个世纪似乎还很流行，对于现在来说，最好在用户体验确实需要的情况下，使用这些东西。

经常听到客户问这样的问题：你们帮我看看我的网站怎么打开那么慢啊，是不是中毒了？
然后我们就去测试他的网站，发现问题简单的很：每个网页的开头有着不计其数的外联文件。样式表还好，最多的不外乎几十K。可怕的是JS文件，这些个企业的负责人都不是IT专业人员，兼职管理企业的网站，喜欢迎合领导搞些特效什么的，又不知道优化。什么JQUERY，特效，验证等等，全都罗列在head里，林林总总快一千k了。
今天说说给他们做优化的那些简单的手段吧。
一、给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)
二、尽量减少DOM访问
使用JavaScript访问DOM元素很容易，代码更容易阅读，但是速度很慢。下面介绍几个要点：限制使用JavaScript来修饰网页布局，把针对访问元素的引用缓存起来。有时，当你的网站依赖大量的DOM改动时，就应该考虑限制你的标记。这是改用HTML5、舍弃那些原来的XHTML和HTML4的一个充分理由。
三、使用适当的CDN
现在许多网页使用内容分发网络(CDN)。它可以改进你的缓存机制，因为每个人都可以使用它。它还能为你节省一些带宽。你很容易使用ping检测或使用Firebug调试那些服务器，以便搞清可以从哪些方面加快数据的速度。选择CDN时，要照顾到你网站那些访客的位置。记得尽可能使用公共存储库。
四、把不着急用的JS文件放到页面的底部
当更多地考虑用户对网站的速度体验时，在页面底部装入JS文件是一个非常好的做法。易用性和用户放在首位，JavaScript放在末位。对于追求技术的很多前端人员来说，这似乎很难接受，但也应该有所准备，有些用户会禁用JavaScript。
五、在头部以异步方式装入JS
为了统计网站的各种信息，我们通常会借助网上提供的免费统计功能，比如cnzz的统计，比如google分析，比如百度统计，关键的是，好多统计为了保证统计效果，可能会建议用户将统计代码放在页面的头部。如果用户选择这么做，可能会在统计代码请求数据不稳定时给他的网站用户带来非常不好的体验。不过，目前大部分统计服务都允许你以异步方式载入放在头部的JS文件，在很大程度上解决了这一问题。
六、把你的JavaScript打包成PNG文件
这个办法是最近在网上看到老外的一种做法，思维很特别，还没有尝试过，有兴趣的朋友可以尝试一下。具体是这样：把你的JS和CSS添加到图片的末尾，然后用CSS来裁切，通过一次HTTP请求来获得应用程序中所需的所有信息，它把你的JavaScript/css数据打包成PNG文件，然后你还可以拆包，只要使用画布API的getImageData()。这种方法效率非常高，可以在不缩小数据的情况下，多压缩35%左右。

挥剑い为红颜

素顏じ亦傾城ジ 发表于 2013-2-8 00:40
感觉发错论坛了..

没发错- -,对于JavaScript和PHP很有用  

素顏じ亦傾城ジ

感觉发错论坛了..  

hdhacker

爱上大声大声大声地