解读30个提高Web程序执行效率的好经验
其实微博是个好东西，关注一些技术博主之后，你不用再逛好多论坛了，因为一些很好的文章微博会告诉你，最近看到酷勤网推荐的一篇文章《30个提高Web程序执行效率的好经验》，文章写得不错，提到一些经验都比较实用，是我们每一个做前端开发的人员都必须知道的。本人逐条解读一下，个人意见可能比较浅薄，看看大家对各个经验点怎么看了。
1、尽量避免使用DOM。当需要反复使用DOM时，先把对DOM的引用存到JavaScript本地变量里再使用。创建页面元素的时候尽量不要使用DOM的document.createElement/appendChild()方法来创建，换用设置innerHTML的方法来替换。
jiuye：
过多使用DOM会增加DOM树的规模，进而影响文档遍历以及查找元素的性能。如果使用DOM元素的使用，建议使用如下方法进行：
function foo(arr) { var a = ‘something’; //变量a对于下面的代码就是范围外变量,这个变量的引用在很多情况下会有用处。 for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) { //do something }}15、在HTTP头信息里加入缓存控制过期和最大存活时间标记。
16、优化CSS。要使用<link>方式，而不要使用@import方式。
jiuye：
关于前端页面CSS的优化我前面的文章有介绍过，这里不再赘述。同样针对js来说也是需要去做优化的。
17、使用CSS技术来优化图片资源。
jiuye：
这一点对移动网站的开发来说尤为重要，图片的处理是移动网站性能提升的一个很大的制约点。目前有所为的CSS“雪碧”技术、响应式图片显示等多种技术可以来做这个事情。
18、用GZip方式压缩 .js 和 .css 文件。如果你使用的是Apache，在 .htaccess 里设置压缩方式，你的HTML, XML 和 JSON 也同时会被压缩。
19、使用JavaScript压缩工具。除了使用YUI和JSMin外，你还可以试一试Google Closure。
20、优化每个页面上的各种资源，把它们拆分到各个子域上，这么它们就能够并行下载。
jiuye：
可以把页面中引用的js文件、CSS文件、静态图片资源都统统扔到CDN上面去。
21、将CSS样式表放在页面的最顶端，这样能方便包括IE在内的浏览器进行解析。
jiuye：
同时提醒一下，js的引用放到页面底部</body>的前面。
22、尽量将DOM结构保持的越简单越好。DOM的体积会影响相关的操作效率，像查找，遍历，DOM改动都有影响。document.getElementsByTagName(‘*’).length这 个值越小越好。
jiuye：
在开发页面的时候保持页面的“干净”、“清洁”，不要过多使用元素，能简化一定要简化。
23、注意你使用的选择器。例如，如果你想获取一个ul下的直接子元素，使用jQuery(“ul > li”)而不要使用jQuery(“ul li”)。
24、当切换元素的可见性时(display)，请记住：element.css({display:none})的 速度快于element.hide() 和 element.addClass(‘myHiddenClass’)。除非在一个循环里，我选择element.addClass(‘myHiddenClass’)， 这样会使代码更简洁。
25、当你使用完对DOM的引用变量后，要把它置为NULL。
26、使用AJAX时，GET的执行效率高于POST。所以要尽量使用 GET 方式。只是要注意一点，IE只允许你用GET传送2K的数据。
jiuye：
本人目前开发过程中暂时不要考虑IE，所以我这个伪前端比你们正牌前端要开放些自由些，哈哈~写了好多了，玩笑一下，娱乐一把！
27、小心使用脚本动画。没有硬件的支持，动画会执行的很慢。尽量避免使用那些没有实际价值的动画效果。
jiuye：
当然，现在有CSS3之后，一些CSS3的转换，变换等动画效果同时也要考虑执行的性能问题，因为山寨机，低端移动设备对CSS3的动画支持性能还不是很牛逼的！
28、如果你的background-image对于这个图片的容器太小的话，请避免使 用background-repeat。如果你的背景图片需要来回填充很多次才能充满背景，那么将background-repeat属性设置成 background-image 和repeat-x 或 repeat-y来 达到填充背景的效果的做法是不明智的，这种填充方式的效率特别的低。你应该尝试使用一个足够大的图片来做background-image并 且使用background-repeat: no-repeat。
jiuye：
这个就要辛苦下UED的MMs。
29、布局时不要使用<table>。<table>在浏览器完全把它画出来之前需要反复绘制好几次。因为DOM 中<table>是很少见的一种之后输出的会影响之前输出的显示效果的元素。对于表格数据来说，你可以使用table-layout:fixed; 这是一种更有效的现实算法，根据CSS 2.1技术说明，这种写法可以让表格一行一行的输出。
jiuye：
虽然有有效的现实算法来弥补<table>布局的缺点，但是本人是实在不愿意使用<table>布局，尤其在移动页面开发中，有<div>布局为什么不用？现在还有CSS3的盒式布局，都比较牛逼的！
30、尽可能的使用原始JavaScript。限制JavaScript框架的使用。
jiuye：
不要滥用js框架，不过针对我目前的移动网站开发来说，虽然很苦逼的用jQuery，但是想jQuery Mobile、zepto等都是很优秀的移动开发js框架。当然如果视觉上有各自的风格和严格要求，jQuery Mobile就不建议，个人感觉jQuery Mobile的最大好处就是提供了一套标准的UI组件。