【2024中高级向】22道前端面试题附答案

🕗 发布于 2024-04-28 15:20 前端

以下是问题总览：不会的点击右侧目录对应的问题即可跳转到答案

webpack 中 chunkHash 与 contentHash 区别；
写过 webpack 的 loader 和 plugin 么；
webpack 处理 image 是用哪个 loader，限制成 image 大小的是哪个？
webpack 怎么将多个css文件合并成一个；
webpack 的摇树对 commonjs 和 es6 module 都生效么，原理是？
实现一下「模版字符串」功能；
手写实现一下 Promise.all (Promise 不用写)；
怎么实现响应式布局的；
css flex 的各个属性值；
css 动画 animation 各个时间值含义；
css 如何实现让一个元素旋转并横向移动，如果只用一个 css 属性；
less 与 sass 区别，技术选型时如何取舍；
ES6 symbol 如何使用以及使用场景；
ES6 Proxy 如何使用以及使用场景，说说 Reflect；
generator 有什么应用场景;
async await 如何实现的；
git reset 与 revert 区别，revert 多个 mr 改如何处理；
git 如何撤回 add 后的内容；
http2 与 http1.1 区别，了解 http3 么，说说；
tcp 与 udp 的区别；
了解多端吗？以及其原理是什么？
（性能优化）项目刷新后页面过了很久才完整的显示完毕，如何提高显示速度？

1. webpack 中 chunkHash 与 contentHash 区别：

chunkHash：
- chunkHash是基于整个代码块（chunk）计算的。在Webpack中，一个chunk通常包含多个模块的集合。
- 当chunk中的任何文件更改时，该chunk的chunkHash也会改变。这意味着即使只有一个小的组件或模块发生变化，整个chunk的hash都会更新，导致所有依赖这个chunk的文件也必须重新下载。
- 使用场景：用于非入口chunk的缓存，适用于那些不经常变动的库文件。
contentHash：
- contentHash是根据文件内容计算的，特别适用于样式文件（如CSS）。
- 当文件的内容实际发生变化时，只有对应的文件的contentHash会更新，而与此文件相关的其他文件不会受到影响。
- 使用场景：用于样式和图片等资产，确保用户只在文件内容实际更改时(频繁)才需要重新下载文件。

这种区分有助于有效管理缓存，因为它允许客户端只在文件内容改变时才重新下载文件，而不是因为一小部分更改而下载整个bundle。

2. 写过 webpack 的 loader 和 plugin 吗？

Loader：
- Loader用于在Webpack的打包过程中转换文件。例如，babel-loader帮助我们将ES6以上的代码转换成向后兼容的JavaScript版本，而style-loader和css-loader则用于将CSS文件转换并嵌入到JavaScript中，这样可以通过JavaScript将样式注入到DOM中。
Plugin：
- Plugin用于扩展Webpack的功能，它直接访问到Webpack的整个编译生命周期。Plugins可以用于执行范围更广的任务，比如打包优化、定义环境变量、压缩CSS和JavaScript等。

编写一个简单的 Webpack Loader

下面是一个简单的 loader 示例，该 loader 会将文件内容全部转换为大写形式：

// file: upper-case-loader.js
module.exports = function(source) {
    return source.toUpperCase();
};

要在 webpack 配置中使用这个 loader，你需要将它添加到 module.rules 部分。将它应用于 .txt 文件：

// webpack.config.js
module.exports = {
    module: {
        rules: [
            {
                test: /\.txt$/,
                use: [
                    {
                        loader: path.resolve('./upper-case-loader.js')
                    }
                ]
            }
        ]
    }
};

这样配置后，所有 .txt 文件在打包时都会通过 upper-case-loader.js 进行处理，即将其内容转换为大写。

编写一个简单的 Webpack Plugin

Webpack plugin 可以在打包流程的不同阶段接入，执行更复杂的任务。下面是一个简单的 plugin 示例，它会在打包完成后输出一个消息：

// file: log-done-plugin.js
class LogDonePlugin {
    apply(compiler) {
        compiler.hooks.done.tap('LogDonePlugin', (stats) => {
            console.log('Build is done!');
        });
    }
}

module.exports = LogDonePlugin;

要在 webpack 配置中使用这个 plugin，你需要将其实例添加到配置的 plugins 数组中：

// webpack.config.js
const LogDonePlugin = require('./log-done-plugin.js');

module.exports = {
    // 其他配置...
    plugins: [
        new LogDonePlugin()
    ]
};

这个 plugin 使用了 Webpack 的钩子系统（具体使用 compiler.hooks.done 钩子），在每次成功构建后打印一条消息。

3. webpack 处理 image 是用哪个 loader，限制成 image 大小的是哪个？

处理图片的Loader：
- file-loader：可以将图片文件输出到构建目录，并返回公共URL。
- url-loader：功能类似于file-loader，但是如果文件大小小于限制，url-loader会返回一个DataURL（即Base64编码的字符串），这可以减少请求次数。
限制文件大小：
- 通常使用url-loader来限制图片大小。在url-loader的配置选项中，可以指定limit属性（单位为字节）。如果文件大小小于这个限制，它将返回DataURL，否则它将回退到file-loader行为，即将文件移动到输出目录并返回URL。

4. webpack 怎么将多个css文件合并成一个

在Webpack中，将多个CSS文件合并成一个通常使用MiniCssExtractPlugin来完成。这个插件将CSS从主应用程序中分离出来，生成一个单独的CSS文件，而不是将CSS直接嵌入到JavaScript bundle中，这样做可以更有效地利用缓存，因为CSS通常比JavaScript更少更改。使用该插件还可以将多个CSS文件合并为一个文件，减少请求次数，提升页面加载速度。

配置示例：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css'
    })
  ]
};

这样配置后，Webpack会把所有的CSS文件抽取并合并成一个名为styles.css的文件。

5. webpack 的摇树优化对 commonjs 和 es6 module 的影响

Tree Shaking是一个术语，通常用于描述移除JavaScript上下文中未引用代码的过程。它依赖于ES6模块系统中的静态结构特性，这使得Webpack可以在打包时静态分析代码，并剔除那些未被使用的模块。

对ES6模块的影响：
- ES6模块是静态的，意味着你不能动态地导入或导出内容。这种静态结构使得Webpack能够在编译时准确判断出哪些导出和导入是真正被使用的。
- 只有在使用ES6模块时，Webpack的Tree Shaking才真正有效。
对CommonJS的影响：
- CommonJS模块是动态的，可以在运行时修改和更新导出。这种动态性质意味着Webpack很难准确地进行静态分析，因此，对于CommonJS模块，Tree Shaking效果不佳。
- 为了优化，最佳实践是尽可能使用ES6模块。

6. 实现一下「模版字符串」功能

以下是一个简单的 JavaScript 函数，用于实现基本的模板字符串功能，该函数接受一个模板字符串和一个上下文对象，然后返回替换了变量的字符串：

function templateString(template, context) {
  return template.replace(/\$\{(\w+)\}/g, (match, key) => {
    return context.hasOwnProperty(key) ? context[key] : '';
  });
}

// 使用示例
const template = 'Hello, ${name}! Today is ${day}.';
const context = { name: 'Alice', day: 'Wednesday' };
console.log(templateString(template, context));
// 输出: "Hello, Alice! Today is Wednesday."

在这个实现中，函数templateString接受两个参数：template是包含变量占位符的字符串，context是一个对象，其属性值用于替换模板中的占位符。

这个函数使用正则表达式\$\{(\w+)\}来匹配模板中的所有形如${variable}的表达式，并将其替换为context对象中对应的值。如果在context中找不到相应的键，则替换为空字符串。

这种方法可以模拟基本的模板字符串功能，但它不支持复杂表达式（如运算或方法调用）。如果需要支持更复杂的表达式，可能需要实现一个更复杂的解析器或使用现有的模板引擎库，如Handlebars或Mustache。

7. 手写实现一下 Promise.all

Promise.all 是一个非常有用的功能，它允许同时处理多个 Promise 对象，并在它们全部成功解决后返回一个新的 Promise 对象。如果传入的任何一个 Promise 失败，返回的 Promise 将立即以该 Promise 的拒绝理由拒绝。下面是一个简单的实现：

function promiseAll(promises) {
  return new Promise((resolve, reject) => {
    if (!Array.isArray(promises)) {
      reject(new TypeError('arguments must be an array'));
      return;
    }
    let resolvedCounter = 0;
    let promiseNum = promises.length;
    let resolvedResults = new Array(promiseNum);
    for (let i = 0; i < promiseNum; i++) {
      Promise.resolve(promises[i]).then(value => {
        resolvedCounter++;
        resolvedResults[i] = value;
        if (resolvedCounter === promiseNum) {
          resolve(resolvedResults);
        }
      }, reason => {
        reject(reason);
      });
    }
  });
}

这个实现考虑到了几个关键点：

它确保promises参数是一个数组。
每个 Promise 解决后，它的结果存储在resolvedResults中相应的位置。
一旦所有 Promise 对象都解决了，resolve将会用这些结果作为数组调用。
如果任何 Promise 拒绝，reject会立即被调用。

8. 怎么实现响应式布局的

实现响应式布局的方法有几种，常用的技术包括：

媒体查询（Media Queries）：CSS 中的媒体查询允许你根据不同的屏幕尺寸和特性应用不同的样式规则。
流式布局（Fluid Layouts）：使用百分比而不是固定单位（如像素）来指定宽度，使布局能够适应不同大小的屏幕。
弹性布局（Flexbox）：CSS 的 Flexbox 模块提供了一种更有效的方式来布置、对齐和分配容器内元素的空间，即使它们的大小未知或是动态的。
网格布局（CSS Grid）：CSS 网格布局允许开发者创造复杂的布局结构，更适合大型应用。

例如，使用媒体查询来改变容器的布局：

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

@media (min-width: 600px) {
  .container {
    flex-direction: row;
  }
}

这个例子中，.container 在屏幕宽度至少为600px时将其子元素从垂直排列转为水平排列。

9. css flex 的各个属性值

Flexbox 提供了多种属性来控制布局：

flex-direction: 定义主轴的方向，可以是row, row-reverse, column, column-reverse。
flex-wrap: 控制如果一行内的项超过容器的宽度，是否应该换行，nowrap, wrap, wrap-reverse。
justify-content: 定义了项目在主轴上的对齐方式，如flex-start, flex-end, center, space-between, space-around。
align-items: 在交叉轴上如何对齐项目，如flex-start, flex-end, center, baseline, stretch。
align-content: 多行/列的对齐方式，如stretch, center, flex-start, flex-end, space-between, space-around。
flex-grow: 定义项目的放大比例。
flex-shrink: 定义项目的缩小比例。
flex-basis: 定义在分配多余空间之前，项目占据的主轴空间。
flex: 是flex-grow, flex-shrink和flex-basis的简写。
order: 允许你重新排序容器内的项目。

10. css 动画 animation 各个时间值含义

在CSS中使用动画时，可以通过animation属性来控制动画的各种方面。这些属性包括：

animation-name: 指定动画的名称，这个名字对应@keyframes规则中定义的动画序列。
animation-duration: 动画完成一个周期所需的时间（如2s代表两秒，500ms代表500毫秒）。
animation-timing-function: 控制动画的速度曲线，常用的值有linear, ease, ease-in, ease-out, 和 ease-in-out。
animation-delay: 动画在开始执行前的等待时间。
animation-iteration-count: 动画重复的次数，可以是数字或者infinite表示无限循环。
animation-direction: 动画是否应该轮流反向播放，包括normal, reverse, alternate, 和 alternate-reverse。
animation-fill-mode: 动画在执行前后如何将样式应用于其目标，常用的值包括none, forwards, backwards, 和 both。
animation-play-state: 可以控制动画暂停和运行，值为paused和running。

例如，创建一个简单的淡入淡出效果的动画：

@keyframes fadeInOut {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation-name: fadeInOut;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

11. css 如何实现让一个元素旋转并横向移动，如果只用一个 css 属性

要同时让一个元素旋转并沿水平方向移动，可以使用transform属性结合rotate和translateX函数：

.element {
  transform: rotate(45deg) translateX(100px);
}

这里，.element将沿X轴移动100像素并旋转45度。这种组合允许在单一的属性中执行多重变形。

12. less 与 sass 区别，技术选型时如何取舍

LESS和SASS都是流行的CSS预处理器，它们提供变量、混入（mixins）、函数等高级功能来编写更可维护、更强大的样式表。

LESS：
- 使用JavaScript开发，可以在浏览器或Node.js环境中运行。
- 语法较为简单，易于学习。
- 主要使用.less扩展名。
SASS：
- 最初使用Ruby编写，但现在主要使用其C实现，SassC。
- 提供两种语法：Sass（缩进语法）和Scss（类似CSS的块格式语法）。
- 功能更为丰富，如条件语句、循环等。

在技术选型时，可以考虑以下因素：

团队熟悉度：选择团队成员更熟悉的工具可以减少学习成本。
项目需求：如果项目需要复杂的编程特性，SASS可能是更好的选择。
生态系统和工具链：检查与现有开发工具和框架的兼容性。

13. ES6 symbol 如何使用以及使用场景

在 ES6 中，Symbol 是一种新的原始数据类型，它被用来创建唯一的标识符。Symbol 的主要用途是作为对象的属性键，这些属性是唯一的，可以防止属性名的冲突。这对于大型项目或者多个库和框架一起使用时尤其有用，因为它可以减少不同代码库间命名冲突的可能性。

基本使用

创建一个 Symbol 非常简单，使用 Symbol() 函数即可：

let sym = Symbol();
let obj = {
    [sym]: "Symbol Value"
};
console.log(obj[sym]);  // 输出: "Symbol Value"

在这个例子中，sym 是一个 Symbol，并且被用作对象 obj 的属性键。通过这种方式，sym 属性不会与对象上的其他属性冲突，即使它们有相同的名称。

使用场景

私有属性：
Symbols 可以用来模拟私有属性，因为直接通过对象属性名无法访问到使用 Symbol 作为键的属性（除非你拥有这个 Symbol）：

let age = Symbol();
class Person {
    constructor(name, ageValue) {
        this.name = name;
        this[age] = ageValue;
    }
    displayAge() {
        console.log(this[age]);
    }
}

let person = new Person("Alice", 30);
person.displayAge();  // 输出: 30
console.log(person.age);  // 输出: undefined

这里的 age 属性在类的外部是无法直接访问的，从而实现了一种简单的封装。

消除魔法字符串：
在代码中直接使用字符串或数字往往会造成所谓的“魔法字符串”问题，即这些值的含义不清晰且易出错。使用 Symbol 可以增强代码的可读性和可维护性：

const COLOR_RED = Symbol("Red");
const COLOR_BLUE = Symbol("Blue");

function getColor(color) {
    switch (color) {
        case COLOR_RED:
            return "Red";
        case COLOR_BLUE:
            return "Blue";
        default:
            throw new Error("Unknown color");
    }
}

使用 Symbol 实现迭代器：
使用 Symbol.iterator 可以自定义对象的迭代行为：

let collection = {
    items: [1, 2, 3],
    [Symbol.iterator]: function* () {
        for (let item of this.items) {
            yield item;
        }
    }
};

for (let item of collection) {
    console.log(item);  // 输出 1, 2, 3
}

防止属性覆盖：
当使用第三方库或者在大型项目中，可能会有多个模块操作同一个对象。使用 Symbol 作为属性键可以防止无意中覆盖已有的属性：
```
let id = Symbol("id");
obj[id] = "Module1";
console.log(obj[id]); // 输出: "Module1"
```

通过以上例子，我们可以看到，Symbol 提供了一种方式来增加代码的健壮性和封装性，是在实际工作中非常有用的工具。

14. ES6 Proxy 如何使用以及使用场景，说说 Reflect

Proxy 是 ES6 引入的一个功能强大的特性，允许你定义一个对象的各种操作的自定义行为（如属性查找、赋值、枚举等）。它常用于拦截和自定义对象的基本操作。

使用方法：

let handler = {
    get: function(target, name) {
        return name in target ? target[name] : 42;
    }
};

let p = new Proxy({}, handler);
p.a = 1;
console.log(p.a, p.b);  // 输出：1, 42

在这个例子中，handler对象定义了一个get陷阱，它拦截对未定义属性的访问，并返回42。

使用场景：

数据绑定：例如，实现一个响应式框架时，Proxy可以用来自动检测数据变化。
访问控制：可以用Proxy检查属性访问前的条件。
日志和报告：可以使用Proxy自动记录对某些对象的操作。

Reflect 是与 Proxy 配套的一个内置对象，它提供了拦截 JavaScript 操作的方法。这些方法与 Proxy 的handler对象的方法相对应。Reflect不是一个函数对象，所以它是不可构造的。

Reflect的用途包括：

简化函数调用：例如，Reflect.apply(Math.floor, undefined, [1.75]) 等同于 Math.floor(1.75)。
操作结果的统一：Reflect的方法与 Proxy 的陷阱方法相对应，返回值也更为统一，更容易处理。
与 Proxy 的协同：使 Proxy 的handler方法更加标准化和易于管理。

15. generator 有什么应用场景

Generator 是一个可以返回多次的特殊函数，它能在执行中暂停，后面又可以从停下来的地方继续执行。

语法：

function* myGenerator() {
    yield 'hello';
    yield 'world';
}
const generator = myGenerator();
console.log(generator.next().value); // 输出 'hello'
console.log(generator.next().value); // 输出 'world'

应用场景：

异步编程：使用 Generator 函数管理异步操作，配合 yield 语句暂停和恢复代码执行，如通过 yield 暂停执行，等待异步操作完成。
实现迭代器：Generators 自然支持迭代协议，可以用来自定义对象的迭代行为。
状态机：可以使用 Generator 函数实现状态机，每次调用 next() 方法时切换到不同的内部状态。

16. async/await 如何实现的

async 和 await 是基于 Promise 的语法糖，使得异步代码的书写和阅读更接近同步代码。

async 关键字用来声明一个函数是异步的，这意味着它返回一个 Promise。
await 关键字用来等待一个 Promise 完成，它只能在 async 函数内部使用。

实现原理：

当 await 表达式在 async 函数中被调用时，它会暂停函数的执行并等待 Promise 解决。
在此期间，JavaScript 引擎可以处理其他事务，比如执行其他脚本、处理事件等。
一旦 Promise 解决，async 函数将从停止的地方恢复执行。

17. git reset 与 revert 区别，revert 多个 merge request 改如何处理

git reset 和 git revert 都是用来撤销之前的更改，但它们的方式和影响不同。

git reset:
- git reset 主要用于在本地撤销更改。它可以将HEAD（当前分支的指针）移动到指定的状态，无论是回到过去的某个提交，还是撤销工作目录中的未提交更改。
- git reset 有三种模式：--soft（只改变提交历史，但不改变工作目录和索引）、--mixed（默认模式，改变索引（暂存区）但不改变工作目录）和 --hard（改变工作目录和索引，完全恢复到某个提交的状态）。
- 使用 git reset，尤其是 --hard 选项，要小心，因为它会永久删除提交记录和工作中的更改。
git revert:
- git revert 用于在公共历史中安全地撤销更改。它通过创建一个新的提交来“反转”一个或多个旧提交的效果，而不是删除或修改现有提交。
- 这种方式的优点是它不会改变项目历史，因此适用于团队环境中的版本控制，特别是已经推送到远程仓库的更改。

对于处理多个 merge request 的撤销：

如果需要撤销多个 merge request，并且它们已经推送到了远程仓库，使用 git revert 是更安全的做法。你可以分别对每个 merge commit 执行 git revert，Git 会为每个撤销操作创建一个新的反向提交。
如果这些 merge 有冲突，Git 会提示你手动解决冲突，并要求你完成反向提交。

18. git 如何撤回 add 后的内容

撤回使用 git add 添加到暂存区的内容，可以使用 git reset 命令：

git reset HEAD <file>

这将从暂存区中移除指定的文件，但保留其在工作目录中的更改。如果你想从暂存区中移除所有文件，可以省略 <file> 参数：

git reset HEAD

这不会影响文件的当前更改（即工作目录中的更改仍然存在），只是将它们从暂存区中撤回。

19. http2 与 http1.1 区别，了解 http3 么，说说

HTTP/2 相较于 HTTP/1.1，引入了多项改进：

二进制协议：HTTP/2 使用二进制格式而非文本格式，使得解析更快、更高效，并减少了错误。
多路复用：在单一连接上并行交错地发送多个请求和响应，而不需要按顺序一一对应，减少了延迟。
头部压缩：HTTP/2 引入了 HPACK 压缩格式，有效减少了头部大小，降低了带宽使用。
服务器推送：服务器可以对一个客户端请求发送多个响应。服务器推送可以预先发送资源给客户端，避免额外的往返延迟。

HTTP/3：

HTTP/3 是基于 Google 的 QUIC 协议，是下一代的网络协议，主要目的是减少延迟并提供更为安全的传输。
它使用 UDP 替代 TCP，从而解决了 TCP 造成的队头

阻塞问题，即一个丢失的数据包阻塞后续所有数据包的问题。

HTTP/3 继续使用和 HTTP/2 相同的高级功能，如头部压缩、服务器推送等，但在传输层提供更好的性能和可靠性。

20. tcp 与 udp 的区别

TCP（传输控制协议）和 UDP（用户数据报协议）是两种常用的互联网协议：

TCP:
- 是面向连接的协议，保证数据的顺序和可靠性传输。
- 使用握手机制建立连接，保证数据不丢失、不重复，且按顺序到达。
- 适用于需要可靠数据传输的应用，如网页浏览、文件传输、电子邮件等。
UDP:
- 是无连接的协议，发送数据之前不需要建立连接，因此具有较低的延迟。
- 不保证数据的顺序、可靠性，也不会重新发送丢失的数据包。
- 适用于实时应用，如视频流、在线游戏、VoIP等，这些应用对速度要求高，可以容忍一定的数据丢失。

21.了解多端吗？以及其原理是什么？

当谈到“多端”开发时，通常是指创建可以在多种设备和平台上运行的应用程序，包括桌面、手机和平板电脑。多端开发的核心原理涉及代码的复用、适配不同平台的界面和功能、以及确保在所有目标设备上提供良好的用户体验。以下是一些实现多端应用的主要技术和原理：

1. 跨平台框架

使用跨平台开发框架是实现多端应用的常见方式。这些框架允许开发者编写一次代码，然后部署到多个平台。一些流行的跨平台框架包括：

React Native：由Facebook开发，允许你使用JavaScript和React编写应用，然后将其编译为接近原生性能的iOS和Android应用。
Flutter：由Google开发，使用Dart语言，可以编译成iOS、Android、Web和桌面应用。
Xamarin：使用.NET和C#，可以创建iOS、Android和Windows应用。
Ionic：使用Web技术（HTML, CSS, JavaScript）来创建移动应用，然后通过Cordova或Capacitor封装为原生应用。

2. 响应式设计

响应式设计是多端开发中确保应用界面在不同屏幕尺寸和分辨率上都能正确显示的关键。使用CSS媒体查询和灵活的布局系统（如Flexbox和CSS Grid），可以创建适应不同设备的界面。

3. 功能适配

不同平台可能支持不同的功能和API。多端应用开发中，需要根据平台的能力来适配或替换某些功能。例如，某些API在桌面上可用而在移动设备上不可用，或者行为略有不同。

4. 性能优化

性能是多端开发中的重要考虑因素，尤其是对于那些同时运行在高性能设备和性能较低设备的应用。优化可能涉及减少资源消耗、改进数据处理方式和优化网络使用。

5. 统一的用户体验

尽管平台之间可能存在差异，但提供一致的用户体验是多端开发的重要目标。这包括确保应用的界面和交互在所有平台上都保持一致性。

6. 持续集成和部署

在多端项目中，持续集成（CI）和持续部署（CD）可以帮助自动化测试和发布过程，确保在所有支持的平台上都能及时更新应用，并保持应用的质量和稳定性。

22. （性能优化）项目刷新后页面过了很久才完整的显示完毕，如何提高显示速度？

1. 资源加载优化

代码分割（Code Splitting）：使用如Webpack、Rollup或Parcel等现代前端构建工具支持的代码分割技术，确保用户仅加载当前路由页面所需的代码。这减少了首屏加载的时间和数据量。
树摇（Tree Shaking）：移除未使用的代码，减轻JavaScript文件的体积，使用例如Webpack的Tree Shaking功能，以减少发送到客户端的不必要代码。
延迟加载（Lazy Loading）：对于图片、视频以及非关键脚本，采用延迟加载策略，即在这些元素需要进入视口时才加载。
预加载（Preloading）：对于关键资源使用<link rel="preload">标签，提前加载用户肯定会用到的资源，如字体文件、CSS、核心JavaScript等。

2. 网络传输优化

内容分发网络（CDN）：使用CDN可以加速全球各地用户的内容加载速度，通过将内容缓存于离用户较近的服务器上，减少延迟和网络拥塞。
HTTP/2 和 HTTP/3：利用HTTP/2的多路复用功能，同时传输多个请求和响应，减少等待时间。HTTP/3进一步优化了传输性能，减少了连接和传输中的延迟。
服务端压缩：在服务器端应用Gzip或Brotli压缩，减少传输的数据大小。

3. 渲染性能优化

关键渲染路径优化：分析并优化关键渲染路径（Critical Rendering Path），确保HTML、CSS和关键脚本尽快地加载和执行。例如，最小化关键CSS，内联在HTML中，以加速首次绘制。
避免阻塞渲染的JavaScript和CSS：通过异步加载非关键JavaScript（使用async或defer属性）和非阻塞CSS（使用media属性或动态加载技术）。
利用浏览器缓存：通过配置强缓存和协商缓存策略，使得重访用户可以快速加载页面。

4. 前端监控和优化工具

性能监控工具：使用像Lighthouse、WebPageTest等工具定期检查网站性能，获取优化建议。
实时性能监控（RUM）：实施真实用户监控（Real User Monitoring），收集和分析真实用户的体验数据，以便持续优化。

5. 服务端优化

服务器端渲染（SSR）：对于大型单页应用（SPA），通过服务器端渲染首屏内容，减少白屏时间，提升首次内容绘制（FCP）和首次有意义绘制（FMP）的速度。
边缘计算：使用Edge Computing处理某些请求和数据操作，减少到主服务器的往返时间。

通过综合应用这些策略，可以显著改善网站的加载时间和用户体验。每种策略都应根据具体情况和网站的独特需求来选择和调整。这样的优化过程需要持续监控和迭代改进，以确保最优的性能表现。

原文地址：https://blog.csdn.net/wanghaoyingand/article/details/138171578

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：MogDB如何兼容Oracle的管道函数
下一篇：【Vue】如何使用Webpack实现打包操作

【学习日记】notebook添加JAVA支持
作者是个大学生这个专栏主要收集课时常用的软件以及女朋友上课用的软件的教程。需提前配置好java环境本篇仅对添加支持进行说明。新开了gitcode 用于上传安装包。解压进入解压后目录复制文件地
阅读更多2024-11-15
Docker与Podman全面比较
Docker和Podman作为两大容器引擎，各自拥有独特的特点和优势。本文将从溯源、特点、技术优势、应用实例和技术前景等方面对Docker和Podman进行全面比较。
阅读更多2024-11-15
算法学习blog：day2 继续记日记
4. 明日计划：至少五道题，并且要学会并实现今天的三道题，看这五道题的思路解法，下一天进行实现优化。除此之外pdf粗略看到了20页，明天继续看，后面才是重点。1.做了三道PAT 76，77，78，差一
阅读更多2024-11-15
基于Python的网上银行综合管理系统
【2025最新】基于python+django+vue+MySQL的网上银行综合管理系统，前后端分离。
阅读更多2024-11-15
自定义注解+拦截器+jwtFilter实现权限控制
GetterSUPER_ADMIN(1, "超级管理员"),SYSTEM_ADMIN(2, "系统管理员"),DOMESTIC_CONSUMER(3, &quo
阅读更多2024-11-15
前端面试题整理-vue指令开发
在 bind 钩子中，我为绑定的元素添加了一个点击事件监听器，当元素被点击时，执行复制操作。我当时在开发点击复制文本的功能，我有很多个元素都想有这个功能，但是我又不想每个元素都绑定一个 onClick
阅读更多2024-11-15
在使用ipc通信时，在渲染进程的Vue + TypeScript 开发过程，给window对象添加属性并赋值时，发生报错解决方法
在使用ipc通信时，在渲染进程的Vue + TypeScript 开发过程，给window对象添加属性并赋值时，发生报错解决方法
阅读更多2024-11-15
GESP4级考试语法知识（贪心算法（四））
GESP4级考试语法知识（贪心算法（四））
阅读更多2024-11-15
20241114在飞凌的OK3588-C的核心板上跑Linux R4时通过iperf3测试以太网卡的实际网速
创建一个eth0配置文件，配置文件的路径为：/etc/network/interfaces.d/eth0,设置动态ip的配置文件。虽然飞凌的OK3588-C的核心板使用的是千兆网卡RTL8211
阅读更多2024-11-15
【EmbeddedGUI】脏矩阵设计说明
脏矩阵设计说明
阅读更多2024-11-15