JS教程-JavaScript最佳实践：性能
JS教程-JavaScript最佳实践：性能
注意作用域
避免全局查找
一个例子：
function updateUI(){
var imgs = document.getElementByTagName("img");
for(var i=0, len=imgs.length; i
imgs[i].title = document.title + " image " + i;
}
var msg = document.getElementById("msg");
msg.innnerHTML = "Update complete.";
}
该函数可能看上去完全正常，但是它包含了三个对于全局document对象的引用。如果在页面上有多个图片，那么for循环中的document引用就会被执行多次甚至上百次，每次都会要进行作用域链查找。通过创建一个指向document对象的局部变量，就可以通过限制一次全局查找来改进这个函数的性能：
function updateUI(){
var doc = document;
var imgs = doc.getElementByTagName("img");
for(var i=0, len=imgs.length; i
imgs[i].title = doc.title + " image " + i;
}
var msg = doc.getElementById("msg");
msg.innnerHTML = "Update complete.";
}
这里，首先将document对象存在本地的doc变量中;然后在余下的代码中替换原来的document。与原来的版本相比，现在的函数只有一次全局查找，肯定更快。
选择正确方法
1.避免不必要的属性查找
获取常量值是非常高效的过程
var value = 5;
var sum = 10 + value;
alert(sum);
该代码进行了四次常量值查找：数字5，变量value，数字10和变量sum。
在JavaScript中访问数组元素和简单的变量查找效率一样。所以以下代码和前面的例子效率一样：
var value = [5,10];
var sum = value[0] + value[1];
alert(sum);
对象上的任何属性查找都比访问变量或者数组花费更长时间，因为必须在原型链中对拥有该名称的属性进行一次搜素。属性查找越多，执行时间就越长。
var values = {first: 5, second: 10};
var sum = values.first + values.second;
alert(sum);
这段代码使用两次属性查找来计算sum的值。进行一两次属性查找并不会导致显著的性能问题，但是进行成百上千次则肯定会减慢执行速度。
注意获取单个值的多重属性查找。例如：
var query = window.location.href.substring(window.location.href.indexOf("?"));
在这段代码中，有6次属性查找：window.location.href.substring()有3次，
window.location.href.indexOf()又有3次。只要数一数代码中的点的数量，就可以确定查找的次数了。这段代码由于两次用到了window.location.href，同样的查找进行了两次，因此效率特别不好。
一旦多次用到对象属性，应该将其存储在局部变量中。之前的代码可以如下重写：
var url = window.locaiton.href;
var query = url.substring(url.indexOf("?"));
这个版本的代码只有4次属性查找，相对于原始版本节省了33%。
一般来讲，只要能减少算法的复杂度，就要尽可能减少。尽可能多地使用局部变量将属性查找替换为值查找，进一步奖，如果即可以用数字化的数组位置进行访问，也可以使用命名属性(诸如NodeList对象)，那么使用数字位置。
2.优化循环
一个循环的基本优化步骤如下所示。
(1)减值迭代——大多数循环使用一个从0开始、增加到某个特定值的迭代器。在很多情况下，从最大值开始，在循环中不断减值的迭代器更加高效。
(2)简化终止条件——由于每次循环过程都会计算终止条件，所以必须保证它尽可能快。也就是说避免属性查找或其他操作。
(3)简化循环体——循环是执行最多的，所以要确保其最大限度地优化，确保其他某些可以被很容易移除循环的密集计算。
(4使用后测试循环——最常用for循环和while循环都是前测试循环。而如do-while这种后测试循环，可以避免最初终止条件的计算，因此运行更快。
以下是一个基本的for循环：
for(var i=0; i < value.length; i++){
process(values[i]);
}
这段代码中变量i从0递增到values数组中的元素总数。循环可以改为i减值，如下所示：
for(var i=value.length -1; i >= 0; i--){
process(values[i]);
}
终止条件从value.length简化成了0。
循环还能改成后测试循环，如下：
var i=values.length -1;
if (i> -1){
do{
process(values[i])
}while(--i>=0) //此处有个勘误，书上终止条件为(--i>0)，经测试，(--i>=0)才是正确的
}
此处最主要的优化是将终止条件和自减操作符组合成了单个语句，循环部分已经优化完全了。
记住使用“后测试”循环时必须确保要处理的值至少有一个，空数组会导致多余的一次循环而“前测试”循环则可以避免。
3.展开循环
当循环的次数是确定的，消除循环并使用多次函数调用往往更快。假设values数组里面只有3个元素，直接对每个元素调用process()。这样展开循环可以消除建立循环和处理终止条件的额外开销，使代码运行更快。
//消除循环
process(values[0]);
process(values[1]);
process(values[2]);
如果循环中的迭代次数不能事先确定，那可以考虑使用一种叫做Duff装置的技术。Duff装置的基本概念是通过计算迭代的次数是否为8的倍数将一个循环展开为一系列语句。
Andrew B.King提出了一个更快的Duff装置技术，将do-while循环分成2个单独的循环。以下是例子：
var iterations = Math.floor(values.length / 8);
var leftover = values.length % 8;
var i = 0;
if(leftover>0){
do{
process(values[i++]);
}while(--leftover > 0);
}
do{
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
process(values[i++]);
}while(--iterations > 0);
在这个实现中，剩余的计算部分不会在实际循环中处理，而是在一个初始化循环中进行除以8的操作。当处理掉了额外的元素，继续执行每次调用8次process()的主循环。
针对大数据集使用展开循环可以节省很多时间，但对于小数据集，额外的开销则可能得不偿失。它是要花更多的代码来完成同样的任务，如果处理的不是大数据集，一般来说不值得。
4.避免双重解释
当JavaScript代码想解析KavaScript的时候就会存在双重解释惩罚。当使用eval()函数或者是Function 构造函数以及使用setTimeout()传一个字符串参数时都会发生这种情况。
//某些代码求值——避免!!
eval("alert('Hello world!')");
//创建新函数——避免!!
var sayHi = new Function("alert('Hello world!')");
//设置超时——避免!!
setTimeout("alert('Hello world!')", 500);
在以上这些例子中，都要解析包含了JavaScript代码的字符串。这个操作是不能在初始的解析过程中完成的，因为代码是包含在字符串中的，也就是说在JavaScript代码运行的同时必须新启动一个解析器来解析新的代码。实例化一个新的解析器有不容忽视的开销，所以这种代码要比直接解析慢得多。
//已修正
alert('Hello world!');
//创建新函数——已修正
var sayHi = function(){
alert('Hello world!');
};
//设置一个超时——已修正
setTimeout(function(){
alert('Hello world!');
}, 500);
如果要提高代码性能，尽可能避免出现需要按照JavaScript解析的字符串。
5.性能的其他注意事项
(1)原生方法较快
(2)Switch语句较快
(3)位运算符较快
最小化语句数
1.多个变量声明
//4个语句——很浪费
var count = 5;
var color = "blue";
var values = [1,2,3];
var now = new Date();
//一个语句
var count = 5，
color = "blue"，
values = [1,2,3]，
now = new Date();
2.插入迭代值
当使用迭代值的时候，尽可能合并语句。
var name = values[i];
i++;
前面这2句语句各只有一个目的：第一个从values数组中获取值，然后存储在name中;第二个给变量i增加1.这两句可以通过迭代值插入第一个语句组合成一个语句。
var name = values[i++];
3.使用数组和对象字面量
//用4个语句创建和初始化数组——浪费
var values = new Array();
values[0] = 123;
values[1] = 456;
values[2] = 789;
//用4个语句创建和初始化对象——浪费
var person = new Object();
https://www.wendangku.net/doc/7014771321.html, = "Nicholas";
person.age = 29;
person.sayName = function(){
alert(https://www.wendangku.net/doc/7014771321.html,);
};
这段代码中，只创建和初始化了一个数组和一个对象。各用了4个语句：一个调用构造函数，其他3个分配数据。其实可以很容易地转换成使用字面量的形式。
//只有一条语句创建和初始化数组
var values = [13,456,789];
//只有一条语句创建和初始化对象
var person = {
name : "Nicholas",
age : 29,
sayName : function(){
alert(https://www.wendangku.net/doc/7014771321.html,);
}
};
重写后的代码只包含两条语句，减少了75%的语句量，在包含成千上万行JavaScript的代码库中，这些优化的价值更大。
只要有可能，尽量使用数组和对象的字面量表达方式来消除不必要的语句。
优化DOM交互
1.最小化现场更新
一旦你需要访问的DOM部分是已经显示的页面的一部分，那么你就是在进行一个现场更新。现场更新进行得越多，代码完成执行所花的事件就越长。
var list = document.getElementById('myList'),
item,
i;
for (var i = 0; i < 10; i++) {
item = document.createElement("li");
list.appendChild(item);
item.appendChild(document.createTextNode("Item" + i));
}
这段代码为列表添加了10个项目。添加每个项目时，都有2个现场更新：一个添加li元素，另一个给它添加文本节点。这样添加10个项目，这个操作总共要完成20个现场更新。
var list = document.getElementById('myList'),
fragment = document.createDocumentFragment(),
item,
i;
for (var i = 0; i < 10; i++) {
item = document.createElement("li");
fragment.appendChild(item);
item.appendChild(document.createTextNode("Item" + i));
}
list.appendChild(fragment);
在这个例子中只有一次现场更新，它发生在所有项目都创建好之后。文档片段用作一个临时的占位符，放置新创建的项目。当给appendChild()传入文档片段时，只有片段中的子节点被添加到目标，片段本身不会被添加的。
一旦需要更新DOM，请考虑使用文档片段来构建DOM结构，然后再将其添加到现存的文档中。
2.使用innerHTML
有两种在页面上创建DOM节点的方法：使用诸如createElement()和appendChild()之类的DOM方法，以及使用innerHTML。对于小的DOM更改而言，两种方法效率都差不多。然而，对于大的DOM更改，使用innerHTML 要比使用标准DOM方法创建同样的DOM结构快得多。
当把innerHTML设置为某个值时，后台会创建一个HTML解析器，然后使用内部的DOM调用来创建DOM结构，而非基于JavaScript的DOM调用。由于内部方法是编译好的而非解释执行的，所以执行快得多。
var list = document.getElementById("myList");
html = "";
i;
for (i=0; i < 10; i++){
html += "
Item " + i +"
";
}
list.innerHTML = html;
使用innerHTML的关键在于(和其他的DOM操作一样)最小化调用它的次数。
var list = document.getElementById("myList");
i;
for (i=0; i < 10; i++){
list.innerHTML += "
Item " + i +"
"; //避免!!!
}
这段代码的问题在于每次循环都要调用innerHTML，这是极其低效的。调用innerHTML实际上就是一次现场更新。构建好一个字符串然后一次性调用innerHTML要比调用innerHTML多次快得多。
3.使用事件代理(根据第13章的概念，我认为此处应为“事件委托”更为妥当)
4.注意HTMLCollection
任何时候要访问HTMLCollection，不管它是一个属性还是一个方法，都是在文档上进行一个查询，这个查询开销很昂贵。
var images = document.getElementsByTagName("img"),
image,
i,len;
for (i=0, len=images.length; i < len; i++){
image = images[i];
//处理
}
将length和当前引用的images[i]存入变量，这样就可以最小化对他们的访问。发生以下情况时会返回HTMLCollection对象：
进行了对getElementsByTagName()的调用;
获取了元素的childNodes属性;
获取了元素的attributes属性;
访问了特殊的集合，如document.forms、document.images等。
本文由优就业小编整理，请继续关注
JavaScript入门教程(初学者不可多得的优秀入门教材,通俗易懂,专业术语通俗化)
第 1 章 JavaScript 语言入门 1 为什么学习 JavaScript
提要：Javascript 是学习脚本语言的首选。她兼容性好，绝大多数浏览器均支持 Javascript，而且她功能强大，实现简单方便，入门简单，即使是程序设计新手也可以非常 快速容易地使用 JavaScript 进行简单的编程。
Javascript 是由 Netscape 公司创造的一种脚本语言。为便于推广，被定为 javascript，但 是 javascript 与 java 是两门不相干的语言， 作用也不一样。 作为一门独立的编程语言， javascript 可以做很多的事情，但它最主流的应用还是在 Web 上——创建动态网页(即网页特效)。 Javascript 在网络上应用广泛， 几乎所有的动态网页里都能找到它的身影。 目前流行的 AJAX 也是依赖于 Javascript 而存在的。 Javascript 与 Jscript 也不是一门相同的语言， Jscript 和 vbscript 是微软开发的两种脚本语 言，微软，Netscape 公司以及其他语言开发商为减少 web 开发者的兼容麻烦，所以成立 ECMA ， 该组 织 专 门制定 脚 本 语 言的 标 准 和规范 。 ECMA 制 定 的标 准脚 本 语 言 叫做 ECMAScript，Javascript 符合 ECMA 的标准，其实 Javascript 也可以叫做 ECMAScript. Jscript 也 ECMA 的标准， 但用户较少。vbscript 仅局限在微软的用户， Netscape 不支持。 概括地说，JavaScript 就是一种基于对象和事件驱动，并具有安全性能的脚本语言，脚 本语言简单理解就是在客户端的浏览器就可以互动响应处理程序的语言， 而不需要服务器的 处理和响应，当然 JavaScript 也可以做到与服务器的交互响应，而且功能也很强大。而相对 的服务器语言像 asp https://www.wendangku.net/doc/7014771321.html, php jsp 等需要将命令上传服务器，由服务器处理后回传处理结 果。对象和事件是 JavaScript 的两个核心。 JavaScript 可以被嵌入到 HTML 文件中，不需要经过 Web 服务器就可以对用户操作作 出响应，使网页更好地与用户交互；在利用客户端个人电脑性能资源的同时，适当减小服务 器端的压力，并减少用户等待时间。
2 将 JavaScript 插入网页的方法
与在网页中插入 CSS 的方式相似，使用
language="javascript"表示使用 JavaScript 脚本语言，脚本语言还有 vbscript、 jsscript 等，如果没有 language 属性，表示默认使用 JavaScript 脚本。其中的...就是代 码的内容。例如：
Javascript前台捕获浏览器关闭事件,后台处理一些善后工作
Javascript前台捕获浏览器关闭事件，后台处理一些善后工作 1.使用onbeforeunload 事件捕获浏览器关闭事件 IE和火狐都支持onbeforeunload事件，但是opera不支持。 注意：不仅关闭浏览器时会触发onbeforeunload事件，刷新等事件也会触发onbeforeunload事件。 2.事件注册方法
3.使用Ajax技术向服务器异步发送需要做的善后工作 这里以登陆为例：当用户关闭浏览器时，需要把用户登陆的状态修改为‘已退出’。由于用户登陆的状态存放在服务器的数据库中，所有必需在客户端捕获浏览器关闭动作，在浏览器关闭之前，向服务器发送一个请求，当然这个的请求是异步发送的（Ajax技术）；服务器收到请求后，把当前用户的登陆状态修改为‘已退出’。 function CloseBrowse()//用户关闭浏览器 { var n = window.event.screenX - window.screenLeft; var b = n > document.documentElement.scrollWidth - 20; //可以捕获点击小差和 Alt+F4 时浏览器关闭的情况，但是不能捕获在多窗口浏览模式下，用户点多窗口模式的小差关闭浏览器的情况 if (b && window.event.clientY < 0 || window.event.altKey) { var url = "Service.asmx/UpdateLoginState"; UpdateLoginState(url); } } //使用Ajax 向服务器发送异步请求，要求服务器修改登录状态 function UpdateLoginState() { var url = "Service.asmx/UpdateLoginState"; SendRequestToWebService(url); } function SendRequestToWebService(url){ createXmlhttp(); xmlhttp.open("POST", url, true); //xmlhttp.onreadystatechange = handleStateChange; xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;"); xmlhttp.send(); } //创建XMLHttpRequest对象 function createXmlhttp() {Javascript基础教程
Javascript简介 (2) Javascript简介 (2) 简单的Javascript入门示例 (4) 编写Javascript 代码 (5) 语句(Statements) (5) 语句块(Blocks) (6) 注释(Comments) (7) 表达式(Expressions) (8) 赋值和等于(Assignments and Equality) (9) Javascript常用运算符(Operators) (10) 算术运算符 (10) 逻辑运算符 (11) 赋值运算符 (12) Javascript 循环语句(Javascript Loop Statements) (12) 使用for 循环语句 (13) 使用for...in 循环语句 . (15) 使用while 和do...while 循环语句 (17) 使用break 和continue 语句 (20) Javascript写在哪里 (23) Javascript在
之间 (23)Javascript在
之间 (24) Javascript放在外部文件里 (25) Javascript变量(Javascript Variables) (26) 什么是变量？ (26) 变量的声明(Declaring Variables) (26) 变量的命名规则 (27) Javascript条件语句(Javascript Conditional Statements) (27) 单项条件结构(if条件语句) (28) 双向条件结构(if...else条件语句) (29) 多项条件结构(switch条件语句) (31) Javascript保留字(Javascript Reserved Words) (32) Javascript未来保留字(Javascript Future Reserved Words) (33) Javascript简介 Javascript简介《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解
《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用
使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式
JavaScript事件
我的记录（JavaScript事件）JavaScript 事件冒泡简介及应用实例 一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。 二、事件冒泡有什么作用 （1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。 【集中处理例子】