文章目录
- 1. 延迟加载（Lazy Loading）：
- 2. 异步加载（Async or Defer）：
- 2.1 使用async或defer属性加载外部JavaScript文件，以避免阻塞DOM解析。
- 3. 减少DOM操作：
- 4. 使用DocumentFragment：
- 5. 避免重排（Reflow）和重绘（Repaint）：
- 6. 事件委托（Event Delegation）：
- 7. 代码压缩和合并：
- 8. 使用Web Workers：
- 9. 优化循环：
- 10. 避免全局查询：
- 11. 缓存和复用结果：
- 12. 使用requestAnimationFrame：
- 13. 代码分割和懒加载：
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'); // 每次调用都重新查询DOMitemList[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() {// 创建一个DocumentFragmentconst 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动画// 将图片元素添加到DocumentFragmentfragment.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 });// 获取所有懒加载图片并添加到DocumentFragmentconst 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.jsmodule.exports = {// 其他配置...optimization: {splitChunks: {chunks: 'all', // 分割所有块，包括异步块},},// 其他配置...
};
