虚拟DOM：虚拟DOM和实际DOM有何不同
虚拟 DOM 是最近非常火的技术，两大著名前端框架 React 和 Vue 都使用了虚拟 DOM，所以我觉得非常有必要结合浏览器的工作机制对虚拟 DOM 进行一次分析。当然了，React 和 Vue 框架本身所蕴含的知识点非常多，而且也不是我们专栏的重点，所以在这里我们还是把重心聚焦在虚拟 DOM 上。 在本文我…
阅读全文文章归档
文章与笔记
关于前端、工程与日常思考的记录。找到一个主题，开始阅读。
渲染流水线：CSS如何影响首次加载时的白屏时间？
在上一篇文章中我们详细介绍了 DOM 的生成过程，并结合具体例子分析了 JavaScript 是如何阻塞 DOM 生成的。那本文我们就继续深入聊聊渲染流水线中的 CSS。因为 CSS 是页面中非常重要的资源，它决定了页面最终显示出来的效果，并影响着用户对整个网站的第一体验。所以，搞清楚浏览器中的 CSS 是怎么工…
阅读全文页面性能：如何系统优化页面
在前面几篇文章中，我们分析了页面加载和 DOM 生成，讨论了 JavaScript 和 CSS 是如何影响到 DOM 生成的，还结合渲染流水线来讲解了分层和合成机制，同时在这些文章里面，我们还穿插说明了很多优化页面性能的最佳实践策略。通过这些知识点的学习，相信你已经知道渲染引擎是怎么绘制出帧的，不过之前我们介绍的…
阅读全文页面性能分析：利用Chrome做web性能分析
“浏览器中的页面循环系统”模块我们已经介绍完了，循环系统是页面的基础，理解了循环系统能让我们从本质上更好地理解页面的工作方式，加深我们对一些前端概念的理解。 接下来我们就要进入新的模块了，也就是“浏览器中的页面”模块，正如专栏简介中所言，页面是浏览器的核心，浏览器中的所有功能点都是服务于页面的，而 Chrome …
阅读全文
在 Node.js 事件循环中可视化 I/O 轮询
原文：Visualizing the I/O Queue in the Node.js Event Loop 作者：VISHWAS GOPINATH 欢迎阅读我们关于可视化 Node.js 事件循环的系列文章的第五篇。在上一篇文章中，我们探讨了 I/O 队列及其在执行异步代码时的优先级顺序。在本文中，我们将继续关…
阅读全文咱们来整一个Node.js脚本，使用ffmpeg将视频转换为GIF文件
如果需要将视频转换为GIF文件，最先想到的肯定是使用ffmpeg，这是一个开源的跨平台的多媒体处理工具。ffmpeg具有强大的功能，可以处理视频和音频文件，并可以将它们转换为多种格式，包括GIF。 而当使用Node.js来一起进行音视频处理时，我们可以使用第三方库来简化代码。这次我们将使两个库：@ffmpeg-i…
阅读全文Astro 集成 Vue 框架教程
Astro的集成能力支持我们使用Vue3编写的组件，并且支持SSR（server-side rendering）和CSH（client-side hydration） Astro 集成简介： 使用 Astro 集成只需几行代码就能为你的项目添加新的功能和行为。你可以自己编写一个自定义的集成，或者从 npm 获取流…
阅读全文Astro 中通过 Node.js 启用服务器端渲染
在 Astro 中启用服务端渲染（SSR, Server Side Rendering）非常简单，而且启用后可以使用新的特性： 在应用程序中实现登录状态会话。 用 fetch 动态调用 API 来渲染数据。 通过适配器部署你的网站。 适配器 为了启用 SSR，你需要使用适配器（Adapter)。这是因为 SSR …
阅读全文async await使用同步方式写异步代码
在上篇文章中，我们介绍了怎么使用 Promise 来实现回调操作，使用 Promise 能很好地解决回调地狱的问题，但是这种方式充满了 Promise 的 then() 方法，如果处理流程比较复杂的话，那么整段代码将充斥着 then，语义化不明显，代码不能很好地表示执行流程。 比如下面这样一个实际的使用场景：我先…
阅读全文Atomics API
Atomics API
阅读全文BFF 模式 （Backend For Frontend）
面试和简历都提到了，所以来学习聊聊 PS: 你应该记住，BFF 是客户端和服务之间的转换层。 当数据从服务端API 返回时，其目的是将其转换为客户端应用程序指定的数据类型。 避免BFF 逻辑重复——需要注意的一个关键点是，单个BFF 应该满足特定的用户体验，而不是设备类型。 例如，大多数时候，所有移动设备（iOS…
阅读全文button标签和div模拟按钮的区别
蛮有意思的，之前面试某厂的时候遇到了这个问题，答得不是很好，专门整理一波 表单使用上 如果button在form表单内部，则可以不用JavaScript绑定onclick属性就可以提交表单内容（type = 'submit'），而如果不在form表单内部，又不考虑语义化，那么作为按钮，用div和button来写按…
阅读全文没有找到相关文章
试试其他关键词，或重置筛选条件。