首屏性能衡量的指标
-
FPS：最能反映页面性能的指标FPS(frame per second)，一般系统设置屏幕的刷新率为60fps。小于24就会出现明显的卡顿
-
DOMContentLoaded：DOM加载并解析完成会触发DOMContentLoaded事件，如果源码输出的内容太多，客户端解析DOM的时间也会变长，例如增加2000个嵌套层叠可能会相应增加50-200ms，尽量保证首屏输出即可，后续的内容只保留钩子，利用js渲染。
-
流畅度：FPS 值越高，视觉呈现越流畅，在等待的过程中可以加入一些视觉缓冲。
-
首屏加载时间：通过
window.performance.timing来计算出来。
首屏优化
1. 压缩、分包、删除无用代码
构建的时候借助一些工具把代码进行压缩和精简 单页应用时，把所有js都打包在一起，加快浏览器加载速度，增加并行能力
2. 静态资源分离
刚开始的时候应用和静态资源是保存在一起的，当并发量达到一定程度的时候就需要将静态资源保存到专门的服务器中，静态资源主要包括图片、视频、js、css和一些资源文件等，这些文件因为没有状态所以分离比较简单，直接存放到响应的服务器就可以了，一般会使用专门的域名去访问。
同源请求会默认带上cookie，动静分离之后没有cookie，可以节省一些性能
3. JS脚本非阻塞加载
渲染进程在渲染和解析时都是自上而下的，script标签的阻塞行为会对页面的性能产生影响，这是因为浏览器在下载脚本、解析、执行的过程中不会同时做其他事情，比如渲染页面、响应用户事件等（读取js和渲染进程是互斥的）。之所以这样做是因为正在执行的JavaScript代码可能会改变页面元素、修改样式、添加或者删除事件等各种操作，以及最关键的脚本之间的依赖性，浏览器必须等待当前执行的脚本执行完成之后再进行后续操作。
1、将脚本放在底部
link还是在head中，用以保证在js加载前，能加载出正常显示的页面。 script放在/body前。
2、成组脚本
由于每个script标签下载时阻塞页面解析过程，所以限制页面的script总数也可以改善性能。适用于内联脚本和外部脚本。
3、非阻塞脚本
等页面完成加载后，再加载js代码。也就是，在window.load事件发出后开始下载代码。
（1）defer属性：支持IE4和fierfox3.5更高版本浏览器 内联和外部文件 带defer属性的script可出现在文档的任何位置，对应的js文件将在script被解析时启动下载，但代码不会执行，直到DOM加载完毕（在onload事件句柄被调用之前）。所以实现了和也卖弄其他资源一起并行下载 （2）动态脚本元素 文档对象模型（DOM）允许你使用js动态创建HTML的几乎全部文档内容。
4. 缓存策略
打包工具会根据文件内容生成content哈希，只要文件不变就能继续使用缓存内容，加快加载进度
5. SSR
与 CSR（Client-side rendering）模式相比，SSR 的性能优势体现在 2 方面：
网络链路
- 省去了客户端二次请求数据的网络传输开销
- 服务端的网络环境要优于客户端，内部服务器之间通信路径也更短
内容呈现
- 首屏加载时间（FCP）更快
- 浏览器内容解析优化机制能够发挥作用
网络链路上，由服务端发出接口请求，将返回数据随 HTML 响应内容一次性传递到客户端，比 CSR 二次请求更快。并且服务端网络传输速度更快（可以有更大带宽）、通信路径更短（可以同机房部署）、通信效率也更高（可以走 RPC） SSR 返回的 HTML 是有内容（数据）的，客户端能够立刻渲染出有意义的首屏内容（First Contentful Paint）。同时，静态的 HTML 文档让流式文档解析（streaming document parsing）等浏览器优化机制也能发挥其作用
关键区别是 SSR 不依赖客户端环境，包括网络环境和设备性能，即使用户的网络情况很糟（弱网）、设备性能很差（廉价、老旧设备），服务端渲染同样能够保障与最优用户环境（Wi-Fi 网络、高端设备）下相近的内容加载体验
便于SEO：SSR 渲染后直接输出 HTML 内容，并已经包含了 Meta 信息、关键词等标签，可以实现更好的搜索引擎优化效果，提升网站的排名。
减少对服务器压力的影响：如果使用 CSR 加载大量的 JavaScript 脚本，可能会因为频繁地与服务器通信导致严重的网络延迟问题。而 SSR 可以抵消这种问题，因为需要向服务器发送的请求大大减少，而且每个客户端可以获取相似的内容，所以实际上可以大幅度减小服务器的压力。
利于高效利用浏览器缓存：对于 CSR 页面，每次进行页面切换或刷新时，都需要重新加载所有相关的 JavaScript 和 CSS 文件；而对于 SSR 页面，资源文件在初次加载后就会被浏览器缓存，稍后访问页面时可以直接从缓存中读取相应的数据，从而可以提高页面的响应速度和性能。
6. 预置loading、骨架屏
预置 loading 是在首屏渲染时，在合适位置展示一个加载图标或动画，告知用户页面正在加载中，以提高用户等待体验。它的主要作用是告诉用户当前正在加载，避免用户误以为页面已经失去响应或网速太慢而关闭了页面，同时让用户意识到页面还在加载数据，优化用户体验。
骨架屏是一种将页面样式与结构分开的技术，它使用占位符来模拟页面元素，使得页面布局看起来像真正的内容。通过这种方式，用户可以快速地预览到“即将到来”的完整页面，并感受加载过程中的进度。
相比之下，预置loading更简单、易实现、广泛使用，但缺点是不能在视觉上明确展示未来将会呈现给用户的内容，因此对于那些需要在页面中显示具有特定样式、布局和元素的复杂内容的情况下使用可手感较差；而骨架屏适用于复杂的页面元素，可以在视觉上直接展示页面内不同部分的结构与版式，缩短了等待时间，但需要特别考虑到一些边角情况而提高开发成本。
