移动web开发入门-学习笔记-6

移动端性能优化

1、HTML中的CSS和JavaScript

css用内联

2、图片和其他优化

避免空连接href、src，链接不能填空，尽量填东西。
减少DOM元素的嵌套层级。
主要内容写在前面，次要写后面。
尽量避免使用table/iframe等慢元素

3、css选择器优化

不要使用类选择器和ID选择器修饰元素标签，这样多此一举，还会降低效率。
保持简单，不要使用嵌套过多过于复杂的选择器，浏览器从右向左解析CSS。
避免通配选择器。
移除无匹配的样式。
避免类正则的属性选择器。

4、css属性和其他优化

提取公用部分。
合写。
避免使用CSS @import引用加载CSS。
使用CSS3动画，代替DOM动画。优先考虑flex 不滥用float。

5、DOM操作优化

尽量使用id选择器。
合理缓存DOM对象。
减少操作DOM的次数。
不要直接修改style，通过添加class修改。

DOM操作很奢侈，很耗性能
加快单次DOM操作
尽量使用id选择器
减少DOM操作的次数
合理缓存DOM对象/操作
缓存 DOM.length
每次.length都要计算，用一个变量保存这个值
使用DocumentFragment优化多次的appendChild
使用一次innerHTML
不要直接修改style，通过添加class修改。

6、事件优化

使用事件代理，避免直接事件绑定。
事件节流。

7、资源按需加载和预加载

 <script>
        // 1. 图片的按需加载
        var lazyLoadClass = '.lazyload-img';
        var imgArr = Array.prototype.slice.call(document.querySelectorAll(lazyLoadClass));

        // console.log(imgArr);
        // var tmpArr = [];
        // for () {
        //     tmpArr.push();
        // }

        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.splice(i, 1);
                    i--;
                    // [1, 3]
                    // i = 1
                    // i--; i = 0
                    // i = 1
                }
            }
        }

        // 是否在页面可视区内
        function isInVisibleArea(el) {
            var rect = el.getBoundingClientRect();

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

        // 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(function () {
                    script.src = 'js/loadProduct.js';
                }, 1000);
                document.body.appendChild(script);

                window.removeEventListener('scroll', loadProduct, false);
            }
        }

        // 3. 图片预加载
        var img = new Image();
        img.src = 'img/recommend/5.jpg';
    </script>