在JavaScript页面加载时避免被格式化，可以使用代码压缩、惰性加载、懒加载等方式。 其中，代码压缩是最常用和最简单的方法，它通过删除代码中的空格、换行和注释来减少文件大小，从而加快页面加载速度。下面将详细介绍如何通过代码压缩来优化JavaScript页面的加载性能。
代码压缩不仅能减少文件大小，还能提升代码的执行效率。通过压缩工具（如UglifyJS、Terser），可以自动完成这一过程。代码压缩是前端优化中不可或缺的一部分，尤其是对于大型项目，压缩后的代码能够显著提升页面的加载速度和用户体验。
一、代码压缩
1、什么是代码压缩
代码压缩是通过删除代码中的无用字符（如空格、换行、注释等）来减少文件大小的技术。压缩后的代码在功能上与原始代码完全相同，但加载速度更快。
2、为什么使用代码压缩
提升加载速度：压缩后的文件更小，浏览器下载时间更短。
减少带宽使用：较小的文件占用更少的网络带宽，适合移动设备。
增强用户体验：更快的页面加载时间，提升用户满意度。
3、常用压缩工具
UglifyJS
UglifyJS 是一个广泛使用的JavaScript压缩工具。它不仅能压缩代码，还能进行代码混淆，进一步提升代码安全性。
npm install uglify-js -g
uglifyjs input.js -o output.min.js
Terser
Terser 是 UglifyJS 的一个分支，专注于 ES6+ 代码的压缩。它的使用方式与 UglifyJS 类似，但对现代 JavaScript 代码有更好的支持。
npm install terser -g
terser input.js -o output.min.js
二、惰性加载
1、什么是惰性加载
惰性加载是指在页面加载时，只有用户需要时才加载某些资源，而不是一开始就加载所有资源。这种方式可以显著提升初始加载速度。
2、如何实现惰性加载
JavaScript 动态加载
可以通过 JavaScript 动态加载需要的脚本。例如，可以在用户交互时加载某个模块：
document.getElementById('myButton').addEventListener('click', function() {
const script = document.createElement('script');
script.src = 'path/to/your/script.js';
document.head.appendChild(script);
});
使用 Intersection Observer API
Intersection Observer API 是一种高效的方式来检测元素是否进入视口，从而决定是否加载资源。
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
// 加载资源
}
});
});
observer.observe(document.getElementById('lazyElement'));
三、懒加载
1、什么是懒加载
懒加载与惰性加载类似，但更专注于图片和视频等媒体资源的延迟加载。这种技术在图片和视频较多的页面中尤为重要。
2、如何实现懒加载
HTML5 loading 属性
现代浏览器支持 loading 属性，通过设置 loading="lazy" 可以实现图片和 iframe 的懒加载。
<img src="image.jpg" loading="lazy" alt="Lazy loaded image">
<iframe src="video.mp4" loading="lazy"></iframe>
使用 JavaScript
对于不支持 loading 属性的浏览器，可以使用 JavaScript 来实现懒加载。
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll("img.lazy");
const lazyLoad = function() {
lazyImages.forEach(img => {
if (img.getBoundingClientRect().top < window.innerHeight) {
img.src = img.dataset.src;
img.classList.remove("lazy");
}
});
};
window.addEventListener("scroll", lazyLoad);
lazyLoad();
});
四、模块化加载
1、什么是模块化加载
模块化加载是指将代码分成多个模块，根据需要动态加载这些模块。这种方式可以减少初始加载时间，并提升代码维护性。
2、如何实现模块化加载
使用 Webpack
Webpack 是一个流行的模块打包工具，它支持按需加载模块。
// 使用动态 import 语法
document.getElementById('myButton').addEventListener('click', function() {
import('./myModule.js').then(module => {
module.doSomething();
});
});
使用 RequireJS
RequireJS 是一个基于 AMD 规范的 JavaScript 模块加载器。它允许按需加载模块，提升页面加载性能。
require(['myModule'], function(myModule) {
myModule.doSomething();
});
五、服务端优化
1、使用 HTTP/2
HTTP/2 支持多路复用、头部压缩和服务器推送，能够显著提升资源加载速度。确保你的服务器配置支持 HTTP/2。
2、使用 CDN
内容分发网络（CDN）可以将资源缓存到离用户最近的节点，减少网络延迟，提升加载速度。
3、启用 Gzip 压缩
在服务器端启用 Gzip 压缩，可以减少传输文件的大小，提升加载速度。
# Nginx 配置
gzip on;
gzip_types text/plain application/javascript application/json text/css;
六、代码优化
1、减少全局变量
全局变量会污染命名空间，影响代码性能和可维护性。尽量使用局部变量和闭包。
2、避免重复计算
对于需要频繁使用的计算结果，可以缓存起来，避免重复计算。例如：
// 优化前
for (let i = 0; i < array.length; i++) {
console.log(array.length);
}
// 优化后
const length = array.length;
for (let i = 0; i < length; i++) {
console.log(length);
}
3、使用高效的选择器
在操作 DOM 时，使用高效的选择器可以提升性能。例如，尽量使用 getElementById 而不是 querySelectorAll。
七、前端框架优化
1、使用轻量级框架
对于简单的页面，使用轻量级的前端框架（如 Preact）可以减少资源消耗，提升加载速度。
2、代码分割
现代前端框架（如 React、Vue）支持代码分割，通过拆分代码，实现按需加载。
// React 示例
import React, { Suspense, lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
3、使用 Virtual DOM
Virtual DOM 可以最小化实际 DOM 操作，提升渲染性能。确保你的框架配置和使用方式能够充分利用 Virtual DOM 的优势。
八、其他优化技巧
1、去除未使用的代码
通过工具（如 Webpack 的 tree-shaking）去除未使用的代码，减少文件大小。
2、使用 Web Workers
对于需要大量计算的任务，可以使用 Web Workers 来分担主线程的压力。
const worker = new Worker('worker.js');
worker.postMessage('start');
worker.onmessage = function(event) {
console.log('Worker result:', event.data);
};
3、预加载资源
对于关键资源，可以使用 <link rel="preload"> 或 <link rel="prefetch"> 来提升加载速度。
<link rel="preload" href="styles.css" as="style">
<link rel="prefetch" href="next-page.html">
通过以上多种优化方式，可以显著提升JavaScript页面的加载性能，确保用户获得更好的体验。
相关问答FAQs：
1. 为什么我的JS页面在加载时会被格式化？
当浏览器加载JS页面时，它会按照HTML和CSS的加载顺序来解析和渲染页面。因此，如果您的JS代码位于HTML或CSS之前加载，可能会导致页面在加载时被格式化。
2. 如何避免JS页面在加载时被格式化？
要避免JS页面在加载时被格式化，您可以将JS代码放在HTML页面的底部，即在
