【八股系列】如何编写更高效的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。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
高效+灵活，万博智云全球发布AWS无代理跨云容灾方案！

高效+灵活，万博智云全球发布AWS无代理跨云容灾方案！

摘要 近日，万博智云推出了基于AWS的无代理跨云容灾解决方案，并与拉丁美洲，中东，亚洲的合作伙伴面向全球开展了联合发布。这一方案以AWS应用环境为基础，将HyperBDR平台的高效、灵活和成本效益优势与无代理功能相结合，为全球企业带来实现了更便捷、经济的数据保护。 一、全球联合发布 9月2日，万博智云CEO Michael Wong在线上平台发布AWS无代理跨云容灾解决方案的阐述视频，介绍了
阅读更多...
嵌入式QT开发：构建高效智能的嵌入式系统

嵌入式QT开发：构建高效智能的嵌入式系统

摘要： 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发，详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程，包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发，涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用，以及嵌入式 QT 与硬件设备的交互，包括输入输出设
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2