前端性能优化

前端主要是交互，那么其优化是为了响应更快，展示更快

1.做（三省）：懒

能不能不做？

不变的：减少渲染+缓存静态资源；

如果要做，能不能拖延？

紧急缓慢/万一不用做了

增改的：

延迟非必要+预处理必要；

拖不下去的时候，能不能少做？

少做：压缩体积，多路复用

2.能否更快更好

SEO搜索引擎优化_搜索引擎seo中keywords-CSDN博客

3.预防

前端内存分析、优化、检测泄露-CSDN博客

目录

不变：不做

React.memo

缓存

使用 CDN（内容分发网络）：托管全球分布的 CDN 服务器

拖延

组件动态导入import

React：lazy懒加载、Suspense组件包裹异步组件

()=>import（）：路由懒加载

少做

资源压缩

长列表滚动优化

自适应防抖、监听元素尺寸变化

---

不变：不做

静态资源

React.memo

缓存

使用 CDN（内容分发网络）：托管全球分布的 CDN 服务器

1. 就近访问： 当用户请求访问某个静态资源时，CDN 会自动将用户请求路由到离用户最近的边缘服务器。这样可以减少网络延迟，提高资源的加载速度。

2. 负载均衡： CDN 使用负载均衡算法确保各个边缘服务器之间的负载均衡，避免某个服务器过载，提高整体性能。

拖延

类似“即时编译”（Just-In-Time Compilation, JIT）：

广泛应用于现代解释型语言，

如 Java 的 JVM（Java Virtual Machine）和 JavaScript 的 V8 引擎。

JIT 编译器会将经常执行的代码编译，提高程序运行的性能。

组件动态导入import

React：lazy懒加载、Suspense组件包裹异步组件

1. 返回一个懒加载组件包装器，内部包含一个动态 import() 函数。

2. 当应用程序首次渲染时，懒加载组件包装器会被渲染为一个空占位符，而不会立即加载真正的组件代码。

3. 当应用程序运行到需要渲染懒加载组件的代码时，动态 import() 函数才会被触发，开始异步加载实际的组件代码。这个过程是非阻塞的，所以应用程序可以继续进行其他操作。

4. 一旦组件代码加载完成，React.lazy 会自动渲染实际的组件内容，替换之前的占位符。

import React, { Suspense, lazy } from 'react';
 
const LazyComponent = lazy(() => import('./LazyComponent'));
 
function App() {
  return (
    <Suspense fallback={<div>Loading...div>}>
      <LazyComponent />
    Suspense>
  );
}

OtherComponent 只有在其首次需要渲染时才会被加载，

组件加载期间，用户将看到 "Loading..." 消息

()=>import（）：路由懒加载

通过import()的方式导入，webpack在打包时会单独将它列为一个块，

当符合判断条件时才会尝试去加载这个文件。

const RouterView = () => import('./components/RouterView.vue');
 
const router = new VueRouter({
  routes: [
    { path: '/path', component: RouterView }
  ]
});

少做

资源压缩

长列表滚动优化

自适应防抖、监听元素尺寸变化