前端优化实践

TL;DR（拿去即用的清单） 以 Core Web Vitals 与 TTFB 为第一目标：LCP ≤ 2.5s、CLS ≤ 0.1、INP ≤ 200ms、TTFB ≤ 800ms（上限 1.3s）

虚拟列表实现 实现思路 渲染可视区域的数据：根据滚动位置计算出可见的起始索引和结束索引； 总高度占位：整个容器高度与真实数据等高，让滚动条正常工作； 滚动定位：通过一个“内层偏移容器”将可视区域的内容

背景与概述 在大型前端项目中，多角色、多权限的场景非常常见且复杂。随着业务规模扩大，用户角色和权限的多样化使得传统的静态路由配置难以满足这种灵活的需求。静态路由在项目初始化时就完全确定，无法根据用户身

前言 在构建现代Web应用时，服务端渲染（SSR）是一个重要的技术选择。虽然Nuxt.js是Vue.js生态中最流行的SSR解决方案，但在某些场景下，我们可能需要更轻量级或更灵活的替代方案。本文将详细

优化 Web 应用性能：减小包体积的实用方法 在长期开发项目时，我们经常会发现随着功能的不断增加，Web 应用的加载速度变得越来越慢。虽然看起来添加一个表格、按钮或其他组件似乎不会增加太多体积，但最终

简介 在对项目进行性能优化时，最常见的优化就是图片的懒加载，懒加载的目的是延迟加载页面上的图片，只有当图片进入视口的时候才加载，这样可以减少初始页面加载时间，节省带宽，提升用户体验。 懒加载有什么好处

随着 JavaScript 应用变得越来越复杂，性能优化也变得至关重要。接下来我们一起深入探讨一下性能优化的技巧之----WeakMap 什么是WeakMap 注意：WeakMap的键必须是对象 语法

1.降低 DOM 操作的开销 文档对象模型 (DOM) 是 Web 开发的重要基石，但过多的或不当的 DOM 操作会导致性能的严重损耗。所以降低 DOM 操作的开销是我们优化性能首要做的事。 降低代码

prerender 如果我们项目是前后端分离并且内容是AJAX动态获取想要进行网站排名优化（SEO）的话，可以使用prerender prerender的工作原理： 当搜索引擎爬虫请求一个单页应用或使

什么是SEO 简单地说，SEO是指网站从自然搜索结果获得流量的技术和过程 搜索引擎工作原理 要了解SEO，首先我们得了解搜索引擎的工作原理，其原理是比较复杂，我把流程简化如下： 一、爬虫抓取网页内容