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+ajax 购物车框架(入门篇)
Oct 29 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
jQuery写的日历(包括日历的样式及功能)
Apr 23 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
js跨域问题浅析及解决方法优缺点对比
Nov 08 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
vue+iview 实现可编辑表格的示例代码
Oct 31 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 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
B2K与车机的中波PK
2021/03/02 无线电
PHP执行zip与rar解压缩方法实现代码
2010/12/05 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
比较搞笑的js陷阱题
2010/02/07 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
JS实现电商放大镜效果
2017/08/24 Javascript
vue异步axios获取的数据渲染到页面的方法
2018/08/09 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python实现注册、登录小程序功能
2018/09/21 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
css实例教程 一款纯css3实现的超炫动画背画特效
2014/11/05 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
俄罗斯在线水暖商店:Perfecto.ru
2019/10/25 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
上海期货面试题
2014/01/31 面试题
制药工程专业应届生求职信
2013/09/24 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
文员岗位职责范本
2014/03/08 职场文书
保密工作责任书
2014/04/16 职场文书
护理学专业求职信
2014/06/29 职场文书
五一劳动节活动总结
2015/02/09 职场文书
督导岗位职责范本
2015/04/10 职场文书
2016年大学迎新晚会工作总结
2015/10/15 职场文书
python opencv通过按键采集图片源码
2021/05/20 Python
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏