谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序，可以为用户提供额外的功能和定制化的体验。 谷歌浏览器插件通常由HTML、CSS和JavaScript组成，非常利于前端开发者。 开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。 要开发谷歌浏览器插件，开发者通常需要创建一个包含 清单文件（manifest.json）、背景脚本（background script）、内容脚本（content script） 等文件的项目结构。清单文件是插件的配置文件，包含插件的名称、版本、描述、权限以及其他相关信息。背景脚本用于处理插件的后台逻辑，而内容脚本则用于在网页中执行JavaScript代码。 谷歌浏览器插件可以实现各种功能，例如添加新的工具栏按钮、修改网页内容、捕获用户输入、与后台服务器进行通信等。开发者可以通过谷歌浏览器插件API来访问浏览器的各种功能和数据，实现各种定制化的需求。 插件开发涉及的要点： ![图片](https://static.developers.pub/adcad461f2f64cf4bceb343b4fb118f...

跨标签通信也有很多实际的应用场景，比如： 1. 共享登录状态：当用户在一个标签页中登录后，其他打开的标签页需要及时获取到登录状态，以保持一致的用户体验。在这种情况下，可以使用浏览器的localStorage或sessionStorage来存储登录状态，并通过监听storage事件来实现不同标签页之间的状态同步。 2. 实时通知和消息推送：如果用户在一个标签页上收到了新消息或通知，可以通过跨标签页通信将该消息或通知传递给其他标签页。一种常见的处理方式是使用浏览器的localStorage或IndexedDB来存储未读消息或通知，然后通过监听storage事件或定时轮询来检查新消息或通知的变化。 3. 跨标签页数据共享：有时候需要在不同的标签页之间共享一些数据，例如购物车数据、选项设置等。这可以通过在localStorage或IndexedDB中存储数据，并借助storage事件或定时轮询来实现数据的同步更新。 4. 标签页之间的导航同步：当用户在一个标签页中进行导航操作（例如点击链接或提交表单）时，其他标签页可能也需要跟随导航到相应的页面。这可以通过在标签页之间发送消息或共享状态来实...

背景 家里有一条狗🐶，很喜欢乘人不备睡沙发🛋️，恰好最近刚搬家 + 狗迎来了掉毛期 不想让沙发上很多毛。所以希望能识别到狗，然后播放“gun 下去”的音频📣。 需求分析 需要一个摄像头📷 利用 chrome 浏览器可以调用手机摄像头，获取权限，然后利用 video 将摄像头的内容绘制到 video 上。 通过摄像头实时识别画面中的狗🐶 利用 tensorflow 和预训练的 COCO-SSD MobileNet V2 模型进行对象检测。 将摄像头的视频流转化成视频帧图像传给模型进行识别 录制一个音频 识别到目标（狗）后播放音频📣 需要部署在一个设备上 找一个不用的旧手机📱， Android 系统 安装 termux 来实现开启本地 http 服务🌐 技术要点 1. 利用浏览器 API 调用手机摄像头，将视频流推给 video  const s

2023 年度 WebAssembly 现状调查结果出炉，下面就来看看 2023 年的 WebAssembly 发展的怎么样了！ WebAssembly 是一种可移植、低级别的字节码语言，旨在提供一种通用的编译目标，以允许在 Web 上执行高性能计算密集型应用程序。它是一种新型的虚拟机技术，可以在所有主要的 Web 浏览器中运行，并且还可以在其他环境中使用。 WebAssembly 通过在 Web 浏览器中嵌入本地代码模块，能够直接访问底层系统硬件，实现了快速加载和执行的特性，因此被广泛认为是未来 Web 应用的基础技术之一。WebAssembly 可以与 JavaScript 和其他 Web 技术协同工作，使开发人员能够使用多种编程语言来构建在线应用，并且具备高效、跨平台的特点。 WebAssembly 于 2019 年 12 月 5 日成为万维网联盟（W3C）的推荐标准，与 HTML，CSS 和 JavaScript 一起成为 Web 的第四种语言。 下面是本次调查结果概览： Rust 和 JavaScript 的使用量持续增加，但一些更显着的变化：...

Chrome 计划从 2024 年第一季度开始对 1% 的用户禁用第三方 Cookie ，以方便大家测试。 然后从 2024 年第三季度开始将禁用范围扩大到 100% 。 如果你的网站还在使用第三方 Cookie ，现在就该采取行动了，留给留给三方 Cookie 的时间，不多了... 三方 Cookie 为 Web 提供了跨站点跟踪的能力，它的存在为 Web 用户的个人隐私带来了巨大威胁，这就是各大浏览器纷纷开始将其弃用的原因，具体可以看我这篇文章： [当浏览器全面禁用三方 Cookie](https://mp.weixin.qq.com/s?__biz=Mzk0MDMwMzQyOA &mid=2247490361&idx=1&sn=ebc8dcc4d095cc7ba748827dff158f2b&chksm=c2e2ee12f5956704fa75e7ad2ddb0e64f8008c7bdd7fb71

由于前段时间我实现了一个库【Spring Cloud】一个配置注解实现 WebSocket 集群方案 以至于我对WebSocket的各种集成方式做了一些研究，目前我所了解到的就是下面这些了（就一个破ws都有这么多花里胡哨的集成方式了？） Javax WebMVC WebFlux Java-WebSocket SocketIO Netty 今天主要介绍一下前3种方式，毕竟现在的主流框架还是Spring Boot 而后3种其实和Spring Boot并不强行绑定，基于Java就可以支持，不过我也会对后3种做个简单的介绍，大家先混个眼熟就行了 那么接下来我们就来讲讲前3种方式（Javax，WebMVC，WebFlux）在Spring Boot中的服务端和客户端配置（客户端配置也超重要的有木有，平时用不到，用到了却基本找不到文档，这也太绝望了） Javax 在java的扩展包javax.websocket中就定义了一套WebSocket的接口规范 服务端 一般使用注解的方式来进行配置 第一步 @Component @

8 月 29 日，Firefox 117版本发布，该版本增加了对 CSS 原生嵌套的支持。至此，所有主流桌面浏览器现在都已经支持原生 CSS 嵌套语法！ 注意，有些移动浏览器还不支持该语法，不过，这些浏览器合计只占约全球浏览器市场份额的 3%。 之前，我们需要借助预处理器（SCSS/Less）来编写嵌套语法。现在，CSS 终于原生支持嵌套语法了。下面就来看看原生 CSS 嵌套是怎么用的，未来是否还需要使用预处理器？ CSS 嵌套入门 使用 CSS 嵌套，可以编写更少的代码，并且代码更易于阅读和维护。没有CSS嵌套时，我们只能这样输入完成的选择器路径： .parent1 .child1, .parent2 .child1 {   color: red; } .parent1 .child2, .parent2 .child2 {   color: green; } .parent1 .child2:hover, .par

前言 最近发现有不少介绍JS单线程运行机制的文章，但是发现很多都仅仅是介绍某一部分的知识，而且各个地方的说法还不统一，容易造成困惑。 因此准备梳理这块知识点，结合已有的认知，基于网上的大量参考资料，从浏览器多进程到JS单线程，将JS引擎的运行机制系统的梳理一遍。 展现形式：由于是属于系统梳理型，就没有由浅入深了，而是从头到尾的梳理知识体系，重点是将关键节点的知识点串联起来，而不是仅仅剖析某一部分知识。 内容是：从浏览器进程，再到浏览器内核运行，再到JS引擎单线程，再到JS事件循环机制，从头到尾系统的梳理一遍，摆脱碎片化，形成一个知识体系 目标是：看完这篇文章后，对浏览器多进程，JS单线程，JS事件循环机制这些都能有一定理解，有一个知识体系骨架，而不是似懂非懂的感觉。 另外，本文适合有一定经验的前端人员， 新手请规避 ，避免受到过多的概念冲击。可以先存起来，有了一定理解后再看，也可以分成多批次观看，避免过度疲劳。 大纲 区分进程和线程 浏览器是多进程的 浏览器都包含哪些进程？ 浏览器多进程的优势 重点是浏览器内核（渲...

译者：superZidan 译文： https://juejin.cn/post/7204806134935306301 原文链接： https://dev.to/arikaturika/how-web-browsers-work-part-1-with-illustrations-1nid 浏览器（也称为网络浏览器或互联网浏览器）是安装在我们设备上的软件应用程序，使我们能够访问万维网。在阅读这篇文字时，你实际上正在使用一个浏览器。 有许多浏览器正在被使用，截至2022年，使用最多的是：谷歌浏览器、苹果的Safari、微软的Edge和火狐。 但是，它们实际上是如何工作的，从我们在地址栏中键入网络地址开始，到我们试图访问的页面显示在屏幕上，会发生什么？ 关于这个问题的答案，一个极其简化的版本是： 当我们从一个特定的网站请求一个网页时，浏览器从网络服务器检索必要的内容，然后在我们的设备上显示该网页。 很直接，对吗？是的，但在这个看似超级简单的过程中还涉及更多的内容。在这个系列中，我们将讨论 导航 、 获取数据 、 解析 和 渲染...

在移动端的页面开发过程中，经常提及页面性能优化、消除页面卡顿的话题，如何确定优化策略，我们首先应当对页面卡顿的行为有所认知。 01前言 页面的卡顿现象可以比较明确的分为三个类型，分别是“画面撕裂”、“丢帧不流畅”、“长时间未响应”。 “画面撕裂”现象给人直观的感觉是页面返回内容不一致，而造成这种现象的原因在于屏幕的刷新机制，屏幕的刷新遵循“Z”字刷新的方式，因此同一帧的数据在上屏时存在一定的时间差，当帧率大于刷新率时，屏幕对前一帧的数据上屏尚未结束而后台对后一帧的数据处理合成完毕，此时屏幕完成上屏的数据将会采用后一帧的数据，造成人眼同一时刻观测的画面数据来源于不同帧的现象，给人以撕裂感。 ”画面丢帧“也被称为Jank现象，给人的直观感觉是画面不流畅，在动画或滚动时出现短暂停滞，而造成丢帧的原因在于屏幕每隔16ms发出一个VSync信号，在正常帧的流程中，CPU接收到VSync信号后会先通过交换指针的方式进行前后缓冲区的数据同步（该过程时耗忽略不计）然后开始新一帧数据合成，当帧率小于刷新率时，下一个VSync信号到来时可用于交换的帧数据还没有通过CPU 计算合成，...

大家好，我是小杜杜，有关 高性能，大数据量 的列表渲染的示例已经非常常见，可以说是前端必须要了解的功能点，今天我们一起手写一下，看看如何去更好的实现～ 我们知道有些场景下，接口会返回出大量的数据，渲染这种列表叫做 长列表 ,今天主要说下处理 长列表 的两种方式： 分片渲染 和 虚拟列表 ，请各位小伙伴多多支持～ 在正式开始前，希望各位小伙伴牢牢记住： js执行永远要比dom快的多 ，所以对于执行大量的数据，一次性渲染，非常容易造成卡顿、卡死的情况 疑问点 ------ 我们先来看看以下代码： js import React,{ useState } from 'react'; import { Button } from 'antd-mobile'; import img from './img.jpeg' // 子组件 const Item:React.FC<{id: number, waitRender?: () = void} = ({id, waitRender}) = { return ( <div style={{

面试中常问的一个问题就是：在浏览器输入 URL 地址回车后，发生了什么？这里简单概述一下。 总体流程图如下： URL 解析 浏览器首先对 URL 解析，解析出协议、域名、端口、资源路径、参数等。 DNS 域名解析 一般而言，域名比 IP 地址更好记，因而我们更习惯在浏览器输入域名而不是 IP，而计算机网络通信所识别的计算机标识是 IP 地址，因而首先需要将一个域名转化为相应的 IP 地址，这就是 DNS 协议所要做的事。 DNS 就像我们手机中的通讯录一样，通讯录中备注的是对方的姓名（类似于域名），但是打电话的时候实际需要的是电话号码（类似于 IP 地址），利用通讯录将一个姓名转化为对应的电话号码。![图片](https://static.developers.pub/5986109f...

前不久写了一篇关于如何使用 Chrome DevTools [优化高德地图动画](https://link.juejin.cn/?target=http%3A%2F%2Fjartto.wang%2F2017%2F08%2F28%2Fhow-to-optimize-marker-of-AMap%2F "http://jartto.wang/2017/08/28/how-to-optimize-marker-of-AMap/")的文章，其中提到了 composite，但是并没有细谈。思考许久，还是觉得有必要再总结一下。 一、什么是 composite ？ 通俗来说：在 DOM 树中每个节点都会对应一个 LayoutObject，当他们的 LayoutObject 处于相同的坐标空间时，就会形成一个 RenderLayers ，也就是渲染层。 RenderLayers 来保证页面元素以正确的顺序合成，这时候就会出现层合成（composite），从而正确处理透明元素和重叠元素的显示。 一旦加载并解析页面，它就在浏览器中作为许多Web开发人员熟悉的结构来表示：DOM。然而，当呈...

简述 Slardar 前端监控自18年底开始建设以来，从仅仅作为 Sentry 的替代，经历了一系列迭代和发展，目前做为一个监控解决方案，已经应用到抖音、西瓜、今日头条等众多业务线。 据21年下旬统计，Slardar 前端监控（Web + Hybrd) 工作日晚间峰值 qps 300w+，日均处理数据超过千亿条。 本文，我将针对在这一系列的发展过程中，字节内部监控设计和迭代遇到的落地细节设计问题，管中窥豹，向大家介绍我们团队所思考和使用的解决方案。 他们主要围绕着前端监控体系建设的一些关键问题展开。也许大家对他们的原理早已身经百战见得多了，不过当实际要落地实现的时候，还是有许多细节可以再进一步琢磨的。 如何做好 JS 异常监控 JS 异常监控本质并不复杂，...