前端性能优化

前端性能指标：

ttfb：从输入网址到页面上渲染第一个像素，是从输入网址到页面上出现和输入网址前的页面出现新的元素的时间。其中过程包括，网址输入->dns解析服务器ip地址->向后台发起请求->后台返回index.html->index.html渲染在页面上。

决定因素：网速、重定向、dns、服务端返回时间

改善：重定向、服务端

fcb：页面上第一个最大内容渲染用时，最大块，包括图片、video等。这个指标的值一直是变化的，可见视口中元素，刚开始出现在可见视图里，后面移动了位置，也会算作该指标。刚开始不在是可见范围里的，就算渲染后，移动到可见区域也不算。

影响因素及改善：

fb：页面第一个像素渲染。拉取到index，加载js，解析js，渲染dom树，添加事件监听。

影响因素及改进：骨架屏，js阻塞。

tti：页面可交互时间。

影响因素：拉取index，加载js，渲染dom树，样式渲染，dom添加监听事件。监听事件添加完，监听事件添加完，

js加载和解析，分包，js只保留必要的代码，减少大的插件和库引入。异步加载。

防止js和link阻塞，

大的资源懒加载和预加载

lcs:累计最大布局偏移量。

影响因素：异步加载、一些影响布局的全局元素挂载，图片、video元素标注尺寸，而不是刚开始为空，等元素加载出来，再修改尺寸

fid：输入延迟，第一次。因为刚进来页面的时候，主线程会被其他事情所占用，需要处理完原来的事件后才有时间对用户输入进行处理。

影响因素：对js进行瘦身

ssg：静态渲染，也是服务端渲染之一。

缺点：版本过期快，页面变动一点，就要重新发布。

适用于：页面基本固定，没有大量的数据交互。

过程：请求路由，返回该路由对应的页面，

疑问点：每个页面都需要请求index，再加载和解析bundle.js吗？是由后端反馈html字符串，然后浏览器解析吗？

哪些指标上会有好的表现：

ssr：服务端渲染。

csr：客户端渲染。客户端请求index，然后请求bundle .js，加载并解析。

问题：不利于seo。seo是直接拉取后台返回的html，还并没有加载和执行js。这个时候index里面并没有丰富的产品数据，不利于关键词搜索匹配，网站能被访问的次数就会降低，网站的流量就会降低，网站的seo排名就会降低。

css是在是在什么时候加载的？

预渲染：安装预渲染插件，在vite里配置哪些路由的页面需要进行预渲染。可以预渲染的页面是页面请求数据比较少的页面，是在打包的时候就生成页面。请求的时候，是在服务器端直接生成html字符串，返回给浏览器进行解析。

优化了哪些指标：seo、ttfb

需要激活吗？

什么时候进行事件挂载？

流式注水：服务器渲染，是在服务器端加载解析js，然后返回一整颗dom树。但是流失渲染，是陆续返回html。

优化指标：fb（第一个像素渲染时间）

疑问：分布加载解析js还是只是分布返回dom树

渐进式注水：时间挂载过程优化。一般的事件挂载需要遍历完所有的dom节点，但是渐进式渲染直接渲染优先级高的节点，比如说先挂载可见区域的dom节点的事件。

优化的指标：tti（可交互时间）

选择式注水：标注哪些js里的dom是需要事件挂载的，哪些不需要。这样减少不必要的处理时间。

优化的指标：tti，fid

注水：

以上的各种方式均需要运用到相关的插件及配置，同时需要各种检测平台对指标数据进行检测，有些时候会用到一些window的一些api，比如windon.performance.