白屏时间
用户点击一个链接或输入URL地址后，显示第一个画面的时间。
白屏时间的重要性：当用户访问时，等待页面的时间越短，用户感知网站的速度就越快，体验越好，可提升用户体验，减少用户的跳出，提升页面的留存率。
过程
地址栏中输入url;浏览器查看缓存-系统缓存-路由器缓存，如果有，会从缓存中取。发送请求之前，域名解析，获取相应的ip地址;浏览器向服务器发起tcp连接，建立tcp三次握手；成功后，发送请求，请求数据包。服务器处理请求，将数据返回至浏览器；浏览器收到http响应；读取页面内容，渲染，解析，生成Dom树，解析样式，js交互，显示页面
白屏-性能优化
1.域名解析优化
DNS缓存优化；预加载策略；稳定可靠的DNS服务器
2.服务端处理优化
3.浏览器下载，解析，渲染页面优化
尽可能的精简HTML结构代码；js放到文件中，不要使用内联JS代码；将首屏内容所需的css内联到HTML中，能使css更快地下载。优先加载首屏所需图片；目前就这些，
pnpm 本质也是一个包管理器，和 npm / yarn 没有区别，但是，有两个优势
包安装速度极快；
磁盘空间利用非常高效；
嵌套 + 扁平 + pnpm-lock.yaml
打开通过 pnpm 安装的项目 node_modules 文件夹，当前 pack.json中所声明的各个依赖，而‘真正’的模块文件，存在于 node_modules/.pnpm,由 模块名@版本号的形式的文件夹扁平化存储(解决依赖重复安装)。
这样可以避免 项目中 跨声明访问 的问题，当前项目 node_modeules 只有声明的依赖才可以访问。
而 pnpm-lock.yaml 文件如同 yarn.lock package-lock.json 一样，为项目提供一份各个依赖稳定的版本信息。
硬连接与更高效的复用
与 yarn 的PnP模式 效果类型， 为提升 文件存储效率以及降低文件 IO开销，node_modules/.pnpm 中存储的文件其实是 pnpm 实际缓存文件的 硬链接，从而避免多个项目带来多份相同文件引起的空间浪费。
“内容寻址的文件系统” 来存储依赖文件。如果有两个版本的 a模块 依赖，但两个版本之前只有一个文件存在差异，pnpm 只会新增一个差异文件，最大化的提升文件存储效率。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163332.html
