浏览器如何运行一段JavaScript代码

虽然有很多关于JavaScript的书籍和资料,但绝大多数都从JavaScript语言本身的角度去分析其语法和语义,很少有与JavaScript具体执行过程相关的分析资料。因此,我邀请大家一起从浏览器的角度来看一下一段JavaScript代码到底是如何执行的。

JS如何判断文字被ellipsis了?

如果我们想要当文本被省略的时候,也就是当文本超出指定的宽度后,鼠标悬浮在文本上面才展示popper,应该怎么实现呢?

前端“量子纠缠”:multipleWindow3dScene 来了

在量子力学里,当几个粒子在彼此相互作用后,由于各个粒子所拥有的特性已综合成为整体性质,无法单独描述各个粒子的性质,只能描述整体系统的性质,则称这现象为量子缠结或量子纠缠。量子纠缠是一种奇怪的量子力学现象,处于纠缠态的两个量子不论相距多远都存在一种关联,其中一个量子状态发生改变,另一个的状态会瞬时发生相应改变。

AI模特换装的前端实现

随着AI的火热发展,涌现了一些AI模特换装的前端工具(比如weshop网站),他们是怎么实现的呢?使用了什么技术呢?下文我们就来探索一下其实现原理。

useEffect 实践案例(2):自定义 hook

在上一章中,我们巧妙的把大量的 JSX 逻辑处理封装在了 List 组件中,使得在页面组件的代码变得非常简单。这是针对 UI 层的逻辑处理,那么在数据的处理上,是否也能够进行一些封装呢?

useEffect 实践案例(一)

对于 useEffect 的掌握是 React hooks 学习的**重中之重**。因此我们还需要花一些篇幅继续围绕它讲解。

「React 进阶」React 优雅的捕获并处理渲染异常

React jsx 在编译阶段,会被 babel 变成 React.Element 的形式,它的执行是在 React 整个渲染的 render 阶段执行的,如果 React.Element 出现了空指针等异常,那么就会中断 render 阶段的执行,当然也不会执行渲染真实 DOM 的 commit 阶段。所以如果是初次渲染,任何渲染动作也就不会执行,最终呈现给我们的视图就是白屏。

[译]装饰器的10年历史

"装饰器是一种结构设计模式,通过将对象置于包含行为的特殊包装器对象中,可以将新的行为附加到对象上"。© https://refactoring.guru/design-patterns/decorator

[译]JavaScript中Base64编码字符串的细节

Base64编码和解码是一种常见的将二进制内容转换为适合Web的文本的形式。它通常用于data URLs,比如内嵌图片。当你在JavaScript中对字符串应用base64编码和解码时会发生什么?这篇文章探讨了这些细节和需要避免的常见陷阱。

支持远程调试的 "vConsole"

前阵子一直在做业务需求,是嵌在公司 APP 里的 H5。而且是跨地区协作,我在 A 城市,测试和产品都在 B 城市。由于是 H5 项目,开发的时候一般都会实例化个 vConsole,方便查看项目的上下文信息。同时我想着当程序出现问题之后,测试小姐姐可以直接截个 vConsole 的图给我,可以减少沟通时间。

【Web技术】1869- spa 如何达到 ssr 的秒开技术方案——预渲染

SPA(单页应用)在初次加载时,由于需要加载所有必要的 JavaScript 和 CSS 文件,以及应用的主 HTML 文件,因此可能会产生白屏时间较长的问题,对用户体验而言是非常糟糕的。对单页面应用进行预渲染,将页面在打包期间渲染成静态 HTML 文件,可以很好的解决白屏时间过长问题

深入前端调试原理

调试是开发者需要掌握的一项重要的技能, 它能够帮助我们快速定位和修复代码中的问题。本文主要介绍前端调试的基本原理。

Nginx模块现在可以用 Rust 编写了

Nginx是一款高性能、开源的 Web 服务器和反向代理服务器软件,大部分互联网网站都在使用它。NGINX 最初由Igor Sysoev于2002年创建,此后一直在发展,并广泛流行于 Web 托管、内容交付和应用程序部署领域。它的性能、可扩展性和多功能优势闻名于世,也因此成为提供 Web 内容和有效管理互联网流量的网站关键组件。

图解 JS、React、Vue 设计模式

今天来分享一个免费在线学习 JS、React、Vue 设计模式的网站,该网站旨在为 JavaScript 设计、渲染和性能模式带来现代视角,使用普通 JavaScript 或现代框架构建功能强大的 Web 应用!

Monorepo 仓库代码质量提升实践

Monorepo 是一种项目代码管理方式,指单个仓库中管理多个项目,有助于简化代码共享、版本控制、构建和部署等方面的复杂性,并提供更好的可重用性和协作性。

如何使用 Github Action 管理 Issue

很多小伙伴打开 github 上的仓库都只使用Code查看代码,或者只是把 github 当成一个代码仓库,但是 github 还提供了很多好用的功能。其中,GitHub Action就是一个很好用的功能,本文将通过几个管理Issue的示例带大家了解GitHub Action。

Nginx反向代理OpenAI接口

准备条件:一台境外服务器,比如说腾讯云新加坡服务器;安装有Nginx环境,centos可以用yum install nginx安装;一个域名,比如说www.xxxx.com,以及对应的ssl证书(腾讯云可以在这里申请免费的证书)。

三种虚拟列表原理与实现

工作中一直有接触大量数据渲染的业务,使用react-window多之又多,所以对虚拟列表有了些浅显的理解。今天,我们就照着react-window的使用方式来实现三种虚拟列表。

前端:从零到一, 轻松把自己的网站部署到服务器

作为一名前端工程师, 没有个自己的网站怎么行, 接下来我就来带大家介绍一下如何从零到一, 配置并部署自己的网站到服务器.

被 Next.js 的环境变量给坑了一把...

最近在使用 Next.js 时遇到了一个问题,最后原因竟是 .env 取值问题,为这个问题花费了数小时的时间,希望看到这篇文章的朋友,如果遇到类似问题,不要重蹈覆辙吧。

微前端时代:打造高效、灵活的前端开发体系

本篇文章全文约 1.5 万字,目的是系统化地介绍微前端及其核心技术,并介绍了什么是微前端以及为什么我们需要它。我们还讨论了在众多微前端框架中如何选择适合自己系统的框架,并分享了一些业界使用微前端的实践案例。最后,我们提到了微前端目前存在的一些局限性和争议点。总之,希望这篇文章能为大家提供有用的信息。

为什么你非常不适应 TypeScript

在群里看到一些问题和言论:为什么你们这么喜欢“类型体操”?为什么我根本学不下去 TypeScript?我最讨厌那些做类型体操的了;为什么我学了没过多久马上又忘了?

译:为什么你应该用 React Query

React Query 为您提供了大量功能,如缓存、重试、轮询、数据同步、预取……以及数以百万计的其他功能,这些功能远远超出了本文的讨论范围。如果你不需要这些功能也没关系,但我仍然认为这不应该阻止你使用 React Query。

从浏览器原理出发聊聊Chrome插件

本文从浏览器架构演进、插件运行机制、插件基本介绍和一些常见的插件实现思路几个方向聊聊Chrome插件。

Chrome 118:CSS @scope 规则 来了!

@scope at-rule 允许我们将样式规则限定到给定的范围内,并根据这个范围的邻近程度设置样式元素。

[译]CSS Animations 与 CSS Transitions

在 CSS 中有两种设置动画的方式即 CSS animations 和 CSS transitions。它们看上去有些相似,但了解后会发现他们有很大不同。接下来,我们将探讨两者之间的异同,以及什么情况下更适合选择哪一种。

二十分钟掌握React核心理念,老鸟快速入门指南

这是一份适合有着前端开发经验,并习惯使用现代前端框架,却还没深入使用过 React 的老鸟快速入门指南,如果你还没有接触过前端框架,那建议直接在官方文档仔细从头看起。

谈谈node架构中的线程进程的应用场景、事件循环及任务队列

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境,nodejs是单线程执行的,它基于事件驱动和非阻塞I/O模型进行多任务的执行。在理解Node.js的工作原理时,我们需要了解进程、线程、事件循环[1]以及消息队列[2]的概念,本篇文章就基于这几点去详细介绍,帮你慢慢理解node的工作原理。

原子化真的是现代前端CSS的救星吗

原子化CSS本身的概念和 Tailwind CSS、UnoCSS 设计都比较简单,这里主要想聊一下在现代前端中,原子化CSS到底是不是完美的解决方案,是不是解决CSS问题的正确方向。

前端版本过低引导弹窗方案分享

作为 PC 页面为主的业务方,大多数用户在一天的工作中,可能都不太会刷新或者重新打开我们的页面,导致我们在下午或者白天发布的前端版本,往往需要到几个小时甚至第二天,才能覆盖到 98% 以上的用户。

实战总结|记一次迭代需求中的微型代码重构

大家好,我是钉钉业务平台前端技术的单丹。以往,历经考勤、日志、审批、开放平台、工作台等多个钉钉重点业务,分享更多的是偏技术架构或业务思考,这次,仅记录下程序员一次普通的日常需求中的微型重构过程。

还原现场 — 前端录制用户行为技术方案

我们需要一种手段来获取用户某一时段连续的操作行为,也就是录制用户行为,包括整个会话中的每一个点击、滑动、输入等行为,同时支持回放录制的操作行为,完整且真实地重现用户行为以帮助我们回溯或分析某些使用场景。

精读《算法题 - 编辑距离》

本文讨论解答leetcode上比较难的一道题目:编辑距离。

TypeChat 入门指南

TypeChat 是一个革命性的库,它简化了使用 TypeScript 构建自然语言模型界面的过程。传统模式下,创建自然语言模型界面是一项复杂的任务,通常依赖复杂的决策树来确定意图并收集行动所需的输入。随着大型语言模型(LLM)的出现,这个过程变得更加容易,但它也带来了新的挑战,例如限制模型回复的安全性、构建响应以供进一步处理以及确保模型回复的有效性。

前端代码Review,一次性掰扯明白!

本文从前端代码关注的代码质量,功能实现,性能优化,安全性,可读性,可复用性,兼容性说明前端代码审核。

前端必读书籍推荐(2023年最新版)

React 和 Vue 全方位对比总结

本文将从渐进式、时间线、跨平台及企业级框架情况多个维度对两个库进行对比。

WebAssembly 模块化与动态链接

模块化编程(modular programming)是一种软件设计模式,它将软件分解为若干独立的、可替换的、具有预定功能的模块,每个模块实现一个功能,各模块通过接口(输入输出部分)组合在一起形成最终程序。当下流行的JavaScript、Python、Rust、Java 等语言都有具有模块(包)管理,甚至 C++20 开始都引入了模块化系统。

WebAssembly 常见引擎简介

在本文中,我们将讨论驱动 WebAssembly 程序运行的核心组件——引擎。首先,本文将简要介绍一个语言的引擎包括哪些主要组成部分,它们如何配合完成工作,尝试构建一个概念模型。之后,就几款社区流行的开源引擎,分别介绍各自的特点。

周爱民:告前端同学书

一年前,InfoQ的编辑约请我对前端技术做了些回顾总结,说了三个方面的话题:其一,前端过去的15年大致可以怎样划分;其二,前端的现状以及面临的挑战;其三,前端会有怎样的未来。后来刊发成综述,是《技术15年》。缘于文体变动,访谈的味道十不存一,所以这里再次整理成文,是为《告前端同学书》。

如何通过Express和React处理SSE

最近AIGC技术的大热,市面上也出现了许多类似生产的AI工具,其中有一大特色就是对话的输出结果是类似真人的打字效果出现,要呈现出这种效果,最主要的就是要利用SSE技术(Server-Sent Events是一种基于HTTP长连接的“服务器推”技术,其特点在于建立更长时间的连接以等待后续数据的传输。

前端流程图插件对比选型,这一篇就够了

前端领域有多种流程库可供选择,包括但不限于vue-flow、butterfly、JointJS、AntV G6、jsPlumb和Flowchart.js。这些库都提供了用于创建流程图、图形编辑和交互的功能。然而,它们在特性、易用性和生态系统方面存在一些差异。

如何保持会话粘性,看看 Nginx 怎么做的

本文旨在说明如何满足需求:来自同一客户端的所有请求都被发送到同一个后端服务器,以确保会话数据或状态在服务器之间保持一致。

动手实现类似Vue的极简前端框架

当然,常规的前端框架不只做到这一步,它们有专门的语法,如 Vue 中的模板语法和 React 中的 JSX,这些语法使得编写复杂的前端页面相对于其他方式更加简洁。

JavaScript之观察者模式

在日常开发中,开发人员经常使用设计模式来解决软件设计中的问题。其中,观察者模式是一种常用的模式,它可以帮助开发人员更好地处理对象之间的通信。

团队把图标方案从iconfont换成iconify了,说说我们的思考

iconfont 的方案其实是在 2016 年公开,到现在也已经有 6 年之久,它确实在这一段时期的设计领域中,独树一帜的解决了图标的问题,这么多年也有了丰富的积累沉淀。但是前端的发展是日新月异的,图标领域其实这些年也出现了很多新起之秀。

Nginx 简单入门指北不指南
解锁 PDF 文件:使用 JavaScript 和 Canvas 渲染 PDF 内容

最近研究了 `Web` 的 `FileSystemAccess` Api,它弥补了 Web 长期以来缺少的能力:操作用户设备中的文件;而如今通过这个 Api 我们能够实现常见的文件操作:创建、删除、修改、移动等。

美团面试官:那你讲一讲Vuex吧

周一接到了美团的一面,面试官人很好,基本都是围绕着简历来问,下面就是我重新整理了一下怎么实现Vuex的min简单版本,可以看到Vuex的大致原理。

ECMAScript 2023 正式发布,有哪些新特性?

2023 年 6 月 27 日,第 125 届 ECMA 大会正式批准了 ECMAScript 2023 语言规范,这意味着它现在正式成为最新 ECMAScript 标准。下面就来看看 ECMAScript 2023 都有哪些新特性吧!

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8