前端10种火火火火的优化代码性能方法!避免代码跑起来像蜗牛!

简介: 前端10种火火火火的优化代码性能方法!避免代码跑起来像蜗牛!

作为一个每天和JavaScript打交道的人,我发现有时候我们的代码跑起来就像一只慢吞吞的蜗牛。

尤其是在我给老板展示项目的那一刻,页面加载慢得我都能感觉到老板的眉毛在往上挑。

为了避免这样的尴尬场景,我决定深入研究一下如何优化JavaScript代码性能,并将我的经验分享给大家。

今天,我将带大家探索一些实用的技巧,帮助你让你的JavaScript代码跑得像猎豹一样快。

1. 减少DOM操作

原因

DOM操作是JavaScript中最耗时的操作之一。频繁的DOM操作会导致页面重绘和回流,从而影响性能。

技巧

  1. 1. 批量更新DOM:将多次DOM操作合并为一次。
  2. 2. 使用Document Fragment:将多个DOM操作应用到一个Document Fragment中,再将其一次性插入到DOM中。

示例代码

// 不推荐:频繁操作DOM
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  document.body.appendChild(div);
}
// 推荐:使用Document Fragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);

323be6043570a514743d293313c6d321.jpg

2. 避免使用全局变量

原因

全局变量会污染全局命名空间,增加冲突风险,并且可能会影响垃圾回收的效率。

技巧

  1. 1. 使用局部变量:尽量在函数内部使用局部变量。
  2. 2. 使用闭包:通过闭包来封装变量,避免污染全局命名空间。

示例代码

// 不推荐:使用全局变量
var count = 0;
function increment() {
  count++;
  console.log(count);
}
// 推荐:使用局部变量
function createCounter() {
  let count = 0;
  return function() {
    count++;
    console.log(count);
  };
}
const increment = createCounter();
increment();
increment();

3. 使用事件委托

原因

为大量的DOM元素绑定事件处理程序会增加内存使用并降低性能。事件委托可以有效减少事件处理程序的数量。

技巧

将事件处理程序绑定到父元素上,通过事件冒泡机制来处理子元素的事件。

示例代码

<!-- 不推荐:为每个按钮绑定事件处理程序 -->
<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>
<script>
document.querySelectorAll('.btn').forEach(button => {
  button.addEventListener('click', () => {
    console.log('Button clicked');
  });
});
</script>
<!-- 推荐:使用事件委托 -->
<button class="btn">Button 1</button>
<button class="btn">Button 2</button>
<button class="btn">Button 3</button>
<script>
document.body.addEventListener('click', event => {
  if (event.target.classList.contains('btn')) {
    console.log('Button clicked');
  }
});
</script>

4f9bb79803d2e2d042203649370b80e8.png

4. 避免使用内联样式和内联脚本

原因

内联样式和内联脚本会增加HTML文件的大小,影响页面加载速度,并且难以维护和调试。

技巧

将样式和脚本分别放到独立的CSS和JS文件中,并使用链接标签引入。

示例代码

<!-- 不推荐:使用内联样式和内联脚本 -->
<div style="color: red;">Hello, World!</div>
<script>
  console.log('Hello, World!');
</script>
<!-- 推荐:使用外部CSS和JS文件 -->
<link rel="stylesheet" href="styles.css">
<div class="red-text">Hello, World!</div>
<script src="script.js"></script>
styles.css
.red-text {
  color: red;
}
script.js
console.log('Hello, World!');

5. 使用缓存

原因

缓存可以减少网络请求的次数,提高页面加载速度。

技巧

  1. 1. 浏览器缓存:设置适当的缓存头,利用浏览器缓存。
  2. 2. 服务端缓存:使用服务端缓存机制,如Redis等。
  3. 3. 前端缓存:在前端使用缓存机制,如localStorage、sessionStorage等。

示例代码

// 使用localStorage缓存数据
function fetchData(url) {
  const cachedData = localStorage.getItem(url);
  if (cachedData) {
    return Promise.resolve(JSON.parse(cachedData));
  } else {
    return fetch(url)
      .then(response => response.json())
      .then(data => {
        localStorage.setItem(url, JSON.stringify(data));
        return data;
      });
  }
}
fetchData('https://api.example.com/data')
  .then(data => {
    console.log(data);
  });

572b4baaec95b9566fdbe346fda22488.png

6. 使用懒加载

原因

懒加载可以推迟加载不必要的资源,减少页面初始加载时间,提高页面响应速度。

技巧

  1. 1. 图片懒加载:使用Intersection Observer API或第三方库实现图片懒加载。
  2. 2. 组件懒加载:在SPA中使用Vue或React的懒加载特性,按需加载组件。

示例代码

<!-- 图片懒加载 -->
<img data-src="image.jpg" alt="Lazy Loaded Image">
<script>
document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('img[data-src]');
  const lazyLoad = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.src = entry.target.dataset.src;
        observer.unobserve(entry.target);
      }
    });
  };
  const observer = new IntersectionObserver(lazyLoad);
  lazyImages.forEach(image => observer.observe(image));
});
</script>
<!-- 组件懒加载 -->
<!-- Vue.js 示例 -->
<template>
  <div>
    <button @click="showComponent = true">Load Component</button>
    <LazyComponent v-if="showComponent" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
const showComponent = ref(false);
const LazyComponent = defineAsyncComponent(() =>
  import('./LazyComponent.vue')
);
</script>

94869347570a82c3a0e419ac483baded.png

7. 避免不必要的重绘和回流

原因

重绘和回流是浏览器渲染页面时最耗时的操作,频繁的重绘和回流会严重影响页面性能。

技巧

  1. 1. 减少DOM操作:批量更新DOM,使用Document Fragment。
  2. 2. 避免频繁读取和写入DOM:尽量将读取和写入分开,避免交替进行。
  3. 3. 使用CSS动画代替JavaScript动画:CSS动画通常比JavaScript动画性能更好。

示例代码

// 不推荐:频繁读取和写入DOM
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  document.body.appendChild(div);
  console.log(div.offsetHeight);
}
// 推荐:将读取和写入分开
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);
document.querySelectorAll('div').forEach(div => {
  console.log(div.offsetHeight);
});

8. 使用Web Workers

原因

Web Workers允许你在后台线程中运行脚本,不会阻塞主线程,可以用于处理计算密集型任务。

技巧

将计算密集型任务或长时间运行的任务放到Web Worker中执行,避免阻塞主线程。

示例代码

main.js

if (window.Worker) {
  const worker = new Worker('worker.js');
  worker.postMessage('start');
  worker.onmessage = function(event) {
    console.log('Received message from worker:', event.data
);
  };
}
worker.js
onmessage = function(event) {
  if (event.data === 'start') {
    let result = 0;
    for (let i = 0; i < 1e9; i++) {
      result += i;
    }
    postMessage(result);
  }
};

0df0860734c362dba9c73152f78672c7.jpg

9. 使用惰性初始化

原因

惰性初始化是一种延迟初始化技术,仅在需要时才初始化对象,减少不必要的开销。

技巧

  1. 1. 延迟加载模块:仅在需要时才加载模块。
  2. 2. 延迟初始化对象:仅在第一次使用时才初始化对象。

示例代码

// 不推荐:立即初始化对象
const module = require('heavy-module');
module.doSomething();
// 推荐:延迟加载模块
let module;
function doSomething() {
  if (!module) {
    module = require('heavy-module');
  }
  module.doSomething();
}

10. 使用现代JavaScript特性

原因

现代JavaScript特性,如箭头函数、模板字符串、解构赋值等,可以让代码更简洁,提高可读性和维护性。

技巧

  1. 1. 使用箭头函数:简化函数定义。
  2. 2. 使用模板字符串:简化字符串拼接。
  3. 3. 使用解构赋值:简化对象属性和数组元素的提取。

示例代码

// 不推荐:使用传统语法
function add(a, b) {
  return a + b;
}
const greeting = 'Hello, ' + name + '!';
const person = { name: 'Alice', age: 25 };
const name = person.name;
const age = person.age;
// 推荐:使用现代语法
const add = (a, b) => a + b;
const greeting = `Hello, ${name}!`;
const { name, age } = person;

结论

通过以上技巧,我们可以显著提高JavaScript代码的性能,从而提升用户体验,减少页面加载时间

在实际开发中,优化性能是一个持续的过程,需要不断地分析和改进。

相关文章
|
10天前
|
前端开发 JavaScript
前端ES5 | js —添加元素方法
前端ES5 | js —添加元素方法
|
7天前
|
前端开发 JavaScript API
前端性能优化-控制并发
【9月更文挑战第7天】前端性能优化-控制并发
11 0
|
14天前
|
开发者 图形学 C#
深度解密:Unity游戏开发中的动画艺术——Mecanim状态机如何让游戏角色栩栩如生:从基础设置到高级状态切换的全面指南,助你打造流畅自然的游戏动画体验
【8月更文挑战第31天】Unity动画系统是游戏开发的关键部分,尤其适用于复杂角色动画。本文通过具体案例讲解Mecanim动画状态机的使用方法及原理。我们创建一个游戏角色并设计行走、奔跑和攻击动画,详细介绍动画状态机设置及脚本控制。首先导入动画资源并添加Animator组件,然后创建Animator Controller并设置状态间的转换条件。通过编写C#脚本(如PlayerMovement)控制动画状态切换,实现基于玩家输入的动画过渡。此方法不仅适用于游戏角色,还可用于任何需动态动画响应的对象,增强游戏的真实感与互动性。
37 0
|
14天前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
33 0
|
14天前
|
前端开发 JavaScript 开发者
JSF与WebSockets,打造实时通信魔法!让你的Web应用秒变聊天室,用户体验飞升!
【8月更文挑战第31天】在现代Web应用开发中,实时通信对于提升用户体验至关重要。本文探讨了如何在主要面向Web应用开发的JSF(JavaServer Faces)框架中引入WebSockets支持,以实现客户端与服务器之间的全双工通信。通过具体示例展示了在JSF应用中实现WebSockets的基本步骤:添加依赖、创建服务器端点以及在前端页面中嵌入JavaScript客户端代码。尽管这一过程中可能会遇到一些挑战,如复杂代码编写和额外配置需求,但借助AWS等云服务平台,开发者仍能高效地完成部署和管理工作,从而增强Web应用的实时通信能力。
21 0
|
14天前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
40 0
|
14天前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
38 0
|
1天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
|
1月前
|
存储 前端开发 JavaScript
前端语言串讲 | 青训营笔记
前端语言串讲 | 青训营笔记
21 0
|
3月前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
63 2