转自
http://yfyfj.blog.163.com/blog/static/1542478420113131147160/
尽量避免使用DOM。当需要反复使用DOM时,先把对DOM的引用存到JavaScript本地变量里再使用。使用设置innerHTML的方法来替换document.createElement/appendChild()方 法。
eval()有问题,new Fuction()构造函数也是,尽量避免使用它们。
拒绝使用with语句。 它会导致当你引用这个变量时去额外的搜索这样的一个命名空间,with里的代码在编译时期是完全未知的。
使用for()循环替代for…in循 环。因为for…in循环在开始循环之前需要Script引擎创建一个含有所有可循环属性的 List,需要多检查一次。
把try-catch语句放在循环外面,不要放在循环里面,因为异常是很少发生的,放在外面避免每次都要执行 它们。
甚至圣经里都提到过这个 – 不要全局的。全局变量的生命周期贯穿整个脚本的生命周期,而本地变量的存在范围随着本地命名空间的销毁而消失。当在函数或其它地方引用一个全局变量时,脚 本引擎需要搜索整个全局命名空间。
fullName += 'John'; fullName += 'Holdings';执行速度快于fullName += 'John' + 'Holdings';
如果你需要把多个字符串连接起来,最好是把他们做成一个数组,然后调用join()方法实现这个操作。这种方式在生成HTML片段时尤其 有效。
对于简单的任务,最好使用基本操作方式来实现,而不是使用函数调用实现。例如val1 < val2 ? val1 : val2;执行速度快于Math.min(val1, val2);,类似的,myArr.push(newEle);慢于myArr[myArr.length] = newEle;
将函数的引用作为参数传递到setTimeout()和setInterval()里优于将函数名作为字符串参数传递(硬编码)。例如,setTimeout(“someFunc()”, 1000)执行效率慢于setTimeout(someFunc, 1000)
当进行遍历操作时避免使用DOM操作。通过像getElementsByTagName()这 种方法得到的DOM元素队列都是动态的;有可能在你还没有对它遍历完成时,它已经被改变。这有可能导致死循环。
当你对对象的成员(属性或方法)进行反复操作时,先存储对它们的引用。例如var getTags = document.getElementsByTagName; getTags(‘div’);
在任何的代码段里,在局部变量范围外存放一个这个局部变量的引用。例如
function foo(arr) {
var a = ‘something’;
//变量 ‘a’ 对于下面的一段就是范围外变量,这个变量的引用在很多情况下会有用处。
for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) {
//do something
}
}
for(var i=0; i < someArray.length; i++) {…}的执行效率慢于for (var i=0, loopLen=someArray.length; i<loopLen; i++) {…}。
在HTTP头信息里加入缓存控制过期和最大存活时间标记。
优化CSS。要使用<link>方式,而不要使用@import方式。请参考这个优秀的文档http://www.slideshare.net/stubbornella/object-oriented-css
使用CSS技术来优化图片资源
用GZip方式压缩 .js 和 .css 文件。如果你使用的是Apache,在 .htaccess 里设置压缩方式,你的HTML, XML 和 JSON 也同时会被压缩。
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json
使用JavaScript压缩工具。除了使用YUI和JSMin外,你还可以试一试Google Closure http://closure-compiler.appspot.com/home (感谢: James Westgate, 一位读者)
优化每个页面上的各种资源,把它们拆分到各个子域上,这么它们就能够并行下载。请参考http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
将CSS样式表放在页面的最顶端,这样能方便包括IE在内的浏览器进行解析。
尽量将DOM结构保持的越简单越好。DOM的体积会影响相关的操作效率,像查找, 遍历,DOM改动都有影响。document.getElementsByTagName(‘*’).length这 个值越小越好。
注意你使用的选择器。例如,如果你想获取一个ul下的直接子元素,使用jQuery(“ul > li”)而不要使用jQuery(“ul li”)
当切换元素的可见性时(display),请记住: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-image对于这个图片的容器太小的话,请避免使 用background-repeat。如果你的背景图片需要来回填充很多次才能充满背景,那么将background-repeat属性设置成background-image 和repeat-x 或 repeat-y来 达到填充背景的效果的做法是不明智的,这种填充方式的效率特别的低。你应该尝试使用一个足够大的图片来做background-image并 且使用background-repeat: no-repeat。
布局时不要使用<table>。 <table>在浏览器完全把它画出来之前需要反复绘制好几次。因为DOM中<table>是很少见的一种之后输出的会影响之前输出的显示效果的元素。对于表格数据来说,你可 以使用table-layout:fixed; 这是一种更有效的现实算法,根据CSS 2.1技术说明,这种写法可以让表格一行一行的输出。
尽可能的使用原始JavaScript。限制JavaScript框架的使用。
分享到:
相关推荐
在开发高效能Web程序的过程中,涉及到的技术和经验是非常丰富且多元的,以下是根据给定文件内容提取出的关于提高Web程序执行效率的30个要点: 1. 减少DOM操作:频繁操作DOM会降低页面性能,应当尽量减少DOM操作,...
这个"小型web程序实例DAO"是一个教学或实践项目,它演示了如何在Web应用程序中使用DAO来处理数据存取操作。下面将详细介绍DAO模式以及在Web程序中的应用。 DAO模式的核心思想是将业务逻辑与数据存取操作分离,这样...
本资源包含了一个利用C#语言编写的类库代码,旨在提高ASP.NET Web应用程序的运行效率。 在ASP.NET中,性能优化主要涉及以下几个关键领域: 1. **页面生命周期管理**:ASP.NET Web应用程序中的每个页面都有其生命...
Web程序设计基础1 在计算机领域,Web应用程序已经成为日常生活中不可或缺的一部分。它们是构建在Web服务器上,通过HTTP协议与用户交互的软件系统。太原理工大学的这一章课件主要介绍了Web应用程序的基础概念,包括...
在IT行业中,Web安装程序是用于自动化Web应用程序部署的关键工具。它们简化了复杂的过程,如安装数据库、配置IIS(Internet Information Services)站点以及编辑配置文件。本文将深入探讨"Web安装程序安装程序类"这...
《Web程序设计》是吉根林主编的一本深入讲解Web应用程序开发的经典著作,其第二版在第一版的基础上进行了更新和完善,旨在帮助读者掌握构建高效、动态、交互式的Web应用的关键技术。源代码作为教材的重要组成部分,...
【标题】: "Web程序设计16 - 深入理解Web开发的关键概念与技术" 【描述】: "Web程序设计16涵盖了Web开发的核心领域,包括前端开发、后端开发以及两者之间的交互。深入学习这个主题,我们将探索HTML、CSS、...
总的来说,《ASP.NET Web程序设计》电子教案涵盖了从基础到进阶的ASP.NET开发知识,包括Web Forms、MVC、控件、状态管理、数据库访问以及安全机制等多个方面,对于想要入门或提升ASP.NET技能的开发者来说,是一份...
【VB.NET构建Web程序】是关于使用Visual Basic .NET(简称VB.NET)语言来开发Web应用程序的技术主题。VB.NET是Microsoft .NET Framework的一部分,它提供了一种强大的编程环境,用于创建高效、可扩展的Web应用。 **...
总的来说,"C# Web自定义安装包示例程序 源码"是一个深入学习Web应用程序部署和安装包制作的好材料。通过学习和实践这个示例,开发者可以提升自己的项目打包技能,理解Web应用程序在实际部署中的复杂性,并掌握如何...
在提供的压缩包文件"**Cassinipp**"中,虽然具体文件内容未知,但我们可以推测这可能是一个Web服务程序的可执行文件或者包含了一套运行所需的所有文件。可能包含配置文件、库文件、日志文件等,用户解压后可以直接...
WEB应用程序定时执行任务是开发中常见的一种需求,用于在特定时间自动执行某些功能,比如记录系统日志、发送邮件通知等。在这个DEMO中,我们将探讨如何使用C#语言实现这样的功能,即使在网站关闭的情况下也能正常...
《FastDFS的Web程序实践与解析》 FastDFS是一个开源的高性能、轻量级的分布式文件系统,主要用于解决大容量存储和负载均衡的问题。在Java环境下,我们可以利用FastDFS开发Web应用程序,实现文件的上传、下载和删除...
Web程序设计是构建和维护基于Web的应用程序的过程,它涵盖了从服务器端脚本到客户端交互的各个层面。在这个领域,开发者使用多种技术和语言来创建动态、交互式的网站,为用户提供丰富的在线体验。以下是对Web程序...
【标题】"基于WEB程序设计基础-浙江大学(1)"涵盖了Web开发的基础概念和技术,这是学习Web应用程序开发的起点。在这一课程中,我们主要探讨如何使用各种编程语言和框架来构建交互式的Web应用。 【描述】"基于WEB程序...
Web程序设计是构建基于互联网的应用程序的过程,它允许用户通过Web浏览器访问和交互。在"Visual C#.NET Web应用程序设计"这一主题中,我们将深入探讨使用C#编程语言和.NET框架来开发高效、动态和交互式的Web应用。C#...
本文将深入探讨“超小编译调试C# WEB程序”的主题,解析如何利用轻量级的C#编译器和.NET设计环境高效地进行Web应用程序的开发与调试。 标题中的“超小编译调试”意味着我们将讨论一种轻量级、高效的C#编译器和调试...
Java Web程序开发是构建互联网应用程序的关键技术,它涵盖了从服务器端到客户端的全面开发过程。在Java Web领域,开发者利用一系列技术和工具来创建动态、交互式的网页应用。本主题主要涉及以下几个关键知识点: 1....