JS、css代码优化技巧

[ SEO优化   // 2014-08-13  ]
245

如果你问我网站中最影响网站打开速度的是什么?我会告诉是网站中的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样式表文件放在另外的文件夹中,这样一来在打开网站其他页面时就会缓存这些调用的文件,从而加快网站页面的加载速度。

写在最后:

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