这一阶段开始了写一个项目，写项目在保证功能实现，bug少，样式好看的同时 我认为性能也是十分重要的一个方面。下面是我所了解到的部分可以优化性能的方法。
首先就是这次遇到的懒加载，一个页面中有大量图片的时候懒加载肯定是最好的优化性能的方法。懒加载是一种网页性能优化的方式，它能极大的提升用户体验。比如一个页面中有很多图片，但是首屏只出现几张，这时如果一次性把图片全部加载出来会影响性能。这时可以使用懒加载，页面滚动到可视区再加载，优化首屏加载。
懒加载优点：页面加载速度快，减轻服务器压力，节约流量，来提升用户体验。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
img {
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<ul id="view">
<li>
<img data-src="./img/img1.gif" src="./img/loading.gif" alt="" />
</li>
<li>
<img data-src="./img/img2.gif" src="./img/loading.gif" alt="" />
</li>
<li>
<img data-src="./img/img3.gif" src="./img/loading.gif" alt="" />
</li>
<li>
<img data-src="./img/img4.gif" src="./img/loading.gif" alt="" />
</li>
<li>
<img data-src="./img/img5.png" src="./img/loading.gif" alt="" />
</li>
</ul>
<script>
const io = new IntersectionObserver( (entries, observer) => {
entries.forEach( (entry) => {
if (entry.isIntersecting) {
const image = entry.target;
const card = image.parentElement.parentElement;
card.classList.add('note-card-show');
count++;
image.setAttribute('src', image.getAttribute('data-src'))
observer.unobserve(image);
}
} )
} )
imgs.forEach( img => {
io.observe(img);
} )
} )
2、减少DOM节点：DOM节点太多影响页面的渲染，尽量减少DOM节点。\n\n3、优化动画\n（1）：尽量使用css3动画\n（2）：合理使用requestAnimationFrame动画代替setTimeout.
3.优化高频事件：scroll、touchmove等事件可导致多次渲染。
（1）：函数节流
（2）：函数防抖
（3）：使用requestAnimationFrame监听帧变化：使得在正确的时间进行渲染
（4）：增加响应变化的时间间隔：减少重绘次数
再有就是:减少重绘和回流，避免不必要的DOM操作，避免使用document.write，减少drawImage，尽量改变class而不是style，使用classList代替className
2、缓存DOM选择与计算：每次DOM选择都要计算和缓存
3、缓存.length的值：每次.length计算用一个变量保存值
4、尽量使用事件代理：避免批量绑定事件
5、尽量使用id选择器：id选择器选择元素是最快的
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
