缓存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实现预加载,很方便。
总结:
代码方面的优化非常重要,上面是主要的优化,在优化代码方面要有极客精神,追求极致,才能做的更好。