30 个提高Web 程序执行效率的好经验[转]

简介:

1. 尽量避免使用DOM。当需要反复使用DOM 时,先把对DOM 的引用存到JavaScript 本地变量里再使用。使用设置innerHTML的方法来替换document.createElement/appendChild()方法。

2. eval() 有问题,new Fuction() 构造函数也是,尽量避免使用它们。

3. 拒绝使用with语句。它会导致当你引用这个变量时去额外的搜索这样的一个命名空间,with 里的代码在编译时期是完全未知的。

4. 使用for() 循环替代for…in 循环。因为for…in 循环在开始循环之前需要Script 引擎创建一个含有所有可循环属性的 List,需要多检查一次。

5. 尽量把 try-catch 语句放在循环外面,而不要放在循环里面。因为异常是很少发生的,放在外面避免每次都要执行它们。

6. 甚至圣经里都提到过这个 – 不要全局的。全局变量的生命周期贯穿整个脚本的生命周期,而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时,脚本引擎需要搜索整个全局命名空间。

7. fullName += 'John'; fullName += 'Holdings'; 执行速度快于 fullName += 'John' + 'Holdings';

8. 如果你需要把多个字符串连接起来,最好是把他们做成一个数组,然后调用join() 方法实现这个操作。这种方式在生成HTML 片段时尤其有效。

9. 对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。

例如:val1 < val2 ? val1 : val2; 执行速度快于 Math.min(val1, val2);

类似的myArr.push(newEle); 慢于 myArr[myArr.length] = newEle;

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

例如setTimeout(”someFunc()”, 1000) 执行效率慢于 setTimeout(someFunc, 1000)

11. 当进行遍历操作时避免使用DOM 操作。通过像 getElementsByTagName() 这种方法得到的DOM 元素队列都是动态的;有可能在你还没有对它遍历完成时,它已经被改变。这有可能导致死循环。

12. 当你对对象的成员(属性或方法)进行反复操作时,先存储对它们的引用。

例如var getTags = document.getElementsByTagName; getTags(’div’);

13. 在任何的代码段里,在局部变量范围外存放一个这个局部变量的引用。例如
function foo(arr) {
var a = ’something’;

//变量 ‘a’ 对于下面的一段就是范围外变量,这个变量的引用在很多情况下会有用处。
for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) {
//do something
}
}

14. for (var i=0; i < someArray.length; i++) {…} 的执行效率慢于:

for (var i=0, loopLen=someArray.length; i<loopLen; i++) {…}。

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

16. 优化CSS。要使用<link>方式,而不要使用@import方式。

请参考这个优秀的文档 http://www.slideshare.net/stubbornella/object-oriented-css

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

18. 用GZip 方式压缩 .js 和 .css 文件。如果你使用的是Apache,在 .htaccess 里设置压缩方式,你的HTML, XML 和 JSON 也同时会被压缩。

AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml

application/x-javascript application/json

19. 使用JavaScript 压缩工具。除了使用YUI 和JSMin 外,你还可以试一试Google Closure http://closure-compiler.appspot.com/home (感谢: James Westgate, 一位读者)

20. 优化每个页面上的各种资源,把它们拆分到各个子域上,这么它们就能够并行下载。

请参考http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

21. 将CSS 样式表放在页面的最顶端,这样能方便包括IE 在内的浏览器进行解析。

22. 尽量将DOM 结构保持的越简单越好。DOM 的体积会影响相关的操作效率,像查找、遍历,DOM 改动都有影响。

document.getElementsByTagName(’*').length 这个值越小越好。

23. 注意你使用的选择器。

例如如果你想获取一个ul下的直接子元素,使用 jQuery(”ul > li”) 而不要使用 jQuery(”ul li”)

24. 当切换元素的可见性时(display),请记住:element.css({display:none}) 的速度快于 element.hide() 和 element.addClass(’myHiddenClass’)。 除非在一个循环里,我选择 element.addClass(’myHiddenClass’),这样会使代码更简洁 – 不要使用 inline CSS 和 JavaScript。

25. 当你使用完对DOM 的引用变量后,要把它置为NULL。

26. 使用AJAX 时,GET 的执行效率高于POST。所以要尽量使用GET 方式。

只是要注意一点,IE 只允许你用GET 传送2K 的数据。

27. 小心使用脚本动画。没有硬件的支持,动画会执行的很慢。尽量避免使用那些没有实际价值的动画效果。

28. 如果你的background-image 对于这个图片的容器太小的话,请避免使 用background-repeat。如果你的背景图片需要来回填充很多次才能充满背景,那么将background-repeat 属性设置成 background-image 和 repeat-x 或 repeat-y 来达到填充背景的效果的做法是不明智的,这种填充方式的效率特别的低。你应该尝试使用一个足够大的图片来做 background-image 并且使用 background-repeat: no-repeat。

29. 布局时不要使用<table>。<table>在浏览器完全把它画出来之前需要反复绘制好几次。因为DOM 中<table>是很少见的一种之后输出的会影响之前输出的显示效果的元素。对于表格数据来说,你可 以使用 table-layout:fixed; 这是一种更有效的现实算法,根据 CSS 2.1 技术说明,这种写法可以让表格一行一行的输出。

30. 尽可能的使用原始JavaScript。限制JavaScript 框架的使用。


强烈推荐:对《30个提高Web程序执行效率的好经验》的理解




本文转自钢钢博客园博客,原文链接:http://www.cnblogs.com/xugang/archive/2010/08/25/1808333.html,如需转载请自行联系原作者

相关文章
|
3月前
|
安全 测试技术 数据库
维护的Web应用程序
【10月更文挑战第4天】维护的Web应用程序
62 4
|
2月前
|
监控 前端开发 JavaScript
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
使用 MERN 堆栈构建可扩展 Web 应用程序的最佳实践
36 6
|
2月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
|
2月前
|
数据可视化 数据库 开发者
使用Dash构建交互式Web应用程序
【10月更文挑战第16天】本文介绍了使用Python的Dash框架构建交互式Web应用程序的方法。Dash结合了Flask、React和Plotly等技术,让开发者能够快速创建功能丰富的数据可视化应用。文章从安装Dash开始,逐步介绍了创建简单应用程序、添加交互元素、部署应用程序以及集成更多功能的步骤,并提供了代码示例。通过本文,读者可以掌握使用Dash构建交互式Web应用程序的基本技巧和高级功能。
105 3
|
3月前
|
JavaScript 前端开发
如何使用Vue.js构建响应式Web应用程序
【10月更文挑战第9天】如何使用Vue.js构建响应式Web应用程序
|
3月前
|
前端开发 JavaScript 测试技术
构建响应式Web应用程序:React实战指南
【10月更文挑战第9天】构建响应式Web应用程序:React实战指南
|
3月前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
3月前
|
设计模式 测试技术 持续交付
开发复杂Web应用程序
【10月更文挑战第3天】开发复杂Web应用程序
54 2
|
3月前
|
SQL 安全 测试技术
漏洞扫描技术:对Web应用程序进行漏洞扫描
漏洞扫描技术:对Web应用程序进行漏洞扫描
137 1
|
3月前
|
Rust 网络协议 应用服务中间件
granian:让你的 Web 应用程序快如闪电
granian:让你的 Web 应用程序快如闪电
114 2