目录
前端性能工具
Chrome DevTools的Performance面板
功能特点：
- 实时性能分析：记录页面加载、脚本执行、渲染、网络请求等详细过程，帮助开发者定位性能瓶颈。
- CPU和内存使用情况：展示脚本执行对CPU的影响及内存分配与释放情况。
- FPS（帧率）监控：分析动画和页面滚动的流畅度。
- Waterfall图：直观展示资源加载时间线，便于分析资源加载顺序和耗时。
- Timeline视图：展示页面生命周期内的所有活动，包括事件处理、渲染、布局和绘制等。
- Interactions（交互）：记录用户交互期间的性能数据，如长任务、卡顿等。
使用场景：
- 快速定位和诊断页面加载、渲染、脚本执行等方面的具体性能问题。
Lighthouse审计工具
功能特点：
- 全面性能评估：自动运行一系列测试，给出性能、可访问性、SEO、PWA（渐进式Web应用）等方面的评分。
- 性能优化建议：提供详细的优化指南，包括减少资源大小、优化图片、改善代码执行效率等。
- 可配置审计：支持自定义审核配置，如模拟不同网络条件、设备类型。
- 集成在Chrome DevTools中：也可以作为命令行工具或CI/CD流程的一部分运行。
使用场景：
- 定期进行网站性能体检，获取详细的优化报告。
- 开发阶段快速迭代，持续改进网页质量。
PageSpeed Insights
功能特点：
- 基于Lighthouse：提供网页性能评分和优化建议，但侧重于在线服务，可通过URL直接访问。
- 移动和桌面视图：分别评估并给出移动设备和桌面设备上的性能评分。
- 用户体验报告：分析首屏加载时间、交互时间等直接影响用户体验的因素。
- 优化建议：提供具体的优化步骤和预期收益，便于开发者实施改进。
使用场景：
- 快速评估线上网站的性能状况，尤其是针对最终用户的真实体验。
- 无需安装任何工具，适合快速诊断和比较不同页面或竞争对手的性能。
资源优化
资源优化是提高网页加载速度和用户体验的关键步骤之一，尤其在移动H5应用中更为重要。以下是针对图片、CSS、JavaScript以及静态资源CDN加速的优化策略：
图片压缩：JPEG、PNG、SVG、WebP
- JPEG：适用于照片和含有大量颜色渐变的图像。使用工具如TinyPNG/JPG，Kraken.io进行有损或无损压缩，调整质量级别以平衡大小和画质。
- PNG：适用于图标、透明背景图像。使用ImageOptim、OptiPNG等工具压缩PNG文件，对于包含大面积单一颜色的PNG，考虑转换为索引颜色模式进一步减小体积。
- SVG：矢量图形，适用于图标和可缩放图形。保持SVG代码简洁，去除冗余属性，使用SVG压缩工具如SVGOMG进行优化。
- WebP：谷歌推出的高效图像格式，同时支持有损和无损压缩。转换JPEG和PNG为WebP格式，利用其更小的文件大小。大多数现代浏览器已支持WebP，对于不支持的浏览器，可以提供回退方案。
CSS与JavaScript压缩
- CSS压缩：删除空白字符、注释、合并重复的选择器和属性，使用工具如CleanCSS、CSSNano自动完成这些工作。
- JavaScript压缩：去除空格、注释、缩短变量名，利用UglifyJS、Terser等工具进行混淆和压缩，减少文件大小。同时，确保压缩后的代码不会影响功能。
静态资源CDN加速
- 内容分发网络（CDN）：通过在全球分布的服务器上缓存静态资源，用户可以从最近的节点获取资源，减少延迟，提高加载速度。
- 智能路由：CDN可以根据用户的地理位置、网络状况等因素，动态选择最优的服务器节点提供服务。
- HTTPS支持：确保CDN提供HTTPS支持，保障数据传输安全，同时利用HTTP/2协议提高传输效率。
- 版本控制：为静态资源添加版本号或哈希值，利用CDN的长期缓存策略，确保用户获取到的是最新的资源版本。
懒加载与按需加载
懒加载与按需加载是前端性能优化中非常重要的策略，旨在减少初始页面加载时间，提升用户体验。
图片懒加载
懒加载（Lazy Loading）是一种延迟加载图片的技术，即在页面初始化时不立即加载所有的图片，而是当图片即将进入视口（用户可见区域）时才开始加载。这样可以显著减少页面初次加载时的数据传输量，加快页面呈现速度。
实现方式：
- Intersection Observer API：这是一种现代且高效的懒加载实现方式，通过监听元素何时进入视口来触发图片加载。
- 滚动事件监听：较旧的方法是监听滚动事件并在滚动时判断图片是否接近可视区域，但这种方式可能会引起性能问题，因为它会在滚动时频繁触发。
- 使用库：有许多现成的JavaScript库（如lozad.js、lazyload.js）可以简化懒加载的实现过程。
注意事项：
为懒加载的图片提供占位符，保证页面布局的连贯性。
确保有良好的用户体验备份方案，比如对不支持JavaScript的浏览器。
JavaScript模块按需加载
按需加载（On-Demand Loading）是指仅在真正需要某个JavaScript模块时才去加载它，而不是一开始就加载整个应用的所有代码。这对于大型应用尤其重要，可以显著减少初始加载时间。
实现方式：
- 动态导入（import()语法）：ES2020引入的动态导入语法允许在运行时按需加载模块。例如，
import('./module.js').then((module) => { /* 使用模块 */ })。 - 模块打包工具：Webpack等打包工具支持代码分割（code splitting），可以将应用拆分成多个chunk，按需加载这些chunk。
- 异步加载脚本标签：在需要时动态创建
注意事项：
- 合理规划模块划分，避免过细或过粗，影响加载效率和代码维护性。
- 保证按需加载的模块间依赖关系正确处理，避免加载顺序错误导致的错误。
- 监控和优化加载过程，确保用户体验流畅，如显示加载提示，处理加载失败情况。
首屏优化
首屏加载体验对于任何Web应用都至关重要，它直接影响到用户的第一印象和留存率。
Server-Side Rendering (SSR)
概念：SSR是指在服务器端生成完整的HTML页面，然后将其发送到浏览器，使得用户首次访问时就能看到完整的页面内容，而不需要等待JavaScript执行完成。这对于SEO友好且能提供即时的首屏内容。
优势：
- SEO友好：搜索引擎爬虫可以直接抓取服务器返回的HTML，提高搜索排名。
- 更好的用户体验：用户首次访问时即可看到完整页面内容，无需等待白屏时间。
挑战：
- 服务器负载：相比客户端渲染，SSR对服务器资源要求更高。
- 延迟：服务器渲染和传输HTML增加了首次请求的延迟。
Static Site Generation (SSG)
概念：SSG是在构建时生成静态HTML文件，每个页面都是预先渲染好的，可以部署在任何静态文件服务器上，无需复杂的后端支持。
优势：
- 高性能：纯静态页面加载极快，几乎无服务器计算压力。
- 易于部署和维护：静态文件托管成本低，且易于CDN缓存。
应用场景：
- 博客、文档站点、电商商品详情页等更新频率不高，内容相对固定的页面。
预渲染
概念：预渲染是SSG的一种特例，特别适用于SPA（单页面应用）。它在构建时为特定路由生成静态HTML，其他动态路由仍使用客户端渲染。这既保留了SPA的交互性，又能优化首屏加载。
优势：
- 结合了SSG的SEO优势和SPA的交互体验。
局限性：
- 适合页面内容相对固定的应用，动态内容较多的场景不太适用。
预加载
概念：预加载是一种性能优化策略，通过 <link rel="preload"> 标签提前告知浏览器哪些资源（如关键CSS、JavaScript）即将被使用，促使浏览器尽早开始下载这些资源。
作用：
- 减少关键路径资源的加载时间，加快页面渲染速度。
- 特别适用于首屏内容所需的关键资源。
最佳实践：
- 精确选择需要预加载的资源，避免无谓的带宽消耗。
- 结合页面结构和加载逻辑，合理安排预加载资源的顺序。
Web Worker
Web Worker 是一种可以让Web应用程序进行多线程处理的技术，它允许在后台独立于主线程运行脚本，避免了长时间运行的脚本导致的页面失去响应。这有助于提升用户体验，特别是处理复杂的计算任务时。
异步任务处理与主线程解耦
主线程：在Web浏览器中，UI渲染、事件处理等任务都在主线程上执行。如果主线程被耗时操作（如大量计算、网络请求等）阻塞，会导致页面无法响应用户输入，出现“假死”现象。
Web Worker的作用：
- 解耦：通过将耗时任务（如图像处理、大数据计算）移到工作线程中执行，主线程得以专注于UI交互，两者互不影响。
- 异步通信：主线程和Worker线程之间通过消息传递的方式进行通信，实现了任务的异步处理，提高了应用的响应速度。
SharedWorker与Service Worker
SharedWorker
- 共享资源：与普通的Web Worker不同，SharedWorker 可以被多个页面共享，使得多个页面可以共享同一份数据或资源，适合需要跨页面共享状态的场景。
- 应用场景：实时通信、数据同步等需要跨多个页面共享数据的任务。
Service Worker
- 离线缓存与网络代理：Service Worker 是一种特殊的Web Worker，它作为浏览器与网络间的代理，能够在网页加载之前拦截网络请求，实现离线访问、缓存策略、网络请求重定向等功能。
- 推送通知：支持接收来自服务器的推送消息，即使用户不在当前页面或浏览器关闭状态下也能收到通知。
- PWA（Progressive Web App）基础：是构建PWA的核心技术之一，使得Web应用具备类似原生应用的体验，如离线可用、安装至主屏、后台同步等。
总结：
- Web Worker 为了解决主线程阻塞问题，提供了后台线程执行脚本的能力，提升了页面响应速度。
- SharedWorker 在此基础之上，增加了多页面间资源共享的能力，适合需要跨页面共享状态的应用场景。
- Service Worker 则更进一步，不仅能够处理后台任务，还具备网络代理能力，是实现离线缓存、推送通知等高级功能的关键技术，是PWA技术栈中的重要组成部分。
渲染优化
渲染优化是前端性能优化的关键一环，主要目的是减少页面渲染的负担，提升用户体验。主要包括渲染性能分析、DOM优化、减少重排与重绘，以及合理使用requestAnimationFrame。
渲染性能分析
- 使用开发者工具：现代浏览器的开发者工具（如Chrome DevTools）提供了Performance面板，可以记录和分析页面渲染的详细过程，包括重排、重绘、JavaScript执行等，帮助开发者定位渲染瓶颈。
- 识别耗时操作：关注高耗时的JavaScript执行、频繁的DOM操作、以及大量的图片和复杂CSS动画等，这些都是影响渲染性能的主要因素。
DOM优化
- 减少DOM操作：DOM操作是昂贵的操作，应尽量减少频繁的增删改查。可以采用DocumentFragment批量操作，或者通过修改元素的innerHTML一次性替换大量内容。
- 避免深度嵌套：过于复杂的DOM结构会增加渲染成本，尽量扁平化DOM树。
- 虚拟DOM：使用React、Vue等框架的虚拟DOM技术，减少实际DOM操作，提高DOM操作效率。
减少重排与重绘
- 重排（Reflow）：当页面布局或几何属性发生变化时，浏览器需要重新计算元素的位置和尺寸，称为重排。
- 重绘（Repaint）：当元素的颜色、背景等外观属性改变，但不涉及布局时，浏览器需要重新绘制该元素，称为重绘。
- 优化策略：
- 合并样式修改：避免连续修改样式触发多次重绘，可以先修改样式再应用。
- 使用CSS变换而非位置调整：使用transform进行动画，因为变换不会触发重排，只有重绘。
- 避免强制同步布局：读取某些布局信息（如offsetWidth）会触发强制同步布局，应尽量减少这类操作。
使用requestAnimationFrame
- 简介：
requestAnimationFrame是一个浏览器提供的API，用于在下一次重绘之前请求浏览器调用指定的函数来更新动画。它能确保动画与屏幕刷新率同步，避免无效渲染，提高性能。 - 优点：
- 自动优化帧率，节省系统资源。
- 与浏览器渲染机制结合紧密，确保动画平滑。
- 支持在隐藏或不可见的tab中暂停动画，节省电池。
- 使用场景：适用于需要精确控制动画时间或需要与页面重绘同步的场景，如复杂的CSS动画、游戏开发等。