【八股系列】如何编写更高效的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集成easypoi导出word换行处理过程

springboot集成easypoi导出word换行处理过程

《springboot集成easypoi导出word换行处理过程》SpringBoot集成Easypoi导出Word时,换行符n失效显示为空格,解决方法包括生成段落或替换模板中n为回车,同时需确... 目录项目场景问题描述解决方案第一种：生成段落的方式第二种：替换模板的情况，换行符替换成回车总结项目场景s
阅读更多...
SpringBoot集成redisson实现延时队列教程

SpringBoot集成redisson实现延时队列教程

《SpringBoot集成redisson实现延时队列教程》文章介绍了使用Redisson实现延迟队列的完整步骤,包括依赖导入、Redis配置、工具类封装、业务枚举定义、执行器实现、Bean创建、消费... 目录1、先给项目导入Redisson依赖2、配置redis3、创建 RedissonConfig 配
阅读更多...
SpringBoot中@Value注入静态变量方式

SpringBoot中@Value注入静态变量方式

《SpringBoot中@Value注入静态变量方式》SpringBoot中静态变量无法直接用@Value注入,需通过setter方法,@Value(${})从属性文件获取值,@Value(#{})用... 目录项目场景解决方案注解说明1、@Value("${}")使用示例2、@Value("#{}"php
阅读更多...
SpringBoot分段处理List集合多线程批量插入数据方式

SpringBoot分段处理List集合多线程批量插入数据方式

《SpringBoot分段处理List集合多线程批量插入数据方式》文章介绍如何处理大数据量List批量插入数据库的优化方案：通过拆分List并分配独立线程处理,结合Spring线程池与异步方法提升效率... 目录项目场景解决方案1.实体类2.Mapper3.spring容器注入线程池bejsan对象4.创建
阅读更多...
线上Java OOM问题定位与解决方案超详细解析

线上Java OOM问题定位与解决方案超详细解析

《线上JavaOOM问题定位与解决方案超详细解析》OOM是JVM抛出的错误,表示内存分配失败,：本文主要介绍线上JavaOOM问题定位与解决方案的相关资料,文中通过代码介绍的非常详细,需要的朋... 目录一、OOM问题核心认知1.1 OOM定义与技术定位1.2 OOM常见类型及技术特征二、OOM问题定位工具
阅读更多...
基于 Cursor 开发 Spring Boot 项目详细攻略

基于 Cursor 开发 Spring Boot 项目详细攻略

《基于Cursor开发SpringBoot项目详细攻略》Cursor是集成GPT4、Claude3.5等LLM的VSCode类AI编程工具,支持SpringBoot项目开发全流程,涵盖环境配... 目录cursor是什么？基于 Cursor 开发 Spring Boot 项目完整指南1. 环境准备2. 创建
阅读更多...
C#实现千万数据秒级导入的代码

C#实现千万数据秒级导入的代码

《C#实现千万数据秒级导入的代码》在实际开发中excel导入很常见,现代社会中很容易遇到大数据处理业务,所以本文我就给大家分享一下千万数据秒级导入怎么实现,文中有详细的代码示例供大家参考,需要的朋友可... 目录前言一、数据存储二、处理逻辑优化前代码处理逻辑优化后的代码总结前言在实际开发中excel导入很
阅读更多...
Spring Security简介、使用与最佳实践

Spring Security简介、使用与最佳实践

《SpringSecurity简介、使用与最佳实践》SpringSecurity是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架,本文给大家介绍SpringSec... 目录一、如何理解 Spring Security？—— 核心思想二、如何在 Java 项目中使用？——
阅读更多...
SpringBoot+RustFS 实现文件切片极速上传的实例代码

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot？二、环境准备与部署2.1 安装 RustF
阅读更多...
springboot中使用okhttp3的小结

springboot中使用okhttp3的小结

《springboot中使用okhttp3的小结》OkHttp3是一个JavaHTTP客户端,可以处理各种请求类型,比如GET、POST、PUT等,并且支持高效的HTTP连接池、请求和响应缓存、以及异... 在 Spring Boot 项目中使用 OkHttp3 进行 HTTP 请求是一个高效且流行的方式。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2