移动端性能优化

一、为什么要优化移动端

1. 提升用户体验
2. 移动端网络速度慢
3. 移动端设备性能低

二、性能优化策略分类

1. 网页资源请求与加载类

2. 网页渲染类

3.js脚本类

三、访问网站的过程

1. 输入网站的域名，不可能直接就直接访问到服务器，要寻找他的IP地址，只有找到IP地址才能直到服务器，IP地址和域名有一个映射关系
2. 通过DNS解析找到目标服务器
3. 找到目标服务器之后，浏览器端和服务器之间建立连接，服务器会收到浏览器端发出的请求，
4. 将响应数据发送到用户浏览器
5. 浏览器处理从服务器端发来的响应数据，完成网页的渲染呈现

四、事件优化

1.事件委托

绑定事件不用每一次遍历所有节点，分别绑定，利用事件委托直接绑定，既方便而且性能也会提高

 sliderIndicatorContainer.addEventListener('click',function(){
            if(ev.target && /(^|\s).slider\-indicator($|\s)(ev.target.className)){
                console.log('click');
            }
        },false)

2.事件节流

针对执行很频繁的事件，让他们在一定的时间执行少一点
利用定时器

var timer = null;
window.addEventListener('scroll',function(){
      clearTimeout(timer);
      timer = setTimeout(() => {
           console.log('scroll');
      }, 100);
},false)

五、资源的按需加载和预加载

  var lazyLoadClass = '.lazyload-img';
        var imgArr = Array.prototype.slice.call(document.querySelectAll(lazyLoadClass));//将类数组转换为数组

    
        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');
                    imgArr[i].splice(i,1);
                    i--;
                }
            }
        }

        function isInVisibleArea(){
            var rect = el.getBoundingClientRect();

            return rect.bottom > 0 && rect.top < window.innerHeight && rect.right > 0 && rect.left<window.innerWidth;
        }

智图——压缩图片
webP更高压缩比格式的图片