🎉 博客主页：【剑九 六千里-CSDN博客】
🎨 上一篇文章：【webpack打包时Hash码是怎样生成的？随机值存在一样的情况，如何避免？】
🎠 系列专栏：【面试题-八股系列】
💖 感谢大家点赞👍收藏⭐评论✍
文章目录
1. 延迟加载（Lazy Loading）：
- 只加载视口内或即将进入视口的资源，例如图片、视频和某些
JavaScript模块。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.lazy {
opacity: 0;
transition: opacity 3s ease-in-out;
}
.loaded {
opacity: 1;
}
</style>
</head>
<body>
<div>
<h1 style="height: 600px;">JavaScript 实现懒加载</h1>
</div>
<!-- 放置图片 -->
<div>
<p style="height: 800px;"><img class="lazy" data-src="https://picsum.photos/500/800"></p>
<p style="height: 800px;"><img class="lazy" data-src="https://picsum.photos/500/800"></p>
<p style="height: 800px;"><img class="lazy" data-src="https://picsum.photos/500/800"></p>
<p style="height: 800px;"><img class="lazy" data-src="https://picsum.photos/500/800"></p>
<!-- 更多懒加载图片... -->
</div>
<script>
function lazyLoad() {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry.isIntersecting, 'entry.isIntersecting');
if (entry.isIntersecting) {
const img = entry.target;
const src = img.getAttribute('data-src');
img.src = src;
img.classList.add('loaded'); // 添加已加载类，用于CSS动画
observer.unobserve(img); // 图片加载后，停止观察
}
});
});
const lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach((img) => {
observer.observe(img);
});
}
// 当文档加载完成后开始监听
window.addEventListener('DOMContentLoaded', lazyLoad);
</script>
</body>
</html>
2. 异步加载（Async or Defer）：
2.1 使用async或defer属性加载外部JavaScript文件，以避免阻塞DOM解析。
-
async：异步加载，脚本会尽可能快地下载并在可用时执行，但不保证执行顺序。多个
async脚本可能会并行下载和执行，因此它们的执行顺序是不确定的。这通常适用于非关键依赖的脚本。 -
defer：延迟加载，脚本会在整个HTML文档解析完毕后，但在
DOMContentLoaded事件触发之前执行。多个defer脚本会按照它们在文档中的出现顺序执行。这适用于那些不依赖DOM的脚本，且希望在DOM解析完成后立即执行。
假设你的懒加载脚本是外部文件，例如lazy-load.js，你可以这样修改HTML中的<script>标签：
<script async src="path/to/lazy-load.js"></script>
或者，如果你希望脚本在DOM解析完成后执行，但不关心具体执行顺序，可以使用defer：
<script defer src="path/to/lazy-load.js"></script>
3. 减少DOM操作：
减少对DOM的操作，尤其是频繁的读写。批量操作DOM（如使用innerHTML或appendChild）而不是逐个操作节点。
// bad
// 1. 在循环中直接操作DOM
// 不好的写法示例
for (var i = 0; i < 1000; i++) {
var div = document.createElement('div');
div.textContent = 'Item ' + i;
document.body.appendChild(div);
}
// 2. 过度使用innerHTML
// 不好的写法示例
var container = document.getElementById('container');
for (var i = 0; i < items.length; i++) {
container.innerHTML += '<div>' + items[i] + '</div>';
}
// 3. 缺乏事件委托
// 不好的写法示例
for (var i = 0; i < listItems.length; i++) {
listItems[i].addEventListener('click', function() {
console.log('Item clicked');
});
}
// 4. 忽略DOM查询的性能成本
// 不好的写法示例
function updateItem(index, newValue) {
var itemList = document.querySelectorAll('.item'); // 每次调用都重新查询DOM
itemList[index].textContent = newValue;
}
// 5. 直接修改样式属性而非使用CSS类
// 不好的写法示例
var element = document.getElementById('myElement');
element.style.color = 'red';
element.style.fontSize = '16px';
// ... 大量直接修改样式属性
// good
// 推荐的写法示例
// 假设我们有一系列新的li元素需要添加到ul列表中
var newItems = ['Item 1', 'Item 2', 'Item 3'];
// 创建一个DocumentFragment
var fragment = document.createDocumentFragment();
// 遍历新项目，创建li元素并添加到fragment
newItems.forEach(function(item) {
var li = document.createElement('li');
li.textContent = item;
fragment.appendChild(li);
});
// 获取目标ul元素
var ul = document.querySelector('ul');
// 将fragment一次性添加到ul中，而不是逐个添加
ul.appendChild(fragment);
4. 使用DocumentFragment：
- 创建一个
DocumentFragment，在其中构建DOM树，然后一次性添加到文档中，减少DOM树的直接操作。
// 懒加载函数优化
function lazyLoad() {
// 创建一个DocumentFragment
const fragment = document.createDocumentFragment();
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
console.log(entry.isIntersecting, "index");
if (entry.isIntersecting) {
const img = entry.target;
const src = img.getAttribute("data-src");
// 错误处理：确保data-src存在且有效
if (src) {
try {
img.src = src;
img.classList.add("loaded"); // 添加已加载类，用于CSS动画
// 将图片元素添加到DocumentFragment
fragment.appendChild(img.cloneNode(true));
observer.unobserve(img); // 图片加载后，停止观察
} catch (error) {
console.error("Error loading image:", error);
}
} else {
console.warn("Image missing data-src attribute:", img);
}
}
});
}, { threshold: 1 });
// 获取所有懒加载图片并添加到DocumentFragment
const lazyImages = document.querySelectorAll(".lazy");
lazyImages.forEach((img) => {
observer.observe(img);
fragment.appendChild(img.cloneNode(true)); // 先将图片元素复制到DocumentFragment
});
// 将DocumentFragment中的所有元素一次性添加到DOM中
document.body.appendChild(fragment);
}
// 当文档加载完成后开始监听
window.addEventListener("DOMContentLoaded", lazyLoad);
5. 避免重排（Reflow）和重绘（Repaint）：
- 修改样式时尽量避免触发浏览器的重排和重绘，如在动画中使用
CSS transform和opacity而非width和height。
6. 事件委托（Event Delegation）：
- 将事件监听器添加到父元素，而不是每个子元素，以减少事件监听器的数量。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Delegation Example</title>
</head>
<body>
<div id="parent">
<button class="child">Child 1</button>
<button class="child">Child 2</button>
<!-- 可以添加更多子元素 -->
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const parentElement = document.getElementById('parent');
parentElement.addEventListener('click', handleEvent);
function handleEvent(event) {
const target = event.target;
if (target.matches('.child')) {
console.log('Child element clicked:', target.textContent);
// 在这里处理点击事件，例如获取点击的子元素内容
}
}
});
</script>
</body>
</html>
7. 代码压缩和合并：
- 使用工具（如
Webpack或Gulp）压缩和合并JavaScript文件，减少网络传输的字节数。
// webpack.config.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.min.js', // 输出文件名
path: path.resolve(__dirname, 'dist'), // 输出路径
},
mode: 'production', // 生产模式自动开启压缩和优化
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 删除console.log
},
},
}),
],
// Webpack 5 可能需要这样的配置来合并模块
concatenateModules: true,
},
};
8. 使用Web Workers：
- 对于计算密集型任务，使用
Web Workers在后台线程执行，不阻塞主线程。
9. 优化循环：
- 避免在循环中进行
DOM操作，可以先收集所有操作，然后一次性执行。
10. 避免全局查询：
- 使用
querySelectorAll或getElementById等本地引用代替document开头的全局查找。
11. 缓存和复用结果：
- 缓存昂贵的计算结果，避免重复计算。
示例：
// 1.借助闭包和对象属性缓存
function memoizeExpensiveCalculation(func) {
let cache = {};
return function(...args) {
const key = JSON.stringify(args);
if (cache[key]) {
return cache[key];
}
const result = func.apply(this, args);
cache[key] = result;
return result;
};
}
// 使用示例
function expensiveCalculation(a, b) {
// 耗时计算
}
const cachedExpensiveCalculation = memoizeExpensiveCalculation(expensiveCalculation);
// 2.使用WeakMap对象属性缓存
function memoizeExpensiveCalculation(func) {
const cache = new WeakMap();
return function(...args) {
const key = this;
if (cache.has(key)) {
return cache.get(key);
}
const result = func.apply(this, args);
cache.set(key, result);
return result;
};
}
// 使用示例
function expensiveCalculation(context, a, b) {
// 耗时计算
}
const cachedExpensiveCalculation = memoizeExpensiveCalculation(expensiveCalculation);
12. 使用requestAnimationFrame：
- 用于动画的定时器，确保在浏览器下次重绘之前执行。
requestAnimationFrame的工作原理是将animate函数添加到浏览器的渲染队列中，当浏览器准备进行下一次重绘时，它会调用这个函数。这样做的好处是，动画会与浏览器的渲染周期同步，从而得到平滑且高效的动画效果。
function animate() {
// 在这里执行你的动画逻辑，比如改变元素的位置或样式
// 请求下一帧
requestAnimationFrame(animate);
}
// 启动动画
animate();
13. 代码分割和懒加载：
- 使用
webpack或rollup等工具进行代码分割，将非初始页面加载必要的代码延迟加载。
// webpack.config.js
module.exports = {
// 其他配置...
optimization: {
splitChunks: {
chunks: 'all', // 分割所有块，包括异步块
},
},
// 其他配置...
};
15
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
