zoukankan      html  css  js  c++  java
  • 读《高性能javascript》笔记(一)

    第一章
    加载与执行:
    1,js脚本会阻塞页面渲染,<script>尽可能放到<body>标签的底部
    2, 合并脚本,页面中的<script>标签越少;HTTP请求带来的额外开销方面,减少页面外链脚本文件的数量将会改善性能
    3,css文件是并行下载,不会阻塞页面的其他进程

    无阻塞脚本:
    1,延迟脚本:使用<script>的defer属性(仅适用于IE4+和Firefox3.5以上版本)
    2,动态创建<script>来下载并执行代码
    3,适用XHR对象下载js代码并注入页面

    无阻塞脚本工具:YUI3,LazyLoad , LABjs

    %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
    第三章:DOM编程
    浏览器把DOM和javascript 独立实现,两个相互独立的功能只要通过接口彼此连接,就会产生消耗。
    性能优化:

    (1),最小化DOM访问次数,尽可能在javascript端处理
    E.g:

    function innerHTMLLoop(){
      for(var count=0;count<15000;count++){
          document.getElementById('here').innerHTML += 'a';
      }
    }


    优化后:

    function innerHTMLLoop(){
      var content = '';
      for(var count=0;count<15000;count++){
         content += 'a';
      }
       document.getElementById('here').innerHTML = countent;
    }




    (2) , HMTL集合优化
     HTML集合包含了DOM节点引用的类数组对象,处于一种“实时状态”实时存在,
     当底层文档对象更新时,它也会自动更新
     HTML集合有:document.getElementsByName() , document.images , document.links等

    //一个意外的死循环
    //alldivs.length每次迭代都会增加,反映出的是底层文档的当前状态

    var alldivs = document.getElementsByTagName('div');
    for(var i=0;i<alldivs.length;i++){
       document.body.appendChild(document.createElement('div'));
    }


    优化方法: 1,2运行速度差不多
    1,把集合长度缓存到一个变量中,,并在迭代中使用

    var alldivs = document.getElementsByTagName('div');
    var len = alldivs.length
    for(var i=0;i<len;i++){
      /* 处理代码 */
    }


    2,如果需要经常操作集合,建议把集合拷贝到一个数组中

    var alldivs = document.getElementsByTagName('div');
    var arr = toArray(alldivs);   //toArray 自定义的集合到数组的函数
    for(var i=0;i<arr.length;i++){
      /* 处理代码 */
    }


    3,对于任何类型的DOM访问,当同一个DOM属性或方法需要多次访问时,最好使用一个局部变量缓存此变量

    function collentionNodesLocal(){
       var coll = document.getElementsByTagName('div');
           len = coll.length;
           name = '';
           el = null;
       for(var count=0;count<len;count++){
          el = coll[count];
          name = el.nodeName;
          name = el.nodeType;
          name = el.tagName;
       }
       return name;
    }

                                                                                                                                                             (未完待续.......)

  • 相关阅读:
    作业
    js判断数组对象属性是否含有某个值
    js去除对象数组中的空值
    js根据含有对象的数组中某一个属性进行排序
    import re
    1
    pycharm2020.3安装激活教程,pycharm2020激活教程
    Elasticsearch(安装篇):Windows下安装和运行Elasticsearch
    Spring Boot (日志篇):Log4j整合ELK,搭建实时日志平台
    Spring Boot(日志篇):Logback集成ELK,处理日志实例
  • 原文地址:https://www.cnblogs.com/dytl/p/4601144.html
Copyright © 2011-2022 走看看