Open hawx1993 opened 1 year ago
使用CDN：让用户访问最近的资源，减少来回传输时间；
浏览器缓存：
Memory Cache：Memory Cache缓存的大部分是preloader指令下的静态资源。我们发现，Base64 格式的图片，几乎永远可以被塞进 memory cache。
Service Worker Cache：
使用service worker通常用来做缓存文件，提高首屏速度https://developers.google.com/web/ilt/pwa/caching-files-with-service-worker
service worker
HTTP Cache：做HTTP缓存（强缓存与协商缓存：添加Expires头和配置Etag）用户可以重复使用本地缓存，减少对服务器压力；
Push Cache：推送缓存，它是HTTP2.0新增加的内容
离线存储manifest：告知浏览器被缓存的内容，按照manifest文件的规则，将文件保存在本地，从而在没有网络链接的情况下，也能访问页面。
[http://js.perfma.com](http://js.perfma.com)、[http://css.perfma.com](http://css.perfma.com)、[http://img.perfma.com](http://img.perfma.com)
LCP：Largest Contentful Paint，当前视窗中的最大内容元素渲染时间，小于2.5s属于还不错。 元素大小是指元素在视口中的可见大小，如果一个元素延伸到视口外面，如果有裁剪或者延伸到视口外面，则不纳入计算。如果元素是图片，图片固有尺寸大小和实际渲染大小，则取最小值那个。 LCP主要受以下四方面影：
Largest Contentful Paint
可以使用web-vitals测量LCP时间。关于LCP的优化方法参考如下：
相关参考：https://web.dev/optimize-lcp/
First Input Delay，FID衡量的是用户输入到主线程空闲的时间差。 关于FID的优化方法参考如下：
FID减少长任务
相关参考：https://web.dev/optimize-fid/
Chrome Devtools 的 Performance 工具是网页性能分析的利器，它可以记录一段时间内的代码执行情况，比如 Main 线程的 Event Loop、每个 Event loop 的 Task，每个 Task 的调用栈，每个函数的耗时等，还可以定位到 Sources 中的源码位置。
Performance 工具最重要的是分析主线程的 Event Loop，分析每个 Task 的耗时、调用栈等信息。 因为渲染和 JS 执行都在主线程，在一个 Event Loop 中，会相互阻塞，如果 JS 有长时间执行的 Task，就会阻塞渲染，导致页面卡顿。所以，性能分析主要的目的是找到 long task，之后消除它。
有如下代码，点击block1，调用myClickEvent，myClickEvent同步执行forEach循环，之后延迟1.5s调用changeHeight函数，改变block1的高度。
//index.html <div class="block1">block1</div> <div class="block2">block2</div> // script.js const block1 = document.querySelector('.block1'); const block2 = document.querySelector('.block2'); function changeHeight() { block1.style.height = '300px'; } function arrayFun() { console.log('1'); } function myClickEvent() { setTimeout(() => { changeHeight(); }, 1500); new Array(10000).fill(0).forEach(arrayFun); } block1.addEventListener('click', myClickEvent);
如上图所示，我们可以在main 主线程中看到带有红色三角号的task，说明该任务是个long task，存在性能问题。点击该task，可以在下方的event log看到具体的事件日志。
根据上图，找到self time耗时最长的任务，右侧可以看到具体的js文件和行数，这样便定位到问题所在。
我们还可以通过 Coverage 工具分析运行时的代码使用情况： 小结：资源加载的性能优化可以用 Coverage 工具记录代码使用情况，分析出没用到的代码，使用 treeshking、懒加载等方式，针对性的优化它。
内存泄露是指由于疏忽或错误造成程序未能释放已经不再使用的内存。
重现您认为可能正在泄漏的某些场景，例如，打开和关闭模式对话框。对话框关闭后，您希望内存恢复到上一级。因此，您需要拍摄另一个快照，然后将其与上一个快照进行比较。
https://developers.google.com/web/tools/chrome-devtools/memory-problems?hl=zh-cn
Reference：
React.Lazy
React.Suspense
应该知道什么是fiber算法，Fiber架构，双缓冲模式，Lane模型，时间切片，Reconciler，Scheduler，和Concurrent模式。
合理利用缓存
使用CDN：让用户访问最近的资源，减少来回传输时间；
浏览器缓存：
Memory Cache：Memory Cache缓存的大部分是preloader指令下的静态资源。我们发现，Base64 格式的图片，几乎永远可以被塞进 memory cache。
Service Worker Cache：
使用
service worker通常用来做缓存文件，提高首屏速度https://developers.google.com/web/ilt/pwa/caching-files-with-service-workerHTTP Cache：做HTTP缓存（强缓存与协商缓存：添加Expires头和配置Etag）用户可以重复使用本地缓存，减少对服务器压力；
Push Cache：推送缓存，它是HTTP2.0新增加的内容
离线存储manifest：告知浏览器被缓存的内容，按照manifest文件的规则，将文件保存在本地，从而在没有网络链接的情况下，也能访问页面。
只请求当前需要的资源
缩减压缩包体积
时序优化
降低请求量
加快请求速度
[http://js.perfma.com](http://js.perfma.com)、[http://css.perfma.com](http://css.perfma.com)、[http://img.perfma.com](http://img.perfma.com)。渲染优化
LCP 优化
LCP：
Largest Contentful Paint，当前视窗中的最大内容元素渲染时间，小于2.5s属于还不错。元素大小是指元素在视口中的可见大小，如果一个元素延伸到视口外面，如果有裁剪或者延伸到视口外面，则不纳入计算。如果元素是图片，图片固有尺寸大小和实际渲染大小，则取最小值那个。
LCP主要受以下四方面影：
可以使用web-vitals测量LCP时间。关于LCP的优化方法参考如下：
相关参考：https://web.dev/optimize-lcp/
FID 优化
First Input Delay，FID衡量的是用户输入到主线程空闲的时间差。
关于FID的优化方法参考如下：
FID减少长任务
相关参考：https://web.dev/optimize-fid/
使用webpack 优化项目
使用Performance分析优化
Chrome Devtools 的 Performance 工具是网页性能分析的利器，它可以记录一段时间内的代码执行情况，比如 Main 线程的 Event Loop、每个 Event loop 的 Task，每个 Task 的调用栈，每个函数的耗时等，还可以定位到 Sources 中的源码位置。
Performance 工具最重要的是分析主线程的 Event Loop，分析每个 Task 的耗时、调用栈等信息。
因为渲染和 JS 执行都在主线程，在一个 Event Loop 中，会相互阻塞，如果 JS 有长时间执行的 Task，就会阻塞渲染，导致页面卡顿。所以，性能分析主要的目的是找到 long task，之后消除它。
有如下代码，点击block1，调用myClickEvent，myClickEvent同步执行forEach循环，之后延迟1.5s调用changeHeight函数，改变block1的高度。
如上图所示，我们可以在main 主线程中看到带有红色三角号的task，说明该任务是个long task，存在性能问题。点击该task，可以在下方的event log看到具体的事件日志。
根据上图，找到self time耗时最长的任务，右侧可以看到具体的js文件和行数，这样便定位到问题所在。
我们还可以通过 Coverage 工具分析运行时的代码使用情况：
小结：资源加载的性能优化可以用 Coverage 工具记录代码使用情况，分析出没用到的代码，使用 treeshking、懒加载等方式，针对性的优化它。
使用Chrome 排查内存泄露
内存泄露是指由于疏忽或错误造成程序未能释放已经不再使用的内存。
重现您认为可能正在泄漏的某些场景，例如，打开和关闭模式对话框。对话框关闭后，您希望内存恢复到上一级。因此，您需要拍摄另一个快照，然后将其与上一个快照进行比较。
https://developers.google.com/web/tools/chrome-devtools/memory-problems?hl=zh-cn
使用Network分析网络请求
Reference：
React 组件性能优化
React.Lazy和React.Suspense轻松完成了解最新的React Fiber架构
应该知道什么是fiber算法，Fiber架构，双缓冲模式，Lane模型，时间切片，Reconciler，Scheduler，和Concurrent模式。
相关阅读