【八股系列】如何编写更高效的JavaScript代码？JavaScript如何加快页面渲染速度，都有哪些方式？

2024-05-28 19:04
文章标签 java 代码 高效 编写 script 页面 系列 方式 渲染 速度 八股 加快

本文主要是介绍【八股系列】如何编写更高效的JavaScript代码？JavaScript如何加快页面渲染速度，都有哪些方式？，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 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', // 分割所有块，包括异步块},},// 其他配置...
};

这篇关于【八股系列】如何编写更高效的JavaScript代码？JavaScript如何加快页面渲染速度，都有哪些方式？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1011423。

相关文章

SpringBoot中六种批量更新Mysql的方式效率对比分析

SpringBoot中六种批量更新Mysql的方式效率对比分析

《SpringBoot中六种批量更新Mysql的方式效率对比分析》文章比较了MySQL大数据量批量更新的多种方法,指出REPLACEINTO和ONDUPLICATEKEY效率最高但存在数据风险,MyB... 目录效率比较测试结构数据库初始化测试数据批量修改方案第一种 for第二种 case when第三种
阅读更多...
Java docx4j高效处理Word文档的实战指南

Java docx4j高效处理Word文档的实战指南

《Javadocx4j高效处理Word文档的实战指南》对于需要在Java应用程序中生成、修改或处理Word文档的开发者来说,docx4j是一个强大而专业的选择,下面我们就来看看docx4j的具体使用... 目录引言一、环境准备与基础配置1.1 Maven依赖配置1.2 初始化测试类二、增强版文档操作示例2.
阅读更多...
一文详解如何使用Java获取PDF页面信息

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸（宽高）四、获取页面旋转角度五、判断
阅读更多...
Spring Boot中的路径变量示例详解

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs
阅读更多...
JAVA中安装多个JDK的方法

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置（JAVA_HOME和Path）,并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk（需要登录Oracle账号，没有可以免费注册）下载完
阅读更多...
Spring StateMachine实现状态机使用示例详解

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​，用于描述对象在其生命
阅读更多...
Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建
阅读更多...
Java中Integer128陷阱

Java中Integer128陷阱

《Java中Integer128陷阱》本文主要介绍了Java中Integer与int的区别及装箱拆箱机制,重点指出-128至127范围内的Integer值会复用缓存对象,导致==比较结果为true,下... 目录一、Integer和int的联系1.1 Integer和int的区别1.2 Integer和in
阅读更多...
SpringSecurity整合redission序列化问题小结(最新整理)

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red
阅读更多...
IntelliJ IDEA2025创建SpringBoot项目的实现步骤

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2