30个提高Web程序执行效率的好经验分享

以下是30个提高Web程序执行效率的好经验分享，供朋友们参考：

1. 避免频繁使用DOM操作。当需要多次操作DOM时，先将对DOM的引用保存在本地变量中。

2. 使用innerHTML来替换document.createElement和appendChild方法。

3. 避免使用eval()和new Function()构造函数。

4. 不使用with语句，避免额外的命名空间搜索。

5. 使用for循环替代for…in循环，减少编译时期的未知性。

6. 把try-catch语句放在循环外面，避免每次循环都执行。

7. 减少全局变量的使用，全局变量的生命周期长，搜索范围广。

8. 使用字符串连接时，将多个字符串做成数组后再调用join()方法。

9. 对于简单任务，尽量使用基本操作方式实现，避免函数调用。

10. 将函数的引用作为参数传递到setTimeout()和setInterval()里，避免硬编码字符串参数。

11. 避免在遍历DOM时进行DOM操作，尤其是动态队列。

12. 对对象成员操作时，先存储引用。

13. 在局部变量范围外存放局部变量的引用，以便在多种情况下使用。

14. 避免在循环中进行DOM操作，可能导致死循环。

15. 在HTTP头信息里加入缓存控制过期和最大存活时间标记。

16. 优化CSS，使用方式引入，避免@import方式。

17. 使用CSS技术优化图片资源。

18. 使用GZip方式压缩.js和.css文件，包括HTML、XML和JSON。

19. 使用JavaScript压缩工具进行代码压缩。

20. 优化页面上的资源，拆分到各个子域上，以便并行下载。

21. 将CSS样式表放在页面最顶端，方便浏览器。

22. 保持DOM结构简单，减少查找、遍历和改动的成本。

23. 使用闭包时需要注意内存泄漏问题。

24. 避免不必要的网络请求，合并请求或使用缓存。

25. 使用事件代理来减少事件监听器的数量。

26. 使用requestAnimationFrame进行动画渲染，避免页面重排和重绘。

27. 利用CSS3特性，减少JavaScript计算和操作。

28. 使用Web Workers进行后台处理，避免阻塞主线程。

29. 对于大量数据的处理，考虑使用WebAssembly或WebGL进行高性能计算。

30. 持续关注浏览器性能和优化最佳实践，与时俱进。

关于编程的最佳实践

在我们进行编程或者页面设计的时候，一些细节决定了我们的代码效率和用户体验。让我们深入这些重要的实践，并理解它们背后的原因。

选择器选择元素的策略至关重要。例如，当我们想要获取一个ul下的直接子元素时，使用jQuery("ul > li")的选择方式比jQuery("ul li")更为精确。这是因为前者只选取直接的子元素，而后者则会选取所有后代元素，这包括子元素的子元素等。正确使用选择器可以大大提高我们获取元素的效率。

在处理元素的可见性时，我们应优先选择使用element.css({display:none})的方式。这种方式相较于element.hide()和element.addClass('myHiddenClass')更为高效。除非在循环中，我们更倾向于使用element.addClass('myHiddenClass')以简化代码，但应避免使用inline CSS和JavaScript以保持代码的整洁和可维护性。

当我们完成对DOM的引用后，应该及时将引用变量置为NULL，以释放资源，避免内存泄漏。

在AJAX的使用上，GET方式的执行效率高于POST，因此在合适的情况下，我们应优先选择GET方式。但需要注意，IE浏览器仅允许使用GET方式传输2K的数据。

动画的使用也需要谨慎。在没有硬件支持的情况下，动画可能会执行得较慢。我们应尽量避免使用没有实际价值的动画效果，以提高用户体验和页面加载速度。

在处理背景图片时，如果图片对于容器太小，应避免使用background-repeat属性。当背景图片需要多次填充时，使用repeat-x或repeat-y的效率较低。相反，我们应选择使用足够大的图片作为background-image，并设置background-repeat: no-repeat。

我们应尽可能使用原始JavaScript，限制JavaScript框架的使用。这样可以减少页面加载的第三方资源，提高页面的加载速度。也有助于我们更好地理解和掌握JavaScript的基础知识，为更复杂的项目打下坚实的基础。

总结以上所述，这些最佳实践旨在提高我们的代码效率、页面加载速度和用户体验。让我们在编程和设计的过程中，不断学习和实践这些技巧，以创造出更好的作品。如cambrian.render('body')这样的代码实践，也应注重效率和简洁性，以提供最佳的用户体验。