代码方面的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)
});

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

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

代理

如以下代码:


<html>
    <head>
        <meta charset="UTF-8">
        <title>title>
    head>
    <body>
        <ul id="parent">
            <li>item 1li>
            <li>item 2li>
            <li>item 3li>
            <li>item 4li>
            <li>item 5li>
            <li>item 6li>
        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实现预加载,很方便。

总结:

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

你可能感兴趣的:(代码方面的WEB性能优化)