网页的性能优化我们会分为两部分来看：资源加载的性能优化、代码运行的性能优化。 代码运行的性能优化需要用 Performance 工具记录某段时间的代码运行情况，分析出 long task，定位到耗时高

最近在用react搭建项目，发现react的脚手架升级了，在项目根目录下发现了一个新的文件 -- reportWebVitals.js。很好奇这是个啥。 里面有些比较熟悉的字母CLS、FID、FCP、LCP、TTFB这些跟性能指标有些关系的。 然后第三行有引入一个web-vit…

以简单的例子解释什么是函数节流与防抖并实现简单的节流防抖函数

原文地址：https://developers.google.com/web/updates/2016/07/infinite-scroller 原文作者：Surma 译者：王芃 摘要: 重用你的 DOM 元素以及删除那些远离可视范围的元素。为延迟显示的元素使用占位符。这里是一个无尽滚…

可以在空闲时间预获取页面可视区域（以下简称视区）内的链接，加快后续加载速度。 预获取视区内的 URL（使用<link rel=prefetch>或 XHR）。 可根据请求优先级进行控制（若支持 fetch() 可进行切换）。 该项目旨在为网站提供一套解决方案，预获取处于用户视区…

作为一个有追求的程序员！！！痛定思痛！！！同样的悲剧绝对不能在同一个技术面发生两次！！！流着泪写下该篇总结，希望可以给大家一些启发。 动画的实现原理，是利用了人眼的“视觉暂留”现象，在短时间内连续播放数幅静止的画面，使肉眼因视觉残象产生错觉，而误以为画面在“动”。 大多数设备的…

chrome 的开发者工具中提供了很多高效工具方便我们对页面进行性能分析.之前自己只用着一些基本的功能, 最近详细的过了一下官方文档,特别是 performance 面板(大部分都是之前的Timeline面板) 的使用(需要相对新一些的chrome浏览器版本). 如果勾选了 m…