-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
160 lines (150 loc) · 4.82 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 获取所有的需要懒加载的图片
let lazyImages = [].slice.call(document.querySelectorAll('img.img-lazy'))
// 限制频繁调用
let active = false
window.addEventListener('scroll', lazyLoad)
function lazyLoad() {
if (active === false) {
active = true
setTimeout(() => {
lazyImages.forEach(function (lazyImage) {
if (
lazyImage.getBoundingClientRect().top <= window.innerHeight &&
lazyImage.getBoundingClientRect().bottom >= 0
) {
lazyImage.src = lazyImage.dataset.src
lazyImage.classList.remove('img-lazy')
lazyImages = lazyImage.filter((image) => image !== lazyImage)
}
// 判断所有图片加载完毕，移除事件
if (lazyImages.length === 0) {
window.removeEventListener('scroll', lazyLoad)
}
})
active = false
}, 200)
}
}
})
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
// 获取所有的需要懒加载的图片
let lazyImages = [].slice.call(document.querySelectorAll('img.img-lazy'))
if (
'IntersectionObserver' in window &&
'IntersectionObserverEntry' in window &&
'IntersectionRatio' in window.IntersectionObserverEntry.prototype
) {
let lazyImageObserver = new IntersectionObserver(function (
entries,
observer,
) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
let lazyImage = entry.target
lazyImage.src = lazyImage.dataset.src
lazyImage.classList.remove('img-lazy')
lazyImageObserver.unobserve(lazyImage)
}
})
})
lazyImages.forEach((lazyImage) => {
lazyImageObserver.observe(lazyImage)
})
}
})
</script>
</html> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<button id="begin">开始</button>
<button id="interaction">添加交互任务</button>
<!-- 用户交互式必须要立即响应的，这和我们以往听到只有宏任务、微任务队列排队执行是有一定出入的 -->
</body>
<script>
// 死循环指定的时间
function delay(duration) {
var start = Date.now()
while (Date.now() - start < duration) {}
}
function addDelay() {
console.log('添加延时队列')
setTimeout(() => {
console.log('延时队列执行')
}, 100)
delay(2000)
}
function addNetWork() {
console.log('添加网络队列')
fetch('./1.json').then((res) => {
console.log('网络队列执行')
})
delay(2000)
}
function addInteraction() {
console.log('添加交互队列')
interaction.onclick = function () {
console.log('交互队列执行')
}
delay(2000)
}
begin.onclick = function () {
addDelay()
addInteraction()
console.log('============')
}
</script>
<script>
window.addEventListener('load', function(){
// Time to Interactive 可交互时间
let timing = performance.getEntriesByType('navigation')[0]
// 计算 tti = domInteractive - fetchStart
let tti = timing.domInteractive - timing.fetchStart
console.log('TTI', tti)
})
const observer = new PerformanceObserver((list) => {
for(const entry of list.getEntries()) {
console.log(entry)
}
})
observer.observe({ entryTypes: ['longtask'] })
let vEvent = "visibilitychange"
if(document.webkiHidden !== 'undefined'){
// webkit 事件
vEvent = 'webkitvisibilitychange'
}
function visibilityChange(){
if(document.hidden || document.webkitHidden){
// 页面不可见
console.log('Web page is hidden')
} else {
// 页面可见
console.log('Web page is visible')
}
}
document.addEventListener(vEvent, visibilityChange)
let connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection
let type = connection.effectiveType
function updateConnectionStatus(){
console.log('connection type changed from ' + type + ' to ' + connection.effectiveType)
}
connection.addEventListener('change', updateConnectionStatus)
</script>
</html>