首页
沸点
课程
AI Coding
数据标注
更多
直播
活动
APP
插件
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
确定删除此收藏集吗
删除后此收藏集将被移除
取消
确定删除
确定删除此文章吗
删除后此文章将被从当前收藏集中移除
取消
确定删除
编辑收藏集
名称:
描述:
0
/100
公开
当其他人关注此收藏集后不可再更改为隐私
隐私
仅自己可见此收藏集
取消
确定
周分享会主题
订阅
Fairy17472
更多收藏集
微信扫码分享
微信
新浪微博
QQ
21篇文章 · 0订阅
HTML Standard系列:Event loop、requestIdleCallback 和 requestAnimationFrame
在浏览器的实现上,诸如渲染任务、JavaScript 脚本执行、User Interaction、网络处理都跑在同一个线程上,当执行其中一个类型的任务的时候意味着其他任务的阻塞,为了有序的对各个任务按照优先级进行执行浏览器实现了我们称为 Event Loop 调度流程。 这种设…
深入解析你不知道的 EventLoop 和浏览器渲染、帧动画、空闲回调(动图演示)
resize、scroll 这些事件是何时去派发的。 这些问题并不是刻意想刁难你,如果你不知道这些,那你可能并不能在遇到一个动画需求的时候合理的选择 requestAnimationFrame,你可能在做一些需求的时候想到了 requestIdleCallback,但是你不知道…
浏览器渲染原理 (三)repaint(重绘)和reflow(回流)详解
知足则不辱,知止则不殆。——老子 大多数设备的刷新频率是60Hz,也就说是浏览器对每一帧画面的渲染工作要在 16ms 内完成,超出这个时间,页面的渲染就会出现卡顿现象,影响用户体验。 repaint/重绘 和 reflow/回流发生在什么渲染的那个阶段,我们要了解什么叫做 re…
你应该知道的requestIdleCallback
我们都知道React 16实现了新的调度策略(Fiber), 新的调度策略提到的异步、可中断,其实就是基于浏览器的 requestIdleCallback和requestAnimationFrame两个API。虽然React是自己实现了一套类似的requestIdleCallb…
requestAnimationFrame/cancelAnimationFrame——性能更好的js动画实现方式
requestAnimationFrame 是专门为实现高性能的帧动画而设计的一个API,目前已在多个浏览器得到了支持,包括IE10+,Firefox,Chrome,Safari,Opera等,在移动设备上,ios6以上版本以及IE mobile 10以上也支持requestA…
有关requestAnimationFrame
浏览器重绘频率一般会和显示器的刷新率保持同步。比如显示器屏幕刷新率为 60Hz,使用requestAnimationFrame API,那么回调函数就每1000ms / 60 ≈ 16.7ms执行一次。 requestAnimationFrame 会把每一帧中的所有 DOM 操…
深入理解 JavaScript 之事件循环(Event Loop)
这次继续一步步回顾 JS 基础知识点,今天讲的是 JS 中的事件循环。 JS 是一门单线程的非阻塞的脚本语言,这表示在同一时刻最多也只有一个代码段执行。 如果 JS 是多线程的,因为 JS 有 DOM API 可以操作 DOM,如果同时开了两个线程同时操作 DOM 的话,一个线…
利用window.requestAnimationFrame实现简单的数字累加动画
原理window.requestAnimationFrame可以保证动画以每秒60次的频率执行(有时也会出现降频的现象)每一次数字的变动即算一次动画再执行每次动画之前,利用window.cancelA
【译】前端requestAnimationFrame概述
requestAnimationFrame是一个让我感到兴奋的玩意,不是因为他有多复杂,而是这名字听起来就足够让人浮想联翩以致于很想去尝试。requestAnimationFrame函数与动画无关,你可以用它做很多事。 我们来谈谈什么是动画。动画其实是一种假象,是一种不连续的运…
requestAnimationFrame理解与实践
描述requestAnimationFrame产生背景与使用方式,将它与传统动画实现方式做对比。