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 相关文章推荐
js传值 判断
Oct 26 Javascript
Firefox outerHTML实现代码
Jun 04 Javascript
用户注册常用javascript代码
Aug 29 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
Jun 15 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
基于JavaScript定位当前的地理位置
Apr 11 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
微信小程序实现转盘抽奖
Sep 21 Javascript
关于跨站脚本攻击问题
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 邮件发送问题解决
2014/03/22 PHP
CMS中PHP判断系统是否已经安装的方法示例
2014/07/26 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
JavaScript高级程序设计阅读笔记(十六) javascript检测浏览器和操作系统-detect.js
2012/08/14 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
js实现文本框中焦点在最后位置
2014/03/04 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
js关于命名空间的函数实例
2015/02/05 Javascript
jquery SweetAlert插件实现响应式提示框
2015/08/18 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
JavaScript表单焦点自动切换代码
2016/07/24 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
详解Vue.js基于$.ajax获取数据并与组件的data绑定
2017/05/26 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
Django查找网站项目根目录和对正则表达式的支持
2015/07/15 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python中Iterator迭代器的使用杂谈
2016/06/20 Python
Python实现合并同一个文件夹下所有PDF文件的方法示例
2018/04/28 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
python3转换code128条形码的方法
2019/04/17 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
教师调动申请报告
2015/05/18 职场文书
百年孤独读书笔记
2015/06/29 职场文书