web性能优化

页面渲染步骤

1.dom和cssom树构建

html下载完成后将html文本解析成dom树（文档对象模型）

在解析过程中，当遇到其他外部资源链接比如CSS、JS、图片等，会立即开启线程下载

但当外部资源是JS时，HTML的解析会停下来，等JS下载完执行结束后才继续解析HTML，防止JS修改已经完成的解析结果

CSS下载完之后对CSS进行解析，解析成CSS对象，然后把CSS对象组装起来，构建CSSOM树

2.构建render树

根据DOM树和CSS来构造render树

3.布局render树

render树构建完成以后，浏览器计算所有元素大小和绝对位置

4.绘制render树

布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来

性能指标

1.页面加载时间：页面以多快的速度加载和渲染元素到页面上。

• First contentful paint (FCP)： 测量页面开始加载到某一块内容显示在页面上的时间。
• Largest contentful paint (LCP)： 测量页面开始加载到最大文本块内容或图片显示在页面中的时间。
• DomContentLoaded Event：DOM解析完成时间
• OnLoad Event：页面资源加载完成时间

2.加载后响应时间：页面加载和执行js代码后多久能响应用户交互。

• First input delay (FID)： 测量用户首次与网站进行交互(例如点击一个链接、按钮、js自定义控件)到浏览器真正进行响应的时间。

3.视觉稳定性：页面元素是否会以用户不期望的方式移动，并干扰用户的交互。

• Cumulative layout shift (CLS)： 测量从页面开始加载到状态变为隐藏过程中，发生不可预期的layout shifts的累积分数。

优化

加载时间优化

1.可将js根据是否参与页面渲染分为关键和非关键js， 非关键JS我们可以考虑延迟异步加载，关键JS进行拆分优化处理

ps:如何拆分jshttps://blog.csdn.net/weixin_29574585/article/details/112666973

1.1关键js打包优化

a.让公共依赖成为大多数页面的依赖

例如：webpack打包时， vendor.js 170kB(gzipd) 是所有页面都会加载的公共文件，打包规则是 miniChunks: 3，引用超过3次的模块将被打进这个js ，但是 只有一个页面多次使用到了这个包，触发了miniChunks的规则，被打进了vendor.js ，所以我们这里就要修改vender.js配置让公共依赖成为大多数页面的依赖

b.公共组件按需加载

例如：一个页面涉及到多个组件，我们可以把用的少的公共文件放在需要使用它的单个组件中引入

c.业务组件拆分

对不在渲染的页面上的组件进行延迟加载处理

1.2非关键JS延迟加载

对于不参与页面渲染的js如上报相关的js， 可以在页面完成加载后再加载非关键JS

a.加载时序优化

1.处理好页面内容的懒加载逻辑，不能阻塞业务的 的正常展示，应该做好超时处理、重试等兜底措施

2.加载时间较长的资源若带来的loading影响到客户体验感，可以放在onload事件之后或者异步加载

b.大小尺寸优化

使用 img 标签 srcset/sizes 属性和 picutre 标签实现响应式图片

使用URL动态拼接方式构造url请求，根据机型宽度和网络情况，判断当前图片宽度倍数进行调整（如iphone 1x，ipad 2x，弱网0.5x）

c.数据上报优化

若一个图片请求的耗时特别长就会阻塞页面 onload 事件的触发，延长 loading 时间 可以延迟合并上报或者使用Beacon API或者使用post上报

d.字体优化

将字体资源压缩，生成精简版的字体文件

2.页面渲染优化

a.直出页面 TTFB 时间优化

可以先查看直出程序STKE耗时

再查看直出网关到STKE的耗时

以及反向代理网关到直出网关的耗时

若后两者耗时较长且不在机房同一个区域可以考虑是地理位置的原因，

让网关和直出服务机房部署在同一区域即可

b.页面渲染时间优化

问题：dom开始解析，但页面没渲染且css下载完成后页面才正常渲染

优化：可能时css文件过大或者是弱网情况， 可以考虑对页面首屏的关键CSS进行内联**，**让页面渲染不被CSS阻塞，再把完整CSS加载进来

c.页面抖动优化

1. 确定直出页面元素出现位置，根据直出数据做好布局
2. 页面小图可以通过base64处理，页面解析的时候就会立即展示
3. 减少动态内容对页面布局的影响，使用脱离文档流的方式或定好宽高