---------------
木鱼说
---------------
我只把有关例子的句子或改编了下:)
---------------
正文
---------------
Tip 1: Cache your objects!
for (i=0;i<document.images.length;i++)
document.images[i].src="blank.gif"
对象“document.images”被多次访问。由于浏览器必须在每次循环寻找“document.images”两次,实现的代码性能不高。如果页面上有10个图片,Images对象将被调用20次。过度访问JavaScript对象会影响浏览器性能,更不要提计算机内存了。
"cache your object"意味着,把需要重复访问的对象存储在一个用户定义的变量,供以后使用。性能提升会非常明显。下面是修改后的版本:
var theimages=document.images
for (i=0;i<theimages.length;i++)
theimages[i].src="blank.gif"
document.images[]引用的次数不仅仅减少一半,每次引用,浏览器就不必首先遍历document.images,而是径直访问容器数组。
在调用高度嵌套的DHTML对象时,记得使用这个技巧呀!比如document.all.myobject, 或 document.layers.firstlayer等。
有很多这样的例子,请看prototype.js中的用法:
for (var i = 0, length = properties.length; i < length; i++) {
//code here
}
for (var i = 0, length = arguments.length; i < length; i++) {
var lambda = arguments[i];
try {
returnValue = lambda();
break;
} catch (e) { }
}
for (var i = 0, length = this.length; i < length; i++)
iterator(this[i]);
for (var i = 0, length = this.length; i < length; i++) array.push(this[i]);
for (var i = 0, length = arguments.length; i < length; i++) {
if (Object.isArray(arguments[i])) {
for (var j = 0, arrayLength = arguments[i].length; j < arrayLength; j++)
array.push(arguments[i][j]);
} else {
array.push(arguments[i]);
}
}
Tip 2: Cache your scripts!
把js代码放到文件里。
<script type="text/javascript" src="imagescript.js"></script>
在yahoo的如何建设高性能网站博客里也提到了这一点,请参看http://developer.yahoo.com/performance/rules.html
Tip 3: Understand the cost of your objects
事实上,一些JavaScript对象很少宽容浏览器。请看下面的例子:
-object.innerText //IE only
-object.innerHTML
你知道第二个属性比第一个要求更多的系统资源调用次数吗?如果你刚好在IE里、刚好要改变某个<div>或<span>里的文本内容,innerText将是非常高效的选择。另一个例子就是CSS属性“display”和“visibility”;前者明显比后者开销大。
---------------
参考文章
---------------
http://www.javascriptkit.com/javatutors/efficientjs.shtml
该网站有很多实用、短小的文章,非常不错!
分享到:
相关推荐
JavaScript程序设计 面向过程与面向对象 6.1.1 面向过程与面向对象 1、概念 面向过程(Procedure Oriented)也可称之为“面向记录”,是一种以过程为中心的编程思想。它注重的是具体的步骤,只有按照步骤一步一步...
探索该语言的一些鲜为人知但有用的功能,例如如何在不同的浏览器上调试JavaScript问题并提高性能。 使用第三方JavaScript库创建交互式网页。 实验室中提供了计算机,但建议您带一台笔记本电脑进行课堂练习。先决...
以下是关于该项目的500字资源介绍:项目结构:本项目采用经典的MVC(Model-View-Controller)架构,分为前端、后端和数据库三个部分。前端使用HTML、CSS和JavaScript进行页面设计和交互实现;后端使用Spring Boot...
第十二章:网络层探秘及如何提高其性能和安全性 第十三章:CSS 和 JS 动画底层原理及如何优化其性能 第十四章:解析,语法抽象树及最小化解析时间的 5 条小技巧 第十五章:类和继承及 Babel 和 TypeScript 代码转换...
SpringBoot项目基于多维分类的...总体来说,SpringBoot项目基于多维分类的知识管理系统以其全面的功能、稳定的性能和优秀的用户体验,为企业和团队提供了一个高效的知识管理和协作平台,有助于促进知识的积累和流通。
* 提高了应用的性能 * 可以方便地在客户端和服务器端使用 * 由于 JSX,代码的可读性很好 * React 很容易与 Meteor、Angular 等其他框架集成 * 使用 React,编写 UI 测试用例变得非常容易 5. JSX JSX 是 JavaScript...
本文将详细介绍 JavaScript 就地编辑 HTML 节点实现代码的知识点,涵盖以下几个方面: 一、 JavaScript 就地编辑 HTML 节点的实现思路 JavaScript 就地编辑 HTML 节点的实现思路是通过 Dynamically 生成编辑输入框...
Require JS是一个流行的JavaScript模块化工具,可以将JavaScript代码组织成模块,从而提高代码的可维护性和重用性。 在本文中,作者使用Require JS来设计Web APP的前端,使用JAVA的Spring开发框架作为服务器端,...
* HTTP/2是超文本传输协议的第二个主要版本,旨在提高网络性能。 * 在HTTP/2中,引入了多路复用、头压缩、服务器推送等技术。 * 例如,服务器推送可以让服务器主动推送资源到客户端,减少了网络延迟。 六、...
实战:构建一个简单的网页:通过一个实际项目示例,展示如何从零开始构建一个包含HTML结构、CSS样式和JavaScript交互功能的完整网页。 调试和优化:介绍使用浏览器开发者工具进行调试的方法,以及一些性能优化的技巧...
REACT NATIVE大型项目通用化架构是一个非常复杂和多方面的知识点,我们需要了解同构体系、跨平台支持、高性能首屏和首次交互时间、组件生态和开发体系、抽象层和同构转换、浏览器环境模拟、同构组件和浏览器环境初始...
正确地获取 URL 和 IP 地址可以帮助开发者更好地理解用户的行为,提高应用程序的安全性和性能。本文将总结 ASP.NET 中获取 URL 和 IP 地址的方法。 一、使用 HttpContext.Current.Request.Url.ToString() 获取 URL ...
9. 在线作业管理系统的应用前景:该系统可以应用于高校的作业管理,提高作业管理效率,提供了教师端、学生端和管理员端三个平台,满足高校师生作业管理的需求。 10. Java EE 技术在在线作业管理系统中的应用:该...
2分法-通用存储过程分页(top max模式)版本(性能相对之前的not in版本极大提高) 分页存储过程:排序反转分页法 优化后的通用分页存储过程 sql语句 一些Select检索高级用法 SQL server 2005中新增的排序函数及应用 ...
"《C语言程序设计》课程移动学习平台的设计与实现.pdf" 在当今移动互联时代,移动学习平台的设计与实现变得越来越重要...同时,这个平台也可以帮助我们学习到许多有价值的知识和技术,从而提高我们的设计和实现能力。
题目内容涵盖Web前端开发的综合知识,包括响应式设计、布局、交互式设计、性能优化等方面。 在多选题部分,我们可以看到第1题到第15题,每题都有多个选项,要求选出所有正确答案。例如,第1题的正确答案是ABAC,第2...
1.2 系统特点:该系统具有科学的书店管理模式、人性化的操作界面和先进的购书流程三个特点。 二、系统分析 电子商务网上书店系统分析是指对网上书店系统的需求和功能进行分析,旨在设计一个高效、可靠的购书平台。...
《jQuery权威指南》除了理论知识丰富而全面外,它还有一个最大的特点就是注重实战,每个知识点都有一个完整的案例,包括需求分析、代码实现和结果展示三个部分,而且还包含两个综合性的案例,它的实践性之强是目前...
QQ客户端登录界面,中部有三个JPanel,有一个叫选项卡窗口管理。还可以更新好友列表,响应用户双击的事件,并得到好友的编号,把聊天界面加入到管理类,设置密码保护等。 Java编写的网页版魔方游戏 内容索引:JAVA...
三、JavaScript 基础 * JavaScript 语言基础 * JavaScript 中的变量、数据类型、函数等 * JavaScript 中的事件处理和 DOM 操作 四、NPM 包管理工具 * NPM 的安装和配置 * 使用 NPM 管理项目依赖 * NPM 的常用命令...