前言 上文我们了解到浏览器内核其实是有渲染引擎和JS引擎构成，那么渲染引擎都干了哪些事情呢？以Google浏览器为例，当我们打开浏览器，输入相应的URL后，浏览器中的网络进程完成对网络资源的加...

Hi 大家好，这里是 探索现代浏览器 专栏的第三篇。 在上一篇中，我们探讨了浏览器导航的过程，其中 Step5 浏览器进程会 提交导航 给 渲染进程 去做页面渲染。那么今天我们就来探讨另一个经典...

浅谈浏览器存储 1、概念 浏览器存储：浏览器存储是指浏览器提供的一种本地存储数据的机制，包括：Cookie、Web Storage、IndexedDB 等。 前端持久化存储：是指通过 JavaScript 在客户端进行数据...

（PS：对调试较为熟悉却没有使用过条件断点的同学可以直接翻到文章底部看操作的GIF图~） 一、背景  'Debug'想必大家在开发的过程中也是有经常使用的，这里简单的介绍一下浏览器'Debug'其中的两...

这是每一个音乐网站都会实现的功能，快来看看自己会不会做！ 我们看下图这个效果，在首次点击播放音乐时，打开了一个新的标签页并在新的标签页中播放音乐。 再次切换音乐时，并没有打开新的标签...

前言 Performance 可以记录站点在运行过程中的性能数据，有了这些性能数据，我们就可以回放整个页面的执行过程，这样就方便我们来定位和诊断每个时间段内页面的运行情况，从而有效帮助我们找出...

Network面板的作用是在devTools打开的时候记录网络活动。如下图所示，Network面板可以分为七个部分： 控制器 过滤器 设置 抓图信息 时间线 资源请求列表 资源请求信息概要 控制器 录制/停止网络...

财富是对认知的补偿，不是对勤劳的奖励 大家好，我是柒八九。 前言 今天我们来聊聊另外一个比较重要的性能指标CLS。 如果想了解该系列文章(浏览器底层原理&优化方案)，可以参考我们已经发布...

V8内存管理 程序运行需要分配内存 V8也会申请内存，申请的内存又会分为堆内存和栈内存 栈 栈用于存放JS中的基本类型和引用类型指针 栈的空间是连续的，增加删除只需要移动指针，操作速度非常快 ...

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。 在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。 整个渲染流程分...

本文可以配合本人录制的视频一起食用 目的 通常说到浏览器缓存，大多是和性能优化有关，使用缓存，通常是两个主要目的，第一是提高访问速度，第二是减少网络IO消耗。 当合理配置了缓存，可以得...

浏览器的调试与开发 ? 前言： 网页主要是运行在浏览器上， 主要由HTML、CSS、JS三部分组成， 比作一个人的话，HTML是身体、CSS是衣服、JS是动作， 下面主要介绍通过浏览器的调试工具，了解前端...

导读 最近一段时间刚好在公司内部涉及一些老旧项目的优化，所以对于 Web 网页性能方面沉淀了一些自己的看法。 恰好也参与了一些新同学的面试，发现大多数同学对于浏览器的渲染原理也只是一知半...

新兴浏览器公司 The Browser Company 在2023年7月25日 发布了 Arc 1.0，全面向公众开放，可以直接下载使用。下载地址: Arc from The Browser Company Arc 介绍 Arc 浏览器其实早在 2021年便开始...

基于上篇的浏览器架构，我们知道了打开一个页面，为什么至少会有四个进程出现。接下来，我们一起来讨论一下，服务端的页面文件是如何被完整的送达到浏览器的，这一中间经历了哪些过程，以及如何...

一、问题描述 公司项目大多是Docker容器化部署，之前的 ci 文件和 ng 配置文件基本没怎么动过，也没有过多关注。最近接手的一个新项目，在部署工作台修改环境变量后，重新部署后，刷新页面没有...

1、问题描述 前几天又遇到个神奇Bug，公司某系统的页面出现点击按钮没有反应的问题，反馈问题的用户能稳定复现，技术团队无法复现。 浏览器为 Chrome 115，控制台可见大量 iframe跨域 报错，具...

认识你自己很难，但认识你自己的时间，却是每个人都能做到的 -- 彼得·德鲁克 大家好，我是柒八九。 前言 最近，公司在做技术改造升级，老旧项目优化。因为是B端项目居多，所以优化方向也是基于...