IE6.0中js优化

IE6.0中js优化

js优化针对IE6.0起作用，总结一下几点：

一，字符串拼接：用数组拼接

function func2(){
var start = new Date().getTime();
var array = [];
for(var i = 0; i < 10000; i++){
array[i] = "<input type='button' value='a'>";
}

二，for 循环：先把长度算出来直接调用

function func2(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0, len = divs.length; i < len; i++){
//"效率高"
}
三，减少页面的重绘：可以用一中把页面拼接起来然后再赋值给页面

function func2(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
var arr = [];
for(var i = 0; i < 100; i++){
arr[i] = str + i;
}
obj.innerHTML = arr.join("");
四，减少作用域链上的查找次数：如果取多个页面值则定义一个document对象，再调用这个对象
var doc = document;
for(var i = 0; i < 10000; i++){
var but1 = doc.getElementById("but1");
var but2 = doc.getElementById("but2");
var inputs = doc.getElementsByTagName("input");
}

}

五，避免双重解释：不要重复调用函数或者方法

1、字符串的拼接

　　字符串的拼接在我们开发中会经常遇到，所以我把其放在首位，我们往往习惯的直接用+=的方式来拼接字符串，其实这种拼接的方式效率非常的低，我们可以用一种巧妙的方法来实现字符串的拼接，那就是利用数组的join方法。

//效率低的
function func1(){
var start = new Date().getTime();
var template = "";
for(var i = 0; i < 10000; i++){
template += "<input type='button' value='a'>";
}
var end = new Date().getTime();
document.getElementById("one").innerHTML = template;
alert("用时:" + (end - start) + "毫秒");
}
//效率高的
function func2(){
var start = new Date().getTime();
var array = [];
for(var i = 0; i < 10000; i++){
array[i] = "<input type='button' value='a'>";
}
var end = new Date().getTime();
document.getElementById("one").innerHTML = array.join("");
alert("用时:" + (end - start) + "毫秒");
}

　　我们看看其在不同浏览器下执行的情况

　　我们会发现，在IE6下其差别是相当明显的，其实这种情况在IE的高版本中体现的也非常明显，但是在Firefox下却没有多大的区别，相反第二种的相对效率还要低点，不过只是差别2ms左右，而Chrome也和Firefox类似。另外在这里顺便说明一下，在我们给数组添加元素的时候，很多人喜欢用数组的原生的方法push，其实直接用arr[i]或者arr[arr.length]的方式要快一点，大概在10000次循环的情况IE浏览器下会有十几毫秒的差别。

　　2、for循环

　　for循环是我们经常会遇到的情况，我们先看看下面例子：

<input type="button" value="效率低" οnclick="func1()" />
<input type="button" value="效率高" οnclick="func2()" />
var arr = [];
for(var i = 0; i < 10000; i++){
arr[i] = "<div>" + i + "</div>";
}
document.body.innerHTML += arr.join("");

//效率低的
function func1(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0; i < divs.length; i++){
//"效率低"
}
var end = new Date().getTime();
alert("用时：" + (end - start) + "毫秒");
}
//效率高的
function func2(){
var divs = document.getElementsByTagName("div");
var start = new Date().getTime();
for(var i = 0, len = divs.length; i < len; i++){
//"效率高"
}
var end = new Date().getTime();
alert("用时：" + (end - start) + "毫秒");
}

　　由上表可以看出，在IE6.0下，其差别是非常明显，而在Firefox和Chrome下几乎没有差别，之所以在IE6.0下会有这种情况，主要是因为for循环在执行中，第一种情况会每次都计算一下长度，而第二种情况却是在开始的时候计算长度，并把其保存到一个变量中，所以其执行效率要高点，所以在我们使用for循环的时候，特别是需要计算长度的情况，我们应该开始将其保存到一个变量中。但是并不是只要是取长度都会出现如此明显的差别，如果我们仅仅是操作一个数组，取得的是一个数组的长度，那么其实两种方式的写法都差不多，我们看下面的例子：

<input type="button" value="效率低" οnclick="func1()" />
<input type="button" value="效率高" οnclick="func2()" />
var arr2 = [];
for(var i = 0; i < 10000; i++){
arr2[i] = "<div>" + i + "</div>";
}
//效率低的
function func1(){
var start = new Date().getTime();
for(var i = 0; i < arr2.length; i++){
//"效率低"
}
var end = new Date().getTime();
alert("用时：" + (end - start) + "毫秒");
}
//效率高的
function func2(){
var start = new Date().getTime();
for(var i = 0, len = arr2.length; i < len; i++){
//"效率高"
}
var end = new Date().getTime();
alert("用时：" + (end - start) + "毫秒");
} 　　

　　从上表可以看出，如果仅仅是一个数组的话，我们看到其实两种写法都是差不多的，其实如果我们把循环再上调到100000次的话，也仅仅是差别几毫秒而已，所以在数组的情况下，我认为都是一样的。对于for循环的优化，也有人提出很多点，有人认为用-=1，或者从大到小的方式循环等等，我认为是完全没有必要的，这些优化往往实际情况下根本没有表现出来，换句话说只是计算机级别的微小的变化，但是给我们带来的却是代码的可读性大大的降低，所以实在是得不偿失。

　　3、减少页面的重绘

　　减少页面重绘虽然本质不是JS本身的优化，但是其往往是由JS引起的，而重绘的情况往往是严重影响页面性能的，所以完全有必要拿出来，我们看下面例子：

<div id="demo"></div>
<input type="button" value="效率低" οnclick="func1()" />
<input type="button" value="效率高" οnclick="func2()" />
var str = "<div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div><div>这是一个测试字符串</div>";
//效率低的
function func1(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
for(var i = 0; i < 100; i++){
obj.innerHTML += str + i;
}
var end = new Date().getTime();
alert("用时 " + (end - start) + " 毫秒");
}
//效率高的
function func2(){
var obj = document.getElementById("demo");
var start = new Date().getTime();
var arr = [];
for(var i = 0; i < 100; i++){
arr[i] = str + i;
}
obj.innerHTML = arr.join("");
var end = new Date().getTime();
alert("用时 " + (end - start) + " 毫秒");
}

　　在例子中，我只是用了100次的循环，因为如果用10000次循环的话，浏览器基本上就卡住不动了，但是即使是100次的循环，我们看看下面的执行结果。

　　可以看到的是，这简直是一个惊人的结果，仅仅100次的循环，不管是在什么浏览器下，都出现了如此之大的差别，另外我们还发现，在这里，IE6的执行效率居然比起Firefox还要好很多，可见Firefox在页面重绘这方面并没有做一些的优化。这里还要注意的是，一般影响页面重绘的不仅仅是innerHTML，如果改变元素的样式，位置等情况都会触发页面重绘，所以在平时一定要注意这点。

　　4、减少作用域链上的查找次数

　　我们知道，js代码在执行的时候，如果需要访问一个变量或者一个函数的时候，它需要遍历当前执行环境的作用域链，而遍历是从这个作用域链的前端一级一级的向后遍历，直到全局执行环境，所以这里往往会出现一个情况，那就是如果我们需要经常访问全局环境的变量对象的时候，我们每次都必须在当前作用域链上一级一级的遍历，这显然是比较耗时的，我们看下面的例子：

　　上面代码中，第二种情况是先把全局对象的变量放到函数里面先保存下来，然后直接访问这个变量，而第一种情况是每次都遍历作用域链，直到全局环境，我们看到第二种情况实际上只遍历了一次，而第一种情况却是每次都遍历了，所以我们看看其执行结果：

　　从上表中可以看出，其在IE6下差别还是非常明显的，而且这种差别在多级作用域链和多个全局变量的情况下还会表现的非常明显。

　　5、避免双重解释

　　双重解释的情况也是我们经常会碰到的，有的时候我们没怎么考虑到这种情况会影响到效率，双重解释一般在我们使用eval、new Function和setTimeout等情况下会遇到，我们看看下面的例子：

<div id="demo"></div>
<input id="but1" type="button" οnclick="func1()" value="效率低"/>
<input id="but2" type="button" οnclick="func2()" value="效率高"/>
var sum, num1 = 1, num2 = 2;
function func1(){
var start = new Date().getTime();
for(var i = 0; i < 10000; i++){
var func = new Function("sum+=num1;num1+=num2;num2++;");
func();
}
var end = new Date().getTime();
alert("用时 " + (end - start) + " 毫秒");
}

function func2(){
var start = new Date().getTime();
for(var i = 0; i < 10000; i++){
sum+=num1;
num1+=num2;
num2++;
}
var end = new Date().getTime();
alert("用时 " + (end - start) + " 毫秒");
}

　　第一种情况我们是使用了new Function来进行双重解释，而第二种是避免了双重解释，我们看看在不同浏览器下的表现：

　　可以看到，在所有的浏览器中，双重解释都是有很大开销的，所以在实际当中要尽量避免双重解释。

　　感谢"SeaSunK"对第四点测试报告错误的指正，现在已经修改过来了。至于最后一点提出的func1每次都初始化，没有可比性，所以我给换了eval，结果发现，在IE6.0下还是有影响，而且在Firefox下，使用eval对效率的影响程度更加厉害，在Firefox下，如果10000次循环，需要十多秒的时间，所以我把循环都变成了1000次。看代码和报告。

var sum, num1 = 1, num2 = 2;
function func1(){
var start = new Date().getTime();
for(var i = 0; i < 1000; i++){
eval("sum+=num1;num1+=num2;num2++;");
}
var end = new Date().getTime();
alert("用时 " + (end - start) + " 毫秒");
}
function func2(){
var start = new Date().getTime();
for(var i = 0; i < 1000; i++){
sum+=num1;
num1+=num2;
num2++;
}
var end = new Date().getTime();
alert("用时 " + (end - start) + " 毫秒");
}

IE6.0中js优化相关推荐

[原+转]CSS hack 小技巧让你的CSS 兼容ff ie6.0 ie7.0
在做东西的时候发现在ie6.0中做的东西到ff下面目全非 100% css不兼容不问题查阅了相关资料个人感觉以下是一个笨的也是比较快的处理兼容问题的方法方法就是针对不同的浏览器写不同的css 以 ...
学习笔记——vue3.0中的性能优化
前言前端的性能优化主要从如何更快.如何更小.如何更省三个方面考虑. 更快可以从算法层面优化,使代码执行步骤更少:更小可以尝试减小文件体积,使用webpack压缩代码,压缩图片等:更省可以从如何减少h ...
!Important:CSS中!important的作用用于Ie6.0 与Ie7.0、firefox
{*rule !important}这个css规则当今在网页制作的时候的普及已经非常流行了,以前我对它的理解就停留在'浏览器是否识别阶段' 而没有真正去研究过,可是现在发生了变化.众所周知,!impo ...
IE6.0、IE7.0 、FireFox 在样式中的不同写法.doc
IE6.0.IE7.0 .FireFox 在样式中的不同写法 2009年3月26日 15:44:27 发布:hugo 或许你一直在抱怨为什么要专门为IE和FF写不同的CSS,为什么IE这样让人头疼,然 ...
指令在Vue.js 2.0中的变化
由于指令在 Vue.js2.0 中发生了比较大的变化,Vue.js 2.0中的指令功能更为单一,很多和组件重复的功能和作用都进行了删除,指令也更专注于本身作用域的操作,而尽量不去影响指令外的 DOM ...
js中三目运算符优化
js中三目运算符优化 let typeofa = 2 let result = typeofa === 1 ? '值1' : typeofa=== 2 ? '值2' :'值3' console.log ...
ASP.NET 2.0 中配合 Master Page 使用的优化 CSS 模型
ASP.NET 2.0 中增加了内建的 MasterPage 的支持,这对我们来说是一个很大的便利.然而经过一段时间的使用,我发现 MasterPage 并不是那么完美:嵌套的 MasterPage ...
标准化Keras：TensorFlow 2.0中的高级API指南
TensorFlow正准备发布2.0版本 . 在本文中,我们希望预览TensorFlow的高级API标题的方向,并回答一些常见问题. Keras是一个非常受欢迎的高级API,用于构建和培训深度学习模型 ...
js优化阿里云图片加载（二）
导语:上篇js优化阿里云图片加载中,总结了一种优化的方法,但是每个实现图片缓存的界面都需要注入相关代码,因此考虑是不是有另外一种方式. 优化后的方案:定义一个全局的缓存池来缓存真实路径. 纠结的点:在 ...
在Grails 2.0中使用Servlet 3.0异步功能
上周,我与某人谈论了Grails 2中对Servlet 3.0异步功能的新支持,并意识到我对可用功能并不了解. 所以我想我会尝试一下并分享一些例子. 该文档对这个主题有些了解,因此首先介绍一些背景信息 ...

IE6.0中js优化

IE6.0中js优化相关推荐

最新文章

热门文章