浏览器

前端小巷子

跨标签页通信（二）：Service Worker在现代 Web 开发中，跨标签页通信的需求越来越普遍。无论是实现多标签页之间的数据同步，还是构建实时协作功能，跨标签页通信都能极大地提升用户体验。今天，我们将探讨一种强大的实现方式：Service Worker。

不一样的少年_

浏览器插件（crx）实现多标签页数据同步机制想象一下，你用 Chrome 插件打造了一个酷炫的新标签页，每次按下 Ctrl+T，用户打开的都是你自定义的页面，而不是浏览器默认的空白页或搜索页。听起来很棒，对吧？

前端小巷子

跨标签页通信（一）：BroadcastChannel在现代 Web 应用中，跨标签页通信的需求越来越常见。无论是实时协作应用、多标签页的用户状态同步，还是简单的数据共享，跨标签页通信都能极大地提升用户体验。今天，我们来探讨一种简单而强大的实现方式：BroadcastChannel。

让网页拥有App体验？PWA 将网页变为桌面应用的保姆级教程PWA，即渐进式网络应用（Progressive Web App），是一种利用现代 Web 技术构建的应用程序，它融合了网页应用和原生应用的优点，能够为用户提供类似于原生应用的体验。PWA 具备以下显著特点：

李三岁_foucsli

浏览器中dom解析的过程，及js、css对其影响，图文解析从网络接口下载的HTML文件字节流，渲染引擎无法理解，需转换为其能理解的结构：DOM。（类似的，js和css代码，渲染引擎也无法理解）

Chromium内核浏览器编译记（五）Windows版本CEF编译转载请注明出处：juejin.cn/spost/75160…本文出自容华谢后的博客本篇文章是用来记录编译Windows版本CEF的步骤和踩过的坑，以防止后续再用到的时候忘记，同时也希望能够帮助到遇到同样问题的同学。

植物系青年

浏览器扩展开发指南：WXT + React + TS + TailwindCSS + AntDesign浏览器扩展已然成为提升用户体验与增强浏览器功能的关键利器，从开发者工具（如 Vue.js devtools 和 React Developer Tools 等）到生产力助手（如翻译插件和截图插件等），再到个性化插件（如 Kimi 浏览器助手、Sider 和 Monica 等）。这些扩展通过多样化的交互形式满足不同场景需求，例如侧边栏、悬浮球、弹出式界面等，其中内容脚本(Content Script)技术是实现网页级功能扩展的关键。内容脚本是在网页情境中运行的文件，其能够直接操作 DOM 来读取浏览器访问的

给你一个页面如何定时刷新客户说： “我要这个页面每30秒自动刷新一次，就这么简单！”你心里想： “好的，我写个 setInterval 就行……等等，刷新后定时器怎么就失效了？！是不是定时器被马桶冲走了？！”

浏览器工作原理05 [#] 渲染流程（上）：HTML、CSS和JavaScript是如何变成页面的浏览器工作原理与实践在上一篇文章中我们介绍了导航相关的流程，那导航被提交后又会怎么样呢？就进入了渲染阶段。这个阶段很重要，了解其相关流程能让你“看透”页面是如何工作的，有了这些知识，你可以解决一系列相关的问题，比如能熟练使用开发者工具，因为能够理解开发者工具里面大部分项目的含义，能优化页面卡顿问题，使用JavaScript优化动画流程，通过优化样式表来防止强制同步布局，等等。

React Router 中 navigate 后浏览器返回按钮不起作用的问题记录在使用 React Router（v6）开发项目时，我遇到了一个让人困惑的问题：当我从 /article 页面使用 navigate("/article/next") 进行跳转后，点击浏览器的“返回”按钮，并没有返回 /article，而是直接跳回了更早的页面。

🔥《刚刚问世》系列初窥篇-Java+Playwright自动化测试-17- 如何优雅地切换浏览器多窗口（详细教程）有时候我们在网页上点击一些按钮或超链接时，有时会打开一个新的网页窗口。这个时候如果下一步操作是在新的网页窗口上，那么就需要切换网页窗口，切换到新的网页窗口后再执行元素定位等操作。Playwright处理浏览器多窗口切换相比较于Selenium简单快捷。下边宏哥就给小伙伴们或者童鞋们介绍一下playwrigh如何优雅地切换浏览器多个窗口。

学会这招，可以录制所有 web 端的视频（附完整实现代码）在日常浏览网页时，我们经常会遇到需要录制网页中视频的场景，比如保存一段公开课、会议回放或者喜欢的节目片段。只需几行 JavaScript 代码，就能轻松实现网页端视频的录制和下载，既简单又安全！

不一样的少年_

🚨 别再乱用will-change了！前端翻车的"性能优化"陷阱大家好，我是你们的老朋友"踩坑专业户"。今天要跟大家聊聊一个看起来很美好，用起来很要命的CSS属性——will-change。

《探索浏览器底层并实现简易浏览器 -- 第一章：请求和响应》在之前准备面试的八股文的时候，肯定不少会被问到例如“浏览器的渲染原理”、“从输入URL到页面呈现都发生了什么”这类的问题。

浏览器强缓存还未过期，但服务器资源已经变了怎么办？在前端开发中，我们常通过浏览器的缓存机制来提升页面加载速度和用户体验。尤其是强缓存（Strong Cache），能让浏览器在下次访问资源时完全不发出网络请求，直接使用本地缓存，大幅节省请求时间。

打小就很皮...

浏览器存储 Cookie，Local Storage和Session Storage

chrome 浏览器怎么不自动提示是否翻译网站每次访问外国语网页都会弹出这个对话框，很是麻烦，每次都得手动关闭一下。不让他弹出来方法：设置=》语言=》首选语言=》添加语言，搜索英语添加上

【浏览器网络请求全过程】浏览器是多进程的，进程包括：可通过 chrome更多工具 > 任务管理器查看浏览器当前进程浏览器内核是多线程的，包括：

Cursor 写一个网页标题重命名的浏览器插件平时开发过程中会打开好多好多的浏览器标签页，虽然 Chrome 出了分类标签，但用着用着会发现每个分类又多了很多标签，prd、前后端技术方案、case、ones 越点越多，到最后很难分清哪个网页有用，只能一个一个看一个一个关。

1、为什么浏览器要有渲染流程？ ——带你一口气吃透 Critical Rendering Path每次我们在浏览器里敲下网址，回车的一瞬间，后台其实已经像高考考场开考一样，疯狂忙碌了起来。页面并不是“啪”地一下就蹦出来的。而是经历了一套繁杂得要命的流程，这套流程就叫做 —— Critical Rendering Path（简称 CRP），直译叫“关键渲染路径”。