代码方面的WEB性能优化

缓存DOM查询

var i;
for( i=0; i < document.getElementsByTagName('p').length; i++){
    // todo
}

// 缓存DOM查询

var pList = document.getElementsByTagName('p');
for (i=0; i < pList.length; i++) {
    // todo
}

合并DOM插入

var listNode = document.getElementById("list");

// 要插入 10个 li标签
var frag = document.createDocumentFragment();
var x, li;
for (x=0; x<10; x++) {
    li = document.createElement("li");
    li.innerHTML = "List item" + x;
    frag.appendChild(li);
}
listNode.appendChild(frag);

先创建一个片段，先在片段里进行创建操作，最后只进行一次DOM操作插入到DOM树上

事件节流

var textarea = document.getElementById("text");
var timeoutId;

textarea.addEventListener('keyup', function() {
    if(timeoutId) {
        clearTimeout(timeoutId);
    }

    timeoutId = setTimeout(function() {
        // 触发change事件
        console.log(111);
    }, 1000)
});

事件代理来完善绑定事件函数

绑定事件在我们开发的过程中会经常用到。写一个通用的函数是很必要的。

代理

如以下代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul id="parent">
            <li>item 1</li>
            <li>item 2</li>
            <li>item 3</li>
            <li>item 4</li>
            <li>item 5</li>
            <li>item 6</li>
        </ul>
    <script>
        window.onload = function() {
            var parent = document.getElementById('parent');
            // li 太多了，就代理到ul元素上，这个通过事件冒泡机制传到ul元素上
            // 这样就可以只绑定一次事件就可以了
            parent.addEventListener('click', function(event) {
                var event = event || window.event;
                var target = event.target || event.srcElement;
                // target.nodeName这个是标签元素的内容
                //  event.target这个是目标元素[元素是标签和被标签括起来的内容]
                if(target.nodeName.toUpperCase() == 'LI') {
                    alert(target.innerHTML)
                }
            }, false)
        }
    </script>
    </body>
</html>

ul中有很多个li，而且li还有可能增加。如果要为每个li添加一个点击事件，操作起来将比较麻烦，代码量大不简洁，占内存。这时可以将事件代理到ul上，当点击li时，由于事件冒泡，ul上也起作用，之后再判断是点击那个li即可。

e.target.nodeName 是返回标签名字的大写

这样可以提高前端性能，多使用代理

• 不需要为每一个元素都添加监听事件而是通过委托给父元素来处理，这样就减少了内存，性能提高了。

• 可以方便动态添加元素，不需要再为新添加的元素重新绑定事件。

懒加载和预加载

对于懒加载一定要对图片设置高度
不然第一次加载时，会直接加载所有的资源，因为没有高度。

外库解决

zepto.min.js
zepto.lazyload.js

预加载

第一种加载方式

<img src="xxx" style="display:none">

第二种方式，使用Image对象

const image = new Image()
image.src = "xxxx"

第三种方式

通过xhttpReques预加载，但是会存在跨域的问题

也可以使用proLoad.js实现预加载，很方便。

总结：

代码方面的优化非常重要，上面是主要的优化，在优化代码方面要有极客精神，追求极致，才能做的更好。