归档
229 篇笔记 · 81 个标签#JavaScript 下 23 篇
2024
11 篇- 事件循环读者来稿
Js 是一门单线程的语言,这是因为它运行在浏览器的渲染主线程中,而渲染主线程只有一个。
约 2 分钟· song-shao#JavaScript - 如何理解JS的异步读者来稿
JavaScript单线程与异步处理:浏览器渲染主线程负责解析HTML、CSS、执行JS等,同步执行易阻塞。为避免卡顿,浏览器采用异步处理,将计时器、网络请求等任务交由其他线程处理,完成后加入消息队列,主线程调度执行,确保流畅运行。
约 1 分钟· song-shao#JavaScript - input 框输入时切换输入法避免误输入读者来稿
探索如何避免在输入时切换输入法导致的误输入问题。本文介绍了HTML结构和JavaScript逻辑,通过监听输入法事件,实现在用户完成输入后触发搜索功能,提升用户体验。
约 1 分钟· song-shao#HTML#JavaScript - 逐个显示文字效果读者来稿
实现逐字显示文字效果,通过CSS动画和JavaScript结合。HTML创建文本容器,CSS设置居中显示,JavaScript控制字符逐个显示,间隔500毫秒。可调整显示速度和文本内容。
约 1 分钟· batype#HTML#JavaScript - 导航流程:从输入URL到页面展示,这中间发生了什么?读者来稿
本文深入探讨了从用户在浏览器输入URL到页面展示的完整流程,涉及网络请求、浏览器进程、渲染进程等关键环节。文章首先回顾了浏览器的进程架构,然后详细分析了用户输入URL后的导航过程,包括URL请求、重定向、响应数据类型处理等步骤。接着,讨论了渲染进程的准备和文档提交阶段,最后概述了页面渲染阶段。通过本文,读者可以全面了解浏览器内部工作机制,为前端开发和性能优化提供理论基础。
约 11 分钟· admin#JavaScript - WebAPI:XMLHttpRequest是怎么实现的?读者来稿
本文深入探讨了JavaScript中的XMLHttpRequest对象,解释了其在不刷新页面的情况下与服务器交换数据的能力。文章首先介绍了JavaScript操作DOM的方法,然后详细阐述了XMLHttpRequest的基本概念、工作流程、使用方式以及回调函数的同步与异步执行。进一步,文章探讨了XMLHttpRequest背后的实现机制,包括创建请求、配置请求信息、发送请求和处理响应。指出了使用X
约 9 分钟· batype#TypeScript#JavaScript - 任务调度:有了setTimeOut,为什么还要使用rAF?读者来稿
本文深入探讨了JavaScript中`requestAnimationFrame`(简称rAF)与`setTimeout`在实现动画时的性能差异。文章首先介绍了浏览器渲染进程的任务调度系统,解释了rAF相较于`setTimeout`的优势在于其能够与浏览器的刷新周期同步,从而实现更流畅的动画效果。接着,文章回顾了Chromium任务调度系统的演变,从单消息队列的队头阻塞问题,到引入高优先级队列,再
约 13 分钟· admin#JavaScript#TypeScript - WebAPI:requestAnimationFrame的工作机制读者来稿
`requestAnimationFrame`是浏览器提供的API,用于创建平滑动画效果。它通过控制帧率、优化可视性、利用合成器线程和协同帧延,确保动画与浏览器重绘过程同步。使用时传入回调函数,该函数会在下一次重绘前被调用,并接收时间戳参数。与`setTimeout`相比,`requestAnimationFrame`更高效、精确,适合动画和高频更新场景。
约 3 分钟· batype#JavaScript - 消息队列和事件循环:页面是怎么“活”起来的?读者来稿
深入探讨浏览器页面主线程的工作原理,包括消息队列和事件循环系统。首先介绍单线程处理任务的基本概念,然后通过C++代码示例,逐步引导读者理解如何在线程运行中处理新任务,并引入事件循环机制。接着,文章讨论了如何通过消息队列实现线程间的任务传递,以及如何处理来自其他进程的任务。此外,还分析了消息队列中任务类型的多样性,以及如何安全退出页面主线程。指出使用单线程的缺点,并提供实践建议,帮助开发者优化Web
约 10 分钟· batype#JavaScript#TypeScript - async/await:使用同步的方式去写异步代码读者来稿
探索JavaScript异步编程的革新,从Promise到async/await,深入理解生成器、协程及V8引擎实现机制。本文提供详细的技术解析和代码示例,助力开发者掌握ES7的异步编程模式,优化代码结构,提升编程效率。
约 10 分钟· admin#ES6+ (ECMAScript 2015+)#TypeScript#JavaScript - 消息队列和事件循环:页面是怎么“活”起来的?读者来稿
前面我们讲到了每个渲染进程都有一个主线程,并且主线程非常繁忙,既要处理DOM,又要计算样式,还要处理布局,同时还需要处理JavaScript任务以及各种输入事件。要让这么多不同类型的任务在主线程中有条
约 10 分钟· batype#HTML#JavaScript
2023
12 篇- Optional chaining 语法编程
Optional chaining 是一个现代 JavaScript 语法特性,允许开发者在读取对象内部嵌套属性时安全地处理 undefined 或 null 值。这种语法通过 ?. 操作符实现,可以
约 1 分钟#前端#JavaScript#es6 - React 实现原理
1. jsx-dev-runtime.js jsx export { jsxDEV } from "./jsx/ReactJSXElement"; 2. ReactJSXElement.js jsx
约 4 分钟#前端#JavaScript#react - Fiber 架构工作原理
“双缓存” 是一种常见的图形处理技术,用于在图像渲染中实现平滑的、无闪烁的更新效果。它通过使用两个缓冲区(即两块内存区域)来完成。其中一个缓冲区用于显示图像,而另一个缓冲区则用于在后台进行图像的更新和
约 3 分钟#前端#JavaScript#react - 对原型、原型链的理解
在 JavaScript 中是使用构造两数来新建一个对象的,每一个构造函数的内部都有一个 prototype 属性,它的属性值是一个对象,这个对象包含了可以由该构造西数的所有实例共享的属性和方法。 当
约 1 分钟#前端#JavaScript#es6 - var、let、const 的区别
1. var 声明作用域 var 定义的变量,没有块的概念,可以跨块访问,不能跨函数访问
约 3 分钟#前端#JavaScript#es6 - async/await 的理解
async/await 其实是 Generator 的语法糖,它能实现的效果都能用 then 链来实现,它是为优化 then 链而开发出来的。从字面上来看,async 是 “异步” 的简写,await
约 2 分钟#前端#JavaScript#es6 - Fiber 架构实现流程
Fiber 架构是 React 中用于实现虚拟 DOM 的一种算法架构。它的目标是提高渲染性能和用户体验,通过将渲染工作分割成多个小任务,在不阻塞主线程的情况下逐步完成整个渲染过程。
约 1 分钟#前端#JavaScript#react - 编写 Promise 方法
Promise 是异步编程的一种解决方案,它是一个对象,可以获取异步 操作的消息,他的出现大大改善了异步编程的困境,避免了地狱回调, 它比传统的解决方案回调函数和事件更合理和更强大。
约 3 分钟#前端#JavaScript#es6 - Fiber 架构的起源
Fiber 架构的起源可以追溯到 React 团队在 2017 年提出的一项重大改进计划。在过去的 React 版本中,渲染过程是基于递归的,即组件树的遍历是通过递归函数来完成的。这种方式在大规模复杂
约 3 分钟#前端#JavaScript#react - FiberNode 结构解析
FiberNode(也称为 Fiber 节点)是 React Fiber 架构中的核心概念之一,用于表示组件的层级结构和渲染过程中的任务。
约 2 分钟#前端#JavaScript#react - React 获取服务器端时间
思路 :React 获取服务器端时间,本质上就是给服务器端发送一个请求,然后从返回数据里面的 headers 里面获取到服务器 date,然后更新服务器时间去格式化,获取服务器时间结束。按秒进行数据
约 1 分钟#前端#JavaScript#react - React 使用合成事件(SyntheticEvent)
React 使用合成事件(SyntheticEvent)来处理浏览器原生事件的跨浏览器兼容性问题。合成事件是一个封装了原生事件的对象,提供了一致的跨浏览器接口,使您能够在不同浏览器中以一致的方式处理事
约 2 分钟#前端#JavaScript#react