前端散记
前端知识散记
宏任务与微任务
在理解这个的时候我们需要知道任务可以分为同步任务、异步任务
而在异步任务中又被划分为宏任务、微任务
在程序执行时，执行顺序可以简单的理解为 同步任务>微任务>宏任务
宏任务的代表：
1、新的程序或子程序函数被直接执行
2、事件的回调函数
3、setTimeout()、setInterval()
微任务的代表:
1、Promise .then() .cath() .finally()
2、 MutationObserver
3、 Object.observe
下面举个列子，不同任务之间的执行顺序
<body>
<script>
console.log('同步任务1');
setTimeout(() => {
console.log('宏任务1');
}, 0)
Promise.resolve().then(() => {
console.log("微任务1");
})
console.log("同步任务2");
Promise.resolve().then(() => {
console.log("微任务2");
})
setTimeout(function() {
console.log("宏任务2");
}, 0)
Promise.resolve().then(() => {
console.log("微任务3");
})
</script>
</body>
图片懒加载
图片懒加载也是前端优化性能手段的一种方法
有两种写法
一、利用页面高度和图片顶部距页面高度对比，加载图片
步骤：
1、拿到浏览器窗口的高度 window.innerHeight
2、 拿到图片距离浏览器顶部的高度 getBoundingClientRect().top
3、如果图片顶部高度小于浏览器的高度，则让图片加载出来
4、使用自定义属性data-*,去处理
代码：
<body>
<img data-src="">
<img data-src="">
<img data-src="">
<script>
var images=document.querySelectorAll('img')
//设置监听
window.addEvenTlistener('scroll',(e)=>{
images.forEach(image=>{
const imageTop=image.getBoundingClientRect().top
if(imageTop<window.innerHeight){
const data_src=image.getAttribute('data-src')
image.setAttribute('src',data_src)
}
})
})
<script>
</body>
简单的理解就是去替换掉了 data-src 让浏览器能够找得到资源图片
二、用浏览器自带的构造方法： IntersectionObserver
代码：
<body>
<img data-src="">
<img data-src="">
<img data-src="">
<script>
let images = document.querySelectorAll('img')
const callback = entries => {
console.log(1);
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target
const data_src = image.getAttribute('data-src')
image.setAttribute('src', data_src)
observer.unobserve(image)
console.log('触发');
}
})
}
const observer = new IntersectionObserver(callback)
images.forEach(image => {
observer.observe(image)
})
</script>
</body>
这里需要注意，IntersectionObserver中有两个回调函数，这里只写出一个，callback。
在本次案列中target属性指向的是img元素
上面的isIntersecting为true的时候代表着已经观察到了图片
IntersectionObserver的callback会被触发两次，
observer 定义的一个实列，观察动作
observer.observe(image)：这个是属于观察状态
observer.unobserve(image)：这个是属于取消观察状态，当图片被看到后，就取消观察状态，这样回调函数就不会被触发
常见的倒计时效果
计算机的存储时间是以毫秒为基本单位的
一天=24小时
一小时=60分钟
一分钟=60秒
一秒=1000毫秒
做一个倒计时时间肯定是预期时间减去当前时间
代码部分：
<body>
<section>
<p>下面是一些倒计时效果</p>
<span class="daySpan"></span>
<span class="hourSpan"></span>
<span class="minuteSpan"></span>
<span class="secondSpan"></span>
</section>
<script>
const daySpan = document.querySelector('.daySpan')
const hourSpan = document.querySelector('.hourSpan')
const minuteSpan = document.querySelector('.minuteSpan')
const secondSpan = document.querySelector('.secondSpan')
deadline=new Date('2021-8-1 00:00') //设定一个预期时间
function down() {
const now = new Date() //这里获取当前时间
timer = deadline - now //倒计时拿到的时间，总毫秒数
let day, hour, minute, second //这些都是时间戳
if (timer < 0) {
return 0
}
second = Math.floor(timer / 1000 % 60)
minute = Math.floor(timer / 1000 / 60 % 60)
hour = Math.floor(timer / 1000 / 60 / 60 % 24)
day = Math.floor(timer / 1000 / 60 / 60 / 24)
daySpan.innerHTML = day + '天'
hourSpan.innerHTML = hour + '时'
minuteSpan.innerHTML = minute + '分'
secondSpan.innerHTML = second + '秒'
setTimeout(down, 1000)
}
down()
</script>
</body>
