移动端性能优化JavaScript性能优化

JavaScript性能优化

 

DOM操作优化

查找DOM元素能用id就用id，是最高效的查找方法（还得看具体环境）

document.getElementById('slider')

 

从document开始查找子元素效率不高，建议从具体父元素开始查找

减少元素查找的层级

            var sliderItemContainer = document.querySelector('.slider-item-container');//从DOM开始查找
            var sliderItemContainer = sliderEl.querySelector('.slider-item-container');从具体元素开始查找

 

DOM操作完使用变量缓存，否则需要多次操作DOM就得多次获取

             合理缓存DOM对象
            var sliderItemContainer = sliderEl.querySelector('.slider-item-container'),sliderItem = sliderItemContainer.querySelectorAll('.slider-item'
            for (var i = 0,num = sliderItem.length; i < num; i++) {
                 indicatorContainer.innerHTML += '<span class="slid
             }
  

推荐

             减少操作DOM的次数
            var html="";
            ) {
                html += '<span class="slider-indicator"></span>';
                }

                indicatorContainer.innerHTML=html ;
            }

也可以使用文档碎片，因为还没有被渲染呈现，因此循环中不涉及DOM渲染 

在循环外只创建一遍文档碎片节点，在循环内克隆节点即可，传入true可以带内容一起拷贝

           var indicatorItemFragment = document.createDocumentFragment();创建文档片段
           var spanEl = document.createElement('span');

            ) {
                var indicatorItem = spanEl.cloneNode(true);
                indicatorItem.className = 'slider-indicator';
                indicatorItemFragment.appendChild(indicatorItem);
            }

 

循环的长度也用变量保存下来，只在最初执行一次

不推荐

var i = 0; i < sliderItem.length; i++)

推荐

                 不要直接修改style，通过添加class修改
                if (i === activeIndex) {
                    indicatorItem.style.backgroundColor = '#007aff';
                    indicatorItem.style.opacity = 1;
                     重排 重绘
                }

推荐

                 activeIndex) {
                    indicatorItem.className += ' slider-indicator-active';
                }