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

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

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

（第二段JS就是把6个请求变成了1个）

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

方法三：给JS文件减肥

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

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

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

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

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

赞 (0)

相关推荐

  • angularjs的一些优化小技巧

    关于优化ng的手段网上已经有很多了,核心都是从$$watchers这个作用域内部属性说起的,今天我来说点别的,本质还是不变的,因为这是ng的硬伤,不过我相信只要运用合适的手法,这些问题还是可以避免的. ng简介 angularjs简称ng,是google出品的mvvm框架,此在提高前端项目开发效率(实践中来看确实很能提高开发效率),以控制器,指令,服务来围绕整个项目,内部以独有的DI来解决三层之前的调用问题.更多的详情信息可以参考我之前写的ng源码分析. ng的硬伤 说到硬伤就要先说下它的简单的

  • 13 个JavaScript 性能提升技巧分享

    Daniel Clifford 在 Google I/O 2012 上做了一个精彩的演讲"Breaking the JavaScript Speed Limit with V8".在演讲中,他深入解释了13个简单的代码优化方法,可以让你的代码在 Chrome 的 V8 JavaScript 引擎编译/运行你的 JavaScript 代码更加快速.在演讲中,他解释了怎么优化,并且解释了原因.下面简明的列出了优化的要点: 1. 在构造函数中初始化所有的对象 2. 始终用相同的顺序初始化对象

  • JavaScript提升性能的常用技巧总结【经典】

    本文讲述了JavaScript提升性能的常用技巧.分享给大家供大家参考,具体如下: 1.注意作用域 随着作用域链中的作用域数量的增加,访问当前作用域以外的变量的时间也在增加.访问全局变量总是要比访问局部变量慢,因为要遍历作用域链.  1). 避免全局查找   将在一个函数中会多次用到的全局对象存储为局部变量总是没错的. 2). 避免 with 语句  with会创建自己的作用域,因此会增加其中执行代码的作用域链的长度. 2.选择正确的方法 性能问题的一部分是和用于解决问题的算法或者方法有关的.

  • 脚本合并提升javascript性能示例

    每个<script>标签初始下载时都会阻塞页面渲染,所以减少页面包含的<script>标签数量有助于改善这一情况.这不仅仅针对外链脚本,内嵌脚本的数量同样也要限制.浏览器在解析HTML页面的过程中每遇到一个<script>标签,都会因执行脚本而导致一定的延时,因此最小化延迟时间将会明显改善页面的总体性能. 通常一个大型网站或网络应用需要依赖数个javascript文件.你可以把多个文件合并成一个,这样只需引用一个<script>标签,就可以减少性能消耗.文件

  • 巧用局部变量提升javascript性能

    javascript中一个标识符所在的位置越深,它的读写速度也越慢.因此,函数中读写局部变量总是最快的,而读写全局变量通常是最慢的.一个好的经验法则是:如果某个跨作用域的值在函数中被引用一次以上,那么就把它存储到局部变量里. 例如: 复制代码 代码如下: <!-- 优化前 --> <script type="text/javascript"> function initUI () { var bd = document.body, links = documen

  • JavaScript执行效率与性能提升方案

    如何提升JavaScript执行效率与性能在前端开发中位于一个很重要的地方,这节来研究下如何在平时做项目过程中,提升JavaScript性能与运行效率. 循环 循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用.for(;;)和while循环的性能应该说基本(平时使用时)等价. 而事实上,如何使用这两个循环,则

  • PHP小技巧之JS和CSS优化工具Minify的使用方法

    一.实现合并和压缩多个JS和CSS文件的代码 HTML: 复制代码 代码如下: <link rel="stylesheet" type="text/css" href="cssmin.php?get=base,style1,style2,global&path=css/&v=20131023" /><script type="text/javascript" src="jsmin.p

  • nodejs的10个性能优化技巧

    nodejs的10个性能优化技巧

    下面是我们使用Node.js时遵循的10个性能规则: 1. 避免使用同步代码 在设计上,Node.js是单线程的.为了能让一个单线程处理许多并发的请求,你可以永远不要让线程等待阻塞,同步或长时间运行的操作.Node.js的一个显著特征是:它从上到下的设计和实现都是为了实现异步.这让它非常适合用于事件型程序. 不幸的是,还是有可能会发生同步/阻塞的调用.例如,许多文件系统操作同时拥有同步和异步的版本,比如writeFile和writeFileSync.即使你用代码来控制同步方法,但还是有可能不注意

  • JavaScript中对循环语句的优化技巧深入探讨

    JavaScript中对循环语句的优化技巧深入探讨

    循环是所有编程语言中最为重要的机制之一,几乎任何拥有实际意义的计算机程序(排序.查询等)都里不开循环. 而循环也正是程序优化中非常让人头疼的一环,我们往往需要不断去优化程序的复杂度,却因循环而纠结在时间复杂度和空间复杂度之间的抉择. 在 javascript 中,有3种原生循环,for () {}, while () {}和do {} while (),其中最为常用的要数for () {}. 然而for正是 javascript 工程师们在优化程序时最容易忽略的一种循环. 我们先来回顾一下for

  • js性能优化技巧

    性能优化:简而言之,就是在不影响系统运行正确性的前提下,使之运行地更快,完成特定功能所需的时间更短 http:超文本协议 它的最上层是应用层 传输层 网络层 物理层 请求信息:请求行 请求头 空行 消息体 响应信息:状态行和状态码 使用值类型的ToString方法: 在连接字符串时,经常使用"+"号直接将数字添加到字符串中.这种方法虽然简单,也可以得到正确结果,但是由于涉及到不同的数据类型,数字需要通过装箱操作转化为引用类型才可以添加到字符串中.但是装箱操作对性能影响较大,因为在进行这

  • Javascript优化技巧之短路表达式详细介绍

    什么是短路表达式? 短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值.这是这两个操作符的一个重要属性. 一个最简单的例子: 复制代码 代码如下: foo = foo||bar; 这行代码是什么意思?答案: 复制代码 代码如下: //如果foo存在,值不变,否则把bar的值赋给foo if(!foo)     foo = bar; 在javascrip

  • 动态加载脚本提升javascript性能

    通过文档对象模型(DOM),几乎可以用Javascript动态创建HTML中的所有 内容.其根本在于,<script>标签与页面中的其他元素并无差异:都能通过DOM引用,都能在文档中移动.删除,甚至被创建.用标准的DOM方法可以非常容易地创建一个新年的<script>元素: 复制代码 代码如下: <script type="text/javascript"> var script=document.createElement("script

  • Javascript优化技巧（文件瘦身篇）

    最近一直在研究 Javascript 相关的技术.在<Javascript 高级程序设计>有篇章节着重阐述了优化 Javascript 代码的重要性.相信有很多的 Javascript 开发人员在开发的同时或多或少的会接触到此类的问题. 在大部分情况下,代码的优化并不是实际开发中所需要着重的部分.但是一旦代码完成了以后,开发者总是期待自己的代码能够越短越高效越好.结合从书中获得的知识以及本人实际开发过程中的经验,下面说明本人所采取的一些花招(也算是照本宣科一下). 前言 相比脚本语言,编译型的

  • 减少访问DOM的次数提升javascript性能

    访问DOM元素是有代价的,修改DOM元素则更为昂贵,因为它会导致浏览器重新计算页面的几何变化. 当然,最坏的情况是在循环中访问修改元素,尤其是对HTML元素集合循环操作. 例如: 复制代码 代码如下: <!-- 优化前 --> <script type="text/javascript"> function innerHTMLLoop () { for(var count = 0; count < 15000; count++){ document.get

随机推荐