2024 年 6月 3 日随笔档案 - joken1310

requestAnimationFrame使用介绍

摘要：概述 requestAnimationFrame 是根据帧数来执行回调函数的，就是屏幕一帧，那 requestAnimationFrame就会执行一次。一般屏幕是60帧，也就是一秒执行60次回调函数. 性能相对定时器settimeout好，因为定时器执行权限在同步任务微任务之后，会受到其他任务影响阅读全文

posted @ 2024-06-03 21:27 joken1310 阅读(1333) 评论(0) 推荐(0)

谷歌浏览器Lighthouse网页性能分析工具使用

摘要：需要使用谷歌浏览器的无痕模式要不然其他浏览器插件的脚本会影响页面的性能判断使用截图操作界面点击分析按钮开始分析生成分析建议部分：红色是有必要解决的性能提升建议红色建议分析：静态资源大小分析图点击下面按钮看到如下静态资源页面 lighthouse文档文档地址： https://d 阅读全文

posted @ 2024-06-03 20:53 joken1310 阅读(146) 评论(0) 推荐(0)

浏览器 performance 测试页面性能，查看阻塞代码

摘要：截图黄色指的是js执行紫色指的浏览器渲染一般只需要看 js 和 render 这2个就行，其他不用看，并从这2个中看出哪里的代码导致阻塞线程比较久。 main线程推测 main线程就是浏览器的主线程，主要负责浏览器的渲染和js代码执行，由此可见，浏览器用于渲染和js执行是一个线程，也就是主线程阅读全文

posted @ 2024-06-03 16:47 joken1310 阅读(103) 评论(0) 推荐(0)

浏览器重绘和回流重排，浏览器渲染（render）和绘制（painting）过程

摘要：概述重绘指的是元素重新绘制，一般性能消耗很小，不用在意，一般修改颜色或者虚拟隐藏都是重绘回流指的是修改元素宽高或者位置或者获取元素宽高位置等都是回流，性能消耗较大。重绘(repaint)：元素样式改变不影响布局回流(reflow)：也叫重排,当元素的尺寸、结构变化或触发某些属性时，浏览器会重阅读全文

posted @ 2024-06-03 15:51 joken1310 阅读(65) 评论(0) 推荐(0)

浏览器渲染引擎线程和js执行引擎线程的关系

摘要：总论 1、js一个tab就是一个进程，这个tab下会有多个线程，主要是主线程、渲染线程、js线程、网络线程资源池； 2、js引擎线程通过dom 之类的api和渲染线程沟通和控制渲染线程的一些页面显示； 3、实际上权威的说法是js引擎和渲染都是在一个线程上执行的，通过dom api之类的沟通，都是在主阅读全文

posted @ 2024-06-03 00:30 joken1310 阅读(326) 评论(0) 推荐(1)

浏览器事件循环 event loop，同步任务微任务宏任务

摘要：示意图理解事件执行队列执行的顺序首先是同步任务队列，其次是微任务队列、再其次是宏任务队列测试代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="widt 阅读全文

posted @ 2024-06-03 00:14 joken1310 阅读(18) 评论(0) 推荐(0)

joken-前端工程师