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

在这里「增量」这个概念的对立面是「全量」。在 Linux 系统中当需要备份数据或者跨服务器同步文件时，会用到一个叫 rsync 的工具，它的速度会比 scp/cp 命令更快，因为它会先判断已经存在的数据和新数据的差异，只传输不同的部分，即「增量」同步。 在前端开发工程化领域，本…

一. BOＭ简介&写作背景 二. window对象 使用 window.attr 声明的变量和 var 声明的变量有个区别，使用 var 声明的变量，不能使用 delete 删除，使用 window. 声明的变量可以被删除 三. location对象 四. navig…

性能优化相关的文章其实网上挺多，但是大部分都是在讲如何优化性能，也就是讲方法论。但是在实际工作中，如何量化性能优化也是相当重要的一环。今天本文会介绍谷歌提倡的七个用户体验指标（也可以认为是性能指标），每个指标分别根据以下几点讲解： 首次绘制，FP（First Paint），这个…

这个题目如果回答非常完美，那么可以判断这个人已经脱离了初级前端工程师，前端的核心就是异步编程，这个题目也是体现前端工程师基础是否扎实的最重要依据。 new promise((resolve,reject)=>{ resolve() }).then().... 第二个问题是定时器…

对于依赖接口渲染的页面，在拿到数据之前页面往往是空白的，为了提示用户当前正在加载中，往往会使用进度条、loading图标或骨架屏的方式。对于前两种方案而言，实现比较简单；本文主要研究骨架屏的应用及实现，并给出一种使用Chrome扩展工具快速生成骨架屏的方案。 首先需要保留节点的…

页面监听hashchange事件，然后父页面改变哈希，子页面读取哈希来实现通信。但是这有一个问题，如果传递的信息过多，那就会导致url很长，而且维护起来也麻烦。更严重的问题是，如果页面本身有利用哈希的逻辑，将会无解 虽然可以解决，但导致storage数据冗余，而且还需要及时清除…

浏览器的事件模型，就是通过监听函数（listener）对事件做出反应。事件发生后，浏览器监听到了这个事件，就会执行对应的监听函数。这是事件驱动编程模式（event-driven）的主要编程方式。 HTML 语言允许在元素的属性中，直接定义某些事件的监听代码。 上面代码为body…

近几年大部分开发者都在 Vue React 生态里做上层开发，底层的知识点很容易遗忘，所以打算从DOM规范开始梳理一下事件相关的知识点。onclick是DOM0级事件，addEventListener是DOM2级事件，区别在于是否支持事件函数的重复绑定，大部分人对DOM规范也就…