摘要：
概述 requestAnimationFrame 是根据帧数来执行回调函数的，就是屏幕一帧，那 requestAnimationFrame就会执行一次。一般屏幕是60帧，也就是一秒执行60次回调函数. 性能相对定时器settimeout好，因为定时器执行权限在同步任务 微任务之后，会受到其他任务影响 阅读全文
摘要：
需要使用谷歌浏览器的无痕模式 要不然其他浏览器插件的脚本会影响页面的性能判断 使用截图 操作界面 点击分析按钮开始分析 生成分析 建议部分：红色是有必要解决的性能提升建议 红色建议分析： 静态资源大小分析图 点击下面按钮 看到如下静态资源页面 lighthouse文档 文档地址： https://d 阅读全文
摘要：
截图 黄色指的是js执行 紫色指的浏览器渲染 一般只需要看 js 和 render 这2个就行，其他不用看，并从这2个中看出哪里的代码导致阻塞线程比较久。 main线程推测 main线程就是浏览器的主线程，主要负责浏览器的渲染和js代码执行，由此可见，浏览器用于渲染和js执行是一个线程，也就是主线程 阅读全文
摘要：
概述 重绘指的是元素重新绘制，一般性能消耗很小，不用在意，一般修改颜色或者虚拟隐藏都是重绘 回流指的是修改元素宽高或者位置或者获取元素宽高位置等都是回流，性能消耗较大。 重绘(repaint)：元素样式改变不影响布局 回流(reflow)：也叫重排,当元素的尺寸、结构变化或触发某些属性时，浏览器会重 阅读全文
摘要：
总论 1、js一个tab就是一个进程，这个tab下会有多个线程，主要是主线程、渲染线程、js线程、网络线程资源池； 2、js引擎线程通过dom 之类的api和渲染线程沟通和控制渲染线程的一些页面显示； 3、实际上权威的说法是js引擎和渲染都是在一个线程上执行的，通过dom api之类的沟通，都是在主 阅读全文
摘要：
示意图 理解 事件执行队列执行的顺序首先是同步任务队列，其次是微任务队列、再其次是宏任务队列 测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt 阅读全文