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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
不错的JS中变量相关的细节分析
Aug 13 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 Javascript
Bootstrap图片轮播效果详解
Oct 17 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
解决Antd Table组件表头不对齐的问题
Oct 27 Javascript
Vue的列表之渲染,排序,过滤详解
Feb 24 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
PDO::errorCode讲解
2019/01/28 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
ExtJS GTGrid 简单用户管理
2009/07/01 Javascript
JavaScript window.setTimeout() 的详细用法
2009/11/04 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
2010/02/06 Javascript
javascript 兼容所有浏览器的DOM扩展功能
2012/08/01 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
EasyUI实现二级页面的内容勾选的方法
2015/03/01 Javascript
13个PHP函数超实用
2015/10/21 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
JS学习之表格的排序简单实例
2016/05/16 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
js使用html2canvas实现屏幕截取的示例代码
2017/08/28 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
基于webpack4+vue-cli3项目实现换肤功能
2019/07/17 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
Python 私有函数的实例详解
2017/09/11 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
Python异常处理操作实例详解
2018/08/28 Python
python 多线程串行和并行的实例
2019/02/22 Python
pymongo中group by的操作方法教程
2019/03/22 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
大学活动策划书范文
2014/01/10 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
环保小标语
2014/06/13 职场文书
个人汇报材料范文
2014/12/30 职场文书
停发工资证明范本
2015/06/12 职场文书
Python机器学习应用之工业蒸汽数据分析篇详解
2022/01/18 Python
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技