学习javascript总结下来的性能优化的小知识(二)

上面一篇文章大致介绍了一些javascript当中使用的一些小技巧,当下这篇文章继续介绍一下内存管理、松散耦合、性能方面的一些小知识、为避免错误应该注意的点

内存管理

1、循环引用

如果循环引用中包含DOM对象或者ActiveX对象,那么就会发生内存泄露。内存泄露的后果是在浏览器关闭前,即使是刷新页面,这部分内存不会被浏览器释放。

简单的循环引用:

        var el = document.getElementById(‘MyElement‘);
        var func = function () {
            //…
        }
        el.func = func;
        func.element = el;

但是通常不会出现这种情况。通常循环引用发生在为dom元素添加闭包作为expendo的时候。

        function init() {
            var el = document.getElementById(‘MyElement‘);
            el.onclick = function () {
                //……
            }
        }
        init();

init在执行的时候,当前上下文我们叫做context。这个时候,context引用了el,el引用了function,function引用了context。这时候形成了一个循环引用。

下面2种方法可以解决循环引用:

1)  置空dom对象

       function init() {
            var el = document.getElementById(‘MyElement‘);
            el.onclick = function () {
                //……
            }
        }
        init();
        //可以替换为:
        function init() {
            var el = document.getElementById(‘MyElement‘);
            el.onclick = function () {
                //……
            }
            el = null;
        }
        init();

将el置空,context中不包含对dom对象的引用,从而打断循环应用。

如果我们需要将dom对象返回,可以用如下方法:

        function init() {
            var el = document.getElementById(‘MyElement‘);
            el.onclick = function () {
                //……
            }
            return el;
        }
        init();
        //可以替换为:
        function init() {
            var el = document.getElementById(‘MyElement‘);
            el.onclick = function () {
                //……
            }
            try {
                return el;
            } finally {
                el = null;
            }
        }
        init();

2)  构造新的context

        function init() {
            var el = document.getElementById(‘MyElement‘);
            el.onclick = function () {
                //……
            }
        }
        init();
        //可以替换为:
        function elClickHandler() {
            //……
        }
        function init() {
            var el = document.getElementById(‘MyElement‘);
            el.onclick = elClickHandler;
        }
        init();

把function抽到新的context中,这样,function的context就不包含对el的引用,从而打断循环引用。

2、通过javascript创建的dom对象,必须append到页面中

IE下,脚本创建的dom对象,如果没有append到页面中,刷新页面,这部分内存是不会回收的!

        function create() {
            var gc = document.getElementById(‘GC‘);
            for (var i = 0; i < 5000; i++) {
                var el = document.createElement(‘div‘);
                el.innerHTML = "test";
                //下面这句可以注释掉,看看浏览器在任务管理器中,点击按钮然后刷新后的内存变化
                gc.appendChild(el);
            }
        }

3、释放dom元素占用的内存

将dom元素的innerHTML设置为空字符串,可以释放其子元素占用的内存。

在rich应用中,用户也许会在一个页面上停留很长时间,可以使用该方法释放积累得越来越多的dom元素使用的内存。

4、释放javascript对象

在rich应用中,随着实例化对象数量的增加,内存消耗会越来越大。所以应当及时释放对对象的引用,让GC能够回收这些内存控件。

对象:obj = null

对象属性:delete obj.myproperty

数组item:使用数组的splice方法释放数组中不用的item

5、避免string的隐式装箱

对string的方法调用,比如‘xxx‘.length,浏览器会进行一个隐式的装箱操作,将字符串先转换成一个String对象。推荐对声明有可能使用String实例方法的字符串时,采用如下写法:

var myString = new String(‘Hello World‘);

松散耦合

1、解耦HTML/JavaScript

JavaScript和HTML的紧密耦合:直接写在HTML中的JavaScript、使用包含内联代码的<script>元素、使用HTML属性来分配事件处理程序等

HTML和JavaScript的紧密耦合:JavaScript中包含HTML,然后使用innerHTML来插入一段html文本到页面

其实应该是保持层次的分离,这样可以很容易的确定错误的来源,所以我们应确保HTML呈现应该尽可能与JavaScript保持分离

2、解耦CSS/JavaScript

显示问题的唯一来源应该是CSS,行为问题的唯一来源应该是JavaScript,层次之间保持松散耦合才可以让你的应用程序更加易于维护,所以像以下的代码element.style.color=”red”尽量改为element.className=”edit”,而且不要在css中通过表达式嵌入JavaScript

3、解耦应用程序/事件处理程序

将应用逻辑和事件处理程序相分离:一个事件处理程序应该从事件对象中提取,并将这些信息传送给处理应用逻辑的某个方法中。这样做的好处首先可以让你更容易更改触发特定过程的事件,其次可以在不附加事件的情况下测试代码,使其更易创建单元测试

性能方面的注意事项

1、尽量使用原生方法

2、switch语句相对if较快

通过将case语句按照归可能到最不可能的顺序进行组织

3、位运算较快

当进行数字运算时,位运算操作要比任何布尔运算或者算数运算快

4、巧用||&&布尔运算符

        function eventHandler(e) {
            if (!e) e = window.event;
        }
        //可以替换为:
        function eventHandler(e) {
            e = e || window.event;
        }
        if (myobj) {
            doSomething(myobj);
        }
        //可以替换为:
        myobj && doSomething(myobj);

避免错误应注意的地方

1、每条语句末尾须加分号

在if语句中,即使条件表达式只有一条语句也要用{}把它括起来,以免后续如果添加了语句之后造成逻辑错误

2、使用+号时需谨慎

JavaScript 和其他编程语言不同的是,在 JavaScript 中,‘+‘除了表示数字值相加,字符串相连接以外,还可以作一元运算符用,把字符串转换为数字。因而如果使用不当,则可能与自增符‘++‘混淆而引起计算错误

        var valueA = 20;
        var valueB = "10";
        alert(valueA + valueB);     //ouput: 2010
        alert(valueA + (+valueB));  //output: 30
        alert(valueA + +valueB);    //output:30
        alert(valueA ++ valueB);     //Compile error

3、使用return语句需要注意

一条有返回值的return语句不要用()括号来括住返回值,如果返回表达式,则表达式应与return关键字在同一行,以避免压缩时,压缩工具自动加分号而造成返回与开发人员不一致的结果

        function F1() {
            var valueA = 1;
            var valueB = 2;
            return valueA + valueB;
        }
        function F2() {
            var valueA = 1;
            var valueB = 2;
            return
            valueA + valueB;
        }
        alert(F1());  //output: 3
        alert(F2());  //ouput: undefined

4、==和===的区别

避免在if和while语句的条件部分进行赋值,如if (a = b),应该写成if (a == b),但是在比较是否相等的情况下,最好使用全等运行符,也就是使用===和!==操作符会相对于==和!=会好点。==和!=操作符会进行类型强制转换

        var valueA = "1";
        var valueB = 1;
        if (valueA == valueB) {
            alert("Equal");
        }
        else {
            alert("Not equal");
        }
        //output: "Equal"
        if (valueA === valueB) {
            alert("Equal");
        }
        else {
            alert("Not equal");
        }
        //output: "Not equal"

5、不要使用生偏语法

不要使用生偏语法,写让人迷惑的代码,虽然计算机能够正确识别并运行,但是晦涩难懂的代码不方便以后维护

6、函数返回统一类型

虽然JavaScript是弱类型的,对于函数来说,前面返回整数型数据,后面返回布尔值在编译和运行都可以正常通过,但为了规范和以后维护时容易理解,应保证函数应返回统一的数据类型

7、总是检查数据类型

要检查你的方法输入的所有数据,一方面是为了安全性,另一方面也是为了可用性。用户随时随地都会输入错误的数据。这不是因为他们蠢,而是因为他们很忙,并且思考的方式跟你不同。用typeof方法来检测你的function接受的输入是否合法

8、何时用单引号,何时用双引号

虽然在JavaScript当中,双引号和单引号都可以表示字符串, 为了避免混乱,我们建议在HTML中使用双引号,在JavaScript中使用单引号,但为了兼容各个浏览器,也为了解析时不会出错,定义JSON对象时,最好使用双引号

9、部署

  • 用JSLint运行JavaScript验证器来确保没有语法错误或者是代码没有潜在的问
  • 部署之前推荐使用压缩工具将JS文件压缩
  • 文件编码统一用UTF-8
  • JavaScript 程序应该尽量放在 .js 的文件中,需要调用的时候在 HTML 中以 <script src="filename.js"> 的形式包含进来。JavaScript 代码若不是该 HTML 文件所专用的,则应尽量避免在 HTML 文件中直接编写 JavaScript 代码。因为这样会大大增加 HTML 文件的大小,无益于代码的压缩和缓存的使用。另外,<script src="filename.js"> 标签应尽量放在文件的后面,最好是放在</body>标签前。这样会降低因加载 JavaScript 代码而影响页面中其它组件的加载时间。

永远不要忽略代码优化工作,重构是一项从项目开始到结束需要持续的工作,只有不断的优化代码才能让代码的执行效率越来越好

时间: 2024-10-16 15:19:19

学习javascript总结下来的性能优化的小知识(二)的相关文章

学习javascript总结下来的性能优化的小知识(一)

一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javascript理解的还不够透彻异或是自己太笨,更多的是自己不擅于思考懒得思考以至于里面说的一些精髓都没有太深入的理解. 鉴于想让自己有一个提升,进不了一个更加广阔的天地,总得找一个属于自己的居所好好生存,所以平时会有意无意的去积累一些使用jQuerry的常用知识,特别是对于性能要求这一块,总是会想是不是有更好的方式来实现. 下面是我总结的一些小技巧,仅供参考.(我先会说一

我总结的js性能优化的小知识

阅读目录 前言 避免全局查找 定时器 字符串连接 避免with语句 数字转换成字符串 浮点数转换成整型 各种类型转换 多个类型声明 插入迭代器 使用直接量 使用DocumentFragment优化多次append 使用一次innerHTML赋值代替构建dom元素 通过模板元素clone,替代createElement 使用firstChild和nextSibling代替childNodes遍历dom元素 删除DOM节点 使用事件代理 重复使用的调用结果,事先保存到局部变量 注意NodeList

总结的js性能优化的小知识

阅读目录 前言 避免全局查找 定时器 字符串连接 避免with语句 数字转换成字符串 浮点数转换成整型 各种类型转换 多个类型声明 插入迭代器 使用直接量 使用DocumentFragment优化多次append 使用一次innerHTML赋值代替构建dom元素 通过模板元素clone,替代createElement 使用firstChild和nextSibling代替childNodes遍历dom元素 删除DOM节点 使用事件代理 重复使用的调用结果,事先保存到局部变量 注意NodeList

[转载]网站前端性能优化之javascript和css——网站性能优化

之前看过Yahoo团队写的一篇关于网站性能优化的文章,文章是2010年左右写的,虽然有点老,但是很多方面还是很有借鉴意义的.关于css的性能优化,他提到了如下几点: CSS性能优化 1.把样式表置于顶部 现把样式表放到文档的< head />内部似乎会加快页面的下载速度.这是因为把样式表放到< head />内会使页面有步骤的加载显示. 注重性能的前端服务器往往希望页面有秩序地加载.同时,我们也希望浏览器把已经接收到内容尽可能显示出来.这对于拥有较多内容的页面和网速较慢的用户来说特

论代码级性能优化变迁之路(二)

本文是"论代码级性能优化变迁之路一"的第二篇. 在上一篇我们主要介绍了所遇到问题的五点,那么今天接下来讨论剩下的问题,我们先再回顾一下之前讨论的问题: 1.单台40TPS,加到4台服务器能到60TPS,扩展性几乎没有. 2.在实际生产环境中,经常出现数据库死锁导致整个服务中断不可用. 3.数据库事务乱用,导致事务占用时间太长. 4.在实际生产环境中,服务器经常出现内存溢出和CPU时间被占满. 5.程序开发的过程中,考虑不全面,容错很差,经常因为一个小bug而导致服务不可用. 6.程序中

分享10条PHP性能优化的小技巧,帮助你更好的用PHP开发

1. foreach效率更高,尽量用foreach代替while和for循环. 2. 循环内部不要声明变量,尤其是对象这样的变量. 3. 在多重嵌套循环中,如有可能,应当将最长的循环放在内层,最短循环放在外层,从而减少cpu跨循环层的次数,优化程序性能. 4. 用单引号替代双引号引用字符串以实现PHP性能优化. 5. 用i+=1代替i=i+1.符合c/c++的习惯,效率还高. 6. 优化Select SQL语句,在可能的情况下尽量少的进行Insert.Update操作,达到PHP性能优化的目的.

JavaScript基础概念之----性能优化

一.加载与执行 body闭合标签之前,将所有的script标签放到页面的底部,能确保在脚本执行前页面已经完成渲染 合并脚本,页面中script标签越少,加载越快,响应也更迅速 使用多种无阻塞下载Javascript方法: 使用script标签的defer属性 使用动态创建script元素来下载并执行代码 使用XHR对象下载 Javascript代码并注入页面中 二.数据存取 访问字面量和局部变量的速度最快,相反,访问数组和对象相对较慢 由于局部变量存在于作用域的起始位置,因此访问局部变量比访问跨

脑图学习架构设计之四:性能优化

jQuery的性能优化38小细节

一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的二.请使用一个var来定义变量如果你使用多个变量的话,请如下方式定义: 代码如下: 1 var page = 0, 2 $loading = $('#loading'), 3 $body = $('body'); 不要给每一个变量