最全前端性能优化总结

​后端操控性强化分两部份

1、读取操控性强化

2、图形操控性强化

一、读取操控性强化

其本质：

1、增加允诺单次

为何增加允诺单次？

应用程序能博戈达发出允诺，但每天博戈达发出允诺的个四元组有管制的，以chrome为例：

因此天然资源允诺数过多的确比允诺雷米雷蒙县更费时，直接影响页面的读取速率；

增加允诺单次形式

1）相片天然资源CSS希伯尼安斯图控制技术

把许多常见、生物降解的塞雷县分拆成两张大图，采用的这时候通过背景相片功能定位（background-position），功能定位到具体内容的某两张塞雷县上；

1、UI给图；

2、webpack应用程序：webpack-spritesmith相片懒读取

视区内相片先不读取，当步入视区或是步入视区以后的某一边线读取；

1、css的loading特性；

ottom、right、height、width重要信息，对照视区大小不一，进行相片读取（须要紧密结合IIS）；

3、IntersectionOberser形式，能窃听原素与否抵达现阶段视口的该事件；手写体工具栏

两个工具栏字体比一连串影像要小，除非工具栏手写体读取了，工具栏就会立刻图形出，不须要浏览两个影像，可以增加HTTP允诺。base64代码

相片的base64代码就是可以将两张相片数据代码成一串字符串，采用该字符串代替图像地址url；

（均衡css体积增大和http允诺增加之间的收益）2）合理利用缓存避免一行代码修改导致整个 bundle 的缓存失效应用程序缓存（天然资源）

强缓存

协商缓存DNS缓存（DNS查找时间）分包读取 (Bundle Spliting)3）分拆CSS和JS文件

2、增加天然资源大小不一

相同互联网环境下，更小体积意味着传输速率更快；

增加天然资源大小不一形式

1）天然资源压缩相片压缩工具：tinyPng等相片格式：，webp 普遍比 jpeg/png 更小，而 avif 又比 webp 小两个级别

如何鉴别应用程序与否支持webp？通过canvas来判断（这个比较常见），创建两个canvas原素，然后把它转成image/webp格式的data_url,如果这个data_url里面包含webp,则代表现阶段应用程序支持webp格式， 反之则不支持：document.createElement(canvas).toDataURL(image/webp).indexOf(data:image/webp)在服务端根据允诺header重要信息判断应用程序与否支持webp：在相片允诺发出的这时候，Request Headers 里有 Accept，服务端可以根据Accept 里面与否有 image/we增加服务器压缩和应用程序天然资源解压的压力；对于相片天然资源压缩效率不明显；Terser 等工具是 Javascript 天然资源压缩混淆的神器。对代码层进行处理，比如：1、长变量名替换短变量；2、删除空格换行符；3、预计算能力；4、移除无法被继续执行的代码；5、移除无用的变量及函数js、css、html天然资源压缩

2）Tree Shaking控制技术

3、互联网强化

1）CND：就近原则2）Http2.0

其他

二、图形操控性强化

应用程序图形过程

重排

当改变 DOM 原素边线或大小不一时，会导致应用程序重新生成图形树，这个过程叫重排。

重绘

当重新生成图形树后，就要将图形树每个节点绘制到屏幕，这个过程叫重绘。

不是所有的动作都会导致重排，例如改变手写体颜色，只会导致重绘。

重排和重绘这两个操作代价非常大，因为 JavaScript 引擎线程与 GUI 图形线程是互斥，它们同时只能两个在工作，因此重排和重绘会阻塞主线程。

图形操控性强化形式

1）天然资源读取优先级控制css引入放在head标签尾部，script脚本防砸body标签尾部；脚本与DOM/其它脚本的依赖关系很强：对

preload/prefetch 可控制 HTTP 允诺优先级，从而达至关键允诺更快积极响应的目的；

dns-prefetch，可对主机地址的 DNS 进行预解析。js和css的引入边线/script类型设置

三、页面读取指标

API指标

window.performence.timing

fetchStart: 应用程序准备好采用 HTTP 允诺抓取文档的时间，这发生在检查本地缓存以后。

domainLookupStart/domainLookupEnd: DNS 搜索引擎查询开始/完结的时间，如果采用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等;

connectStart: HTTP（TCP）开始/重新 建立连接的时间，如果是持久连接，则与 fetchStart 值相等。

requestStart: HTTP 允诺读取真实文档开始的时间（完成建立连接），包括从本地读取缓存。

responseEnd: HTT

domLoading: 开始解析图形 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关该事件。

domInteractive: 完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出 readystatechange 相关该事件，注意只是 DOM 树解析完成，这这时候并没有开始读取页面内的天然资源。

domContentLoadedEventStart: DOM 解析完成后，页面内天然资源读取开始的时间，在 DOMContentLoaded 该事件抛出前发生。

domContentLoadedEventEnd: DOM 解析完成后，页面内天然资源读取完成的时间（如 JS 脚本读取继续执行完毕）。

domComplete: DOM 树解析完成，且天然资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关该事件。

loadEventStart: load 该事件推送给文档，也即 load 回调函数开始继续执行的时间。

页面指标

白屏时间

指应用程序发起允诺到开始显示第两个页面原素的时间。现代应用程序不会等候CSS树（所有CSS文件浏览和解析完成）和DOM树（整个body标签解析完成）构建完成才开始绘制，而是立刻开始显示中间结果。因此经常在低网速的环境中，观察到页面由上至下缓慢显示完，或是先显示文本内容后再重绘成带有格式的页面内容。

window.performence.timing.domLoading – window.performence.timing.fetchStart

首屏时间

首屏时间（FirstScreen Time），是指用户看到第一屏，即整个页面顶部大小不一为现阶段窗口的区域，显示完整的时间。常见的形式有，页面标签标记法、影像相似度比较法和首屏高度内相片读取法。

可交互时间

用户可以进行正常的点击、输入等操作，默认可以统计DOMContentLoaded该事件发生的时间。

window.performence.timing.domContentLoadedEventEnd – window.performence.timing.fetchStart

整页时间

整页时间（Page Load Time），页面所有天然资源都读取完成并呈现出所花的时间，这个就是load该事件发生的时间。

window.performence.timing.loadEventEnd – window.performence.timing.connectStart

DevTools指标

在采用Google Chrome开发者工具的这时候，采用Network测试互联网操控性这时候，下面有三个时间。