Web网页优化笔记

记录给前端网页美化、性能加载优化等一系列整理内容，分享给对生活有追求的伙伴们~

渠道推荐：

优化JS加载性能

在HTML页面中引入一些JavaScript代码时，可以采取以下几个步骤提高加载的性能：

将JavaScript代码放在页面底部

最简单直接的方法，只需移动脚本标签的位置。
优点：非常简单，立即见效。
实现方法：将 <script>标签放在 </body>标签之前。

<body>
    <h1>Click anywhere to see the effect!</h1>
    <!-- 在这里放置页面内容 -->
    <!-- 在页面底部引入JavaScript代码 -->
    <script>
        // 你的JavaScript代码
    </script>
</body>

使用外部JavaScript文件

将JavaScript代码放在外部文件中，并使用 <script src="path/to/your/script.js"></script>引入。
优点：利用浏览器缓存机制，减少重复加载，提高性能。
实现方法：创建一个 script.js文件，并在HTML中引入。

<body>
    <h1>Click anywhere to see the effect!</h1>
    <!-- 在这里放置页面内容 -->
    <!-- 在页面底部引入外部JavaScript文件 -->
    <script src="path/to/your/script.js"></script>
</body>

异步和延迟加载

使用 async或 defer属性来加载JavaScript文件。
优点：允许HTML继续解析，提高页面加载速度。
实现方法：在引入外部JavaScript文件时添加 async或 defer属性。

<body>
    <h1>Click anywhere to see the effect!</h1>
    <!-- 在这里放置页面内容 -->
    <!-- 使用defer属性引入外部JavaScript文件 -->
    <script src="path/to/your/script.js" defer></script>
</body>

压缩和混淆代码

使用工具（如UglifyJS、Terser）将JavaScript代码压缩和混淆。
优点：减少文件大小，加快加载速度。
实现方法：使用工具压缩代码并生成新的JavaScript文件。

<body>
    <h1>Click anywhere to see the effect!</h1>
    <!-- 在这里放置页面内容 -->
    <!-- 使用压缩后的外部JavaScript文件 -->
    <script src="path/to/your/script.min.js" defer></script>
</body>

合并和优化资源

将多个JavaScript文件合并为一个文件，减少HTTP请求数。
优点：减少请求数量，进一步提高性能。
实现方法：使用工具（如Webpack、Gulp）合并和优化资源。

<body>
    <h1>Click anywhere to see the effect!</h1>
    <!-- 在这里放置页面内容 -->
    <!-- 使用合并后的外部JavaScript文件 -->
    <script src="path/to/your/bundle.js" defer></script>
</body>

排序总结

将JavaScript代码放在页面底部 ：简单直接，立即见效。
使用外部JavaScript文件 ：稍微复杂一点，但效果明显。
异步和延迟加载 ：需要一点点额外的HTML修改，效果很好。
压缩和混淆代码 ：需要使用工具处理代码，适合进一步优化。
合并和优化资源 ：最复杂，但也是效果最好的优化方法之一，适合大型项目。

可以根据实际情况和项目需求，从最简单的方法开始逐步优化。

性能优化策略

前端性能优化是指通过各种技术和策略来提升Web应用的加载速度、响应时间和用户体验。前端性能优化涉及多个方面，以下是其中一些主要的方向：

1. 资源优化

压缩与最小化 ：压缩HTML、CSS、JavaScript文件以减小文件大小。
图片优化 ：使用适当的图片格式（如WebP）、压缩图片文件、懒加载图片。
字体优化 ：使用系统字体或者Web字体时考虑加载策略。

2. 缓存策略

HTTP缓存 ：设置合适的缓存头（如 Cache-Control），利用浏览器缓存减少请求。
Service Worker ：使用Service Worker实现离线缓存和背景同步等功能。

3. 减少HTTP请求数

合并文件 ：将多个CSS或JavaScript文件合并成一个文件。
雪碧图 ：将多个小图标合并到一张图片上，减少图片请求次数。

4. 异步加载

按需加载 ：使用懒加载（Lazy Loading）技术，仅在需要时加载资源。
动态导入 ：使用ES6的 import()函数动态加载模块。

5. 代码拆分

代码分割 ：通过Webpack等打包工具将代码分割成多个较小的包，按需加载。
路由级代码分割 ：在单页应用中，根据路由动态加载对应的组件。

6. 预加载和预获取

<link rel="preload"> ：提前加载关键资源，如CSS文件。
<link rel="prefetch"> ：预先获取可能需要的资源，如后续页面的内容。

7. DOM操作优化

减少DOM访问 ：减少直接对DOM的操作，可以使用变量存储DOM元素引用。
批量更新 ：使用 requestAnimationFrame或 MutationObserver来减少页面重绘和回流。

8. 减少重绘和回流

使用CSS动画代替JS动画 ：CSS动画比JavaScript动画更加高效。
避免昂贵的样式计算 ：例如，避免在循环中使用 offsetWidth或 offsetHeight。

9. 服务器端优化

CDN使用 ：利用内容分发网络加速静态资源的加载。
服务器性能优化 ：优化服务器配置，如使用HTTP/2协议。

10. 首屏加载优化

Critical CSS ：提取关键CSS，内联至HTML头部，确保首屏快速渲染。
预渲染 ：使用SSR（Server-Side Rendering）或预渲染技术来提高首屏加载速度。

11. 性能监控

性能分析工具 ：使用Chrome DevTools等工具来分析性能瓶颈。
持续性能监控 ：部署性能监控工具来持续跟踪应用的性能表现。

12. 用户体验优化

交互延迟 ：优化JavaScript执行，减少CPU负担，提高用户交互体验。
视觉优先 ：确保重要的视觉元素先加载，给用户即时的反馈。

实施步骤

评估：使用工具如Lighthouse来评估网站的性能。
优先级排序 ：根据性能报告确定优化的优先级。
逐步优化 ：针对问题逐一解决。
持续监测 ：定期检查性能指标，确保优化效果。

通过上述方法和技术，可以显著改善前端应用的性能，提高用户体验。需要注意的是，每种优化措施都有其适用场景，应该根据具体项目的需求和限制来选择最适合的方案。

Base64编码格式

优点

减少HTTP请求：将文件内容直接嵌入到HTML或CSS中，减少了浏览器向服务器请求文件的次数，从而加快页面加载速度。
避免跨域问题：某些情况下，由于跨域限制，浏览器可能无法加载外部资源。将文件转换为Base64编码后，可以直接嵌入到页面中，避免跨域问题。
方便数据传输：Base64编码可以将二进制数据转换为文本格式，方便在文本协议中传输，例如HTTP请求、电子邮件等。
简化文件管理：将文件转换为Base64编码后，可以将文件内容直接存储到数据库或配置文件中，简化了文件的管理和部署。

缺点

增加文件大小：Base64编码会将文件大小增加约33%。因此，对于较大的文件，不建议使用Base64编码，因为它会增加网络传输的负担。
可读性差：Base64编码后的字符串可读性较差，不方便人工修改和维护。
CPU开销：Base64编码和解码会消耗一定的CPU资源。

在某些特定场景下，常见的文件类型将其转为 Base64 编码的好处和适用场景 如下：

1. 图片

好处：

减少请求数量 ：将图片转为 Base64 后，图片内容会嵌入到 HTML 或 CSS 文件中，避免了额外的 HTTP 请求。
适合小图片或图标 ：对小尺寸的图标或者一小部分图片资源非常有效，能够提高加载速度，减少对外部资源的依赖。

适用场景：

小图标、背景图、logo 等。
离线 Web 应用，确保所有资源都内嵌。

2. 音频文件 (如 MP3, WAV)

好处：

避免额外的请求 ：在需要嵌入音频内容时，将音频文件转为 Base64 后，可以直接嵌入 HTML 或 JavaScript 中，减少网络请求。
离线支持 ：适用于没有持续网络连接的场景，比如离线音频播放器。

适用场景：

网站中的嵌入音频。
离线音频播放，尤其是在 PWA（Progressive Web Apps）或 Web 应用中。

3. 视频文件 (如 MP4, WebM)

好处：

嵌入小型视频 ：对于小视频或短片，直接将视频内容转为 Base64 可减少网络请求的数量，适用于一些小的广告视频或教程。
嵌入式应用 ：视频直接嵌入 HTML 结构中，方便在没有网络的情况下播放。

适用场景：

小型视频广告。
简短的展示视频或教程。

4. 字体文件 (如 TTF, OTF, WOFF, WOFF2)

好处：

减少请求数量 ：将字体文件转为 Base64 后嵌入 CSS 文件中，避免外部请求，减少 HTTP 请求数，提高页面加载速度。
提高字体的加载速度 ：字体文件较小，Base64 编码可以直接在 CSS 中应用，不需要额外请求文件。

适用场景：

Web 字体嵌入（如 Google Fonts、Typekit 字体等）。
离线 Web 应用，确保字体文件不会依赖外部资源。

5. 文档文件 (如 PDF, DOCX, XLSX)

好处：

内嵌数据 ：将文档内容转为 Base64 后可以嵌入到邮件或 Web 应用中，避免外部链接的依赖。
便于嵌入到邮件中 ：例如，发送 PDF 或 Word 文件时，可以将文件转为 Base64 后直接嵌入邮件正文中。

适用场景：

通过 Web 或电子邮件发送文档。
Web 应用中嵌入报告、合同等。

6. CSS 文件

好处：

减少外部请求 ：将外部 CSS 文件转为 Base64 后嵌入到 HTML 中，可以减少对外部资源的请求，特别是在小型项目或页面中非常有效。
内嵌样式 ：可以保证样式表始终可用，避免外部文件失效或加载延迟。

适用场景：

小型 Web 项目或页面，尤其是样式简单的页面。
离线应用中，确保样式的加载不依赖外部资源。

7. JSON 数据

好处：

减少请求 ：将 JSON 数据转换为 Base64 后，可以嵌入到 HTML 或 JavaScript 中，减少通过网络请求获取数据的开销。
适用于小型数据传输 ：对于小型的数据传输，Base64 可以作为一种替代方法，将数据直接嵌入页面中。

适用场景：

静态数据嵌入。
简单的数据交换，尤其在离线应用中。

总结

文件类型	优点	适用场景
图片	减少请求数量，减少依赖	小图标、离线应用、WebApp
音频	避免额外请求，离线支持	嵌入音频、离线音频播放
视频	嵌入小视频，减少请求	小视频广告、简短展示视频
字体文件	减少请求数量，提高加载速度	Web 字体嵌入、离线字体
文档文件	内嵌文件，避免外部依赖	电子邮件、Web 应用嵌入
CSS 文件	减少请求数量，内嵌样式	小型项目、离线应用
JSON 数据	减少请求，嵌入数据	静态数据、简单数据交换