引言 在h5开发中，我们经常会需要实现一些动效来让页面视觉效果更好，谈及动效便不可避免地会想到动效性能优化这个话题: 减少页面DOM操作，可以使用CSS实现的动效不多出一行js代码 使用绝对定位脱离让

大家好我是鱼皮，前段时间上线了一个程序员必备的浏览器主页，得到了很多同学的好评。 其实项目本身不需要复杂的技术，相反，仅需要一点点前端基础就可以完成。 1. 需求分析 在开发一个项目之前，要明确自己的目标。 我要做的很简单，就是一个精简的浏览器主页。虽然火狐、Chrome 的默…

浏览器架构演进、浏览器导航流程、渲染流程、浏览器垃圾回收机制、核心网页指标 Core Web Vitals

背景今天第一次关联了github账号，由于使用的是24寸显示器，像素1920*1200，很普通的，但发现掘金文章页面不足700px，两侧留白区域太多了，为了减少浪费说干就干，不就是修改几个css属性吗

浏览器可以打开多个不同的标签页，有时候需要在这多个标签页共享同一份数据，那如何在多个标签页中进行数据的通信呢？让我们来看一下四种在标签页中通信的方式。 我们在网易云听歌时，可以打开多个标签页进行播放；但是我们发现在一个标签页播放的同时，其他标签如果正在播放，都会自动的停止。 我…

前端巩固基础，终于写到了浏览器篇，虽然浏览器渲染原理大概答得出来，但还是想根据以前的笔记整理一下。 在用户访问页面过程中，还会不断重新渲染页面，重新渲染通常是指第 4 步+第 5 步，或者只有第 5 步。 在关于前端性能优化里面，就有一点：减少重排与重绘，因为重排和重绘次数多的…

上一部分我们完成了从 HTTP 发送 Request，到接收到 Response，并且把 Response 中的文本都解析出来。 这一部分我们主要讲解如何做 HTML 解析 和 CSS 计算这两个部分。 根据我们上部分列出的一个完整的浏览器架构的话，蓝色背景的部分就是我们目前已…

想要成为一名合格的前端工程师，掌握相关浏览器的工作原理是必备的，这样子才会有一个完整知识体系，要是「能参透浏览器的工作原理，你就能解决80%的前端难题」。 这篇梳理的话，更多的是对浏览器工作原理篇的查缺补漏，对于一些没有涉及到的知识点，准备梳理梳理，也正好回顾之前梳理的内容。 …