最近看网络上大神们讨论提到了合成层爆炸的问题，这个名词我还是第一次看到，遂去检索了相关的信息，发觉自己之前背的“从输入url到页面显示内容”这个常规八股里实际上还是有很多东西需要细究的，其中就包括浏览器渲染流程这一环节。今天对浏览器渲染的流程做一个总体的整理。 首先我们先简单了解一下浏览器渲染流水线上的一些工作环节，初次渲染时会经过以下几步。 构建DOM树； 样式计算； 布局定位； 图层分...

在做项目的过程中，可能会遇到接口返回大量数据需要展示的场景，这里的数据展示如果不做处理就直接展示的话，将数据全部加载到页面上的过程可能需要很长的时间，就容易导致白屏、卡顿的情况。针对这种情况，我们可以做的处理可以从以下几个方向思考。 1、分页查询这个解决方案是从改变设定的方向上解决问题，返回的数据少了自然就不会花大量的时候在渲染数据的步骤上。但如果有些场景就是需要一次性展示大量的数据，这种方...

浅析javascript单线程​ 众所周知，javascript在设计的最初就被设定为一门单线程的语言，但是在javascript的编写中，我们却可以一边设置定时器一边执行函数，这又是怎么实现的呢？ 为什么js是单线程​ 首先声明一下线程和进程的概念。 ​ 进程和线程都是操作系统的概念。进程是应用程序的执行实例，每一个进程都是由私有的虚拟地址空间、代码、数据和其它系统资源所组成；进程在运行过...

面试的时候，面试官问了我一个问题：为什么你们的项目需要用nginx部署呢？ 说实话，这个问题在此前我并没有认真思考过，只是看到网络上说部署项目大家都用nginx，就按着流程按部就班地做了。今天整理了一下nginx的特点，并且就此分析了为什么我们的项目组选用了nginx部署。 nginx的优势 高性能：Nginx采用事件驱动模型和异步非阻塞IO处理，能够处理大量并发连接，具有出色的性能表现。 ...

模块化的背景要了解什么是前端模块化，就要知道前端模块化出现的背景，当一个项目工程越来越大时，我们会需要在一个html中引入很多js文件，这就会出现一些问题，比如 请求过多。首先我们要依赖多个模块，那样就会发送多个请求，导致请求过多 依赖模糊。我们不知道js的具体依赖关系是什么，也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。 难以维护。以上两种原因就导致了很难维护，很可能出...

周一面试的时候被问到两者之间的区别，当时答得并不是很好，今天从webpack和vite 的工作原理来分析vite与webpack的具体区别。 Webpack首先，众所周知，Webpack 是一个基于打包器的构建工具，同一个入口文件的代码会打包成一个 Bundle 文件。Webpack 长期来的一个痛点是对于大规模应用的应用启动和热更新速度很慢。 当文件发生变动时，整个 JavaScript...

首先，我们从前面的文章可以得知 Virtual DOM 渲染成真实的 DOM 实际上要经历 VNode 的定义、diff、patch 等过程。 深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别 - 掘金 (juejin.cn) Diff 算法1. 只比较同一层级，不跨级比较vue中的diff算法有个特点，就是只能在同级比较，不能跨级比较。 即图中颜色相同部分进行...

VNode概念虚拟节点（virtual node， 简写VNode），一个vnode就是一个js对象（通过VNode实例而来），用来描述一个真实DOM元素，它所包含的信息会告诉Vue页面上需要渲染什么样的节点，包括及其子节点的描述信息。 而虚拟DOM是对Vue组件树建立起来的整个VNode树的称呼。 先来看看VNode类的代码： 1234567891011121314151617181920...

渲染函数是 AST 到虚拟 DOM 节点的中间媒介，本质上就是 JS 的函数，执行后会基于『运行时』返回虚拟节点的对象。 在 Vue.js 2 中，通过执行「渲染函数」获得了虚拟 DOM 节点，用于虚拟节点 Diff 并最终生成真实 DOM。 123updateComponent = () => { vm._update(vm._render(), hydrating)&#...

AST（抽象语法树）的概念在模板语法中（如v-for循环中）如果我们直接将模板语法编译成正常的HTLM语法是非常困难的。 所以，我们需通过AST抽象语法树，将模板语法转换成正常的HTML语法，如下图所示 那么AST抽象语法树到底是什么呢？其实AST抽象语法树本质上是一个JS对象 上面图中，用JS结构来表示HTML结构实际上就是AST抽象语法树。抽象语法树是服务于模板编译的，从一种语法翻...