JS、css代码优化技巧

如果你问我网站中最影响网站打开速度的是什么？我会告诉是网站中的javascript，简称JS。现在的网站都加的有统计代码、分享工具、评论列表、相关文章插件等工具，而要实现强大的功能，必须使用JS文件，正是这些JS插件，在增强了网站功能的同时，也同时影响了网站打开速度。

关于JS优化的文章已经很多了，大多技术性很强，像什么变量、字符串、类型，就不做介绍了，也不需要介绍，我也不懂，你知道了也没用。大多数站长都是拿来主义，我只需要告诉JS怎么放，删那里就可以了。

1、css放页头head标签中，把不重要的JS放在页面最底部

这是最简单，也是效果最好的优化方法，用户没有太多的耐心等待页面加载，我们可利用网页先展现给用户，后加载功能原则：

1.优先加载css：

浏览器渲染HTML的顺序是从上到下，下载和渲染是同时进行的，在载入HTML元素之前，先加载css，可以避免HTML出现无样式状态，先将网页展现给用户

2.最后加载js：

如果js文件放到页面顶部，浏览器加载网页，加载js时，还没有加载HTML代码，网页显示为空白，脚本阻塞了HTML的加载，也可能会出现js捕捉不到操作的节点，就会报错；因此把不重要的JS通通放到页面的最下面body的上面，实现异步加载，也就是等网页都加载完了，最后再加载这些不重要的JS，这样就不影响网页速度了。

2、合并JS文件、CSS文件

合并JS，也就是减少HTTP请求，少给服务器请求一次就加快一点速度，而合并两个原本独立的JS就需要点技术了，但这难不倒我们，告诉大家一个最简单的方法

不管三七二十一，先把A文件直接粘贴到B文件中，合并后删除网页中的A文件，如果网页运行正常，就OK；如果一些特效失效，那就还原，换C文件合并。总会有两个不冲突的JS文件的。

3、给JS文件减肥

咱不讨论什么三目运算符、减少对象查找、如何让JS简洁，咱就用JS减肥工具。通常这类工具会把JS文件中几百行的代码压缩成一行，使体积变小。推荐工具：http://javascriptcompressor.com/

因为空行等问题，有时候使用这类工具会使JS功能失效，而最简单的办法是用Dreamweaver，把压缩后的JS放入DW中，DW会自动提示你那里有误，把错误的地方另起一行，或还原回去即可。

4、压缩减肥css，最有效的减少文件大小(去除注释、空白字符)

如把css文件复制成为2份，把其中一份保留原稿，另外一份压缩并添加min后缀，并把压缩这份用于线上使用

常见压缩工具有YUICompressor，淘宝封装的css和js压缩工具TBCompressor，站长工具等，都适合css和js文件的压缩，去掉不需要的空白字符（空格、换行、tab缩进），三次元世界一直使用在线css压缩减肥工具进行压缩css。

使用方法很简单，把你的网站CSS代码复制到css压缩减肥工具框内，点击压缩化，一般都可以对CSS压缩1-5k.我的博客CSS代码缩小了2K。

在线工具地址：1、http://www.xland.com.cn/css/geshihuacss.htm

2、http://tool.css-js.com/compressor.html

5、将样式表文件放在外部调用

把页面中需要用到的JavaScript 和CSS样式表文件放在另外的文件夹中，这样一来在打开网站其他页面时就会缓存这些调用的文件，从而加快网站页面的加载速度。

写在最后：

当你的站点随着时间的推移慢慢地做大的时候，你就会发现很多问题出来的，其中一个就是越来越臃肿庞大，因此运行的速度也就会慢了下来。优化，尽力去优化站点，就变得非常重要了。