41. JS 放在 head ⾥和放在 body ⾥有什么区别？【热度:420】 将 JavaScript 代码放在 <head> 标签内部和放在 <body> 标签内部有⼀些区别： 1. 加载顺序：放在 <head> ⾥会在⻚⾯加载之前执⾏ JavaScript 代码，⽽放在 <body> ⾥会在⻚ ⾯加载后执⾏。 2. ⻚⾯渲染：如果 JavaScript 代码影响了⻚⾯的布局或样式，放在 <head> ⾥可能会导致⻚⾯渲染延迟，⽽放在 <body> ⾥可以减少这种影响。 3. 代码依赖：如果 JavaScript 代码依赖其他元素，放在 <body> ⾥可以确保这些元素已经加载。 4. 全局变量和函数：放在 <head> ⾥的 JavaScript 代码中的全局变量和函数在整个⻚⾯⽣命周期内都可⽤。 以下是⼀个简单的⽰例代码，展⽰了如何在 <head> 和 <body> 中放置 JavaScript 代码：
1 <!DOCTYPE html><html<head<script
2 console.log("这是在 head 中执⾏的 JavaScript 代码。");
</script</head<body<script
3 console.log("这是在 body 中执⾏的 JavaScript 代码。");</script</body</html1 class VirtualScroll {
2 constructor(container, itemHeight, totalItems, renderCallback)
{this.container = container; // 容器元素this.itemHeight = itemHeight; // 每个项的
⾼度this.totalItems = totalItems; // 总列表项数this.renderCallback =
renderCallback; // 渲染每⼀项的回调函数this.viewportHeight =
container.clientHeight; // 视⼝⾼度this.bufferSize =
Math.ceil(this.viewportHeight / itemHeight) * 3; // 缓冲⼤⼩this.renderedItems
= []; // 已渲染项的数组this.startIndex = 0; // 当前渲染的开始索引this.endIndex =
this.bufferSize; // 当前渲染的结束索引
3 container.addEventListener("scroll", () => this.onScroll());this.update();
4 }
5 onScroll() {const scrollTop = this.container.scrollTop;const newStartIndex =
Math.floor(scrollTop / this.itemHeight) - this.bufferSize / 2;const
newEndIndex = newStartIndex + this.bufferSize;
6 if (newStartIndex !== this.startIndex || newEndIndex !== this.endIndex)
{this.startIndex = Math.max(0, newStartIndex);this.endIndex =
Math.min(this.totalItems, newEndIndex);this.update();
7 }
8 }
9 update() {// 清空已有内容this.container.innerHTML = "";
10 // 计算并设置容器的总⾼度const totalHeight = this.totalItems *
this.itemHeight;this.container.style.height =
11 ${totalHeight}px
12 ;
13 // 渲染视⼝内的项const fragment = document.createDocumentFragment();for (let i =
this.startIndex; i < this.endIndex; i++) {const item = this.renderCallback(i);
14 item.style.top = `${i * this.itemHeight}px`;
15 fragment.appendChild(item);
16 }this.container.appendChild(fragment);
17 }
18 }
19
20 // 创建⼀个列表项的函数function createItem(index) {const item =
document.createElement("div");
21 item.className = "list-item";
22 item.innerText =
23 Item ${index}
24 ;
25 item.style.position = "absolute";
26 item.style.width = "100%";return item;
27 }
28
29 // 初始化虚拟滚动const container = document.querySelector(".scroll-container");
// 容器元素需要预先在HTML中定义const virtualScroll = new VirtualScroll(container,
30, 10000, createItem);1 class VirtualScroll {
2 constructor(container, itemHeight, totalItems, renderItem) {this.container =
container;this.itemHeight = itemHeight;this.totalItems =
totalItems;this.renderItem = renderItem;
3 this.observer = new IntersectionObserver(this.onIntersection.bind(this), {
4 root: this.container,
5 threshold: 1.0,
6 });
7 this.items = new Map();
8 this.init();
9 }
10 init() {// 填充初始屏幕的元素for (let i = 0; i < this.totalItems; i++) {const
placeholder =
this.createPlaceholder(i);this.container.appendChild(placeholder);this.observer
.observe(placeholder);
11 }
12 }
13 createPlaceholder(index) {const placeholder = document.createElement("div");
14 placeholder.style.height = `${this.itemHeight}px`;
15 placeholder.style.width = "100%";
16 placeholder.dataset.index = index; // store indexreturn placeholder;
17 }
18 onIntersection(entries) {
19 entries.forEach((entry) => {const index = entry.target.dataset.index;if
(entry.isIntersecting) {const rendered =
this.renderItem(index);this.container.replaceChild(rendered,
entry.target);this.items.set(index, rendered);
20 } else if (this.items.has(index)) {const placeholder =
this.createPlaceholder(index);this.container.replaceChild(placeholder,
this.items.get(index));this.observer.observe(placeholder);this.items.delete(ind
ex);
21 }
22 });
}
}
// Render item functionfunction renderItem(index) {const item =
document.createElement("div");
item.classList.add("item");
item.textContent =
Item ${index}
;
item.dataset.index = index;
item.style.height = "30px"; // Same as your itemHeight in VirtualScrollreturn
item;
}
// Example usage:const container = document.getElementById("scrollcontainer"); // This should be a predefined element in your HTMLconst
itemHeight = 30; // Height of each itemconst itemCount = 1000; // Total number
of items you haveconst virtualScroll = new VirtualScroll(container,
itemHeight, itemCount, renderItem);
45. html的⾏内元素和块级元素的区别【热度: 796】
HTML 中的⾏内元素（Inline elements）和块级元素（Block-level elements）在布局⾏为、外观以及如何参与⽂档流⽅⾯有所不同。以下是它们的主要区别：
即使块级元素和⾏内元素默认特征不同，你还是可以通过 CSS 的
display
属性来更改它们的⾏为。
例如，
display: inline;
会让块级元素表现得像⾏内元素，并且它们将在其⽗容器的同⼀⾏内显
⽰。另⼀⽅⾯，
display: block;
会让⾏内元素表现得像块级元素。
46. 介绍⼀下 requestIdleCallback api 热度: 290
requestIdleCallback
是⼀个 Web API，它允许开发者请求浏览器在主线程空闲时执⾏⼀些低
优先级的后台任务，这对于执⾏如分析、整理状态和数据等不紧急的任务是理想的。这种⽅法可以提⾼⽤⼾的响应性和⻚⾯的整体性能。
以下是
requestIdleCallback
API 的⼀些关键特点：
何时使⽤ requestIdleCallback
requestIdleCallback
特别适合那些不直接关联⽤⼾交互及响应的任务，这些任务可以延后执⾏
⽽不会明显影响⽤⼾体验。例如：
•
清理⼯作：如标记的 DOM 节点删除、数据的本地存储同步等。
•
⾮关键的解析：如解析⼤量数据。
•
状态更新：如发送不紧急的状态变更。
如何使⽤ requestIdleCallback
使⽤
requestIdleCallback
，你需要传递⼀个回调函数给它，此函数会在浏览器的空闲时间调
⽤。你可以指定⼀个超时参数，它定义了浏览器在“空闲期”最多可以花费的时间来执⾏你的回调。
1 requestIdleCallback(myNonCriticalFunction, { timeout: 5000 });
注意事项
•
requestIdleCallback
不保证你的回调会在⼀个特定的时刻被调⽤，它只在浏览器需要的时
候调⽤。
•
执⾏低优先级任务时，不应该太过频繁或执⾏时间太⻓，以免影响⻚⾯性能。
•
这个 API 为了最⼤化性能优化，会强制性地结束你的任务，在不迟于指定的超时时⻓执⾏结束。
Cross-Browser Compatibility (跨浏览器兼容性)
你可能需要 polyfills（垫⽚库）来确保
requestIdleCallback
的兼容性，因为它并不是在所有
浏览器中都有原⽣⽀持。
使⽤
requestIdleCallback
，开发者可以更好地利⽤浏览器的空闲序列来执⾏不紧急的任务，同
时保持⽤⼾交互的流畅度。
47. documentFragment api 是什么， 有哪些使⽤场景？热度: 115
DocumentFragment
是 Web API 中的⼀部分，它是
DOM
（⽂档对象模型）的⼀个⾮常轻量级的
节点，代表⼀组
DOM
节点的集合。它不是⼀个真实存在于
DOM
中的实体，因此被认为是“没有名
字”的节点，或者说它不在⽂档的主体中渲染，通常⽤来作为临时的
DOM
节点仓库。
对于
DocumentFragment
的⼀部分内容，当它们在
DocumentFragment
之外操作时，并不会
引起主 DOM 树的直接重排或重绘。然⽽，⼀旦你将整个
DocumentFragment 插⼊到 DOM 的⼀个永久节点上，那么在
DocumentFragment
内进⾏的更改将会触发 DOM 的重新渲染。
DocumentFragment API 有⼏个关键的特点和⽤途：
1.
轻量级：
DocumentFragment
不会引起布局重排，因为其不是真实渲染的⼀部分。
2.
节点集合：可以在
DocumentFragment
中节点集合进⾏分组，这个集合可以⼀次性插⼊到
DOM
的某⼀部分中。
3.
性能优化：通过在⼀个
DocumentFragment
中构建好⼀⼤块
DOM
树，然后将它整体插⼊到
主
DOM
中，从⽽减少重排次数，提⾼效率。
4.
事件不冒泡：因为
DocumentFragment
不是真实渲染的⼀部分，所以它的事件不会冒泡到上层
的 DOM 元素，除⾮它被插⼊到了
DOM
中。
使⽤场景
以下是⼀些使⽤
DocumentFragment
的常⻅场景：
•
批量操作：当你想要⼀次性添加多个节点到
DOM
树中时，使⽤
DocumentFragment
可以将这
些节点预先堆放在⼀个轻量级对象中，然后⼀次性添加。
•
离屏操作：如果你需要创建复杂的
DOM
结构，可以通过
DocumentFragment
在不触发⻚⾯重
排和重绘的情况下进⾏。
•
内容填充：在填充
DOM
元素内容之前，可以先创建⼀个
DocumentFragment
完成所有节点的
添加和排序，然后把它添加到
DOM
树中。
•
避免内存泄漏：在某些情况下，它可以作为防⽌因移动节点⽽造成的内存泄漏的⼀个办法。
⽰例代码
1. 应⽤⾃定义属性到 CSS 规则中：
1. 使⽤ JavaScript 动态切换主题：
使⽤ CSS 类切换
1. 为每个主题创建不同的 CSS 类：
1. ⼿动切换 CSS 类：
使⽤ LocalStorage 记录⽤⼾主题偏好
1 @media (prefers-color-scheme: dark) {:root {--primary-color: #1e2a34; /* 暗⿊主
题⾊ */
2 --text-color: #ccc; /* 暗⿊主题⽂本颜⾊ */
3 }
4 }
5
6 @media (prefers-color-scheme: light) {:root {--primary-color: #5b88bd; /* 明亮主
题⾊ */
7 --text-color: #000; /* 明亮主题⽂本颜⾊ */
8 }
9 }