首屏优化
首屏优化是指在用户访问页面时，首屏能够尽快地加载并完成渲染，以提升用户体验。
1、压缩、分包、删除无用代码
压缩： 通过删除不必要字符、无用注释、空格以及代码复制粘贴产生重复的片段等方式，可以减小文件的大小，提高文件传输效率。 目前前端开发过程中最常用的两种压缩技术是 GZip 和 Brotli。
分包： 将页面中的组件或功能模块划分为多个独立的文件，以便按需加载。在浏览器请求时进行动态地下载和加载，这种方式可以提高首屏性能、性能更好地利用网络，并避免不必要的资源浪费。
2、静态资源分离
静态资源分离是 Web 前端性能优化中比较常用的一种方式。它通过将应用程序中的静态资源（如 HTML、CSS、JavaScript、图片等）分离到不同的域名下，以减少页面请求所需的时间和带宽占用。
具体来说，静态资源分离可以采用以下两种方式：
使用 CDN（内容分发网络）：CDN 是一种分布式网络服务，可以提供高速、可靠的内容交付和加速用户访问网站的服务。通过使用 CDN，静态资源可以在多个地理位置上缓存，并从最近的节点提供给用户，从而获得更快的加载速度和响应时间。
通过子域名分离：另一种分离静态资源的方法是使用不同的子域名。例如，将所有图片的 URL 都指向 img.com，将样式表都从 style.com 获取。通过使用不同的子域名，浏览器可以同时下载多个文件，从而提高并行下载的速度，从而提高整个页面的加载速度。
需要注意的是，静态资源分离也可能会增加 DNS 解析的延迟。如果使用太多不同的子域名，浏览器可能会花费大量的时间进行 DNS 查询并加载域名解析服务。因此，应该合理设置域名数量和规划应用程序的文件资源。
3、JS脚本非阻塞加载
非阻塞 JavaScript 脚本加载是一种 Web 前端性能优化的方法，它可以允许网页针对用户提供更快的响应时间，以及更小的页面加载时间。以下是一些主要的非阻塞加载技术：
动态添加脚本元素：通过使用 JS 来创建
<script>元素并将其插入到 HTML DOM 中，可以实现异步加载 JavaScript 脚本。示例代码如下：
let script = document.createElement('script');
script.src = 'path/to/script.js';
document.body.appendChild(script);
使用异步属性：在
<script>标记中设置async属性，可以使浏览器在加载 JavaScript 脚本时继续解析和渲染 HTML 文档。尽管执行顺序不能保证，但是这样可以确保开始下载脚本时页面不会被阻塞。（执行顺序不能保证是因为下载时间不同，async下载完会直接执行）
使用defer属性：设置
<script>标记上的defer属性，可以让浏览器在加载 JavaScript 脚本时继续对 HTML 进行解析和呈现，并且只有在HTML 解析完毕后才会执行脚本。
当使用动态添加脚本元素或设置 async 或 defer 属性时，应该确保所有 JavaScript 脚本能够独立运行，因为这些方法不能保证脚本间的依赖关系。通常用来异步加载外部的JS脚本文件。
总之，非阻塞 JavaScript 脚本加载可以显著提高页面性能，特别是在网络速度较慢的情况下。要优化应用程序的性能，建议使用非阻塞脚本加载器(如：RequireJS)或者在代码中实现这些方法的自动化扩展（自动化扩展是指利用构建工具和打包工具等辅助工具，如：Webpack）。
4、缓存策略
前端缓存策略指的是将 Web 应用程序的静态资源（如 HTML、CSS、JavaScript 等）缓存在客户端浏览器处，从而加快页面加载速度和响应速度。在此过程中实现首屏优化则非常重要，因为用户最先看到的就是首页或者其他页面的首屏展示内容。
启用 HTTP 缓存：开启 HTTP 缓存是一种简单且有效的前端缓存策略，可以显著降低首屏加载时间并提高页面性能。常见的 HTTP 头部字段有
Etag、Expires和Cache-Control等。
使用预加载和懒加载：预加载技术可用于在文档视图完成加载之前预先请求一些外部资源，以便更快地呈现首屏内容。另一方面，懒加载能够追踪用户滚动位置、鼠标移动或点击等行为，并对需要加载的外部组件请求进行动态管理，从而在有限的网络带宽下最大程度地优化网站或应用程序的响应速度。
CDN 加速：利用 CDN 分布式全球网络来缓存 Web 应用程序和静态资源是一种很好的前端缓存策略，能够大幅提高首屏呈现速度。在使用 CDN 时，需要选择适合自己的方案以满足特定业务需求与壮大的流量规模。
使用 Service Worker：Service Worker 是一个独立线程的 JavaScript 脚本，它可以在浏览器后台运行，并拦截网络请求、缓存文件和针对处理请求并返回响应等内容。通过使用 Service Worker，可以更好地控制和管理缓存，进而优化应用程序的响应速度并提高首屏展示效果。
5、SSR
SSR 是 Server-Side Rendering 的缩写，也就是服务端渲染。与传统的客户端渲染（CSR）不同的是，SSR 把一部分页面渲染工作交给了服务端，在用户请求时，服务端生成 HTML 页面并将数据注入到 HTML 中一起返回给客户端浏览器，以此来提高网页的首屏渲染速度和 SEO 的优化效果。
SSR 的优点主要包括：
提升首屏加载速度：由于 SSR 在服务端就可以生成完整的 HTML 文档并发送给浏览器，能够在页面加载过程中快速呈现出内容，降低了等待时间，从而提高页面的访问速度和用户体验。
便于SEO：SSR 渲染后直接输出 HTML 内容，并已经包含了 Meta 信息、关键词等标签，可以实现更好的搜索引擎优化效果，提升网站的排名。
减少对服务器压力的影响：如果使用 CSR 加载大量的 JavaScript 脚本，可能会因为频繁地与服务器通信导致严重的网络延迟问题。而 SSR 可以抵消这种问题，因为需要向服务器发送的请求大大减少，而且每个客户端可以获取相似的内容，所以实际上可以大幅度减小服务器的压力。
利于高效利用浏览器缓存：对于 CSR 页面，每次进行页面切换或刷新时，都需要重新加载所有相关的 JavaScript 和 CSS 文件；而对于 SSR 页面，资源文件在初次加载后就会被浏览器缓存，稍后访问页面时可以直接从缓存中读取相应的数据，从而可以提高页面的响应速度和性能。
尽管 SSR 在优化页面首屏渲染方面比 CSR 更有优势，但是实现过程较为复杂，需要考虑兼容性、服务器压力以及 SEO 等多种因素。在使用 SSR 技术时，需要选择合适的框架并合理规划方案来实现他的各种功能。
6、预置loading、骨架屏
预置 loading 是在首屏渲染时，在合适位置展示一个加载图标或动画，告知用户页面正在加载中，以提高用户等待体验。它的主要作用是告诉用户当前正在加载，避免用户误以为页面已经失去响应或网速太慢而关闭了页面，同时让用户意识到页面还在加载数据，优化用户体验。
骨架屏是一种将页面样式与结构分开的技术，它使用占位符来模拟页面元素，使得页面布局看起来像真正的内容。通过这种方式，用户可以快速地预览到“即将到来”的完整页面，并感受加载过程中的进度。
相比之下，预置loading更简单、易实现、广泛使用，但缺点是不能在视觉上明确展示未来将会呈现给用户的内容，因此对于那些需要在页面中显示具有特定样式、布局和元素的复杂内容的情况下使用可手感较差；而骨架屏适用于复杂的页面元素，可以在视觉上直接展示页面内不同部分的结构与版式，缩短了等待时间，但需要特别考虑到一些边角情况而提高开发成本。
