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 相关文章推荐
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
JS操作数据库的实例代码
Oct 17 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
jQuery遍历之next()、nextAll()方法使用实例
Nov 08 Javascript
js实现对ajax请求面向对象的封装
Jan 08 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
jquery实现聊天机器人
Feb 08 jQuery
详解ES6 中的Object.assign()的用法实例代码
Jan 11 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与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
PHP基于cookie与session统计网站访问量并输出显示的方法
2016/01/15 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
html超链接打开窗口大小的方法
2013/03/05 Javascript
js代码实现的加入收藏效果并兼容主流浏览器
2014/06/23 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
全面解析Bootstrap弹窗的实现方法
2015/12/01 Javascript
基于Node.js + WebSocket打造即时聊天程序嗨聊
2016/11/29 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
关于Promise 异步编程的实例讲解
2017/09/01 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
2019/09/26 Javascript
解决vue的过渡动画无法正常实现问题
2019/10/31 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
Python3生成手写体数字方法
2018/01/30 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python程序暂停的正常处理方法
2019/11/07 Python
tensorflow入门:tfrecord 和tf.data.TFRecordDataset的使用
2020/01/20 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
html5.2 dialog简介详解
2018/02/27 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
入党思想汇报怎么写
2014/04/03 职场文书
房屋出售协议书
2014/04/10 职场文书
气象学专业个人求职信
2014/04/22 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
软件研发工程师岗位职责
2014/09/30 职场文书
参加招聘会后的感想
2015/08/10 职场文书
简历自我评价范文
2019/04/24 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python