zoukankan      html  css  js  c++  java
  • [读书笔记]高性能js-数据访问

    我们都知道,利用js程序访问数据需要一定的时间。访问不同的数据以及数据存储的位置都会影响访问的效率。

    在js中,数据存储和读取的位置有4种,分别是:

    1 直接量:代表自身,不存储在特定的位置。6大基本js数据都有直接量。

    2 变量 :var 定义的数据存储单元。

    3 数组。

    4 对象。

    一般情况,对1和2的读写效率都是很高的,3,和4相比较低。所以通常的建议是减少3,4数据的使用,多使用1,2数据。

    当然,我们也有别的方法进行优化。

    如:管理作用域:

    标识符越在作用域链的后面,搜索标识符所需要的时间越久。所以一般某个跨作用域的值在函数中引用一次以上,那个直接把这个值保存为函数的变量。如

    function a(){
    
      var a=document.getElementById('a');
    
      var b=document.getElementById('b');
    
      var c=document.getElementById('c');
    
    }
    
    可以改写为
    
    function a(){
    
      var doc=document;
    
      var a=doc.getElementById('a');
    
      var b=doc.getElementById('b');
    
      var c=doc.getElementById('c');
    
    }

    另外,可以利用with和try catch改变函数的作用域链,把另一个对象堆如作用域链的最前端,但是这会影响其他变量的搜索速度。

    另外,js是动态作用域的,意思是只有函数代码在执行的时候才能确定用哪个变量。如

    function a(code){
        eval(code)
        function sub(){
           return window  
    }  
        var s=sub();
    }    
    直接调用a,s=window,那么s就是全局window的引用。但是code参数若为{“var window={}”},那s引用的就是局部变量window={}:

    前面提到,访问对象要比访问字面量慢,这是为什么呢?

    比如我们访问一个对象的属性,它要遍历对象所有的属性,比如查找window.location属性,会先遍历所有window的属性,再获得location属性。因此,遍历对象的属性所需要的时间通常比字面量长。另外对象的属性或方法的搜索是根据原型链搜索的,属性处于原型链越深处,搜索所需要是时间也就越久。所以,搜索window.a比搜索window.a.b所需要的时间短。

    所以,和前面所说的一样,我们可以利用缓存对象属性的方法来提高访问效率。

    比如 function a(){

      var body=document.body

      return body.a +body.b;

    }

    但是缓存对象属性的方法不适用在缓存对象的方法。因为把一个方法保存为一个局部变量,会导致方法中的this变为window。这一点要特别注意。

  • 相关阅读:
    内存溢出与内存泄露的区别
    <a>标签
    mac上的设置查看环境变量
    css-position
    css-overflow
    css-clear
    mongodb基本操作
    idea使用maven install命令打包(springboot),jar运行时出现没有主清单属性
    linux运行jar报错
    maven deploy时报错
  • 原文地址:https://www.cnblogs.com/wz0107/p/4943787.html
Copyright © 2011-2022 走看看