zoukankan      html  css  js  c++  java
  • javascript DOM编程艺术(检测与性能优化)

    一、对象检测(是否支持js方法):只有支持了该方法才可调用

    if(!getElementById || getElementsByTagName){
        return false;
    }


    二、性能考滤

     1、尽量少访问DOM和尽量减少标记:以下面代码为例

    if(document.getElementsByTagName("a").length > 0){
       var aLiks = document.getElementsByTagName("a");
       for(var i = 0 ; i < aLiks.length; i++){
      
       }
    }

    这段代码是查找DOM中的<a>元素。如果大于0,则获得<a>的个数并循环遍历。在这里两次使用了document.getElementsByTagName ,不管什么时候,只要查询DOM中的某个元素,都会搜索整个DOM树,所以这段代码多执行了一次搜索。

    优化后的代码:

    var aLiks = document.getElementsByTagName("a");
    if(aLiks.length > 0){
        for(var i = 0 ; i < aLiks .length; i++){
      
       }
    }

    三、合并和放置脚本

    <srcript src="js/A.js"></script>

    多使用外部js引用的方式和将多个js文件合并成一个,既可以共用又可以减少加载页面时发送的请求数。

    四、压缩脚本

    //获取对象数组
    var aLiks = document.getElementsByTagName("a");
    if(aLiks.length > 0){
        //循环遍历
        for(var i = 0 ; i < aLiks .length; i++){
      
       }
    }

    压缩后:

    var aLiks = document.getElementsByTagName("a");if(aLiks.length > 0){for(var i = 0 ; i < aLiks .length; i++){}}

    精简后的脚本虽然看不太懂但能减少脚本的大小。大多数情况下我们应该有两个版本的脚本,一个有格式和注释的开发版易于阅读,一个压缩的精简版放在站点上。

    多看一行书,就少写一行代码,记录点滴,用心生活。
  • 相关阅读:
    实用的SpringBoot生成License方案
    实用的jar包加密方案
    整合Atomikos、Quartz、Postgresql的踩坑日记
    CentOS7使用NTP搭建时间同步服务器
    初探Mysql架构和InnoDB存储引擎
    postgresql常用命令
    闲聊CAP、BASE与XA
    还原面试现场-ACID与隔离级别
    图片拖动并交换图片-使用观察者模式
    图片拖动并交换图片
  • 原文地址:https://www.cnblogs.com/aegisada/p/4330995.html
Copyright © 2011-2022 走看看