移动端性能优化（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'), indicatorContainer = document.createElement('div');
在循环中操作字符串，最后再操作DOM；比每次循环操作DOM要好得多
不推荐
for (var i = 0, num = sliderItem.length; i < num; i++) { indicatorContainer.innerHTML += '<span class="slid }
推荐
// 减少操作DOM的次数 var html=""; for (var i = 0, num = sliderItem.length; i < num; i++) { html += '<span class="slider-indicator"></span>'; } indicatorContainer.innerHTML=html ; }
也可以使用文档碎片，因为还没有被渲染呈现，因此循环中不涉及DOM渲染
在循环外只创建一遍文档碎片节点，在循环内克隆节点即可，传入true可以带内容一起拷贝
var indicatorItemFragment = document.createDocumentFragment();//创建文档片段 var spanEl = document.createElement('span'); // 减少操作DOM的次数 for (var i = 0, num = sliderItem.length; i < num; i++) { var indicatorItem = spanEl.cloneNode(true); indicatorItem.className = 'slider-indicator'; indicatorItemFragment.appendChild(indicatorItem); }
循环的长度也用变量保存下来，只在最初执行一次
不推荐
for (var i = 0; i < sliderItem.length; i++)
推荐
for (var i = 0, num = sliderItem.length; i < num; i++)
不要直接修改style，通过添加class修改
直接修改style，如果修改的内容多，需要多次操作DOM；另外会涉及重排和重绘
重排涉及元素的位置关系变化，重绘涉及到元素的颜色透明度等
重绘影响性能，重排比重绘更耗性能，因此需要减少重绘，避免重排
不推荐
// 不要直接修改style，通过添加class修改 if (i === activeIndex) { indicatorItem.style.backgroundColor = '#007aff'; indicatorItem.style.opacity = 1; // 重排 重绘 }
推荐
// 不要直接修改style，通过添加class修改 if (i === activeIndex) { indicatorItem.className += ' slider-indicator-active'; }
事件的优化：
避免事件多次绑定，而且如果改变节点时还需要增加或解除绑定
避免遍历节点，给每个元素都绑定事件
可以使用事件代理或者事件委托，给它们的父元素绑定一次事件即可（事件冒泡原理）
不推荐
var sliderEl = document.getElementById('slider'), sliderIndicatorContainer = sliderEl.querySelector('.slider-indicator-container'), sliderIndicators = sliderIndicatorContainer.querySelectorAll('.slider-indicator'); // 事件绑定 for (var i = 0, num = sliderIndicators.length; i < num; i++) { sliderIndicators[i].addEventListener('click', function () { console.log('click'); }, false); } // 动态插入一个新节点 var sliderIndicator = document.createElement('span'); sliderIndicator.className = 'slider-indicator'; sliderIndicatorContainer.appendChild(sliderIndicator); sliderIndicator.addEventListener('click', function () { console.log('click'); }, false);
推荐
// 使用事件代理，避免直接事件绑定 // jQuery/Zepto $(sliderIndicatorContainer).on('click', '.slider-indicator', function () {}); //原生js sliderIndicatorContainer.addEventListener('click', function (ev) { // console.log(ev.target);//ev.target获取到当前点击的元素 if (ev.target && /(^|\s)slider\-indicator($|\s)/.test(ev.target.className)) { //正则判断当前点击的元素的className console.log('click'); } }, false);
针对执行非常频繁的事件，使用事件节流来稀释
比如 scroll resize mousemove touchmove等事件
// 事件节流 // scroll resize mousemove touchmove var timer = null; window.addEventListener('scroll', function () { console.log('scroll');//不节流 //100ms内有重复执行，则取消前面的执行 clearTimeout(timer); timer = setTimeout(function () { console.log('scroll');//节流 }, 100); // .... }, false);
资源按需加载（懒加载，延迟加载）
将img的src属性可以先放在data-src（自定义属性）里，默认src里放一个统一的loading小图标
给需要按需加载的图片添加一个统一的类
<img src="img/loading.gif" data-src="img/recommend/1.jpg" alt="recommend" class="recommend-img lazyload-img">
获取到所有需要按需加载的图片节点，存入数组中
var lazyLoadClass = '.lazyload-img'; //Array.prototype.slice.call（）类数组转数组 var imgArr = Array.prototype.slice.call(document.querySelectorAll(lazyLoadClass));//获取到所有需要按需加载的节点列表，转数组 console.log(imgArr);
初始化时和每次滚动时，都执行按需加载函数
lazyLoadImgs();//初始化时执行图片加载 //每次滚动时也执行图片加载 var timer = null; window.addEventListener('scroll', function () { clearTimeout(timer); timer = setTimeout(function () { lazyLoadImgs(); }, 100); }, false);
判断元素是否在可视区内
// 是否在页面可视区内 function isInVisibleArea(el) { var rect = el.getBoundingClientRect(); // rect.top 可视区顶部到物体顶部 // rect.bottom 可视区底部到物体底部 // rect.right 可视区右边到物体右边 // rect.left 可视区左边到物体左边 return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth; }
按需加载函数
function lazyLoadImgs() { for (var i = 0; i < imgArr.length; i++) { //判断是否在可视区范围 if (isInVisibleArea(imgArr[i])) { imgArr[i].src = imgArr[i].getAttribute('data-src');//用data-src属性填充到src属性中 imgArr.splice(i, 1);//数组中剔除已经加载的图片 i--;//数组长度减少 } } }
完整代码：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> <title>4.3 资源按需加载和预加载</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/icons.css"> <link rel="stylesheet" href="css/index.css"> <script src="js/flexible.js"></script> </head> <body> <header class="header-container"> <div class="navbar"> <div class="navbar-left"> <i class="iconfont icon-scan"></i> </div> <div class="navbar-center"> <div class="searchBox"> <div class="searchBox-prepend"> <i class="iconfont icon-search"></i> </div> <input type="text" placeholder="开学季有礼，好货5折起" class="searchBox-input"> <div class="searchBox-append"> <i class="iconfont icon-close"></i> </div> </div> </div> <div class="navbar-right"> <i class="iconfont icon-msg"></i> </div> </div> </header> <div class="main-container"> <div class="slider-container"> <img src="img/slider/1.jpg" alt="slider"> </div> <nav class="nav-container"> <ul class="nav"> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/1.png" alt="nav" class="nav-img"> <span class="nav-text">团购</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/2.png" alt="nav" class="nav-img"> <span class="nav-text">一元购</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/3.png" alt="nav" class="nav-img"> <span class="nav-text">优惠券</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/4.png" alt="nav" class="nav-img"> <span class="nav-text">教育</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/5.png" alt="nav" class="nav-img"> <span class="nav-text">旅行</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/6.png" alt="nav" class="nav-img"> <span class="nav-text">在线订餐</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/7.png" alt="nav" class="nav-img"> <span class="nav-text">庆典</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/8.png" alt="nav" class="nav-img"> <span class="nav-text">秒杀</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/9.png" alt="nav" class="nav-img"> <span class="nav-text">拍卖</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/10.png" alt="nav" class="nav-img"> <span class="nav-text">服务</span> </a> </li> </ul> </nav> <div class="recommend-container"> <ul class="recommend"> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/loading.gif" data-src="img/recommend/1.jpg" alt="recommend" class="recommend-img lazyload-img"> </p> <p class="recommend-name">欧派整体橱柜定制简约现代</p> <p class="recommend-origPrice"> <del>¥2000.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">1000</strong></span> <span class="recommend-count">985件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/loading.gif" data-src="img/recommend/2.jpg" alt="recommend" class="recommend-img lazyload-img"> </p> <p class="recommend-name">创维55吋4K超高清HDR</p> <p class="recommend-origPrice"> <del>¥2999.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">2299</strong></span> <span class="recommend-count">63件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/loading.gif" data-src="img/recommend/3.jpg" alt="recommend" class="recommend-img lazyload-img"> </p> <p class="recommend-name">【到手259元】苏泊尔 5L电压力锅</p> <p class="recommend-origPrice"> <del>¥799.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">299</strong></span> <span class="recommend-count">1908件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/loading.gif" data-src="img/recommend/4.jpg" alt="recommend" class="recommend-img lazyload-img"> </p> <p class="recommend-name">三只松鼠坚果礼包</p> <p class="recommend-origPrice"> <del>¥125.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">108</strong></span> <span class="recommend-count">9532件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/loading.gif" data-src="img/recommend/5.jpg" alt="recommend" class="recommend-img lazyload-img"> </p> <p class="recommend-name">蓝月亮洗衣液12斤</p> <p class="recommend-origPrice"> <del>¥133.40</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span> <span class="recommend-count">5399件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/loading.gif" data-src="img/recommend/6.jpg" alt="recommend" class="recommend-img lazyload-img"> </p> <p class="recommend-name">福临门葵花玉米油</p> <p class="recommend-origPrice"> <del>¥109.90</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span> <span class="recommend-count">6294件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/loading.gif" data-src="img/recommend/7.jpg" alt="recommend" class="recommend-img lazyload-img"> </p> <p class="recommend-name">TP-LINK 全千兆端口双频无线路由器</p> <p class="recommend-origPrice"> <del>¥179.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">169</strong></span> <span class="recommend-count">4255件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/loading.gif" data-src="img/recommend/8.jpg" alt="recommend" class="recommend-img lazyload-img"> </p> <p class="recommend-name">【前1800名再减50】家用高压洗车机</p> <p class="recommend-origPrice"> <del>¥790.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">268</strong></span> <span class="recommend-count">1599件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/loading.gif" data-src="img/recommend/9.jpg" alt="recommend" class="recommend-img lazyload-img"> </p> <p class="recommend-name">德国鲁茜rusch迷你婴儿辅食机 宝宝</p> <p class="recommend-origPrice"> <del>¥898.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">159</strong></span> <span class="recommend-count">881件已售</span> </p> </a> </li> <li class="recommend-item"> <a href="###" class="recommend-link"> <p class="recommend-pic"> <img src="img/loading.gif" data-src="img/recommend/10.jpg" alt="recommend" class="recommend-img lazyload-img"> </p> <p class="recommend-name">西域之尚红枣500g*5袋</p> <p class="recommend-origPrice"> <del>¥89.00</del> </p> <p class="recommend-info"> <span class="recommend-price">¥<strong class="recommend-price-num">29.9</strong></span> <span class="recommend-count">15049件已售</span> </p> </a> </li> </ul> </div> <!-- 资源按需加载 --> <div id="product" class="product" style="height: 500px; background-color: red; text-align: center; line-height: 500px; font-size: 2.5rem; color: #fff;"> <img src="img/loading.gif" alt=""> </div> </div> <div class="tabbar-container"> <ul class="tabbar"> <li class="tabbar-item tabbar-item-active"> <a href="###" class="tabbar-link"> <i class="iconfont icon-home"></i> <span>首页</span> </a> </li> <li class="tabbar-item"> <a href="###" class="tabbar-link"> <i class="iconfont icon-category"></i> <span>分类页</span> </a> </li> <li class="tabbar-item"> <a href="###" class="tabbar-link"> <i class="iconfont icon-cart"></i> <span>购物车</span> </a> </li> <li class="tabbar-item"> <a href="###" class="tabbar-link"> <i class="iconfont icon-personal"></i> <span>个人中心</span> </a> </li> </ul> </div> <script> // 1. 图片的按需加载 var lazyLoadClass = '.lazyload-img'; //Array.prototype.slice.call（）类数组转数组 var imgArr = Array.prototype.slice.call(document.querySelectorAll(lazyLoadClass));//获取到所有需要按需加载的节点列表，转数组 console.log(imgArr); lazyLoadImgs();//初始化时执行图片加载 //每次滚动时也执行图片加载 var timer = null; window.addEventListener('scroll', function () { clearTimeout(timer); timer = setTimeout(function () { lazyLoadImgs(); }, 100); }, false); function lazyLoadImgs() { for (var i = 0; i < imgArr.length; i++) { //判断是否在可视区范围 if (isInVisibleArea(imgArr[i])) { imgArr[i].src = imgArr[i].getAttribute('data-src');//用data-src属性填充到src属性中 imgArr.splice(i, 1);//数组中剔除已经加载的图片 i--;//数组长度减少 } } } // 是否在页面可视区内 function isInVisibleArea(el) { var rect = el.getBoundingClientRect(); // rect.top 可视区顶部到物体顶部 // rect.bottom 可视区底部到物体底部 // rect.right 可视区右边到物体右边 // rect.left 可视区左边到物体左边 return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left < window.innerWidth; } </script> </body> </html>
其他资源的按需加载
js/loadProduct.js
(function () { var product = document.getElementById('product'); product.innerHTML = '我是按需加载的'; })();
html中代码添加：
// 2. 其他内容的按需加载 loadProduct(); window.addEventListener('scroll', loadProduct, false); function loadProduct() { if (isInVisibleArea(document.getElementById('product'))) { var script = document.createElement('script'); // script.src = 'js/loadProduct.js'; //使用setTimeout是为了模拟网络延迟，上线时不需要延迟 setTimeout(function () { script.src = 'js/loadProduct.js'; }, 1000); document.body.appendChild(script);//载入loadProduct.js window.removeEventListener('scroll', loadProduct, false); } }
预加载（空闲的时候加载，之后用到的时候已经加载完了）
常用于浏览漫画的时候
// 3. 图片预加载 var img = new Image(); img.src = 'img/recommend/5.jpg';
（还没滚动就已经预加载了）
