标签：
在很多说法中，总是建议将我们的javascript脚本加载在网页的最后，并用外部文件的形式，然而事实并不是这样，外挂的文件最好不要太多，脚本结构代码本身才是值得我们思考的问题。我们需要重新思考我们撰写的脚本的执行力，并把更优秀的javascript开发思路融入到我们的开发中。
我在读完了几篇关于javascript和jQuery的性能优化的文章之后，才恍然大悟，我以前所做的很多代码结构优化，最终只是让乌徒帮显得臃肿，于是重新设计脚本代码的结构，无论怎么样，乌徒帮现在的网页打开显得更加流畅了。
1、加载和执行
加载是浏览器获取代码，而执行是浏览器解析脚本并操作DOM。我以前忽视的一个问题的加载和执行的区别，加载的少并不一定提高速度和性能，只有执行能力决定网页的打开速度，当然加载确实是占到了一部分因素。在以前，我们习惯将几乎所有的脚本代码用文件外挂的形式，并将javascript文件放在网页的最后进行加载。我想说的是，一、并非所有的脚本都要用文件外挂，二、并非所有的都要放在页面底部。乌徒帮由于要兼容HTML5，因此必须在头部加载HTML5相关的代码。既然整个页面都要用到jQuery库，我又将jQuery库和modernizr合并，用一个文件加载在头部。
在javascript和jQuery优化的文章中有这么一点：我们可以提前声明函数变量，在网页加载过程中可以随时使用，前提是对象必须已经加载好。例如我们希望某个按钮button#show点击时提示页面没有加载完，我们在头部先定义一个函数，在这个<button>之后加是一段脚本代码，当然，提示的代码太少，我们不用再头部先定义。
这种跟随文档加载而进行的脚本对网页中需要即时就有的效果非常明显，举一个很简单的例子，我们希望某一组<a>标记点击时不要进入到一个新的网址，而是触发其他的动作，那么我们直接在这一组<a>结束之后，给他们带上click,function(e){e.preventDefault()的效果，你以想象，如果你将这段代码写在文档底部的外挂js文档中，更不幸的是写在$(document).ready()中，那么这段代码首先需要页面加载到该文档，该文档加载到该段代码，同时页面代码已经加载完整，才可以被执行preventDefault()，如果你的页面代码很长的话，在页面加载出<a>而没有加载到这个js文件时，点击<a>就会出现新的跳转。
还有一个问题就是，外挂的js文档要加载，需要一次服务器请求，虽然现在的浏览器支持的请求数成倍增加，然而如果成千上万的人一起访问网站，请求给服务器造成的压力也是可想而知的，请求的时间如果再算在内的话，将脚本直接包含在网页底部或许能节省一些时间。
2、头部定义的函数并不会执行，直到被调用时
我们在头部建立了一些js函数库，但它们并不会立即执行(通俗地说js只有在它被用到的时候才会被执行)，要知道执行会花时间，而存储这些函数到内存的时间更少。我们加载这些函数的时间和存储到内存的时间总和也可能不会超过执行的时间。你可以将这些函数全部放到网页底部的外挂文档中，但是就会遇到像上面所讲的加载问题。
3、内存变量比获取DOM节点快的多
以前我习惯获取一个数组的长度并用在for循环中，例如for($i = 0;$i < $a.length;$i ++)，现在才注意到，$a.length会进行一次内部计算，没循环一次就计算一次，优化后的for($i = 0,$len = $a.length;$i < $len;$i ++)就会好很多，将$a.length获取的值存储在$len变量里，只进行了一次length运算，不是节约了很多的时间和空间吗。正是由于这种思路，我们需要重新检查自己的代码，是否能将更多的这种要查找或操作DOM的放在一个变量中。
4、隐藏和搬迁
如果你希望你的网页加载的更快，搬迁也是另外一套思路，不要把从其他服务器加载的代码放在网页中间，那样会让网页卡在那个地方，把这些从外部加载的代码先放在网页的底部，隐藏起来，等网页能够正常显示以后，再把它们搬迁到它们应该呆的位置。很简单的例子就是谷歌广告，如果在网页文章的开头加载谷歌广告，如果受到网速的影响，网页会卡在这个地方，等到广告代码创建DOM节点结束之后，才一下子把文章内容显示出来。搬迁的思路是，在文章开头留出一块和广告大小相同的区域（甚至不留，增加出现效果），用一张小图片或文章提示加载广告，把广告加载在后面，等加载好之后，用appendTo或其他移动代码，将广告移动过去。
通过搬迁的方法，乌徒帮很好的解决了评论框加载慢引起的网页显示不全的缺点。
5、将不同语言的优化思路运用到其他地方
我们可以把一些思路运用到php里面，直接获取数据要比通过各种函数调用来的快，不一定要使用函数，虽然那样更美观。一次性将数据从数据库中拿出来，保存在变量中，然后通过php程序处理变量中的值进行排序或筛选。将数据先保存在一个变量中，可以重复使用它。
性能的优化是网页打开速度和执行效率的一个工作，在wordpress中，网络上很多文章给出了建议，但很多建议从某种意义上讲只是针对访问，而没有涉及到加载和执行。这或许是我们以后应该考虑的。
本文原文转载自：乌徒帮 > 技术中心 > 网站性能 > 关于网页脚本代码结构的再思考
原文链接：关于网页脚本代码结构的再思考
标签：
原文地址：http://www.cnblogs.com/fengchengjushi/p/4561996.html
