标签：DOM 作用域 注意事项 更新 fragment 对象 代码优化 使用

代码注意事项： 　　1.不要擅自修改库中的方法或者类，如果其他人不知道的话，那么就会错误的使用函数。导致会有其他的问题发生 。 　　2.避免全局变量:尽量少声名全局变量 　　3.避免与null进行比较：我想作者的本意在于对null的比较范围太大，在具体的场景中，往往可以确定一个值更具体的信息，比如属于什么类，可以使用instanceof 或者是typeof 进行进一步的确定获取更多的  信息。还有一点，就是当我们在判断一个值是，应该是对他可能的结果进行判断，也就是==或===，而要尽量少使用 ‘!=‘； 性能优化： 　　1.从查询值，也就是作用域链的长度来讲： 　　　　当在一个局部作用域中，频繁的使用全局作用域的值时，建议创建一个局部作用域进行赋值，然后使用局部作用域对象，因为这样能够减少在作用域链上查询对象的时间，从而提高效率。 　　　　tip:变量声名提升和函数提升，这个行为不仅发生在全局作用域中，局部作用域同样也会发生。 　　2.在代码层面上应该选择更加正确的方法： 　　　　1)避免不重要的属性查找：相较于常量值或者是数组存值，对于复杂度方面都是o(1),而对象的属性查找，实际上是o(n);也就是说属性查找更加的消耗性能，所以建议如果一个对象属性的值常常使用　　               的就要将他换成局部变量。                2)循环优化： 　　　　减值迭代性能更加良好； 　　　　可以使用后测试循环 while 和for 循环都是前测试循环 即在下一轮开始前先进行测试。 　　　　尽量优化循环体的内容 ，因为他可能面临很多次的执行 ， 　　　　展开循环 ：在某些情况下可以使用其他的方式替代循环 如switch case 　　　　3)避免双重解释：所谓双重解释： 　　　　eval('alert("hello")'); 　　　　var f= new Function('alert("hello")'); 　　　　这种都是双重解释。这种操作是不能在初始的解析过程中完成的，因为代码是包含在字符串中的，也就是JS代码运行时必须新启动一个新的解析器来解析新的代码，实例化一个新的解析器的性能是不                  容忽视的开销，所以这种代码执行要慢得多。 　　　　4)最小化语句数： 　　3.JS代码的语句数量也影响执行效率； 　　　　总结下就是尽量减少语句数； 　　　　声名多个变量可以使用连续声名 即 var a,b,c;这样的形式。 　　　　在声明数组时，也是var arr=[1,2,3] 比其他的形式更加快， 　　　　使用对象字面量进行对象声名。 优化DOM交互： 使用DOM接口与本身就是很消耗性能的行为，以下有三个优化方式 　　1.最小化现场更新： 　　　　一旦你访问的DOM元素已经是页面的一部分，那么就是在进行一个现场更新；此时每一个对该元素的更改，都会触发一次更新；所以一次dom操作，查询一次，然后修改一次，是两次；性能很差， 　　　　所以推荐使用fragement对象。 　　　　doucument.createDocumentFragment()//创建一个fragment，这个对象相当于一个暂时的DOM容器，可以将要制作的DOM存在容器中。 　　　　fragment.appendChild(item)进行添加，当更新内容已经完成，就可以使用 目标document.appendChild(fragment); 此时现场更新的次数为1； 　　　　在全部更新的内容准备完毕后，一次性插入，需要知道的是，fragment对象本身不会被添加到dom树中，而是只将子节点放入。这样就减少了dom更新的次数，同时可能也减少了重绘和重排的次数。 　　2.使用innerHTML:与Fragment对象的原理大致相同 就是减少更新的次数。 　　3.事件优化：可以使用事件委托，代码上统一管理的事件 另外事件总数也变少了。 　　　　事件处理程序的数量和页面响应的速度是负相关的。 　　4. 注意HTMLCollection 　　　　HTMLCollection对象应该是根据元素的实时的表现，而并非一个快照： 　　　　他消耗的性能是巨大的。所以要尽量少使用这类对象,下面是会涉及HTMLCollectionui对象的方法。 　　　　1)在对getElementsbyTagName() 　　　　2)获取childNodes 　　　　3)获取attributes属性 　　　　4)访问了特殊的集合：document.forms  document.images 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　--2020-10-26  红宝书所得

标签：DOM,作用域,注意事项,更新,fragment,对象,代码优化,使用
来源： https://www.cnblogs.com/DotHouse-betemE/p/13883282.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。