JS代码优化技巧之通俗版(减少js体积)


Posted in Javascript onDecember 23, 2011

细读完这篇文章,够你优化大半天的了,关于JS优化方法大都脱离不了这三种方法。

JS代码优化技巧之通俗版(减少js体积)

(网页总大小为155.k,而JS就占了100.3K)

是时候优化下JS了

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

现在的网站都加的有统计代码、分享工具、评论列表、相关文章插件等工具,而要实现强大的功能,必须使用JS文件,正是这些JS插件,再增强了网站功能的同时,也给影响了网站速度。

最常用的JS优化办法

通过博客调用JS来看,目前最影响速度的为无觅插件(952ms),拿福能广告(434ms)。如果确实要用可以保留,适当的根据官方教材做做优化,下面卢松松介绍几个最常用的JS优化方法。

方法一:把不重要的JS放在页面最底部

这是最简单,也是效果最好的优化方法,把不重要的JS通通放到页面的最下面body的上面,实现异步加载,也就是等网页都加载完了,最后在加载这些不重要的JS,这样就不影响网页速度了。

如低调与华丽模板中公共的util.js公共文件,默认效果为,浏览网页时会在网页中出现“回顶部、写评论”特效。现在把wumii(无觅插件JS)和jiathis(分享工具JS)统一整合到util.js文件中了。

JS代码优化技巧之通俗版(减少js体积)

(不重要的JS都放到页面最底部了)

当然,其他网站也需要这样做:把不重要的JS通通放到页面最底部。

方法二:合并JS文件

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

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

例如我博客上的百度广告管家,有6个广告位,默认情况是要进行6次HTTP请求的,因为是第三方JS,一次请求最快要花234ms,而6次请求就就需要花2秒,也就是说因为这个广告管家打开网页就要额外增加2秒。

JS代码优化技巧之通俗版(减少js体积)

(第二段JS就是把6个请求变成了1个)

按照官方教程把JS合并后,6个广告位的广告请求合并为1次请求,大幅降低js请求次数,有效减少页面渲染被阻塞的情况,提升广告加载速度。

方法三:给JS文件减肥

咱不讨论什么三目运算符、减少对象查找、如何让JS简洁,咱就用“JS减肥工具”。通常这类工具会把JS文件中几百行的代码压缩成一行,使体积变小。推荐工具:http://javascriptcompressor.com/ 或软件版本(容错效果好)

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

最后再给个网友的现身说法吧:

JS代码优化技巧之通俗版(减少js体积)

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

这些方法都通俗易懂,希望对大家有用!

Javascript 相关文章推荐
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
Mar 27 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
Oct 26 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
深入解读JavaScript中的Iterator和for-of循环
Jul 28 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
ajax请求+vue.js渲染+页面加载的示例
Feb 11 Javascript
JS内部事件机制之单线程原理
Jul 02 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
vue前端和Django后端如何查询一定时间段内的数据
Feb 28 Vue.js
关于跨站脚本攻击问题
Dec 22 #Javascript
js DOM的学习笔记
Dec 22 #Javascript
jquery 年会抽奖程序
Dec 22 #Javascript
jQuery中创建实例与原型继承揭秘
Dec 21 #Javascript
jquery随机展示头像代码
Dec 21 #Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 #Javascript
jquery $.getJSON()跨域请求
Dec 21 #Javascript
You might like
php执行sql语句的写法
2009/03/10 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
PHP CURL 内存泄露问题解决方法
2015/02/12 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP中的自动加载操作实现方法详解
2019/08/06 PHP
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
jQuery动态显示和隐藏datagrid中的某一列的方法
2013/12/11 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
深入浅析JavaScript中数据共享和数据传递
2016/04/25 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
JS按条件 serialize() 对应标签的使用方法
2017/07/24 Javascript
vue数据传递--我有特殊的实现技巧
2018/03/20 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
Vuejs中的watch实例详解(监听者)
2020/01/05 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
python转换摩斯密码示例
2014/02/16 Python
Python入门篇之数字
2014/10/20 Python
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
Python数据结构与算法之图的广度优先与深度优先搜索算法示例
2017/12/14 Python
实例介绍Python中整型
2019/02/11 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
python实现在线翻译功能
2020/03/03 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
Linux开机引导的步骤是什么
2014/02/26 面试题
大学生社会实践评语
2014/04/25 职场文书
实习指导老师评语
2014/04/26 职场文书
交通事故死亡赔偿协议书
2014/12/03 职场文书
2014年个人技术工作总结
2014/12/08 职场文书
MySQL事务的隔离级别详情
2022/07/15 MySQL