高性能javascript及页面注意事项

1.少用全局变量

原因：因为作用域链是一个堆栈的结构，所以遵循先进先出的原则，而javascript引擎在解析代码的时候，将全局对象放在栈底，然后向上依次出现的是不同作用域的活动对象（这些活动对象除了闭包没有相互依赖的关系），所以在查找变量的时候会从该活动对象开始，然后是闭包它的活动对象，最后是全局对象，如果全局变量过多就会影响获得变量时的速度，所以不要过多使用全局变量。

2.尽量使用局部变量封装全局变量

原因：正如前面所说，活动对象在栈的顶端，所以最先查找它的内容，当我们将document封装成局部变量后就会减少深层次查找的次数，使性能提高。

3.操作数组长度、对象属性时，尽量使用局部变量封装。

原因：IE、opera存取数组比对象属性快，而FF chrome safari正好相反，所以兼顾这些，我们最好封装一下。

4.尽量减少对象属性的深度

原因：深度太大，会增加javascript引擎对取得值的地址查找的开销，相当于增加了多层嵌套的指针，导致性能损失。

5.在for循环中尽量使用局部变量封装条件项

原因：例如for(var i=0;i<divs.length;i++) 的时候，如果divs为document.getElementsByTagName('div')，这样在每次循环判断条件的时候都会对DOM文档进行一次遍历求得长度，所以讲length封装起来，会提升性能。

6.谨慎的处理HTMLcollection对象（比如childNodes getElementsByTagName等取得DOM元素集合的对象），最好将其封装到数组里操作。

原因：还是因为操作DOM元素需要遍历DOM文档，而非DOM元素则不用遍历，所以请尽量减少对DOM的操作，而将DOM集合放到数组中去。

7.在针对safari浏览器的开发过程中，请尽量使用“.”获取对象属性而不是用“[]”。

8.建议在少于两次判断的环境下使用if-else，而大于三次的就用switch吧。而超过10次的时候，还是使用数组或json对象来通过索引来查找吧（这种模式相对简单）

9.如果循环数组的顺序从低到高或从高到低没有差别，那么还是从高到低比较好，比如我们循环输出一个数组中的内容：

var arr=[1,2,3,4,5];
var i=0;
while(i<arr.length){
alert(arr[i]);
}//这样开销会比较大，因为每次都要遍历求出数组元素的长度
//----------------------------------
var i=arr.length;
while(i--){
alert(arr[i]);
}//使用局部变量保存数组长度，然后该变量自减，连while中的判断都省了，因为0转换为布尔值就是false。

10.尽量少使用for-in循环，将其尽量改造成while 或for循环。

11.处理大数组时，请遵循duff策略。

duff策略：将大数组的个数拆分成8个一组，对这8个为一个单位的数组的操作不用循环处理，而是不怕繁琐的写出8行处理数组元素的代码，这样会提升大数组操作的性能。

12.用函数处理大数组的每个元素时，尽量使用定时器将每次操作挂起，时间设定在50-100ms比较合理

原因：如果简单的用循环来处理数组中的每个元素，如果是大数组，会造成页面的冻结和假死，给用户不好的体验，而用setTimeout，就会把每次操作都暂时挂起，让javascript引擎有其他的时间去处理队列中的其他函数，有效的防止了冻结和假死，而在设定的延迟时间之后，有可能javascript引擎是空闲的状态，可以更好的处理这些数组操作。相当于虚拟了一个后台操作。下面是zakas提出的解决方案：

function chunk(array,func,context){
setTimeout(function(){
var arr=array.shift();
func.call(context,item);
if(array.length>0){
setTimeout(arguments.callee,100);//递归循环这个过程 arguments.callee为chunk这个函数对象
}
},100);
}

13.在使用iframe的时候注意window onload的阻塞

原因：iframe的加载会对window onload进行阻塞，导致有些window unload事件中加载的代码在用户关掉页面的时候可能不被执行，所以需要我们最好在window onload时间发生时动态为iframe设定src属性。

PS:能不用iframe就不用。

14.CSS选择符的优化

原因：CSS选择符的读取方式为从右至左，所以在写的时候尽可能右边规则详细，而且尽量少用子选择符合后代选择符标签选择符。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 读Javascript高性能编程重点笔记

    第一点 //高效简洁 //低消能 children //childNodes childElementCount //childNodes.length firstElementChild //firstChild lastEelmentChild //lastChild nextElementSibling //nextSibling previousElementSibling //previousSibling 第二点:选择器的高效应用 <div id="footer_bottom&

  • JavaScript 总结几个提高性能知识点(推荐)

    前段时间花时间看了大半的<High Performance JavaScript>这本书啊,然后就开始忙项目了,庆幸最忙的一周已经熬过去了.由于空不出时间,这个月写的学习笔记也不多,忙完最苦X的一周,这两天晚上也算是挑灯夜读了...终于是在残血之际将这本书shut down了... 既然读完了,总归是要学到些什么的.说说对这本书的看法先吧,整体的来说,内容还是不错的,就是感觉有点老了(作为前端小白,也可能是自身水平有限,未能体会到其中真意).看这本书的过程中也是写了挺多代码用以测试的,并且对本

  • JavaScript 高性能数组去重的方法

    中午和同事吃饭,席间讨论到数组去重这一问题 我立刻就分享了我常用的一个去重方法,随即被老大指出这个方法效率不高 回家后我自己测试了一下,发现那个方法确实很慢 于是就有了这一次的高性能数组去重研究 一.测试模版 数组去重是一个老生常谈的问题,网上流传着有各种各样的解法 为了测试这些解法的性能,我写了一个测试模版,用来计算数组去重的耗时 // distinct.js let arr1 = Array.from(new Array(100000), (x, index)=>{ return index

  • 高性能的javascript之加载顺序与执行原理篇

    高性能的javascript之加载顺序与执行原理篇

    前言 javascript在浏览器中的性能,可以认为是开发者所面临的最严重的可用性问题,今天,自己看完高性能的javascript的加载和执行这一章,聊聊怎么解决js的加载顺序和执行的原理,下面话不多说了,来一起看看详细的介绍: 当浏览器遇到<script>标签的时候,浏览器必须先话时间下载外链的文件然后并执行,在这过程中,页面渲染和用户交互是完全被阻塞的. 脚本放在哪里比较好? 这种情况无疑是存在严重的性能问题的,由于脚本会阻塞页面的渲染,直到它们全部下载并执行完成后,页面渲染才会继续,下面

  • 高性能javascript及页面注意事项

    1.少用全局变量 原因:因为作用域链是一个堆栈的结构,所以遵循先进先出的原则,而javascript引擎在解析代码的时候,将全局对象放在栈底,然后向上依次出现的是不同作用域的活动对象(这些活动对象除了闭包没有相互依赖的关系),所以在查找变量的时候会从该活动对象开始,然后是闭包它的活动对象,最后是全局对象,如果全局变量过多就会影响获得变量时的速度,所以不要过多使用全局变量. 2.尽量使用局部变量封装全局变量 原因:正如前面所说,活动对象在栈的顶端,所以最先查找它的内容,当我们将document封装

  • 高性能JavaScript 重排与重绘(2)

    高性能JavaScript 重排与重绘(2)

    先回顾下前一篇文章高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的API querySelector()以及querySelectorAll(),在做组合选择的时候可以大胆使用.而本文主要讲的是DOM编程可能最耗时的地方,重排和重绘. 1.什么是重排和重绘 浏览器下载完页面中的所有组件--HTML标记.JavaScript.CSS.图片之后会解析生成两个内部数

  • 你不知道的高性能JAVASCRIPT

    本文会分享一些高效的JavaScript的最佳实践,提高大家对JS的底层和实现原理的理解. 数据存储 计算机学科中有一个经典问题是通过改变数据存储的位置来获得最佳的读写性能,在JavaScript中,数据存储的位置会对代码性能产生重大影响. – 能使用{}创建对象就不要使用new Object,能使用[]创建数组就不要使用new Array.JS中字面量的访问速度要高于对象. – 变量在作用域链中的位置越深,访问所需实践越长.对于这种变量,可以通过缓存使用局部变量保存起来,减少对作用域链访问次数

  • High Performance JavaScript(高性能JavaScript)读书笔记分析

    第一章:加载和执行 浏览器的JavaScript的引擎是编译器层的优化: 当浏览器执行JavaScript代码时,不能同时做其他任何事情(单一进程),意味着<script>标签每次出现都霸道地让页面等带脚本的解析和执行(每个文件必须等到前一个文件下载并执行完成才会开始下载),所以头部的JS和CSS用来渲染页面,交互行为(几乎所有)的JS放在<body>底部: 主流浏览器都允许并行下载JS. 减少外链脚本数量将会改善性能(合并JS) 任何网站都可以使用一个把制定文件合并处理后的URL

  • 高性能JavaScript DOM编程（1）

    我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间用收费桥梁连接,ECMAScript每次访问DOM,都要途径这座桥,并交纳"过桥费",访问DOM的次数越多,费用也就越高.因此,推荐的做法是尽量减少过桥的次数,努力待在ECMAScript岛上.我们不可能不用DOM的接口,那么,怎样才能提高程序的效率? 1.DOM访问与修改 访问DOM元素是

  • JavaScript获得页面base标签中url的方法

    本文实例讲述了JavaScript获得页面base标签中url的方法.分享给大家供大家参考.具体如下: 如果网页中定义了base标签,我们可以通过js代码获得base的url地址 <!DOCTYPE html> <html> <head> <base id="htmldom" href="http://www.jb51.net/"> </head> <body> <p>Base UR

  • Javascript刷新页面的实例

    Javascript刷新页面的实例 Javascript刷新页面的几种方法: 1    history.go(0) 2    location.reload() 3    location=location 4    location.assign(location) 5    document.execCommand('Refresh') 6    window.navigate(location) 7    location.replace(location) 8    document.U

  • 用JavaScript获取页面文档内容的实现代码

    JavaScript的document对象包含了页面的实际内容,所以利用document对象可以获取页面内容,例如页面标题.各个表单值. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js基础</title> </head> <body> <p>一. 用Documen

  • JavaScript实现页面实时显示当前时间的简单实例

    复制代码 代码如下: <html> <head> <title>JavaScript实现页面实时显示当前时间</title> </head> <body> <script language="javascript"> function showtime() { var today,hour,second,minute,year,month,date; var strDate ; today=new Da

  • JavaScript实现页面定时刷新（定时器，meta）

    接下来进入正题-定时不断刷新页面的方法: 1.看到定时,很容易想到js的定时器: //第一种方法 //由于我们已经有了一个定时器,所以只要在定时器test中加入一句刷新页面的代码即可 function test(){ h1.style.color = "red"; h1.innerText = "我变化了"; history.go(0);//可以换成上一篇博客的任何一种方法. } setInterval(test, 1000); 2.通过meta来设置: <!

随机推荐