浏览器内核到底有哪些？它们各自又有什么区别？
这问题其实很多刚入行的同学经常搞混，所以今天我来一次性讲明白—— 浏览器内核 到底有哪些？它们各自又有什么区别？ 说白了，浏览器内核就是浏览器的大脑，分两部分： 渲染引擎（Rendering Engine） ：负责网页的排版渲染，HTML、CSS统统交给它。 JS引擎（JavaScript Engine） ：处理JavaScript脚本逻辑，比如你点按钮后弹出对话框这种行为。 1）常见浏览器内核盘点 下面我直接列几个主流的浏览器内核，顺...
浏览器缓存及优化手段
前言 当我们通过url首次访问某个网站的时候，我们如果使用浏览器的工具查看网络请求，会发现有很多http请求，但是当我们下一次再访问时，这些请求都不会发送而是展现在了页面上，而这就是浏览器缓存发挥的作用。 浏览器缓存 浏览器缓存是指将页面长时间不更新的资源缓存到浏览器上，下次访问页面时该部分长时间不更新的资源直接从缓存中获取，从而减少了网络请求次数，提高了页面的加载速度。浏览器的缓存方式主要分为两种： 强缓存 和 协商缓存 ，下面将为大...
chrome调试工具overrides调试代码
利用Chrome开发者工具断点调试功能调试修改代码，一刷新就什么都没有了，且只能调试JS代码，太尴尬了。 想刷新后，原来修改调试的的代码还在，且JSP、JS、CSS等能调试，那赶快试试下面这种方法吧。 第一步： 在浏览器开发者工具中打开下面的面板sources overrides! 第二步： 打开Select folder for overrides，选择要存放代码的文件夹 第三步： 点击允许访问文件夹，overrides生成刚才选择的...
震惊！🐿浏览器居然下毒
发生什么事了 某天，我正在愉快的摸鱼，然后我看到测试给我发了条消息，说我们这个系统在UC浏览器中有问题，没办法操作，点了经常没反应（测试用得iPhone14，是一个h5的项目）。我直接懵了，这不是都测了好久了吗，虽然不是在uc上测得，chrome、safari、自带浏览器等，都没这个问题，代码应该是没问题的，uc上为啥会没有反应呢？难道是有什么隐藏的bug，需要一定的操作顺序才能触发？我就去找了测试，让他重新操作一下，看看是啥样的没反应...
深入理解浏览器的事件循环机制
在现代Web开发中，JavaScript作为浏览器中最常用的编程语言，其执行机制深刻影响着Web应用的性能和用户体验。事件循环（Event Loop）作为JavaScript处理异步操作的核心机制，是理解JavaScript执行模型的关键。本篇文章从多个维度去分析事件循环的机制，希望可以帮大家更加深入的了解它。 在讨论事件循环之前，理解浏览器的执行环境是至关重要的。浏览器是一个多线程环境，包含以下主要线程： GUI 渲染线程（GUI R...
优化浏览器渲染主线程的 api 都有哪些？怎么用？
为了提高浏览器的性能和用户体验，现代浏览器采用了一些技术来优化主线程的执行。主要有： setTimeout 延迟加载 （使用不当可能适得其反） web worker 多线程 （不能操作dom，主要计算密集型的任务） requestIdleCallback 帧空闲时运行 （react18带🔥的，低优先级任务） requestAnimationFrame 每帧都会运行 （主要做动画效果调优） setTimeout 延迟加载非常常见，但是它...
谷歌浏览器已经是多进程架构，为何在控制台写死循环语句依旧会卡死呢？
之前在分享谷歌浏览器的架构的时候，结合查到的资料来看，给到观众下面的信息： 谷歌浏览器的多进程架构可以解决单进程架构的不稳定的问题。由于进程是相互隔离的，所以当一个页面或者插件崩溃时，影响到的仅仅是当前的页面进程或者插件进程，并不会影响到浏览器和其他页面，这就完美地解决了页面或者插件的崩溃会导致整个浏览器崩溃，也就是不稳定的问题。 被问了那么一个问题，那“为何在控制台写死循环，浏览器依旧会卡死？” 借着这个问题，我们来再进一步研究背后的...
图解浏览器的多进程渲染机制
观察浏览器的任务管理器可以发现，打开浏览器的一个页面需要多个进程，包括浏览器进程、GPU进程、网络进程、渲染进程等，有插件的话还会包括各种插件进程（Chrome选项 更多工具 任务管理器）。 本文将聚焦于 浏览器的各个进程间是如何配合，将页面呈现给用户的。 📌 你将了解到 1. 浏览器在历史发展过程中，其进程架构做了哪些调整，为什么这样调整，以及解决了哪些问题？ 2. 从用户在地址栏输入URL，到页面渲染完成这之间发生了什么？回流和重...
前端 Chrome 调试技巧最全汇总
https://juejin.cn/post/7248118049584316472 注：本文测试、截图均为Edge浏览器（内核是Chromium），浏览器内核可了解《有哪些浏览器/内核？\[1\]》 00、基础操作汇总 | 操作类型 | 快捷键/说明 | | | | | 切换浏览器标签 | 🔸 切换到对应序号的浏览器标签 🔸 标签页左右切换 | | 浏览器全屏 | ( Mac) | | 打开调试模式 | 🔸 ， (Windows...